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