full-screen-stacking-context.html | Explore in Territory

<!DOCTYPE html>
<html>
    <head>
        <script src="../resources/run-after-layout-and-paint.js"></script>
        <script>
            var runPixelTests = true;

            function init() {
                waitForEventOnce(document, 'webkitfullscreenchange', function() {
                    runAfterLayoutAndPaint(endTest);
                });
                runWithKeyDown(goFullScreen);
            }

            function goFullScreen() {
                document.getElementById('target').webkitRequestFullScreen();
            }
        </script>
        <script src="full-screen-test.js"></script>
        <style>
            #one {
                width: 100px;
                height: 100px;
                position: relative;
                top: 50px;
                left: 50px;
                z-index: 1;
                background-color: red;
                opacity: 0.5;
                transform: rotate(180);
                -webkit-mask: -webkit-linear-gradient(left, alpha 0%, white 100%);
                -webkit-filter: contrast(100%);
                clip:rect(0px,100px,100px,0px);
                -webkit-box-reflect: below;
                -webkit-transform-style: preserve-3d;
                -webkit-perspective: 300;
            }
            #zero {
                position: relative;
                z-index: 0;
            }
            #target {
                width: 200px;
                height: 200px;
                background-color: black;
            }
        </style>
    </head>
    <body onload="init()">
        <div>This tests that a full screen element in a lower stacking context blocks a sibling in a higher stacking context.
             After entering full screen mode, only a black box should be visible.
             Click <button onclick="goFullScreen()">go full screen</button> to run the test.</div>
        <div id="one"></div>
        <div id="zero">
            <div id="target"></div>
        </div>
    </body>
</html>
chromium/third_party/blink/web_tests/fullscreen/full-screen-stacking-context.html
