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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.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
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>Reference: repeat(auto-fill/auto-fit)</title> 8 <title>Reference: 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 <style type="text/css"> 10 <style type="text/css">
(...skipping 18 matching lines...) Expand all
29 .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; } 29 .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
30 .r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } 30 .r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
31 .r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;} 31 .r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;}
32 .r01 a {grid-row-end:auto; } 32 .r01 a {grid-row-end:auto; }
33 .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } 33 .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
34 .r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } 34 .r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
35 .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; } 35 .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; }
36 .r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f] ; } 36 .r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f] ; }
37 .r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; } 37 .r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
38 .r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; } 38 .r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
39 /* This is a bug in the original Mozilla tests, auto is not allowed in <auto-tra ck-list> */ 39 .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
40 /* .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] auto [f]; } */
41 .ra { grid-template-rows: none; }
42 .r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] auto [f]; grid- gap:0; padding-bottom:4px;} 40 .r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] auto [f]; grid- gap:0; padding-bottom:4px;}
43 41
44 fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; } 42 fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
45 fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } 43 fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
46 fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } 44 fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
47 fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0 ;} 45 fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0 ;}
48 fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; } 46 fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
49 fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; } 47 fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; }
50 fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;} 48 fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;}
51 fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] auto [f]; } 49 fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
52 50
53 .w100 { height: 100px; } 51 .w100 { height: 100px; }
54 .w3 { height: 3px; } 52 .w3 { height: 3px; }
55 .w20 { height: 20px; } 53 .w20 { height: 20px; }
56 .w50 { height: 50px; } 54 .w50 { height: 50px; }
57 .w80 { height: 80px; } 55 .w80 { height: 80px; }
58 .mw100 { min-height: 100px; } 56 .mw100 { min-height: 100px; }
59 .mw3 { height: 3px; } 57 .mw3 { height: 3px; }
60 .mw20 { height: 20px; } 58 .mw20 { height: 20px; }
61 .mw50 { min-height: 50px; } 59 .mw50 { min-height: 50px; }
(...skipping 170 matching lines...) Expand 10 before | Expand all | Expand 10 after
232 230
233 <div class="grid w r30" style="min-height:0"><a></a><b></b></div> 231 <div class="grid w r30" style="min-height:0"><a></a><b></b></div>
234 <div class="grid w r30" style="height:0"><a></a><b></b></div> 232 <div class="grid w r30" style="height:0"><a></a><b></b></div>
235 <div class="grid w r30" style="min-height:0; height:0"><a></a><b></b></div> 233 <div class="grid w r30" style="min-height:0; height:0"><a></a><b></b></div>
236 <div class="grid w r30" style="max-height:0"><a></a><b></b></div> 234 <div class="grid w r30" style="max-height:0"><a></a><b></b></div>
237 <div class="grid w r003"><a></a><b></b></div> 235 <div class="grid w r003"><a></a><b></b></div>
238 236
239 237
240 </fill> 238 </fill>
241 239
242 <!-- <fit> 240 <!-- The original 005 test from Mozilla had also tests for auto-fit. They were m oved to part-2 as it
243 241 is not possible to fit all the contents in the viewport without scroll (req uired by reftests). -->
244 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
245 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
246 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
247 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
248 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
249 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
250 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
251 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
252 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
253 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
254 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
255 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
256
257 <br clear="all">
258 <br clear="all">
259
260 <div class="grid r01 w w20"><a></a><b></b></div>
261 <div class="grid r01 w w3"><a></a><b></b></div>
262 <div class="grid r01 w xw20"><a></a><b></b></div>
263 <div class="grid r01 w xw3"><a></a><b></b></div>
264 <div class="grid r01 w mw20"><a></a><b></b></div>
265 <div class="grid r01 w mw3"><a></a><b></b></div>
266 <div class="grid r01 w w20 xw3"><a></a><b></b></div>
267 <div class="grid r01 w w3 mw20"><a></a><b></b></div>
268 <div class="grid r01 w w3 mw3"><a></a><b></b></div>
269 <div class="grid r01 w xw20"><a></a><b></b></div>
270 <div class="grid r01 w xw3 mw20"><a></a><b></b></div>
271 <div class="grid r01 w mw20"><a></a><b></b></div>
272
273 <div class="grid r10" style="min-height:0"><x></x><x></x><a></a><b></b><x>< /x></div>
274 <div class="grid r10" style="height:0"><x></x><x></x><a></a><b></b><x></x>< /div>
275 <div class="grid r10" style="min-height:0; height:0"><x></x><x></x><a></a>< b></b><x></x></div>
276 <div class="grid r10" style="max-height:0"><x></x><x></x><a></a><b></b><x>< /x></div>
277 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
278 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
279
280 <div class="grid w r01" style="max-height:0"><a></a><b></b></div>
281 <div class="grid w r01" style="height:0"><a></a><b></b></div>
282 <div class="grid w r01" style="min-height:0; height:0"><a></a><b></b></div>
283 <div class="grid w r01" style="max-height:0"><a></a><b></b></div>
284 <div class="grid w r01" style="max-height:0"><a></a><b></b></div>
285 <div class="grid w r0a"><a></a><b></b></div>
286
287 <br clear="all">
288 <br clear="all">
289
290 <div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>
291 <div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>
292 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
293 <div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
294 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
295 <div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>
296 <div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
297 <div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
298 <div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
299 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
300 <div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
301 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
302
303 <br clear="all">
304 <br clear="all">
305
306 <div class="grid r02 w w20"><a></a><b></b></div>
307 <div class="grid r02 w w3"><a></a><b></b></div>
308 <div class="grid r02 w xw20"><a></a><b></b></div>
309 <div class="grid r02 w xw3"><a></a><b></b></div>
310 <div class="grid r02 w mw20"><a></a><b></b></div>
311 <div class="grid r02 w mw3"><a></a><b></b></div>
312 <div class="grid r02 w w20 xw3"><a></a><b></b></div>
313 <div class="grid r02 w w3 mw20"><a></a><b></b></div>
314 <div class="grid r02 w w3 mw3"><a></a><b></b></div>
315 <div class="grid r02 w xw20"><a></a><b></b></div>
316 <div class="grid r02 w xw3 mw20"><a></a><b></b></div>
317 <div class="grid r02 w mw20"><a></a><b></b></div>
318
319 <div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x>< /x></div>
320 <div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x>< /div>
321 <div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a>< b></b><x></x></div>
322 <div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x>< /x></div>
323 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
324 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
325
326 <div class="grid w r02" style="min-height:0"><a></a><b></b></div>
327 <div class="grid w r02" style="height:0"><a></a><b></b></div>
328 <div class="grid w r02" style="min-height:0; height:0"><a></a><b></b></div>
329 <div class="grid w r02" style="max-height:0"><a></a><b></b></div>
330 <div class="grid w r02"><a></a><b></b></div>
331
332
333 <br clear="all">
334 <br clear="all">
335
336 <div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>
337 <div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>
338 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
339 <div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>
340 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
341 <div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>
342 <div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
343 <div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
344 <div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
345 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
346 <div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
347 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
348
349 <br clear="all">
350 <br clear="all">
351
352 <div class="grid r03 w w20"><a></a><b></b></div>
353 <div class="grid r03 w w3"><a></a><b></b></div>
354 <div class="grid r03 w xw20"><a></a><b></b></div>
355 <div class="grid r03 w xw3"><a></a><b></b></div>
356 <div class="grid r03 w mw20"><a></a><b></b></div>
357 <div class="grid r03 w mw3"><a></a><b></b></div>
358 <div class="grid r03 w w20 xw3"><a></a><b></b></div>
359 <div class="grid r03 w w3 mw20"><a></a><b></b></div>
360 <div class="grid r03 w w3 mw3"><a></a><b></b></div>
361 <div class="grid r03 w xw20"><a></a><b></b></div>
362 <div class="grid r03 w xw3 mw20"><a></a><b></b></div>
363 <div class="grid r03 w mw20"><a></a><b></b></div>
364
365 <div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x ></x></div>
366 <div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x ></div>
367 <div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a ><b></b><x></x></div>
368 <div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x ></x></div>
369 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
370 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
371
372 <div class="grid w r003" style="min-height:0"><a></a><b></b></div>
373 <div class="grid w r03" style="height:0"><a></a><b></b></div>
374 <div class="grid w r03" style="min-height:0; height:0"><a></a><b></b></div>
375 <div class="grid w r03" style="max-height:0"><a></a><b></b></div>
376 <div class="grid w r003"><a></a><b></b></div>
377
378
379
380 </fit> -->
381
382 242
383 </body> 243 </body>
384 </html> 244 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698