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

   1 <head>
   2 <script>
   3 var runPixelTests = true;
   4 var init = function() {
   5     var callback;
   6     var fullscreenChanged = function(event)
   7     {
   8         if (callback)
   9             callback(event)
  10     };
  11     document.onwebkitfullscreenchange = fullscreenChanged;
  12
  13     var one = document.getElementById('one');
  14     var two = document.getElementById('two');
  15     var three = document.getElementById('three');
  16
  17     var threeEnteredFullScreen = function(event) {
  18         if (document.webkitCurrentFullScreenElement == three) {
  19             callback = threeExitedFullScreen;
  20             one.removeChild(two);
  21         }
  22     };
  23
  24     var threeExitedFullScreen = function(event) {
  25         if (document.webkitCurrentFullScreenElement == null) {
  26             callback = null;
  27             endTest();
  28         }
  29     };
  30
  31     callback = threeEnteredFullScreen;
  32
  33     function goFullScreen() {
  34         document.getElementById('three').webkitRequestFullScreen();
  35     }
  36     runWithKeyDown(goFullScreen);
  37 };
  38 </script>
  39 <script src="full-screen-test.js"></script>
  40 <style>
  41 #one {
  42     border: 4px solid darkgreen;
  43     background-color: green;
  44     width: 600px;
  45     height: 400px;
  46     padding: 4px;
  47 }
  48
  49 #two {
  50     border: 4px solid darkred;
  51     background-color: red;
  52     padding: 4px;
  53     height: 384px;
  54 }
  55
  56 #three {
  57     border: 4px solid darkblue;
  58     background-color: blue;
  59     padding: 4px;
  60     height: 368px;
  61 }
  62 :-webkit-full-screen-ancestor {
  63     background-color: yellow;
  64 }
  65 </style>
  66 </head>
  67 <body onload="init()">
  68
  69 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="goFullScreen()">go full screen</button> to run the test.
  70
  71 <div id="one">
  72     <div id="two">
  73         <div id="three"></div>
  74     </div>
  75 </div>
  76 </body>