[css-grid] Implement fit-content track size
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / fit-content-rows-expected.html
1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet">
3 <style>
4 .grid {
5     justify-content: start;
6     align-content: start;
7     height: 100px;
8     width: 40px;
9     position: relative;
10     padding-left: 10px;
11     margin-right: 5px;
12     grid-row-gap: 5px;
13     float: left;
14 }
15
16 .fc0 { grid-template-rows: minmax(auto, 0px);}
17 .fc40 { grid-template-rows: minmax(auto, 40px); }
18 .fc80 { grid-template-rows: minmax(auto, 80px); }
19 .fc110 { grid-template-rows: auto; }
20
21 .fc0x2 { grid-template-rows: repeat(2, minmax(auto, 0px));}
22 .fc40x2 { grid-template-rows: repeat(2, minmax(auto, 40px)); }
23 .fc80x2 { grid-template-rows: repeat(2, minmax(auto, 80px)); }
24 .fc110x2 { grid-template-rows: auto auto; }
25
26 .fc0p { grid-template-rows: minmax(auto, 0%); }
27 .fc30p { grid-template-rows: minmax(auto, 30px); }
28 .fc90p { grid-template-rows: minmax(auto, 90px); }
29 .fc110p { grid-template-rows: auto; }
30
31 .fc0px2 { grid-template-rows: repeat(2, minmax(auto, 0%)); }
32 .fc30px2 { grid-template-rows: repeat(2, minmax(auto, 30px)); }
33 .fc90px2 { grid-template-rows: repeat(2, minmax(auto, 90px)); }
34 .fc110px2 { grid-template-rows: auto auto; }
35
36 .item {
37     font: 10px/1 Ahem;
38     background: cyan;
39 }
40
41 .spanningItem {
42     font: 10px/1 Ahem;
43     grid-row: 1 / -1;
44     grid-column: 2;
45     background: salmon;
46 }
47
48 .test {
49     position: absolute;
50     left: 0; top: 0; bottom: 0;
51     width: 5px;
52     background: purple;
53 }
54 .test:nth-child(2n) { background: orange; }
55
56 .firstRow { grid-row: 1 / 2; }
57 .secondRow { grid-row: 2 / 3; }
58 .thirdRow { grid-row: 3 / 4; }
59
60 div.grid > div { -webkit-writing-mode: vertical-lr; }
61
62 </style>
63
64 <p>This test checks that 'fit-content()' works as expected, i.e., it's similar to 'auto' ('minmax(auto, -webkit-max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater that the 'auto' minimum).</p>
65
66 <div class="grid fc0">
67     <div class="item">XXX</div>
68     <div class="test firstRow"></div>
69 </div>
70
71 <div class="grid fc0x2">
72     <div class="item">XXX</div>
73     <div class="spanningItem">XXX</div>
74     <div class="test firstRow"></div>
75     <div class="test secondRow"></div>
76 </div>
77
78 <div class="grid fc40">
79     <div class="item">XXX XXX</div>
80     <div class="test firstRow"></div>
81 </div>
82
83 <div class="grid" style="grid-template-rows: auto auto;">
84     <div class="spanningItem">XXX XXX</div>
85     <div class="test firstRow"></div>
86     <div class="test secondRow"></div>
87 </div>
88
89 <div class="grid" style="grid-template-rows: minmax(auto, 40px) auto;">
90     <div class="item">XXX XXX</div>
91     <div class="spanningItem">XXX XXX</div>
92     <div class="test firstRow"></div>
93     <div class="test secondRow"></div>
94 </div>
95
96 <div class="grid fc80">
97     <div class="item">XXX XXX XXX</div>
98     <div class="test firstRow"></div>
99 </div>
100
101 <div class="grid fc80x2">
102     <div class="spanningItem">XXX XXX XXX</div>
103     <div class="test firstRow"></div>
104     <div class="test secondRow"></div>
105 </div>
106
107 <div class="grid" style="grid-template-rows: auto minmax(auto, 80px)">
108     <div class="item secondRow">XXX XXX XXX</div>
109     <div class="spanningItem">XXX XXX XXX</div>
110     <div class="test firstRow"></div>
111     <div class="test secondRow"></div>
112 </div>
113
114 <div class="grid" style="grid-template-rows: minmax(auto, 20px) 50%;">
115     <div class="spanningItem">XXX XX XXX</div>
116     <div class="test firstRow"></div>
117     <div class="test secondRow"></div>
118 </div>
119
120 <div class="grid" style="grid-template-rows: minmax(10px, 40px) minmax(auto, 40px);">
121     <div class="item">XXXXX</div>
122     <div class="spanningItem">XXX XX XXX</div>
123     <div class="test firstRow"></div>
124     <div class="test secondRow"></div>
125 </div>
126
127 <div class="grid" style="grid-template-rows: auto minmax(10%, 200px);">
128     <div class="item secondRow">XXXXX</div>
129     <div class="spanningItem">XXX XX XXX</div>
130     <div class="test firstRow"></div>
131     <div class="test secondRow"></div>
132 </div>
133
134 <br clear="all">
135 <br clear="all">
136
137 <div class="grid" style="grid-template-rows: minmax(auto, 40px) -webkit-max-content;">
138     <div class="spanningItem">XXX XX XXX</div>
139     <div class="test firstRow"></div>
140     <div class="test secondRow"></div>
141 </div>
142
143 <div class="grid" style="grid-template-rows: minmax(auto, 40px) -webkit-max-content;">
144     <div class="item">XXXXX</div>
145     <div class="spanningItem">XXX XX XXX</div>
146     <div class="test firstRow"></div>
147     <div class="test secondRow"></div>
148 </div>
149
150 <div class="grid" style="grid-template-rows: minmax(auto, 40px) -webkit-max-content;">
151     <div class="item secondRow">XXXXX</div>
152     <div class="spanningItem">XXX XX XXX</div>
153     <div class="test firstRow"></div>
154     <div class="test secondRow"></div>
155 </div>
156
157 <div class="grid" style="grid-template-rows: -webkit-min-content minmax(auto, 40px);">
158     <div class="spanningItem">XXX XX XXX</div>
159     <div class="test firstRow"></div>
160     <div class="test secondRow"></div>
161 </div>
162
163 <div class="grid" style="grid-template-rows: -webkit-min-content minmax(auto, 40px);">
164     <div class="item">XXXXX</div>
165     <div class="spanningItem">XXX XX XXX</div>
166     <div class="test firstRow"></div>
167     <div class="test secondRow"></div>
168 </div>
169
170 <div class="grid" style="grid-template-rows: -webkit-min-content minmax(auto, 40px);">
171     <div class="item secondRow">XXXXX</div>
172     <div class="spanningItem">XXX XX XXX</div>
173     <div class="test firstRow"></div>
174     <div class="test secondRow"></div>
175 </div>
176
177 <div class="grid" style="grid-template-rows: minmax(auto, 30px) -webkit-min-content -webkit-max-content">
178     <div class="spanningItem">XXX XX XXX</div>
179     <div class="test firstRow"></div>
180     <div class="test secondRow"></div>
181     <div class="test thirdRow"></div>
182 </div>
183
184 <div class="grid" style="grid-template-rows: -webkit-min-content minmax(auto, 30px) -webkit-max-content">
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: -webkit-min-content -webkit-max-content minmax(auto, 30px)">
192     <div class="spanningItem">XXX XX XXX</div>
193     <div class="test firstRow"></div>
194     <div class="test secondRow"></div>
195     <div class="test thirdRow"></div>
196 </div>
197
198 <div class="grid" style="grid-template-rows: minmax(auto, 30px) -webkit-min-content -webkit-max-content">
199     <div class="item" style="grid-row: 1">XXX XX</div>
200     <div class="spanningItem">XXX XX XXX</div>
201     <div class="test firstRow"></div>
202     <div class="test secondRow"></div>
203     <div class="test thirdRow"></div>
204 </div>
205
206 <div class="grid" style="grid-template-rows: -webkit-min-content minmax(auto, 30px) -webkit-max-content">
207     <div class="item" style="grid-row: 1">XXX XX</div>
208     <div class="spanningItem">XXX XX XXX</div>
209     <div class="test firstRow"></div>
210     <div class="test secondRow"></div>
211     <div class="test thirdRow"></div>
212 </div>
213
214 <div class="grid" style="grid-template-rows: -webkit-min-content -webkit-max-content minmax(auto, 30px)">
215     <div class="item" style="grid-row: 2">XXX XX</div>
216     <div class="spanningItem">XXX XX XXX</div>
217     <div class="test firstRow"></div>
218     <div class="test secondRow"></div>
219     <div class="test thirdRow"></div>
220 </div>
221
222 <br clear="all">
223 <br clear="all">
224
225 <div class="grid fc0p">
226     <div class="item">XXX</div>
227     <div class="test firstRow"></div>
228 </div>
229
230 <div class="grid fc0px2">
231     <div class="item">XXX</div>
232     <div class="spanningItem">XXX</div>
233     <div class="test firstRow"></div>
234     <div class="test secondRow"></div>
235 </div>
236
237 <div class="grid fc30p">
238     <div class="item">XX XX</div>
239     <div class="test firstRow"></div>
240 </div>
241
242 <div class="grid fc30px2">
243     <div class="spanningItem">XXX XXX</div>
244     <div class="test firstRow"></div>
245     <div class="test secondRow"></div>
246 </div>
247
248 <div class="grid fc30px2">
249     <div class="item secondRow">X X X</div>
250     <div class="spanningItem">XXX XXX</div>
251     <div class="test firstRow"></div>
252     <div class="test secondRow"></div>
253 </div>
254
255 <div class="grid fc90p">
256     <div class="item">XXX XXX XXX</div>
257     <div class="test firstRow"></div>
258 </div>
259
260 <div class="grid fc90px2">
261     <div class="spanningItem">XXX XXX XXX</div>
262     <div class="test firstRow"></div>
263     <div class="test secondRow"></div>
264 </div>
265
266 <div class="grid" style="grid-template-rows: auto minmax(auto, 90px)">
267     <div class="item secondRow">XXX XXX XXX</div>
268     <div class="spanningItem">XXX XXX XXX</div>
269     <div class="test firstRow"></div>
270     <div class="test secondRow"></div>
271 </div>
272
273 <br clear="all">
274 <br clear="all">
275
276 <div class="grid fc110">
277     <div class="item">XXX XXX</div>
278     <div class="test firstRow"></div>
279 </div>
280
281 <div class="grid fc110x2">
282     <div class="spanningItem">XXX XXX</div>
283     <div class="test firstRow"></div>
284     <div class="test secondRow"></div>
285 </div>
286
287 <div class="grid fc110x2">
288     <div class="item">XXX XXX</div>
289     <div class="spanningItem">XXX XXX</div>
290     <div class="test firstRow"></div>
291     <div class="test secondRow"></div>
292 </div>
293
294 <div class="grid" style="grid-template-rows: auto auto;">
295     <div class="spanningItem">XXX XXX</div>
296     <div class="test firstRow"></div>
297     <div class="test secondRow"></div>
298 </div>
299
300 <div class="grid" style="grid-template-rows: auto auto;">
301     <div class="item secondRow">XX</div>
302     <div class="spanningItem">XXX XXX</div>
303     <div class="test firstRow"></div>
304     <div class="test secondRow"></div>
305 </div>
306
307 <div class="grid" style="grid-template-rows: -webkit-max-content auto;">
308     <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
309     <div class="spanningItem">XXX XXX</div>
310     <div class="test firstRow"></div>
311     <div class="test secondRow"></div>
312 </div>
313
314 <div class="grid" style="grid-template-rows: auto -webkit-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>
320
321 <div class="grid" style="grid-template-rows: -webkit-max-content auto -webkit-max-content;">
322     <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
323     <div class="spanningItem">XXX XXX</div>
324     <div class="test firstRow"></div>
325     <div class="test secondRow"></div>
326     <div class="test thirdRow"></div>
327 </div>
328
329 <div class="grid" style="grid-template-rows: -webkit-min-content auto -webkit-min-content;">
330     <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
331     <div class="spanningItem">XXX XXX</div>
332     <div class="test firstRow"></div>
333     <div class="test secondRow"></div>
334     <div class="test thirdRow"></div>
335 </div>
336
337 <div class="grid" style="grid-template-rows: auto auto auto;">
338     <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
339     <div class="spanningItem">XXX XXX</div>
340     <div class="test firstRow"></div>
341     <div class="test secondRow"></div>
342     <div class="test thirdRow"></div>
343 </div>