a1f83dc85af373a04ea4e38dd8dff1a04ae1c621
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-grid / grid-definition / grid-template-rows-fit-content-001-expected.html
1 <!DOCTYPE html>
2 <html lang=en>
3 <meta charset="utf-8">
4 <title>CSS Grid Layout Test: grid-template-rows fit-content() reference file</title>
5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
6 <link rel="stylesheet" href="../support/grid.css">
7 <meta name="flags" content="ahem">
8 <style>
9 .grid {
10   justify-content: start;
11   align-content: start;
12   height: 100px;
13   width: 40px;
14   position: relative;
15   padding-left: 10px;
16   margin-right: 5px;
17   grid-row-gap: 5px;
18   float: left;
19 }
20
21 .item {
22   font: 10px/1 Ahem;
23   background: cyan;
24 }
25
26 .spanningItem {
27   font: 10px/1 Ahem;
28   grid-row: 1 / -1;
29   grid-column: 2;
30   background: salmon;
31 }
32
33 .test {
34   position: absolute;
35   left: 0; top: 0; bottom: 0;
36   width: 5px;
37   background: purple;
38 }
39 .test:nth-child(2n) { background: orange; }
40
41 .firstRow { grid-row: 1 / 2; }
42 .secondRow { grid-row: 2 / 3; }
43 .thirdRow { grid-row: 3 / 4; }
44
45 div.grid > div { writing-mode: vertical-lr; }
46
47 </style>
48
49 <p>The test passes if it has the same output than the reference.</p>
50
51 <div class="grid" style="grid-template-rows: 30px;">
52   <div class="item">XXX</div>
53   <div class="test firstRow"></div>
54 </div>
55
56 <div class="grid" style="grid-template-rows: 30px 0px;">
57   <div class="item">XXX</div>
58   <div class="spanningItem">XXX</div>
59   <div class="test firstRow"></div>
60   <div class="test secondRow"></div>
61 </div>
62
63 <div class="grid" style="grid-template-rows: 40px;">
64   <div class="item">XXX XXX</div>
65   <div class="test firstRow"></div>
66 </div>
67
68 <div class="grid" style="grid-template-rows: 32.5px 32.5px;">
69   <div class="spanningItem">XXX XXX</div>
70   <div class="test firstRow"></div>
71   <div class="test secondRow"></div>
72 </div>
73
74 <div class="grid" style="grid-template-rows: 40px 25px;">
75   <div class="item">XXX XXX</div>
76   <div class="spanningItem">XXX XXX</div>
77   <div class="test firstRow"></div>
78   <div class="test secondRow"></div>
79 </div>
80
81 <div class="grid" style="grid-template-rows: 80px;">
82   <div class="item">XXX XXX XXX</div>
83   <div class="test firstRow"></div>
84 </div>
85
86 <div class="grid" style="grid-template-rows: 47.5px 47.5px;">
87   <div class="spanningItem">XXX XXX XXX</div>
88   <div class="test firstRow"></div>
89   <div class="test secondRow"></div>
90 </div>
91
92 <div class="grid" style="grid-template-rows: 25px 70px;">
93   <div class="item secondRow">XXX XXX XXX</div>
94   <div class="spanningItem">XXX XXX XXX</div>
95   <div class="test firstRow"></div>
96   <div class="test secondRow"></div>
97 </div>
98
99 <div class="grid" style="grid-template-rows: 20px 50px;">
100   <div class="spanningItem">XXX XX XXX</div>
101   <div class="test firstRow"></div>
102   <div class="test secondRow"></div>
103 </div>
104
105 <div class="grid" style="grid-template-rows: 40px 40px;">
106   <div class="item">XXXXX</div>
107   <div class="spanningItem">XXX XX XXX</div>
108   <div class="test firstRow"></div>
109   <div class="test secondRow"></div>
110 </div>
111
112 <div class="grid" style="grid-template-rows: 15px 80px;">
113   <div class="item secondRow">XXXXX</div>
114   <div class="spanningItem">XXX XX XXX</div>
115   <div class="test firstRow"></div>
116   <div class="test secondRow"></div>
117 </div>
118
119 <br clear="all">
120 <br clear="all">
121
122 <div class="grid" style="grid-template-rows: 12.5px 82.5px;">
123   <div class="spanningItem">XXX XX XXX</div>
124   <div class="test firstRow"></div>
125   <div class="test secondRow"></div>
126 </div>
127
128 <div class="grid" style="grid-template-rows: 50px 45px;">
129   <div class="item">XXXXX</div>
130   <div class="spanningItem">XXX XX XXX</div>
131   <div class="test firstRow"></div>
132   <div class="test secondRow"></div>
133 </div>
134
135 <div class="grid" style="grid-template-rows: 0px 95px;">
136   <div class="item secondRow">XXXXX</div>
137   <div class="spanningItem">XXX XX XXX</div>
138   <div class="test firstRow"></div>
139   <div class="test secondRow"></div>
140 </div>
141
142 <div class="grid" style="grid-template-rows: 12.5px 40px;">
143   <div class="spanningItem">XXX XX XXX</div>
144   <div class="test firstRow"></div>
145   <div class="test secondRow"></div>
146 </div>
147
148 <div class="grid" style="grid-template-rows: 50px 40px;">
149   <div class="item">XXXXX</div>
150   <div class="spanningItem">XXX XX XXX</div>
151   <div class="test firstRow"></div>
152   <div class="test secondRow"></div>
153 </div>
154
155 <div class="grid" style="grid-template-rows: 0px 50px;">
156   <div class="item secondRow">XXXXX</div>
157   <div class="spanningItem">XXX XX XXX</div>
158   <div class="test firstRow"></div>
159   <div class="test secondRow"></div>
160 </div>
161
162 <div class="grid" style="grid-template-rows: auto min-content max-content">
163   <div class="spanningItem">XXX XX XXX</div>
164   <div class="test firstRow"></div>
165   <div class="test secondRow"></div>
166   <div class="test thirdRow"></div>
167 </div>
168
169 <div class="grid" style="grid-template-rows: min-content auto max-content">
170   <div class="spanningItem">XXX XX XXX</div>
171   <div class="test firstRow"></div>
172   <div class="test secondRow"></div>
173   <div class="test thirdRow"></div>
174 </div>
175
176 <div class="grid" style="grid-template-rows: min-content max-content auto">
177   <div class="spanningItem">XXX XX XXX</div>
178   <div class="test firstRow"></div>
179   <div class="test secondRow"></div>
180   <div class="test thirdRow"></div>
181 </div>
182
183 <div class="grid" style="grid-template-rows: 30px 0px 60px;">
184   <div class="item" style="grid-row: 1">XXX XX</div>
185   <div class="spanningItem">XXX XX XXX</div>
186   <div class="test firstRow"></div>
187   <div class="test secondRow"></div>
188   <div class="test thirdRow"></div>
189 </div>
190
191 <div class="grid" style="grid-template-rows: 30px 0px 60px;">
192   <div class="item" style="grid-row: 1">XXX XX</div>
193   <div class="spanningItem">XXX XX XXX</div>
194   <div class="test firstRow"></div>
195   <div class="test secondRow"></div>
196   <div class="test thirdRow"></div>
197 </div>
198
199 <div class="grid" style="grid-template-rows: 0px 90px 0px;">
200   <div class="item" style="grid-row: 2">XXX XX</div>
201   <div class="spanningItem">XXX XX XXX</div>
202   <div class="test firstRow"></div>
203   <div class="test secondRow"></div>
204   <div class="test thirdRow"></div>
205 </div>
206
207 <br clear="all">
208 <br clear="all">
209
210 <div class="grid" style="grid-template-rows: 30px;">
211   <div class="item">XXX</div>
212   <div class="test firstRow"></div>
213 </div>
214
215 <div class="grid" style="grid-template-rows: 30px 0px;">
216   <div class="item">XXX</div>
217   <div class="spanningItem">XXX</div>
218   <div class="test firstRow"></div>
219   <div class="test secondRow"></div>
220 </div>
221
222 <div class="grid" style="grid-template-rows: 30px;">
223   <div class="item">XX XX</div>
224   <div class="test firstRow"></div>
225 </div>
226
227 <div class="grid" style="grid-template-rows: 30px 30px;">
228   <div class="spanningItem">XXX XXX</div>
229   <div class="test firstRow"></div>
230   <div class="test secondRow"></div>
231 </div>
232
233 <div class="grid" style="grid-template-rows: 30px 30px;">
234   <div class="item secondRow">X X X</div>
235   <div class="spanningItem">XXX XXX</div>
236   <div class="test firstRow"></div>
237   <div class="test secondRow"></div>
238 </div>
239
240 <div class="grid" style="grid-template-rows: 90px;">
241   <div class="item">XXX XXX XXX</div>
242   <div class="test firstRow"></div>
243 </div>
244
245 <div class="grid" style="grid-template-rows: 47.5px 47.5px;">
246   <div class="spanningItem">XXX XXX XXX</div>
247   <div class="test firstRow"></div>
248   <div class="test secondRow"></div>
249 </div>
250
251 <div class="grid" style="grid-template-rows: 15px 80px;">
252   <div class="item secondRow">XXX XXX XXX</div>
253   <div class="spanningItem">XXX XXX XXX</div>
254   <div class="test firstRow"></div>
255   <div class="test secondRow"></div>
256 </div>
257
258 <br clear="all">
259 <br clear="all">
260
261 <div class="grid" style="grid-template-rows: 70px;">
262   <div class="item">XXX XXX</div>
263   <div class="test firstRow"></div>
264 </div>
265
266 <div class="grid" style="grid-template-rows: 32.5px 32.5px;">
267   <div class="spanningItem">XXX XXX</div>
268   <div class="test firstRow"></div>
269   <div class="test secondRow"></div>
270 </div>
271
272 <div class="grid" style="grid-template-rows: 70px 0px;">
273   <div class="item">XXX XXX</div>
274   <div class="spanningItem">XXX XXX</div>
275   <div class="test firstRow"></div>
276   <div class="test secondRow"></div>
277 </div>
278
279 <div class="grid" style="grid-template-rows: 32.5px 32.5px;">
280   <div class="spanningItem">XXX XXX</div>
281   <div class="test firstRow"></div>
282   <div class="test secondRow"></div>
283 </div>
284
285 <div class="grid" style="grid-template-rows: 45px 20px;">
286   <div class="item secondRow">XX</div>
287   <div class="spanningItem">XXX XXX</div>
288   <div class="test firstRow"></div>
289   <div class="test secondRow"></div>
290 </div>
291
292 <div class="grid" style="grid-template-rows: 92.5px 12.5px;">
293   <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
294   <div class="spanningItem">XXX XXX</div>
295   <div class="test firstRow"></div>
296   <div class="test secondRow"></div>
297 </div>
298
299 <div class="grid" style="grid-template-rows: 82.5px 12.5px;">
300   <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
301   <div class="spanningItem">XXX XXX</div>
302   <div class="test firstRow"></div>
303   <div class="test secondRow"></div>
304 </div>
305
306 <div class="grid" style="grid-template-rows: max-content auto max-content;">
307   <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
308   <div class="spanningItem">XXX XXX</div>
309   <div class="test firstRow"></div>
310   <div class="test secondRow"></div>
311   <div class="test thirdRow"></div>
312 </div>
313
314 <div class="grid" style="grid-template-rows: min-content auto min-content;">
315   <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
316   <div class="spanningItem">XXX XXX</div>
317   <div class="test firstRow"></div>
318   <div class="test secondRow"></div>
319   <div class="test thirdRow"></div>
320 </div>
321
322 <div class="grid" style="grid-template-rows: auto auto auto;">
323   <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
324   <div class="spanningItem">XXX XXX</div>
325   <div class="test firstRow"></div>
326   <div class="test secondRow"></div>
327   <div class="test thirdRow"></div>
328 </div>