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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html

Issue 2080643002: [css-grid] Implement repeat(auto-fit) (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Patch for landing v3 Created 4 years, 5 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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <!-- 2 <!--
3 Any copyright is dedicated to the Public Domain. 3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/ 4 http://creativecommons.org/publicdomain/zero/1.0/
5 --> 5 -->
6 <html><head> 6 <html><head>
7 <meta charset="utf-8"> 7 <meta charset="utf-8">
8 <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title> 8 <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title>
9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/sh ow_bug.cgi?id=1118820"> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/sh ow_bug.cgi?id=1118820">
10 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-f ill"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-f ill">
(...skipping 16 matching lines...) Expand all
27 padding-top: 3px; 27 padding-top: 3px;
28 padding-bottom: 2px; 28 padding-bottom: 2px;
29 } 29 }
30 30
31 .r0 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d]; } 31 .r0 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d]; }
32 .r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; } 32 .r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
33 .r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; } 33 .r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
34 .r02 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e]; } 34 .r02 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e]; }
35 .r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; } 35 .r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
36 .r03 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e] 30px [f ]; } 36 .r03 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e] 30px [f ]; }
37 .ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] auto [f]; } 37 .ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 10px [f]; }
38 38
39 fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; } 39 fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; }
40 fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; } 40 fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
41 fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; } 41 fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
42 fit .r02 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e]; } 42 fit .r02 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e]; }
43 fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30 px [f]; } 43 fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30 px [f]; }
44 fit .r03 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e] 30px [f]; } 44 fit .r03 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e] 30px [f]; }
45 fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] au to [f]; } 45 fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 10 px [f]; }
46 46
47 .w100 { height: 100px; } 47 .w100 { height: 100px; }
48 .w3 { height: 3px; } 48 .w3 { height: 3px; }
49 .w20 { height: 20px; } 49 .w20 { height: 20px; }
50 .w50 { height: 50px; } 50 .w50 { height: 50px; }
51 .w80 { height: 80px; } 51 .w80 { height: 80px; }
52 .mw100 { min-height: 100px; } 52 .mw100 { min-height: 100px; }
53 .mw3 { height: 3px; } 53 .mw3 { height: 3px; }
54 .mw20 { height: 20px; } 54 .mw20 { height: 20px; }
55 .mw50 { min-height: 50px; } 55 .mw50 { min-height: 50px; }
(...skipping 23 matching lines...) Expand all
79 grid-row: auto / c -1; 79 grid-row: auto / c -1;
80 } 80 }
81 81
82 x:first-child { 82 x:first-child {
83 background: lime; 83 background: lime;
84 } 84 }
85 x:last-child { 85 x:last-child {
86 background: blue; 86 background: blue;
87 } 87 }
88 88
89 fill,fit {
90 float: left;
91 height: 400px;
92 }
93 </style> 89 </style>
94 </head> 90 </head>
95 <body> 91 <body>
96 92
97 <fill> 93 <fill>
98 94
99 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div> 95 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
100 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div> 96 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
101 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> 97 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
102 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div> 98 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
(...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after
223 <div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></d iv> 219 <div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></d iv>
224 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 220 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
225 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 221 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
226 222
227 <div class="grid w r3" style="min-height:0"><a></a><b></b></div> 223 <div class="grid w r3" style="min-height:0"><a></a><b></b></div>
228 <div class="grid w r3" style="height:0"><a></a><b></b></div> 224 <div class="grid w r3" style="height:0"><a></a><b></b></div>
229 <div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div> 225 <div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
230 <div class="grid w r3" style="max-height:0"><a></a><b></b></div> 226 <div class="grid w r3" style="max-height:0"><a></a><b></b></div>
231 <div class="grid w r03"><a></a><b></b></div> 227 <div class="grid w r03"><a></a><b></b></div>
232 228
233
234 </fill> 229 </fill>
235 230
236 <!-- TODO(svillar): uncomment these tests when enabling auto-fit. --> 231 <!-- The original 005 test from Mozilla had also tests for auto-fit. They were m oved to part-2 as it
237 <!-- <fit> 232 is not possible to fit all the contents in the viewport without scroll (req uired by reftests). -->
238
239 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
240 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
241 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
242 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
243 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
244 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
245 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
246 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
247 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
248 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
249 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
250 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
251
252 <br clear="all">
253 <br clear="all">
254
255 <div class="grid r1 w w20"><a></a><b></b></div>
256 <div class="grid r1 w w3"><a></a><b></b></div>
257 <div class="grid r1 w xw20"><a></a><b></b></div>
258 <div class="grid r1 w xw3"><a></a><b></b></div>
259 <div class="grid r1 w mw20"><a></a><b></b></div>
260 <div class="grid r1 w mw3"><a></a><b></b></div>
261 <div class="grid r1 w w20 xw3"><a></a><b></b></div>
262 <div class="grid r1 w w3 mw20"><a></a><b></b></div>
263 <div class="grid r1 w w3 mw3"><a></a><b></b></div>
264 <div class="grid r1 w xw20"><a></a><b></b></div>
265 <div class="grid r1 w xw3 mw20"><a></a><b></b></div>
266 <div class="grid r1 w mw20"><a></a><b></b></div>
267
268 <div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
269 <div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></ div>
270 <div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b ></b><x></x></div>
271 <div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
272 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
273 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
274
275 <div class="grid w r1" style="min-height:0"><a></a><b></b></div>
276 <div class="grid w r1" style="height:0"><a></a><b></b></div>
277 <div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
278 <div class="grid w r1" style="max-height:0"><a></a><b></b></div>
279 <div class="grid w r0"><a></a><b></b></div>
280 <div class="grid w ra"><a></a><b></b></div>
281
282 <br clear="all">
283 <br clear="all">
284
285 <div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div>
286 <div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div>
287 <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
288 <div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div>
289 <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
290 <div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div>
291 <div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
292 <div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
293 <div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
294 <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
295 <div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
296 <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
297
298 <br clear="all">
299 <br clear="all">
300
301 <div class="grid r2 w w20"><a></a><b></b></div>
302 <div class="grid r2 w w3"><a></a><b></b></div>
303 <div class="grid r2 w xw20"><a></a><b></b></div>
304 <div class="grid r2 w xw3"><a></a><b></b></div>
305 <div class="grid r2 w mw20"><a></a><b></b></div>
306 <div class="grid r2 w mw3"><a></a><b></b></div>
307 <div class="grid r2 w w20 xw3"><a></a><b></b></div>
308 <div class="grid r2 w w3 mw20"><a></a><b></b></div>
309 <div class="grid r2 w w3 mw3"><a></a><b></b></div>
310 <div class="grid r2 w xw20"><a></a><b></b></div>
311 <div class="grid r2 w xw3 mw20"><a></a><b></b></div>
312 <div class="grid r2 w mw20"><a></a><b></b></div>
313
314 <div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
315 <div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></ div>
316 <div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b ></b><x></x></div>
317 <div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
318 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
319 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
320
321 <div class="grid w r2" style="min-height:0"><a></a><b></b></div>
322 <div class="grid w r2" style="height:0"><a></a><b></b></div>
323 <div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div>
324 <div class="grid w r2" style="max-height:0"><a></a><b></b></div>
325 <div class="grid w r02"><a></a><b></b></div>
326
327
328 <br clear="all">
329 <br clear="all">
330
331 <div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div>
332 <div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div>
333 <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
334 <div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div>
335 <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
336 <div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
337 <div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
338 <div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
339 <div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
340 <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
341 <div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
342 <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
343
344 <br clear="all">
345 <br clear="all">
346
347 <div class="grid r3 w w20"><a></a><b></b></div>
348 <div class="grid r3 w w3"><a></a><b></b></div>
349 <div class="grid r3 w xw20"><a></a><b></b></div>
350 <div class="grid r3 w xw3"><a></a><b></b></div>
351 <div class="grid r3 w mw20"><a></a><b></b></div>
352 <div class="grid r3 w mw3"><a></a><b></b></div>
353 <div class="grid r3 w w20 xw3"><a></a><b></b></div>
354 <div class="grid r3 w w3 mw20"><a></a><b></b></div>
355 <div class="grid r3 w w3 mw3"><a></a><b></b></div>
356 <div class="grid r3 w xw20"><a></a><b></b></div>
357 <div class="grid r3 w xw3 mw20"><a></a><b></b></div>
358 <div class="grid r3 w mw20"><a></a><b></b></div>
359
360 <div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
361 <div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></ div>
362 <div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b ></b><x></x></div>
363 <div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
364 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
365 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
366
367 <div class="grid w r3" style="min-height:0"><a></a><b></b></div>
368 <div class="grid w r3" style="height:0"><a></a><b></b></div>
369 <div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
370 <div class="grid w r3" style="max-height:0"><a></a><b></b></div>
371 <div class="grid w r03"><a></a><b></b></div>
372
373
374 </fit> -->
375
376 233
377 </body> 234 </body>
378 </html> 235 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698