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