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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment.html

Issue 1870623002: [css-grid] Fix positioned items with content alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Patch for landing Created 4 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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/grid.css" rel="stylesheet">
4 <link href="resources/grid-alignment.css" rel="stylesheet">
5 <style>
6
7 .grid {
8 grid-template-columns: 100px 50px;
9 grid-template-rows: 70px 30px;
10 width: 400px;
11 height: 200px;
12 margin: 5px;
13 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
14 position: relative;
15 }
16
17 .grid > div {
18 position: absolute;
19 width: 100%;
20 height: 100%;
21 background-color: lime;
22 }
23
24 .offsets {
25 left: 0;
26 top: 0;
27 }
28
29 </style>
30 <script src="../../resources/testharness.js"></script>
31 <script src="../../resources/testharnessreport.js"></script>
32 <script src="../../resources/check-layout-th.js"></script>
33 <body onload="checkLayout('.grid')">
34 <div id="log"></div>
35
36 <p>This test checks the behavior of the positioned items in a grid using content alignment.</p>
37
38 <div class="grid contentStart">
39 <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
40 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expec ted-height="70">
41 </div>
42 </div>
43
44 <div class="grid contentStart">
45 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
46 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expec ted-height="70">
47 </div>
48 </div>
49
50 <div class="grid contentCenter">
51 <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
52 data-offset-x="125" data-offset-y="50" data-expected-width="100" data-ex pected-height="70">
53 </div>
54 </div>
55
56 <div class="grid contentCenter">
57 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
58 data-offset-x="125" data-offset-y="50" data-expected-width="100" data-ex pected-height="70">
59 </div>
60 </div>
61
62 <div class="grid contentEnd">
63 <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
64 data-offset-x="250" data-offset-y="100" data-expected-width="100" data-e xpected-height="70">
65 </div>
66 </div>
67
68 <div class="grid contentEnd">
69 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
70 data-offset-x="250" data-offset-y="100" data-expected-width="100" data-e xpected-height="70">
71 </div>
72 </div>
73
74 <div class="grid contentSpaceBetween">
75 <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
76 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expec ted-height="70">
77 </div>
78 </div>
79
80 <div class="grid contentSpaceBetween">
81 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
82 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expec ted-height="70">
83 </div>
84 </div>
85
86 <div class="grid contentSpaceAround">
87 <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
88 data-offset-x="63" data-offset-y="25" data-expected-width="100" data-exp ected-height="70">
89 </div>
90 </div>
91
92 <div class="grid contentSpaceAround">
93 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
94 data-offset-x="63" data-offset-y="25" data-expected-width="100" data-exp ected-height="70">
95 </div>
96 </div>
97
98 <div class="grid contentSpaceEvenly">
99 <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
100 data-offset-x="83" data-offset-y="33" data-expected-width="100" data-exp ected-height="70">
101 </div>
102 </div>
103
104 <div class="grid contentSpaceEvenly">
105 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
106 data-offset-x="83" data-offset-y="33" data-expected-width="100" data-exp ected-height="70">
107 </div>
108 </div>
109
110 <div class="grid contentStart">
111 <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
112 data-offset-x="100" data-offset-y="70" data-expected-width="50" data-exp ected-height="30">
113 </div>
114 </div>
115
116 <div class="grid contentStart">
117 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
118 data-offset-x="100" data-offset-y="70" data-expected-width="50" data-exp ected-height="30">
119 </div>
120 </div>
121
122 <div class="grid contentCenter">
123 <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
124 data-offset-x="225" data-offset-y="120" data-expected-width="50" data-ex pected-height="30">
125 </div>
126 </div>
127
128 <div class="grid contentCenter">
129 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
130 data-offset-x="225" data-offset-y="120" data-expected-width="50" data-ex pected-height="30">
131 </div>
132 </div>
133
134 <div class="grid contentEnd">
135 <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
136 data-offset-x="350" data-offset-y="170" data-expected-width="50" data-ex pected-height="30">
137 </div>
138 </div>
139
140 <div class="grid contentEnd">
141 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
142 data-offset-x="350" data-offset-y="170" data-expected-width="50" data-ex pected-height="30">
143 </div>
144 </div>
145
146 <div class="grid contentSpaceBetween">
147 <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
148 data-offset-x="350" data-offset-y="170" data-expected-width="50" data-ex pected-height="30">
149 </div>
150 </div>
151
152 <div class="grid contentSpaceBetween">
153 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
154 data-offset-x="350" data-offset-y="170" data-expected-width="50" data-ex pected-height="30">
155 </div>
156 </div>
157
158 <div class="grid contentSpaceAround">
159 <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
160 data-offset-x="288" data-offset-y="145" data-expected-width="50" data-ex pected-height="30">
161 </div>
162 </div>
163
164 <div class="grid contentSpaceAround">
165 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
166 data-offset-x="288" data-offset-y="145" data-expected-width="50" data-ex pected-height="30">
167 </div>
168 </div>
169
170 <div class="grid contentSpaceEvenly">
171 <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
172 data-offset-x="267" data-offset-y="137" data-expected-width="50" data-ex pected-height="30">
173 </div>
174 </div>
175
176 <div class="grid contentSpaceEvenly">
177 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
178 data-offset-x="267" data-offset-y="137" data-expected-width="50" data-ex pected-height="30">
179 </div>
180 </div>
181
182 <div class="grid contentStart">
183 <div style="grid-column: auto / 2; grid-row: auto / 2;"
184 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expec ted-height="70">
185 </div>
186 </div>
187
188 <div class="grid contentStart">
189 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
190 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expec ted-height="70">
191 </div>
192 </div>
193
194 <div class="grid contentCenter">
195 <div style="grid-column: auto / 2; grid-row: auto / 2;"
196 data-offset-x="0" data-offset-y="0" data-expected-width="225" data-expec ted-height="120">
197 </div>
198 </div>
199
200 <div class="grid contentCenter">
201 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
202 data-offset-x="0" data-offset-y="0" data-expected-width="225" data-expec ted-height="120">
203 </div>
204 </div>
205
206 <div class="grid contentEnd">
207 <div style="grid-column: auto / 2; grid-row: auto / 2;"
208 data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expec ted-height="170">
209 </div>
210 </div>
211
212 <div class="grid contentEnd">
213 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
214 data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expec ted-height="170">
215 </div>
216 </div>
217
218 <div class="grid contentSpaceBetween">
219 <div style="grid-column: auto / 2; grid-row: auto / 2;"
220 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expec ted-height="70">
221 </div>
222 </div>
223
224 <div class="grid contentSpaceBetween">
225 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
226 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expec ted-height="70">
227 </div>
228 </div>
229
230 <div class="grid contentSpaceAround">
231 <div style="grid-column: auto / 2; grid-row: auto / 2;"
232 data-offset-x="0" data-offset-y="0" data-expected-width="163" data-expec ted-height="95">
233 </div>
234 </div>
235
236 <div class="grid contentSpaceAround">
237 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
238 data-offset-x="0" data-offset-y="0" data-expected-width="163" data-expec ted-height="95">
239 </div>
240 </div>
241
242 <div class="grid contentSpaceEvenly">
243 <div style="grid-column: auto / 2; grid-row: auto / 2;"
244 data-offset-x="0" data-offset-y="0" data-expected-width="183" data-expec ted-height="103">
245 </div>
246 </div>
247
248 <div class="grid contentSpaceEvenly">
249 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
250 data-offset-x="0" data-offset-y="0" data-expected-width="183" data-expec ted-height="103">
251 </div>
252 </div>
253
254 <div class="grid contentStart">
255 <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
256 data-offset-x="100" data-offset-y="70" data-expected-width="300" data-ex pected-height="130">
257 </div>
258 </div>
259
260 <div class="grid contentStart">
261 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
262 data-offset-x="100" data-offset-y="70" data-expected-width="300" data-ex pected-height="130">
263 </div>
264 </div>
265
266 <div class="grid contentCenter">
267 <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
268 data-offset-x="225" data-offset-y="120" data-expected-width="175" data-e xpected-height="80">
269 </div>
270 </div>
271
272 <div class="grid contentCenter">
273 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
274 data-offset-x="225" data-offset-y="120" data-expected-width="175" data-e xpected-height="80">
275 </div>
276 </div>
277
278 <div class="grid contentEnd">
279 <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
280 data-offset-x="350" data-offset-y="170" data-expected-width="50" data-ex pected-height="30">
281 </div>
282 </div>
283
284 <div class="grid contentEnd">
285 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
286 data-offset-x="350" data-offset-y="170" data-expected-width="50" data-ex pected-height="30">
287 </div>
288 </div>
289
290 <div class="grid contentSpaceBetween">
291 <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
292 data-offset-x="350" data-offset-y="170" data-expected-width="50" data-ex pected-height="30">
293 </div>
294 </div>
295
296 <div class="grid contentSpaceBetween">
297 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
298 data-offset-x="350" data-offset-y="170" data-expected-width="50" data-ex pected-height="30">
299 </div>
300 </div>
301
302 <div class="grid contentSpaceAround">
303 <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
304 data-offset-x="288" data-offset-y="145" data-expected-width="112" data-e xpected-height="55">
305 </div>
306 </div>
307
308 <div class="grid contentSpaceAround">
309 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
310 data-offset-x="288" data-offset-y="145" data-expected-width="112" data-e xpected-height="55">
311 </div>
312 </div>
313
314 <div class="grid contentSpaceEvenly">
315 <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
316 data-offset-x="267" data-offset-y="137" data-expected-width="133" data-e xpected-height="63">
317 </div>
318 </div>
319
320 <div class="grid contentSpaceEvenly">
321 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
322 data-offset-x="267" data-offset-y="137" data-expected-width="133" data-e xpected-height="63">
323 </div>
324 </div>
325
326 <div class="grid contentStart">
327 <div style="grid-column: auto / auto; grid-row: auto / auto;"
328 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
329 </div>
330 </div>
331
332 <div class="grid contentStart">
333 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto; "
334 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
335 </div>
336 </div>
337
338 <div class="grid contentCenter">
339 <div style="grid-column: auto / auto; grid-row: auto / auto;"
340 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
341 </div>
342 </div>
343
344 <div class="grid contentCenter">
345 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto; "
346 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
347 </div>
348 </div>
349
350 <div class="grid contentEnd">
351 <div style="grid-column: auto / auto; grid-row: auto / auto;"
352 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
353 </div>
354 </div>
355
356 <div class="grid contentEnd">
357 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto; "
358 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
359 </div>
360 </div>
361
362 <div class="grid contentSpaceBetween">
363 <div style="grid-column: auto / auto; grid-row: auto / auto;"
364 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
365 </div>
366 </div>
367
368 <div class="grid contentSpaceBetween">
369 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto; "
370 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
371 </div>
372 </div>
373
374 <div class="grid contentSpaceAround">
375 <div style="grid-column: auto / auto; grid-row: auto / auto;"
376 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
377 </div>
378 </div>
379
380 <div class="grid contentSpaceAround">
381 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto; "
382 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
383 </div>
384 </div>
385
386 <div class="grid contentSpaceEvenly">
387 <div style="grid-column: auto / auto; grid-row: auto / auto;"
388 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
389 </div>
390 </div>
391
392 <div class="grid contentSpaceEvenly">
393 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto; "
394 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expec ted-height="200">
395 </div>
396 </div>
397
398 </body>
399 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698