[CSS Grid Layout] Flex tracks sizing alg must handle 0fr values
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / flex-content-resolution-rows.html
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5 .gridMinFlexContent {
6     -webkit-grid-template-columns: 50px;
7     -webkit-grid-template-rows: minmax(1fr, 50px);
8 }
9 .gridZeroFlexContent {
10     -webkit-grid-template-columns: 50px;
11     -webkit-grid-template-rows: minmax(1fr, 0px);
12 }
13 .gridMaxFlexContent {
14     -webkit-grid-template-columns: 50px;
15     -webkit-grid-template-rows: minmax(30px, 2fr);
16 }
17 .gridTwoMaxFlexContent {
18     -webkit-grid-template-columns: 50px;
19     -webkit-grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
20 }
21 .gridTwoDoubleMaxFlexContent {
22     -webkit-grid-template-columns: 50px;
23     -webkit-grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
24 }
25 .gridRespectBaseSize {
26     -webkit-grid-template-columns: 50px;
27     -webkit-grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
28 }
29 .gridRespectProportions {
30     -webkit-grid-template-columns: 50px;
31     -webkit-grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
32 }
33 .gridRespectBaseSizeProportions {
34     -webkit-grid-template-columns: 50px;
35     -webkit-grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
36 }
37 .gridRespectBaseSizeBeforeProportions {
38     -webkit-grid-template-columns: 50px;
39     -webkit-grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
40 }
41 .thirdRowFirstColumn {
42     background-color: yellow;
43     -webkit-grid-column: 1;
44     -webkit-grid-row: 3;
45 }
46 </style>
47 <script src="../../resources/check-layout.js"></script>
48 <body onload="checkLayout('.grid');">
49
50 <p>Test that resolving auto tracks on grid items works properly.</p>
51
52 <div style="height: 0px">
53     <div class="grid gridMinFlexContent" style="height: 100%">
54         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
55     </div>
56 </div>
57
58 <div style="height: 0px">
59     <div class="grid gridZeroFlexContent">
60         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
61     </div>
62 </div>
63
64 <div style="height: 0px">
65     <div class="grid gridMinFlexContent">
66         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
67     </div>
68 </div>
69
70 <!-- Allow the extra logical space distribution to occur. -->
71 <div style="width: 10px; height: 40px">
72     <div class="grid gridMinFlexContent" style="height: 100%">
73         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
74     </div>
75 </div>
76
77 <div style="width: 10px; height: 40px">
78     <div class="grid gridMinFlexContent">
79         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
80     </div>
81 </div>
82
83 <div style="width: 10px; height: 100px;">
84     <div class="grid gridMinFlexContent">
85         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
86     </div>
87 </div>
88
89
90 <div class="constrainedContainer">
91     <div class="grid gridMaxFlexContent">
92         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
93     </div>
94 </div>
95
96 <!-- Allow the extra logical space distribution to occur. -->
97 <div style="width: 10px; height: 40px">
98     <div class="grid gridMaxFlexContent" style="height: 100%;">
99         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
100     </div>
101 </div>
102
103 <div style="width: 10px; height: 40px">
104     <div class="grid gridMaxFlexContent">
105         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
106     </div>
107 </div>
108
109 <div style="width: 10px; height: 100px;">
110     <div class="grid gridMaxFlexContent" style="height: 100%;">
111         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
112     </div>
113 </div>
114
115 <div style="width: 10px; height: 100px;">
116     <div class="grid gridMaxFlexContent">
117         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
118     </div>
119 </div>
120
121 <div class="constrainedContainer">
122     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
123         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
124         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
125     </div>
126 </div>
127
128 <div class="constrainedContainer">
129     <div class="grid gridTwoMaxFlexContent">
130         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
131         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
132     </div>
133 </div>
134
135 <!-- Allow the extra logical space distribution to occur. -->
136 <div style="width: 10px; height: 60px">
137     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
138         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
139         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
140     </div>
141 </div>
142
143 <div style="width: 10px; height: 60px">
144     <div class="grid gridTwoMaxFlexContent">
145         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
146         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
147     </div>
148 </div>
149
150 <div style="width: 10px; height: 120px;">
151     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
152         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
153         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
154     </div>
155 </div>
156
157 <div style="width: 10px; height: 120px;">
158     <div class="grid gridTwoMaxFlexContent">
159         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
160         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
161     </div>
162 </div>
163
164 <div class="constrainedContainer">
165     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
166         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
167         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
168     </div>
169 </div>
170
171 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
172 <div class="constrainedContainer">
173     <div class="grid gridTwoDoubleMaxFlexContent">
174         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
175         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
176     </div>
177 </div>
178
179 <!-- Allow the extra logical space distribution to occur. -->
180 <div style="width: 10px; height: 60px">
181     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
182         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div>
183         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div>
184     </div>
185 </div>
186
187 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
188 <div style="width: 10px; height: 60px">
189     <div class="grid gridTwoDoubleMaxFlexContent">
190         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
191         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
192     </div>
193 </div>
194
195 <div style="width: 10px; height: 120px;">
196     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
197         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div>
198         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div>
199     </div>
200 </div>
201
202 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
203 <div style="width: 10px; height: 120px;">
204     <div class="grid gridTwoDoubleMaxFlexContent">
205         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
206         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
207     </div>
208 </div>
209
210 <!-- Flex track lengths must be proportional to their flex factors.. -->
211 <div style="width: 10px; height: 275px;">
212     <div class="grid gridRespectProportions" style="height: 100%;">
213         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
214         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
215         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
216     </div>
217 </div>
218
219 <div style="width: 10px; height: 275px;">
220     <div class="grid gridRespectProportions">
221         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
222         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div>
223         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
224     </div>
225 </div>
226
227 <!-- Flex track lengths must be proportional but still respecting their base sizes. -->
228 <div style="width: 10px; height: 350px;">
229     <div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
230         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
231         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
232         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
233     </div>
234 </div>
235
236 <div style="width: 10px; height: 350px;">
237     <div class="grid gridRespectBaseSizeProportions">
238         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
239         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
240         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
241     </div>
242 </div>
243
244 <!-- Not enough space to repsect proportions, because minTrackBreadh it's a harder requirement -->
245 <div style="width: 10px; height: 275px;">
246     <div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;">
247         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
248         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
249         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
250     </div>
251 </div>
252
253 <div style="width: 10px; height: 275px;">
254     <div class="grid gridRespectBaseSizeBeforeProportions">
255         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
256         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
257         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
258     </div>
259 </div>
260
261 </body>
262 </html>