LayoutTests/fullscreen/full-screen-remove-ancestor-after.html

   1 <head>
   2 <script>
   3 var runPixelTests = true;
   4 var init = function() {
   5     // Bail out early if the full screen API is not enabled or is missing:
   6     if (Element.prototype.webkitRequestFullScreen == undefined) {
   7         logResult(false, "Element.prototype.webkitRequestFullScreen == undefined");
   8         endTest();
   9     } else {
  10         var callback;
  11         var fullscreenChanged = function(event)
  12         {
  13             if (callback)
  14                 callback(event)
  15         };
  16         waitForEvent(document, 'webkitfullscreenchange', fullscreenChanged);
  17
  18         var one = document.getElementById('one');
  19         var two = document.getElementById('two');
  20         var three = document.getElementById('three');
  21
  22         var threeEnteredFullScreen = function(event) {
  23             callback = threeExitedFullScreen;
  24             testExpected("document.webkitCurrentFullScreenElement", three);
  25             one.removeChild(two);
  26         };
  27
  28         var threeExitedFullScreen = function(event) {
  29             callback = null;
  30             testExpected("document.webkitCurrentFullScreenElement", null);
  31             endTest();
  32         };
  33
  34         callback = threeEnteredFullScreen;
  35         runWithKeyDown(function(){three.webkitRequestFullScreen()});
  36     }
  37 };
  38 var startTest = function() { document.getElementById('three').webkitRequestFullScreen(); };
  39 </script>
  40 <script src="full-screen-test.js"></script>
  41 <style>
  42 #one {
  43     border: 4px solid darkgreen;
  44     background-color: green;
  45     width: 600px;
  46     height: 400px;
  47     padding: 4px;
  48 }
  49
  50 #two {
  51     border: 4px solid darkred;
  52     background-color: red;
  53     padding: 4px;
  54     height: 384px;
  55 }
  56
  57 #three {
  58     border: 4px solid darkblue;
  59     background-color: blue;
  60     padding: 4px;
  61     height: 368px;
  62 }
  63 </style>
  64 </head>
  65 <body onload="init()">
  66
  67 This tests that, if the ancestor of the current full-screen element is removed, full screen mode will exit, and the document will render normally.  At the completion of the test, a green box should be visible. Click <button onclick="startTest()">go full screen</button> to run the test.
  68
  69 <div id="one">
  70     <div id="two">
  71         <div id="three"></div>
  72     </div>
  73 </div>
  74
  75 </script>