| [email protected] | d923f99 | 2011-06-11 03:36:15 | [diff] [blame] | 1 | <head> |
| 2 | <script> | ||||
| 3 | var runPixelTests = true; | ||||
| 4 | var init = function() { | ||||
| [email protected] | 4108074 | 2014-08-14 14:26:11 | [diff] [blame] | 5 | var callback; |
| 6 | var fullscreenChanged = function(event) | ||||
| 7 | { | ||||
| 8 | if (callback) | ||||
| 9 | callback(event) | ||||
| 10 | }; | ||||
| 11 | document.onwebkitfullscreenchange = fullscreenChanged; | ||||
| [email protected] | d923f99 | 2011-06-11 03:36:15 | [diff] [blame] | 12 | |
| [email protected] | 4108074 | 2014-08-14 14:26:11 | [diff] [blame] | 13 | var one = document.getElementById('one'); |
| 14 | var two = document.getElementById('two'); | ||||
| 15 | var three = document.getElementById('three'); | ||||
| [email protected] | d923f99 | 2011-06-11 03:36:15 | [diff] [blame] | 16 | |
| [email protected] | 4108074 | 2014-08-14 14:26:11 | [diff] [blame] | 17 | var threeEnteredFullScreen = function(event) { |
| 18 | if (document.webkitCurrentFullScreenElement == three) { | ||||
| 19 | callback = threeExitedFullScreen; | ||||
| 20 | one.removeChild(two); | ||||
| [email protected] | a72aca5 | 2014-08-12 06:46:34 | [diff] [blame] | 21 | } |
| [email protected] | 4108074 | 2014-08-14 14:26:11 | [diff] [blame] | 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(); | ||||
| [email protected] | d923f99 | 2011-06-11 03:36:15 | [diff] [blame] | 35 | } |
| [email protected] | 4108074 | 2014-08-14 14:26:11 | [diff] [blame] | 36 | runWithKeyDown(goFullScreen); |
| [email protected] | d923f99 | 2011-06-11 03:36:15 | [diff] [blame] | 37 | }; |
| [email protected] | d923f99 | 2011-06-11 03:36:15 | [diff] [blame] | 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 | } | ||||
| [email protected] | 12618d22 | 2015-01-08 14:59:34 | [diff] [blame] | 62 | :-webkit-full-screen-ancestor { |
| 63 | background-color: yellow; | ||||
| 64 | } | ||||
| [email protected] | d923f99 | 2011-06-11 03:36:15 | [diff] [blame] | 65 | </style> |
| 66 | </head> | ||||
| 67 | <body onload="init()"> | ||||
| [email protected] | a72aca5 | 2014-08-12 06:46:34 | [diff] [blame] | 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. | ||||
| [email protected] | d923f99 | 2011-06-11 03:36:15 | [diff] [blame] | 70 | |
| 71 | <div id="one"> | ||||
| 72 | <div id="two"> | ||||
| 73 | <div id="three"></div> | ||||
| 74 | </div> | ||||
| 75 | </div> | ||||
| [email protected] | a72aca5 | 2014-08-12 06:46:34 | [diff] [blame] | 76 | </body> |