LayoutTests/fullscreen/full-screen-iframe-zIndex.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                     var iframe = document.getElementById('block1');
  14                     var element = iframe.contentDocument.documentElement;
  15                     waitForEventAndEnd(element, 'webkitfullscreenchange');
  16                     runWithKeyDown(goFullScreen);
  17                 }
  18             }
  19
  20             function goFullScreen() {
  21                var iframe = document.getElementById('block1');
  22                var element = iframe.contentDocument.documentElement;
  23                element.webkitRequestFullScreen();
  24             }
  25         </script>
  26         <script src="full-screen-test.js"></script>
  27         <style>
  28             #block1 {
  29                 width: 200px;
  30                 height: 100px;
  31                 border: 4px solid darkgreen;
  32                 background-color: green;
  33             }
  34             #block2 {
  35                 width: 100px;
  36                 height: 50px;
  37                 border: 4px solid darkred;
  38                 background-color: red;
  39                 z-index: 500;
  40                 position: relative;
  41                 left: 50px;
  42                 top: 25px;
  43             }
  44         </style>
  45     </head>
  46     <body onload="init()">
  47         <div>This tests that an element with a positive z-index appears behind the full screen element.
  48              After entering full screen mode, only a white box should be visible.
  49              Click <button onclick="goFullScreen()">go full screen</button> to run the test.</div>
  50         <div id="block2"></div>
  51         <iframe webkitallowfullscreen src="resources/inner.html" id="block1"></iframe>
  52     </body>