src/third_party/WebKit/LayoutTests/fullscreen/full-screen-zIndex-after.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <script>
   5             var runPixelTests = true;
   6
   7             function init() {
   8                 document.onwebkitfullscreenchange = function() {
   9                     document.onwebkitfullscreenchange = endTest;
  10                     document.webkitCancelFullScreen();
  11                 };
  12                 function goFullScreen() {
  13                     document.getElementById('block1').webkitRequestFullScreen();
  14                 }
  15                 runWithKeyDown(goFullScreen);
  16             }
  17         </script>
  18         <script src="full-screen-test.js"></script>
  19         <style>
  20             #block1 {
  21                 width: 200px;
  22                 height: 100px;
  23                 border: 4px solid darkgreen;
  24                 background-color: green;
  25             }
  26             #block2 {
  27                 width: 100px;
  28                 height: 50px;
  29                 border: 4px solid darkred;
  30                 background-color: red;
  31                 z-index: 200;
  32                 position: relative;
  33                 left: 50px;
  34                 top: 25px;
  35             }
  36             #block3 {
  37                 z-index: 500;
  38                 position: relative;
  39             }
  40         </style>
  41     </head>
  42     <body onload="init()">
  43         <div>This tests that an element with a positive z-index appears behind the full screen element.
  44              After entering full screen mode, the green box should not be obscured by the red box.
  45              Click <button onclick="goFullScreen()">go full screen</button> to run the test.</div>
  46         <div id="block2"></div>
  47         <div id="block3">
  48             <div id="block1"></div>
  49         </div>
  50     </body>
  51 </html>