third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html - Issue 1920173002: Reland [css-grid] Implement auto-repeat computation

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

Issue 1920173002: Reland [css-grid] Implement auto-repeat computation (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: 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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE HTML>

	2 <!--

	3 Any copyright is dedicated to the Public Domain.

	4 http://creativecommons.org/publicdomain/zero/1.0/

	5 -->

	6 <html><head>

	7 <meta charset="utf-8">

	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">

	10 <style type="text/css">

	11 html,body {

	12 color:black; background-color:white; font-size:16px; padding:0; margin:0;

	13 }

	14

	15 .grid {

	16 display: grid;

	17 float: left;

	18 position: relative;

	19 border: 1px solid;

	20 grid-auto-columns: 10px;

	21 grid-auto-rows: 10px;

	22 grid-auto-flow: column;

	23 grid-gap: 2px;

	24 margin-right: 2px;

	25 padding-top: 3px;

	26 }

	27 /* Original Mozilla tests set a fixed width for their grids, that's due to a bug they have computing

	28 repetitions with indefinite sizes. */

	29 .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; /width:34px;/ }

	30 .r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; /width:34px;/ }

	31 .r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; /width:34px;/ }

	32 .r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; /width:34px;/ }

	33

	34 .r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; /width :22px;/ }

	35 .r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; /width:22p x;/ }

	36 .r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; /width:22p x;/ }

	37

	38 .r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f] ; /width:10px;/ }

	39 .r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; /* width:10px;*/ }

	40 .r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; /* width:10px;*/ }

	41

	42 fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }

	43 fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }

	44 fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }

	45

	46 .w100 { height: 100px; }

	47 .w50 { height: 50px; }

	48 .w80 { height: 80px; }

	49 .mw100 { min-height: 100px; }

	50 .mw50 { min-height: 50px; }

	51 .mw80 { min-height: 80px; }

	52 .xw100 { max-height: 100px; }

	53 .xw50 { max-height: 50px; }

	54 .xw80 { max-height: 80px; }

	55 .float { float: left; }

	56

	57 wrap { float:left; height: 100px; }

	58

	59 x {

	60 width: 10px;

	61 background: grey;

	62 }

	63 a {

	64 position: absolute;

	65 left:0; top:0; bottom:0; width: 3px;

	66 background: black;

	67 grid-row: c / c -1;

	68 }

	69 b {

	70 position: absolute;

	71 right:0; top:0; bottom:0; width: 3px;

	72 background: brown;

	73 grid-row: auto / c -1;

	74 }

	75

	76 x:first-child {

	77 background: lime;

	78 }

	79 x:last-child {

	80 background: blue;

	81 }

	82

	83 </style>

	84 </head>

	85 <body>

	86

	87 <fill>

	88

	89 <wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	90 <wrap><div class="grid r14 float w100"><x></x><x></x><a></a><b></b><x></x></div> </wrap>

	91 <wrap><div class="grid r14 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap >

	92 <wrap><div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	93 <wrap><div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	94 <wrap><div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap >

	95 <wrap><div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap >

	96 <wrap><div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	97 <wrap><div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> </wrap>

	98 <wrap><div class="grid r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> </wrap>

	99 <wrap><div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

	100 <wrap><div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

	101

	102 <br clear="all">

	103 <br clear="all">

	104

	105 <wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	106 <wrap><div class="grid r23 float w100"><x></x><x></x><a></a><b></b><x></x></div> </wrap>

	107 <wrap><div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap >

	108 <wrap><div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	109 <wrap><div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	110 <wrap><div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap >

	111 <wrap><div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap >

	112 <wrap><div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	113 <wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	114 <wrap><div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> </wrap>

	115 <wrap><div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

	116 <wrap><div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

	117

	118 <br clear="all">

	119 <br clear="all">

	120

	121 <wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	122 <wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	123 <wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	124 <wrap><div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	125 <wrap><div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	126 <wrap><div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap >

	127 <wrap><div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap >

	128 <wrap><div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	129 <wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	130 <wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	131 <wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

	132 <wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

	133

	134 </fill>

	135

	136 <br clear="all">

	137 <br clear="all">

	138

	139 <!-- <fit>

	140

	141 <wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	142 <wrap><div class="grid r13 float w100"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

	143 <wrap><div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	144 <wrap><div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

	145 <wrap><div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

	146 <wrap><div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	147 <wrap><div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	148 <wrap><div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

	149 <wrap><div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

	150 <wrap><div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

	151 <wrap><div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x> </x></div></wrap>

	152 <wrap><div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x> </x></div></wrap>

	153

	154 <br clear="all">

	155 <br clear="all">

	156

	157 <wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	158 <wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	159 <wrap><div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	160 <wrap><div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

	161 <wrap><div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

	162 <wrap><div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	163 <wrap><div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	164 <wrap><div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

	165 <wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

	166 <wrap><div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

	167 <wrap><div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x> </x></div></wrap>

	168 <wrap><div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x> </x></div></wrap>

	169

	170 <br clear="all">

	171 <br clear="all">

	172

	173 <wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>

	174 <wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

	175 <wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

	176 <wrap><div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

	177 <wrap><div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

	178 <wrap><div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	179 <wrap><div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

	180 <wrap><div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

	181 <wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

	182 <wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

	183 <wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x>< /x></div></wrap>

	184 <wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x>< /x></div></wrap>

	185

	186 <br clear="all">

	187 <br clear="all">

	188

	189 </fit> -->

	190

	191

	192 </body>

	193 </html>

OLD	NEW