<!DOCTYPE html>
<html>
<body>
<div id="host">full screen content</div>
<div style="position: fixed; top: 100px; left: 100px;">foobar</div>
<div style="will-change: transform;">foobar</div>
<pre id=layers></pre>
<button>Enter fullscreen</button>
<script src="../resources/js-test.js"></script>
<script>

description("Test that only elements in fullscreen subtree get layer backed.");

function goFullscreen() {
    host.webkitRequestFullscreen();
    setTimeout(function () {
        if (done)
            return;

        testFailed('webkitfullscreenchange was not fired');
        finishJSTest();
    }, 2000);
}

let done = false;
function finalizeTest() {
    if (done)
        return;
    done = true;

    if (testRunner)
        testRunner.dumpAsText();

    if (window.internals)
        layers.innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_BACKING_STORE_ATTACHED);

    finishJSTest();
}

host.addEventListener('webkitfullscreenchange', finalizeTest);

let button = document.querySelector('button');
button.onclick = goFullscreen;

if (window.eventSender) {
    jsTestIsAsync = true;
    eventSender.mouseMoveTo(button.offsetLeft + 5, button.offsetTop + 5);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

</script>
</body>
</html>