| <head> |
| <script> |
| var runPixelTests = true; |
| var init = function() { |
| var callback; |
| var fullscreenChanged = function(event) |
| { |
| if (callback) |
| callback(event) |
| }; |
| document.onwebkitfullscreenchange = fullscreenChanged; |
| |
| var one = document.getElementById('one'); |
| var two = document.getElementById('two'); |
| var three = document.getElementById('three'); |
| |
| var threeEnteredFullScreen = function(event) { |
| if (document.webkitCurrentFullScreenElement == three) { |
| callback = threeExitedFullScreen; |
| one.removeChild(two); |
| } |
| }; |
| |
| var threeExitedFullScreen = function(event) { |
| if (document.webkitCurrentFullScreenElement == null) { |
| callback = null; |
| endTest(); |
| } |
| }; |
| |
| callback = threeEnteredFullScreen; |
| |
| function goFullScreen() { |
| document.getElementById('three').webkitRequestFullScreen(); |
| } |
| runWithKeyDown(goFullScreen); |
| }; |
| </script> |
| <script src="full-screen-test.js"></script> |
| <style> |
| #one { |
| border: 4px solid darkgreen; |
| background-color: green; |
| width: 600px; |
| height: 400px; |
| padding: 4px; |
| } |
| |
| #two { |
| border: 4px solid darkred; |
| background-color: red; |
| padding: 4px; |
| height: 384px; |
| } |
| |
| #three { |
| border: 4px solid darkblue; |
| background-color: blue; |
| padding: 4px; |
| height: 368px; |
| } |
| :-webkit-full-screen-ancestor { |
| background-color: yellow; |
| } |
| </style> |
| </head> |
| <body onload="init()"> |
| |
| 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. |
| |
| <div id="one"> |
| <div id="two"> |
| <div id="three"></div> |
| </div> |
| </div> |
| </body> |