third_party/WebKit/LayoutTests/fullscreen/full-screen-stacking-context.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <script>
   5             var runPixelTests = true;
   6
   7             function init() {
   8                 waitForEventAndEnd(document, 'webkitfullscreenchange');
   9                 runWithKeyDown(goFullScreen);
  10             }
  11
  12             function goFullScreen() {
  13                 document.getElementById('video').webkitRequestFullScreen();
  14             }
  15         </script>
  16         <script src="full-screen-test.js"></script>
  17         <style>
  18             #one {
  19                 width: 100px;
  20                 height: 100px;
  21                 position: relative;
  22                 top: 50px;
  23                 left: 50px;
  24                 z-index: 1;
  25                 background-color: red;
  26             }
  27             #one, #two {
  28                 opacity: 0.5;
  29                 transform: rotate(180);
  30                 -webkit-mask: -webkit-linear-gradient(left, alpha 0%, white 100%);
  31                 -webkit-filter: contrast(100%);
  32                 clip:rect(0px,100px,100px,0px);
  33                 -webkit-box-reflect: below;
  34                 -webkit-transform-style: preserve-3d;
  35                 -webkit-perspective: 300;
  36             }
  37             #zero {
  38                 position: relative;
  39                 z-index: 0;
  40             }
  41             #video {
  42                 width: 200px;
  43                 height: 200px;
  44                 background-color: black;
  45             }
  46         </style>
  47     </head>
  48     <body onload="init()">
  49         <div>This tests that a full screen element in a lower stacking context blocks a sibling in a higher stacking context.
  50              After entering full screen mode, only a black box should be visible.
  51              Click <button onclick="goFullScreen()">go full screen</button> to run the test.</div>
  52         <div id="one"></div>
  53         <div id="zero">
  54             <video id="video"></video>
  55         </div>
  56     </body>
  57 </html>