Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(504)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/dom/HTMLDialogElement/non-anchored-dialog-positioning.html

Issue 14373010: Make abspos <dialog>'s containing block be the ICB. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: review comments Created 7 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « no previous file | LayoutTests/fast/dom/HTMLDialogElement/non-anchored-dialog-positioning-expected.txt » ('j') | LayoutTests/fast/dom/HTMLDialogElement/top-layer-containing-block-scrolled-viewport.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 /* Remove margin, border, and padding to allow comparing dialog's position with that of plain span elements. */
6 body {
7 margin: 0;
8 }
9
10 dialog {
11 border: 0;
12 padding: 0;
13 }
14
5 .filler { 15 .filler {
6 height: 20000px; 16 height: 20000px;
7 } 17 }
8 18
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 }
14 </style> 19 </style>
15 <script src="../../js/resources/js-test-pre.js"></script> 20 <script src="../../js/resources/js-test-pre.js"></script>
16 <script> 21 <script>
17 if (window.internals) 22 if (window.internals)
18 internals.settings.setDialogElementEnabled(true); 23 internals.settings.setDialogElementEnabled(true);
19 24
20 function checkTopOfViewport(dialog) { 25 function checkTopOfViewport(dialog) {
21 shouldBe('dialog.getBoundingClientRect().top', '0'); 26 shouldBe('dialog.getBoundingClientRect().top', '0');
22 } 27 }
23 28
(...skipping 12 matching lines...) Expand all
36 checker(); 41 checker();
37 dialog.close(); 42 dialog.close();
38 } 43 }
39 </script> 44 </script>
40 </head> 45 </head>
41 <body> 46 <body>
42 <dialog id="mydialog">It is my dialog.</dialog> 47 <dialog id="mydialog">It is my dialog.</dialog>
43 <div class="filler" id="fillerDiv"></div> 48 <div class="filler" id="fillerDiv"></div>
44 </body> 49 </body>
45 <script> 50 <script>
46 description("Tests default positioning of non-anchored dialogs."); 51 description("Tests positioning of non-anchored dialogs.");
47 52
48 dialog = document.getElementById('mydialog'); 53 dialog = document.getElementById('mydialog');
49 54
50 debug('Dialog should be centered in the viewport.'); 55 debug('Dialog should be centered in the viewport.');
51 showAndTestDialog(dialog, function() { checkCentered(dialog) }); 56 showAndTestDialog(dialog, function() { checkCentered(dialog) });
52 57
53 debug('<br>Dialog should be recentered if show() is called after close().'); 58 debug('<br>Dialog should be recentered if show() is called after close().');
54 window.scroll(0, 500); 59 window.scroll(0, 500);
55 dialog.show(); 60 dialog.show();
56 checkCentered(dialog); 61 checkCentered(dialog);
(...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after
130 135
131 debug("<br>Dialog is recentered if show() is called after removing 'open'"); 136 debug("<br>Dialog is recentered if show() is called after removing 'open'");
132 dialog.removeAttribute('open'); 137 dialog.removeAttribute('open');
133 window.scroll(0, 1000); 138 window.scroll(0, 1000);
134 dialog.show(); 139 dialog.show();
135 checkCentered(dialog); 140 checkCentered(dialog);
136 dialog.close(); 141 dialog.close();
137 window.scroll(0, 500); 142 window.scroll(0, 500);
138 143
139 debug("<br>Dialog should not be centered if show() was called when an ancestor h ad display 'none'."); 144 debug("<br>Dialog should not be centered if show() was called when an ancestor h ad display 'none'.");
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'; 145 absoluteContainer.style.display = 'none';
145 dialog.show(); 146 dialog.show();
146 absoluteContainer.style.display = 'block'; 147 absoluteContainer.style.display = 'block';
148 // Since dialog's containing block is the ICB, it's statically positioned after <body>.
149 expectedTop = document.body.getBoundingClientRect().bottom;
147 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop'); 150 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
148 dialog.close(); 151 dialog.close();
149 152
150 debug("<br>Test that setting 'top' on dialog results in the same position as for a plain, absolutely positioned span."); 153 debug("<br>Test that setting 'top' on dialog results in the same position as for a plain, absolutely positioned span.");
154 var plainSpan = document.createElement('span');
155 plainSpan.style.position = 'absolute';
156 document.body.appendChild(plainSpan);
151 plainSpan.style.top = '50px'; 157 plainSpan.style.top = '50px';
152 dialog.style.top = '50px'; 158 dialog.style.top = '50px';
153 showAndTestDialog(dialog, function() { shouldBe('dialog.offsetTop', 'plainSpan.o ffsetTop'); }); 159 expectedTop = plainSpan.getBoundingClientRect().top;
160 showAndTestDialog(dialog, function() { shouldBe('dialog.getBoundingClientRect(). top', 'expectedTop'); });
154 161
155 debug("<br>Test that setting 'bottom' on dialog results in the same position as for a plain, absolutely positioned span."); 162 debug("<br>Test that setting 'bottom' on dialog results in the same position as for a plain, absolutely positioned span.");
156 dialog.style.top = 'auto'; 163 dialog.style.top = 'auto';
157 plainSpan.style.top = 'auto'; 164 plainSpan.style.top = 'auto';
158 dialog.style.bottom = '50px'; 165 dialog.style.bottom = '50px';
159 plainSpan.style.bottom = '50px'; 166 plainSpan.style.bottom = '50px';
160 showAndTestDialog(dialog, function() { shouldBe('dialog.offsetBottom', 'plainSpa n.offsetBottom'); }); 167 showAndTestDialog(dialog, function() { shouldBe('dialog.getBoundingClientRect(). bottom', 'plainSpan.getBoundingClientRect().bottom'); });
161 168
162 debug('<br>Test that fixed positioning for dialog has same behavior as for a pla in span.'); 169 debug('<br>Test that fixed positioning for dialog has same behavior as for a pla in span.');
163 plainSpan.style.position = 'fixed'; 170 plainSpan.style.position = 'fixed';
164 plainSpan.style.top = '50px'; 171 plainSpan.style.top = '50px';
165 dialog.style.position = 'fixed'; 172 dialog.style.position = 'fixed';
166 dialog.style.top = '50px'; 173 dialog.style.top = '50px';
167 showAndTestDialog(dialog, function() { shouldBe('dialog.offsetTop', 'plainSpan.o ffsetTop'); }); 174 showAndTestDialog(dialog, function() { shouldBe('dialog.getBoundingClientRect(). top', 'plainSpan.getBoundingClientRect().top'); });
168 175
169 debug('<br>Test that static position for a non-modal dialog has the same behavio r as for a plain span.'); 176 debug('<br>Test that static position for a non-modal dialog has the same behavio r as for a plain span.');
170 // Just test non-modal since modal is covered by other tests (for modal, static computes to absolute) 177 plainSpan.parentNode.removeChild(plainSpan);
178 relativeContainer.appendChild(plainSpan);
171 plainSpan.style.position = 'static'; 179 plainSpan.style.position = 'static';
172 var expectedTop = plainSpan.offsetTop; 180 expectedTop = plainSpan.getBoundingClientRect().top;
173 plainSpan.parentNode.removeChild(plainSpan); 181 plainSpan.parentNode.removeChild(plainSpan);
174 dialog.style.position = 'static'; 182 dialog.style.position = 'static';
183 // Just test non-modal since modal is covered by other tests (for modal, static computes to absolute)
175 dialog.show(); 184 dialog.show();
176 shouldBe('dialog.offsetTop', 'expectedTop'); 185 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
177 dialog.close(); 186 dialog.close();
178 187
179 debug('<br>Test that relative position for a non-modal dialog has the same behav ior as for a plain span.'); 188 debug('<br>Test that relative position for a non-modal dialog has the same behav ior as for a plain span.');
180 // Just test non-modal since modal is covered by other tests (for modal, relativ e computes to absolute)
181 relativeContainer.appendChild(plainSpan); 189 relativeContainer.appendChild(plainSpan);
182 plainSpan.style.position = 'relative'; 190 plainSpan.style.position = 'relative';
183 plainSpan.style.top = '50px'; 191 plainSpan.style.top = '50px';
184 expectedTop = plainSpan.offsetTop; 192 expectedTop = plainSpan.getBoundingClientRect().top;
185 plainSpan.parentNode.removeChild(plainSpan); 193 plainSpan.parentNode.removeChild(plainSpan);
186 dialog.style.position = 'relative'; 194 dialog.style.position = 'relative';
187 dialog.style.top = '50px'; 195 dialog.style.top = '50px';
196 // Just test non-modal since modal is covered by other tests (for modal, relativ e computes to absolute)
188 dialog.show(); 197 dialog.show();
189 shouldBe('dialog.offsetTop', 'expectedTop'); 198 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
190 dialog.close(); 199 dialog.close();
191 </script> 200 </script>
192 <script src="../../js/resources/js-test-post.js"></script> 201 <script src="../../js/resources/js-test-post.js"></script>
193 </body> 202 </body>
194 </html> 203 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/dom/HTMLDialogElement/non-anchored-dialog-positioning-expected.txt » ('j') | LayoutTests/fast/dom/HTMLDialogElement/top-layer-containing-block-scrolled-viewport.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698