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