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                 // 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                     waitForEvent(document, 'webkitfullscreenchange', function() {
  14                         if (document.webkitIsFullScreen)
  15                             runWithKeyDown(function() { document.webkitCancelFullScreen(); });
  16                         else {
  17                             endTest();
  18                         }
  19                     });
  20                     runWithKeyDown(goFullScreen);
  21                 }
  22             }
  23
  24             function goFullScreen() {
  25                 document.getElementById('block1').webkitRequestFullScreen();
  26             }
  27         </script>
  28         <script src="full-screen-test.js"></script>
  29         <style>
  30             #block1 {
  31                 width: 200px;
  32                 height: 100px;
  33                 border: 4px solid darkgreen;
  34                 background-color: green;
  35             }
  36             #block2 {
  37                 width: 100px;
  38                 height: 50px;
  39                 border: 4px solid darkred;
  40                 background-color: red;
  41                 z-index: 200;
  42                 position: relative;
  43                 left: 50px;
  44                 top: 25px;
  45             }
  46             #block3 {
  47                 z-index: 500;
  48                 position: relative;
  49             }
  50         </style>
  51     </head>
  52     <body onload="init()">
  53         <div>This tests that an element with a positive z-index appears behind the full screen element.
  54              After entering full screen mode, the green box should not be obscured by the red box.
  55              Click <button onclick="goFullScreen()">go full screen</button> to run the test.</div>
  56         <div id="block2"></div>
  57         <div id="block3">
  58             <div id="block1"></div>
  59         </div>
  60     </body>