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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/dom/HTMLDialogElement/abspos-dialog-layout.html

Issue 342943002: Center fixpos <dialog> (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: rm non-anchored-dialog-positioning-expected.txt Created 6 years, 6 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/abspos-dialog-layout-expected.txt » ('j') | LayoutTests/fast/dom/HTMLDialogElement/non-modal-dialog-layout.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
esprehn 2014/06/20 01:32:36 We usually leave off the <html>, <head> and <body>
falken 2014/06/20 01:49:54 Done.
4 <link href="resources/dialog-layout.css" rel="stylesheet">
5 <script src="../../../resources/js-test.js"></script>
6 </head>
7 <body>
8 <dialog id="dialog">It is my dialog.</dialog>
9 <div id="absolute-div">
10 <div id="relative-div"></div>
11 </div>
12 </body>
esprehn 2014/06/20 01:32:36 You have </body> twice in there.
falken 2014/06/20 01:49:54 Oops done.
13 <script>
14 description('Tests layout of absolutely positioned modal dialogs.');
15
16 function checkCentered(dialog) {
17 centeredTop = (window.innerHeight - dialog.offsetHeight) / 2;
18 shouldBe('dialog.getBoundingClientRect().top', 'centeredTop');
19 }
20
21 function reset() {
22 if (dialog.open)
23 dialog.close();
24 dialog.remove();
25 document.body.appendChild(dialog);
26 window.scroll(0, 500);
27 }
28
29 dialog = document.querySelector('#dialog');
30 absoluteContainer = document.querySelector('#absolute-div');
31 relativeContainer = document.querySelector('#relative-div');
32 reset();
33
34 (function() {
35 debug('<br>showModal() should center in the viewport.');
36
37 dialog.showModal();
38 checkCentered(dialog);
39 reset();
40 }());
41
42 (function() {
43 debug('<br>The computed top and bottom of a centered dialog should still hav e position auto.');
44
45 dialog.showModal();
46 shouldBeEqualToString('window.getComputedStyle(dialog).top', 'auto');
47 shouldBeEqualToString('window.getComputedStyle(dialog).bottom', 'auto');
48 reset();
49 }());
50
51 (function() {
52 debug('<br>Dialog should be recentered if showModal() is called after close( ).'),
53
54 dialog.showModal();
55 dialog.close();
56 window.scroll(0, 2 * window.scrollY);
57 dialog.showModal();
58 checkCentered(dialog);
59 reset();
60 }());
61
62 (function() {
63 debug('<br>Dialog should not recenter on relayout.');
64
65 dialog.showModal();
66 expectedTop = dialog.getBoundingClientRect().top;
67 window.scroll(0, window.scrollY * 2);
68 document.body.offsetHeight;
69 window.scroll(0, window.scrollY / 2);
70 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
71 reset();
72 }());
73
74 (function() {
75 debug('<br>A tall dialog should be positioned at the top of the viewport.');
76
77 dialog.style.height = '20000px';
78 dialog.showModal();
79 shouldBe('dialog.getBoundingClientRect().top', '0');
80
81 dialog.style.height = 'auto';
82 reset();
83 }());
84
85 (function() {
86 debug('<br>The dialog should be centered regardless of the presence of a hor izontal scrollbar.');
87
88 document.body.style.width = '4000px';
89 dialog.showModal();
90 checkCentered(dialog);
91
92 document.body.style.width = 'auto';
93 reset();
94 }());
95
96 (function() {
97 debug('<br>Centering should work when dialog is inside positioned containers .');
98
99 dialog.remove();
100 absoluteContainer.appendChild(dialog);
101 dialog.showModal();
102 checkCentered(dialog);
103 dialog.close();
104
105 dialog.remove();
106 relativeContainer.appendChild(dialog);
107 dialog.showModal();
108 checkCentered(dialog);
109
110 reset();
111 }());
112
113 (function() {
114 debug('<br>A centered dialog\'s position should survive becoming display:non e temporarily.');
115
116 dialog.showModal();
117 expectedTop = dialog.getBoundingClientRect().top;
118 relativeContainer.style.display = 'none';
119 relativeContainer.style.display = 'block';
120 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
121
122 reset();
123 }());
124
125 (function() {
126 debug('<br>Dialog should lose centering when removed from the document.');
127
128 dialog.showModal();
129 dialog.remove();
130 relativeContainer.appendChild(dialog);
131 shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundin gClientRect().top');
132
133 reset();
134 }());
135
136 (function() {
137 debug('<br>Dialog\'s specified position should survive after close() and sho wModal().');
138
139 dialog.showModal();
140 dialog.style.top = '0px';
141 expectedTop = dialog.getBoundingClientRect().top;
142 dialog.close();
143 dialog.showModal();
144 shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
145
146 dialog.style.top = 'auto';
147 reset();
148 }());
149
150 (function() {
151 debug('<br>Dialog should be recentered if showModal() is called after removi ng \'open\'.');
152
153 dialog.showModal();
154 dialog.removeAttribute('open');
155 window.scroll(0, window.scrollY * 2);
156 dialog.showModal();
157 checkCentered(dialog);
158
159 reset();
160 }());
161
162 (function() {
163 debug('<br>Dialog should not be centered if showModal() was called when an a ncestor had display \'none\'.');
164
165 dialog.remove();
166 absoluteContainer.appendChild(dialog);
167 absoluteContainer.style.display = 'none';
168 dialog.showModal();
169 absoluteContainer.style.display = 'block';
170 // Since dialog's containing block is the ICB, it's statically positioned af ter <body>.
171 shouldBe('dialog.getBoundingClientRect().top', 'document.body.getBoundingCli entRect().bottom');
172 reset();
173 }());
174
175 (function() {
176 debug('<br>A dialog with specified \'top\' should be positioned as usual');
177 offset = 50;
178 dialog.style.top = offset + 'px';
179 dialog.showModal();
180 shouldBe('dialog.getBoundingClientRect().top + window.scrollY', 'offset');
181 dialog.style.top = 'auto';
182 reset();
183 }());
184
185 (function() {
186 debug('<br>A dialog with specified \'bottom\' should be positioned as usual' );
187 offset = 50;
188 dialog.style.bottom = offset + 'px';
189 dialog.showModal();
190 shouldBe('dialog.getBoundingClientRect().bottom + window.scrollY', 'window.i nnerHeight - offset');
191 dialog.style.bottom = 'auto';
192 reset();
193 }());
194 </script>
195 </body>
196 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/dom/HTMLDialogElement/abspos-dialog-layout-expected.txt » ('j') | LayoutTests/fast/dom/HTMLDialogElement/non-modal-dialog-layout.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698