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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 13792002: Fix <dialog> centering (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: fix use of PassRefPtr Created 7 years, 8 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') | Source/WebCore/html/HTMLDialogElement.cpp » ('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 .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>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/dom/HTMLDialogElement/non-anchored-dialog-positioning-expected.txt » ('j') | Source/WebCore/html/HTMLDialogElement.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698