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

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: use hasCustomStyleCallbacks 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.');
34 dialog.show(); 51 showAndTestDialog(dialog, function() { checkCentered(dialog) });
35 checkCentered(dialog);
36 dialog.close();
37 52
38 // Dialog should still be centered if shown after window is scrolled. 53 debug('<br>Dialog should be recentered if show() is called after close().');
39 window.scroll(0, 500); 54 window.scroll(0, 500);
40 dialog.show(); 55 dialog.show();
41 checkCentered(dialog); 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);
42 dialog.close(); 69 dialog.close();
43 70
44 // A tall dialog should be positioned at the top of the viewport. 71 debug('<br>A tall dialog should be positioned at the top of the viewport.');
45 var dialogInner = document.createElement('div'); 72 var dialogInner = document.createElement('div');
46 dialogInner.className = 'filler'; 73 dialogInner.className = 'filler';
47 dialog.appendChild(dialogInner); 74 dialog.appendChild(dialogInner);
48 dialog.show(); 75 showAndTestDialog(dialog, function() { checkTopOfViewport(dialog) });
49 checkTopOfViewport(dialog);
50 dialog.close();
51 dialog.removeChild(dialogInner); 76 dialog.removeChild(dialogInner);
52 77
53 // Add the horizontal scrollbar. The dialog should be centered regardless of the presence of scrollbars. 78 debug('<br>The dialog should be centered regardless of the presence of a horizon tal scrollbar.');
54 var fillerDiv = document.getElementById('fillerDiv'); 79 var fillerDiv = document.getElementById('fillerDiv');
55 fillerDiv.style.width = '4000px'; 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);
56 dialog.show(); 102 dialog.show();
57 checkCentered(dialog); 103 checkCentered(dialog);
58 dialog.close();
59 fillerDiv.style.width = 'auto';
60 104
61 // Test that centering works when dialog is inside positioned containers. 105 debug("<br>Dialog's position should survive after becoming display:none temporar ily.");
62 var container = document.createElement('div'); 106 expectedTop = dialog.getBoundingClientRect().top;
63 container.style.position = 'absolute'; 107 window.scroll(0, 1000);
64 container.style.top = '800px;' 108 relativeContainer.style.display = 'none';
65 container.style.height= '50px;' 109 relativeContainer.style.display = 'block';
66 container.style.width = '90%'; 110 window.scroll(0, 500);
67 dialog.parentNode.removeChild(dialog); 111 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
68 document.body.appendChild(container);
69 container.appendChild(dialog);
70 dialog.show();
71 checkCentered(dialog);
72 dialog.close();
73 container.removeChild(dialog);
74 112
75 var container2 = document.createElement('div'); 113 debug("<br>Dialog's position should survive after being re-added to document wit hout another call to show().");
76 // FIXME: This test fails for position = 'relative'. 114 expectedTop = dialog.getBoundingClientRect().top;
77 container2.style.position = 'absolute'; 115 window.scroll(0, 1000);
78 container2.style.top = '20px'; 116 relativeContainer.removeChild(dialog);
79 container2.style.height = '30px'; 117 relativeContainer.appendChild(dialog);
80 container.appendChild(container2); 118 window.scroll(0, 500);
81 container2.appendChild(dialog); 119 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
82 dialog.show();
83 checkCentered(dialog);
84 dialog.close(); 120 dialog.close();
85 121
86 // Test that setting top manually is the same as for a plain div. 122 debug("<br>Dialog's position should survive after close() and show().");
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(); 123 dialog.show();
93 shouldBe('dialog.offsetTop', 'plainDiv.offsetTop'); 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 should not be centered if show() was called when an ancestor h ad display 'none'.");
132 var plainSpan = document.createElement('span');
133 plainSpan.style.position = 'absolute';
134 relativeContainer.appendChild(plainSpan);
135 expectedTop = plainSpan.getBoundingClientRect().top;
136 absoluteContainer.style.display = 'none';
137 dialog.show();
138 absoluteContainer.style.display = 'block';
139 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
94 dialog.close(); 140 dialog.close();
95 141
96 // Test that setting bottom manually is the same as for a plain div. 142 debug("<br>Test that setting 'top' on dialog results in the same position as for a plain, absolutely positioned span.");
143 plainSpan.style.top = '50px';
144 dialog.style.top = '50px';
145 showAndTestDialog(dialog, function() { shouldBe('dialog.offsetTop', 'plainSpan.o ffsetTop'); });
146
147 debug("<br>Test that setting 'bottom' on dialog results in the same position as for a plain, absolutely positioned span.");
97 dialog.style.top = 'auto'; 148 dialog.style.top = 'auto';
98 plainDiv.style.top = 'auto'; 149 plainSpan.style.top = 'auto';
99 dialog.style.bottom = '50px'; 150 dialog.style.bottom = '50px';
100 plainDiv.style.bottom = '50px'; 151 plainSpan.style.bottom = '50px';
101 dialog.show(); 152 showAndTestDialog(dialog, function() { shouldBe('dialog.offsetBottom', 'plainSpa n.offsetBottom'); });
102 shouldBe('dialog.offsetBottom', 'plainDiv.offsetBottom');
103 dialog.close();
104 153
105 // Test that fixed position has the usual behavior. 154 debug('<br>Test that fixed positioning for dialog has same behavior as for a pla in span.');
106 plainDiv.style.position = 'fixed'; 155 plainSpan.style.position = 'fixed';
107 plainDiv.style.top = '50px'; 156 plainSpan.style.top = '50px';
108 dialog.style.position = 'fixed'; 157 dialog.style.position = 'fixed';
109 dialog.style.top = '50px'; 158 dialog.style.top = '50px';
110 dialog.show(); 159 showAndTestDialog(dialog, function() { shouldBe('dialog.offsetTop', 'plainSpan.o ffsetTop'); });
111 shouldBe('dialog.offsetTop', 'plainDiv.offsetTop');
112 dialog.close();
113 160
114 // Test that static position has the usual behavior. 161 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'; 162 // Just test non-modal since modal is covered by other tests (for modal, static computes to absolute)
116 plainDiv.style.top = 'auto'; 163 plainSpan.style.position = 'static';
117 var expectedTop = plainDiv.offsetTop; 164 var expectedTop = plainSpan.offsetTop;
118 plainDiv.parentNode.removeChild(plainDiv); 165 plainSpan.parentNode.removeChild(plainSpan);
119 dialog.style.position = 'static'; 166 dialog.style.position = 'static';
120 dialog.style.top = 'auto';
121 dialog.show(); 167 dialog.show();
122 shouldBe('dialog.offsetTop', 'expectedTop'); 168 shouldBe('dialog.offsetTop', 'expectedTop');
123 dialog.close(); 169 dialog.close();
124 dialog.parentNode.removeChild(dialog);
125 170
126 // Test that relative position has the usual behavior. 171 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); 172 // Just test non-modal since modal is covered by other tests (for modal, relativ e computes to absolute)
128 plainDiv.style.position = 'relative'; 173 relativeContainer.appendChild(plainSpan);
129 plainDiv.style.top = '50px'; 174 plainSpan.style.position = 'relative';
130 expectedTop = plainDiv.offsetTop; 175 plainSpan.style.top = '50px';
131 plainDiv.parentNode.removeChild(plainDiv); 176 expectedTop = plainSpan.offsetTop;
132 container2.appendChild(dialog); 177 plainSpan.parentNode.removeChild(plainSpan);
133 dialog.style.position = 'relative'; 178 dialog.style.position = 'relative';
134 dialog.style.top = '50px'; 179 dialog.style.top = '50px';
135 dialog.show(); 180 dialog.show();
136 shouldBe('dialog.offsetTop', 'expectedTop'); 181 shouldBe('dialog.offsetTop', 'expectedTop');
137 dialog.close(); 182 dialog.close();
138 </script> 183 </script>
139 <script src="../../js/resources/js-test-post.js"></script> 184 <script src="../../js/resources/js-test-post.js"></script>
140 </body> 185 </body>
141 </html> 186 </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