<!DOCTYPE html>
<html>
    <head>
        <script>
            var runPixelTests = true;
            
            function init() {
                waitForEventAndEnd(document, 'webkitfullscreenchange');
                runWithKeyDown(goFullScreen);
            }
            
            function goFullScreen() {
                document.getElementById('video').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;
            }
            #one, #two {
                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;
            }
            #video {
                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">
            <video id="video"></video>
        </div>
    </body>
</html>