OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 <script src="../../../fullscreen/full-screen-test.js"></script> | |
5 <style> | |
6 #bottom-dialog { | |
7 top: 100px; | |
8 left: 100px; | |
9 } | |
10 | |
11 #top-dialog { | |
12 top: 100px; | |
13 left: 200px; | |
14 } | |
15 | |
16 #inert-element { | |
17 top: 100px; | |
18 left: 300px; | |
19 } | |
20 | |
21 .box { | |
22 position: absolute; | |
23 height: 50px; | |
24 width: 50px; | |
25 background: green; | |
26 } | |
27 </style> | |
28 </head> | |
29 <body> | |
30 <p>Tests that the active modal dialog is as expected when fullscreen | |
31 elements are added to the top layer. This test requires testRunner.</p> | |
32 | |
33 <dialog class="box" id="bottom-dialog"></dialog> | |
34 <dialog class="box" id="top-dialog"></dialog> | |
35 <div class="box" id="bottom-div"> | |
36 <div class="box" id="top-div"></div> | |
37 </div> | |
38 <div class="box" id="inert-element"></div> | |
39 <script> | |
40 bottomDialog = document.querySelector('#bottom-dialog'); | |
41 topDialog = document.querySelector('#top-dialog'); | |
42 bottomDiv = document.querySelector('#bottom-div'); | |
43 topDiv = document.querySelector('#top-div'); | |
44 inert = document.querySelector('#inert-element'); | |
45 | |
46 expectClick = null; | |
47 document.addEventListener('click', function(e) { | |
48 clickedOn = e.target; | |
49 testExpected('clickedOn', expectClick); | |
50 }); | |
51 | |
52 function clickOn(element) | |
53 { | |
54 if (!window.eventSender) | |
55 return; | |
56 var rect = element.getBoundingClientRect(); | |
57 eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height /
2); | |
58 eventSender.mouseDown(); | |
59 eventSender.mouseUp(); | |
60 } | |
61 | |
62 function makeFullscreen(element) | |
63 { | |
64 runWithKeyDown(function() { element.webkitRequestFullscreen(); }); | |
65 } | |
66 | |
67 function shouldBeActiveModalDialog(expected) | |
68 { | |
69 consoleWrite('the active modal dialog should be: ' + expected.id); | |
70 expectClick = expected; | |
71 clickOn(expected); | |
72 expectClick = document.documentElement; | |
73 clickOn(inert); | |
74 } | |
75 | |
76 function shouldBeNoModalDialog() | |
77 { | |
78 consoleWrite('there should be no modal dialog'); | |
79 expectClick = inert; | |
80 clickOn(inert); | |
81 } | |
82 | |
83 document.addEventListener('webkitfullscreenchange', function(e) { | |
84 if (document.webkitFullscreenElement == bottomDiv) { | |
85 topDialog.showModal(); | |
86 makeFullscreen(topDiv); | |
87 } else if (document.webkitFullscreenElement == topDiv) { | |
88 // Hide to simplify hit testing on the inert element. | |
89 bottomDiv.style.display = 'none'; | |
90 topDiv.style.display = 'none'; | |
91 | |
92 shouldBeActiveModalDialog(topDialog); | |
93 topDialog.close(); | |
94 shouldBeActiveModalDialog(bottomDialog); | |
95 bottomDialog.close(); | |
96 shouldBeNoModalDialog(); | |
97 endTest(); | |
98 } | |
99 }); | |
100 | |
101 bottomDialog.showModal(); | |
102 makeFullscreen(bottomDiv); | |
103 </script> | |
104 </body> | |
105 </html> | |
OLD | NEW |