Upstream version 9.38.198.0
[platform/framework/web/crosswalk.git] / src / 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 </style>
63 </head>
64 <body onload="init()">
65
66 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.
67
68 <div id="one">
69     <div id="two">
70         <div id="three"></div>
71     </div>
72 </div>
73 </body>