LayoutTests/fullscreen/full-screen-stacking-context.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
     <head>
         <script>
             var runPixelTests = true;

             function init() {
                 // Bail out early if the full screen API is not enabled or is missing:
                 if (Element.prototype.webkitRequestFullScreen == undefined) {
                     logResult(false, "Element.prototype.webkitRequestFullScreen == undefined");
                     endTest();
                 } else {
                     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;
                 -webkit-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>
	<!DOCTYPE html>
	<html>
	<head>
	<script>
	var runPixelTests = true;

	function init() {
	// Bail out early if the full screen API is not enabled or is missing:
	if (Element.prototype.webkitRequestFullScreen == undefined) {
	logResult(false, "Element.prototype.webkitRequestFullScreen == undefined");
	endTest();
	} else {
	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;
	-webkit-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>