OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 .filler { | 5 .filler { |
6 height: 20000px; | 6 height: 20000px; |
7 } | 7 } |
| 8 |
| 9 dialog { |
| 10 /* Remove border and padding to allow comparing dialog's position with that
of plain span elements. */ |
| 11 border: 0; |
| 12 padding: 0; |
| 13 } |
8 </style> | 14 </style> |
9 <script src="../../js/resources/js-test-pre.js"></script> | 15 <script src="../../js/resources/js-test-pre.js"></script> |
10 <script> | 16 <script> |
11 if (window.internals) | 17 if (window.internals) |
12 internals.settings.setDialogElementEnabled(true); | 18 internals.settings.setDialogElementEnabled(true); |
13 | 19 |
14 function checkTopOfViewport(dialog) { | 20 function checkTopOfViewport(dialog) { |
15 shouldBe('dialog.getBoundingClientRect().top', '0'); | 21 shouldBe('dialog.getBoundingClientRect().top', '0'); |
16 } | 22 } |
17 | 23 |
18 function checkCentered(dialog) { | 24 function checkCentered(dialog) { |
19 expectedTop = (window.innerHeight - dialog.offsetHeight) / 2; | 25 expectedTop = (window.innerHeight - dialog.offsetHeight) / 2; |
20 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); | 26 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); |
21 } | 27 } |
| 28 |
| 29 // Helper to test both a non-modal and modal dialog. |
| 30 function showAndTestDialog(dialog, checker) { |
| 31 dialog.show(); |
| 32 checker(); |
| 33 dialog.close(); |
| 34 |
| 35 dialog.showModal(); |
| 36 checker(); |
| 37 dialog.close(); |
| 38 } |
22 </script> | 39 </script> |
23 </head> | 40 </head> |
24 <body> | 41 <body> |
25 <dialog id="mydialog">It is my dialog.</dialog> | 42 <dialog id="mydialog">It is my dialog.</dialog> |
26 <div class="filler" id="fillerDiv"></div> | 43 <div class="filler" id="fillerDiv"></div> |
27 </body> | 44 </body> |
28 <script> | 45 <script> |
29 description("Tests default positioning of non-anchored dialogs."); | 46 description("Tests default positioning of non-anchored dialogs."); |
30 | 47 |
31 dialog = document.getElementById('mydialog'); | 48 dialog = document.getElementById('mydialog'); |
32 | 49 |
33 // Dialog should be centered in the viewport. | 50 debug('Dialog should be centered in the viewport.'); |
| 51 showAndTestDialog(dialog, function() { checkCentered(dialog) }); |
| 52 |
| 53 debug('<br>Dialog should be recentered if show() is called after close().'); |
| 54 window.scroll(0, 500); |
| 55 dialog.show(); |
| 56 checkCentered(dialog); |
| 57 |
| 58 debug('<br>Dialog should not be recentered on a relayout.'); |
| 59 var expectedTop = dialog.getBoundingClientRect().top; |
| 60 window.scroll(0, 1000); |
| 61 var forceRelayoutDiv = document.createElement('div'); |
| 62 forceRelayoutDiv.style.width = '100px'; |
| 63 forceRelayoutDiv.style.height = '100px'; |
| 64 forceRelayoutDiv.style.border = 'solid'; |
| 65 document.body.appendChild(forceRelayoutDiv); |
| 66 window.scroll(0, 500); |
| 67 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); |
| 68 document.body.removeChild(forceRelayoutDiv); |
| 69 dialog.close(); |
| 70 |
| 71 debug('<br>A tall dialog should be positioned at the top of the viewport.'); |
| 72 var dialogInner = document.createElement('div'); |
| 73 dialogInner.className = 'filler'; |
| 74 dialog.appendChild(dialogInner); |
| 75 showAndTestDialog(dialog, function() { checkTopOfViewport(dialog) }); |
| 76 dialog.removeChild(dialogInner); |
| 77 |
| 78 debug('<br>The dialog should be centered regardless of the presence of a horizon
tal scrollbar.'); |
| 79 var fillerDiv = document.getElementById('fillerDiv'); |
| 80 fillerDiv.style.width = '4000px'; |
| 81 showAndTestDialog(dialog, function() { checkCentered(dialog) }); |
| 82 fillerDiv.style.width = 'auto'; |
| 83 |
| 84 debug('<br>Test that centering works when dialog is inside positioned containers
.'); |
| 85 var absoluteContainer = document.createElement('div'); |
| 86 absoluteContainer.style.position = 'absolute'; |
| 87 absoluteContainer.style.top = '800px;' |
| 88 absoluteContainer.style.height = '50px;' |
| 89 absoluteContainer.style.width = '90%'; |
| 90 dialog.parentNode.removeChild(dialog); |
| 91 document.body.appendChild(absoluteContainer); |
| 92 absoluteContainer.appendChild(dialog); |
| 93 showAndTestDialog(dialog, function() { checkCentered(dialog) }); |
| 94 absoluteContainer.removeChild(dialog); |
| 95 |
| 96 var relativeContainer = document.createElement('div'); |
| 97 relativeContainer.style.position = 'relative'; |
| 98 relativeContainer.style.top = '20px'; |
| 99 relativeContainer.style.height = '30px'; |
| 100 absoluteContainer.appendChild(relativeContainer); |
| 101 relativeContainer.appendChild(dialog); |
| 102 dialog.show(); |
| 103 checkCentered(dialog); |
| 104 |
| 105 debug("<br>Dialog's position should survive after becoming display:none temporar
ily."); |
| 106 expectedTop = dialog.getBoundingClientRect().top; |
| 107 window.scroll(0, 1000); |
| 108 relativeContainer.style.display = 'none'; |
| 109 relativeContainer.style.display = 'block'; |
| 110 window.scroll(0, 500); |
| 111 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); |
| 112 |
| 113 debug("<br>Dialog's position should survive after being re-added to document wit
hout another call to show()."); |
| 114 expectedTop = dialog.getBoundingClientRect().top; |
| 115 window.scroll(0, 1000); |
| 116 relativeContainer.removeChild(dialog); |
| 117 relativeContainer.appendChild(dialog); |
| 118 window.scroll(0, 500); |
| 119 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); |
| 120 dialog.close(); |
| 121 |
| 122 debug("<br>Dialog's position should survive after close() and show()."); |
| 123 dialog.show(); |
| 124 dialog.style.top = '0px'; |
| 125 dialog.close(); |
| 126 dialog.show(); |
| 127 var expectedTop = '0px'; |
| 128 shouldBe('dialog.style.top', 'expectedTop'); |
| 129 dialog.style.top = 'auto'; |
| 130 |
| 131 debug("<br>Dialog is recentered if show() is called after removing 'open'"); |
| 132 dialog.removeAttribute('open'); |
| 133 window.scroll(0, 1000); |
34 dialog.show(); | 134 dialog.show(); |
35 checkCentered(dialog); | 135 checkCentered(dialog); |
36 dialog.close(); | 136 dialog.close(); |
| 137 window.scroll(0, 500); |
37 | 138 |
38 // Dialog should still be centered if shown after window is scrolled. | 139 debug("<br>Dialog should not be centered if show() was called when an ancestor h
ad display 'none'."); |
39 window.scroll(0, 500); | 140 var plainSpan = document.createElement('span'); |
| 141 plainSpan.style.position = 'absolute'; |
| 142 relativeContainer.appendChild(plainSpan); |
| 143 expectedTop = plainSpan.getBoundingClientRect().top; |
| 144 absoluteContainer.style.display = 'none'; |
40 dialog.show(); | 145 dialog.show(); |
41 checkCentered(dialog); | 146 absoluteContainer.style.display = 'block'; |
| 147 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); |
42 dialog.close(); | 148 dialog.close(); |
43 | 149 |
44 // A tall dialog should be positioned at the top of the viewport. | 150 debug("<br>Test that setting 'top' on dialog results in the same position as for
a plain, absolutely positioned span."); |
45 var dialogInner = document.createElement('div'); | 151 plainSpan.style.top = '50px'; |
46 dialogInner.className = 'filler'; | 152 dialog.style.top = '50px'; |
47 dialog.appendChild(dialogInner); | 153 showAndTestDialog(dialog, function() { shouldBe('dialog.offsetTop', 'plainSpan.o
ffsetTop'); }); |
48 dialog.show(); | |
49 checkTopOfViewport(dialog); | |
50 dialog.close(); | |
51 dialog.removeChild(dialogInner); | |
52 | 154 |
53 // Add the horizontal scrollbar. The dialog should be centered regardless of the
presence of scrollbars. | 155 debug("<br>Test that setting 'bottom' on dialog results in the same position as
for a plain, absolutely positioned span."); |
54 var fillerDiv = document.getElementById('fillerDiv'); | 156 dialog.style.top = 'auto'; |
55 fillerDiv.style.width = '4000px'; | 157 plainSpan.style.top = 'auto'; |
56 dialog.show(); | 158 dialog.style.bottom = '50px'; |
57 checkCentered(dialog); | 159 plainSpan.style.bottom = '50px'; |
58 dialog.close(); | 160 showAndTestDialog(dialog, function() { shouldBe('dialog.offsetBottom', 'plainSpa
n.offsetBottom'); }); |
59 fillerDiv.style.width = 'auto'; | |
60 | 161 |
61 // Test that centering works when dialog is inside positioned containers. | 162 debug('<br>Test that fixed positioning for dialog has same behavior as for a pla
in span.'); |
62 var container = document.createElement('div'); | 163 plainSpan.style.position = 'fixed'; |
63 container.style.position = 'absolute'; | 164 plainSpan.style.top = '50px'; |
64 container.style.top = '800px;' | |
65 container.style.height= '50px;' | |
66 container.style.width = '90%'; | |
67 dialog.parentNode.removeChild(dialog); | |
68 document.body.appendChild(container); | |
69 container.appendChild(dialog); | |
70 dialog.show(); | |
71 checkCentered(dialog); | |
72 dialog.close(); | |
73 container.removeChild(dialog); | |
74 | |
75 var container2 = document.createElement('div'); | |
76 // FIXME: This test fails for position = 'relative'. | |
77 container2.style.position = 'absolute'; | |
78 container2.style.top = '20px'; | |
79 container2.style.height = '30px'; | |
80 container.appendChild(container2); | |
81 container2.appendChild(dialog); | |
82 dialog.show(); | |
83 checkCentered(dialog); | |
84 dialog.close(); | |
85 | |
86 // Test that setting top manually is the same as for a plain div. | |
87 var plainDiv = document.createElement('div'); | |
88 container2.appendChild(plainDiv); | |
89 plainDiv.style.position = 'absolute'; | |
90 plainDiv.style.top = '50px'; | |
91 dialog.style.top = '50px'; | |
92 dialog.show(); | |
93 shouldBe('dialog.offsetTop', 'plainDiv.offsetTop'); | |
94 dialog.close(); | |
95 | |
96 // Test that setting bottom manually is the same as for a plain div. | |
97 dialog.style.top = 'auto'; | |
98 plainDiv.style.top = 'auto'; | |
99 dialog.style.bottom = '50px'; | |
100 plainDiv.style.bottom = '50px'; | |
101 dialog.show(); | |
102 shouldBe('dialog.offsetBottom', 'plainDiv.offsetBottom'); | |
103 dialog.close(); | |
104 | |
105 // Test that fixed position has the usual behavior. | |
106 plainDiv.style.position = 'fixed'; | |
107 plainDiv.style.top = '50px'; | |
108 dialog.style.position = 'fixed'; | 165 dialog.style.position = 'fixed'; |
109 dialog.style.top = '50px'; | 166 dialog.style.top = '50px'; |
110 dialog.show(); | 167 showAndTestDialog(dialog, function() { shouldBe('dialog.offsetTop', 'plainSpan.o
ffsetTop'); }); |
111 shouldBe('dialog.offsetTop', 'plainDiv.offsetTop'); | |
112 dialog.close(); | |
113 | 168 |
114 // Test that static position has the usual behavior. | 169 debug('<br>Test that static position for a non-modal dialog has the same behavio
r as for a plain span.'); |
115 plainDiv.style.position = 'static'; | 170 // Just test non-modal since modal is covered by other tests (for modal, static
computes to absolute) |
116 plainDiv.style.top = 'auto'; | 171 plainSpan.style.position = 'static'; |
117 var expectedTop = plainDiv.offsetTop; | 172 var expectedTop = plainSpan.offsetTop; |
118 plainDiv.parentNode.removeChild(plainDiv); | 173 plainSpan.parentNode.removeChild(plainSpan); |
119 dialog.style.position = 'static'; | 174 dialog.style.position = 'static'; |
120 dialog.style.top = 'auto'; | |
121 dialog.show(); | 175 dialog.show(); |
122 shouldBe('dialog.offsetTop', 'expectedTop'); | 176 shouldBe('dialog.offsetTop', 'expectedTop'); |
123 dialog.close(); | 177 dialog.close(); |
124 dialog.parentNode.removeChild(dialog); | |
125 | 178 |
126 // Test that relative position has the usual behavior. | 179 debug('<br>Test that relative position for a non-modal dialog has the same behav
ior as for a plain span.'); |
127 container2.appendChild(plainDiv); | 180 // Just test non-modal since modal is covered by other tests (for modal, relativ
e computes to absolute) |
128 plainDiv.style.position = 'relative'; | 181 relativeContainer.appendChild(plainSpan); |
129 plainDiv.style.top = '50px'; | 182 plainSpan.style.position = 'relative'; |
130 expectedTop = plainDiv.offsetTop; | 183 plainSpan.style.top = '50px'; |
131 plainDiv.parentNode.removeChild(plainDiv); | 184 expectedTop = plainSpan.offsetTop; |
132 container2.appendChild(dialog); | 185 plainSpan.parentNode.removeChild(plainSpan); |
133 dialog.style.position = 'relative'; | 186 dialog.style.position = 'relative'; |
134 dialog.style.top = '50px'; | 187 dialog.style.top = '50px'; |
135 dialog.show(); | 188 dialog.show(); |
136 shouldBe('dialog.offsetTop', 'expectedTop'); | 189 shouldBe('dialog.offsetTop', 'expectedTop'); |
137 dialog.close(); | 190 dialog.close(); |
138 </script> | 191 </script> |
139 <script src="../../js/resources/js-test-post.js"></script> | 192 <script src="../../js/resources/js-test-post.js"></script> |
140 </body> | 193 </body> |
141 </html> | 194 </html> |
OLD | NEW |