full-screen-is-in-top-layer.html | Explore in Territory

<!doctype html>
<style>
div {
    top: 100px;
    bottom: 100px;
    left: 100px;
    right: 100px;
    height: auto;
    width: auto;
}
::backdrop {
    background: green;
}
</style>

<div id='element'>Test that fullscreen elements are in the top layer. The test passes if you see a green backdrop behind this box when fullscreen.</div>

<button id='button'>Go fullscreen</button>

<script>
var element = document.getElementById('element');
document.getElementById('button').addEventListener('click', function() {
    element.webkitRequestFullscreen();
});

if (window.testRunner) {
    testRunner.waitUntilDone();
    document.addEventListener('webkitfullscreenchange', function() {
        testRunner.notifyDone();
    });

    var button = document.getElementById('button');
    chrome.gpuBenchmarking.pointerActionSequence([
    {
      source: 'mouse',
      actions: [
        { name: 'pointerDown', x: button.offsetLeft + button.offsetWidth / 2, y: button.offsetTop + button.offsetHeight / 2 },
        { name: 'pointerUp' }
      ]
    }
    ], () => {});
}
</script>

chromium/third_party/blink/web_tests/fullscreen/full-screen-is-in-top-layer.html