XMLHttpRequest should not prevent entering the back/forward cache
[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 .gridFlexContent {
6     grid-template-columns: 50px;
7     grid-template-rows: 1fr 1fr;
8 }
9 .gridZeroFlexContent {
10     grid-template-columns: 50px;
11     grid-template-rows: minmax(auto, 0px);
12 }
13 .gridMaxFlexContent {
14     grid-template-columns: 50px;
15     grid-template-rows: minmax(30px, 2fr);
16 }
17 .gridTwoMaxFlexContent {
18     grid-template-columns: 50px;
19     grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
20 }
21 .gridTwoDoubleMaxFlexContent {
22     grid-template-columns: 50px;
23     grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
24 }
25 .gridRespectBaseSize {
26     grid-template-columns: 50px;
27     grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
28 }
29 .gridRespectProportions {
30     grid-template-columns: 50px;
31     grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
32 }
33 .gridRespectBaseSizeProportions {
34     grid-template-columns: 50px;
35     grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
36 }
37 .gridRespectBaseSizeBeforeProportions {
38     grid-template-columns: 50px;
39     grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
40 }
41 .thirdRowFirstColumn {
42     background-color: yellow;
43     grid-column: 1;
44     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 gridFlexContent">
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 gridFlexContent" style="height: 100%;">
60         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
61     </div>
62 </div>
63
64 <div style="height: 0px; position: relative;">
65     <div class="grid gridFlexContent">
66         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X</div>
67         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
68     </div>
69 </div>
70
71 <div style="height: 0px; position: relative;">
72     <div class="grid gridFlexContent" style="height: 100%;">
73         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20">X<br>X</div>
74         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="20" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
75     </div>
76 </div>
77
78 <div style="height: 0px">
79     <div class="grid gridZeroFlexContent">
80         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
81     </div>
82 </div>
83
84 <!-- Allow the extra logical space distribution to occur. -->
85 <div style="width: 10px; height: 40px">
86     <div class="grid gridFlexContent">
87         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
88     </div>
89 </div>
90
91 <div style="width: 10px; height: 40px">
92     <div class="grid gridFlexContent" style="height: 100%;">
93         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
94     </div>
95 </div>
96
97 <div style="width: 10px; height: 40px; position: relative">
98     <div class="grid gridFlexContent">
99         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">X<br>X<br>X</div>
100         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40">X<br>X<br>X<br>X</div>
101     </div>
102 </div>
103
104 <div style="width: 10px; height: 40px; position: relative">
105     <div class="grid gridFlexContent" style="height: 100%;">
106         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
107         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="40">X<br>X<br>X<br>X</div>
108     </div>
109 </div>
110
111 <div style="width: 10px; height: 100px;">
112     <div class="grid gridFlexContent">
113         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
114     </div>
115 </div>
116
117 <div style="width: 10px; height: 100px;">
118     <div class="grid gridFlexContent" style="height: 100%;">
119         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
120     </div>
121 </div>
122
123 <div style="width: 10px; height: 100px; position: relative;">
124     <div class="grid gridFlexContent">
125         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">X<br>X<br>X</div>
126         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40">X<br>X<br>X<br>X</div>
127     </div>
128 </div>
129
130 <div style="width: 10px; height: 100px; position: relative;">
131     <div class="grid gridFlexContent" style="height: 100%;">
132         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">X<br>X<br>X</div>
133         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">X<br>X<br>X<br>X</div>
134     </div>
135 </div>
136
137
138 <div class="constrainedContainer">
139     <div class="grid gridMaxFlexContent">
140         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
141     </div>
142 </div>
143
144 <!-- Allow the extra logical space distribution to occur. -->
145 <div style="width: 10px; height: 40px">
146     <div class="grid gridMaxFlexContent" style="height: 100%;">
147         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
148     </div>
149 </div>
150
151 <div style="width: 10px; height: 40px">
152     <div class="grid gridMaxFlexContent">
153         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
154     </div>
155 </div>
156
157 <div style="width: 10px; height: 100px;">
158     <div class="grid gridMaxFlexContent" style="height: 100%;">
159         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
160     </div>
161 </div>
162
163 <div style="width: 10px; height: 100px;">
164     <div class="grid gridMaxFlexContent">
165         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
166     </div>
167 </div>
168
169 <div class="constrainedContainer">
170     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
171         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
172         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
173     </div>
174 </div>
175
176 <div class="constrainedContainer">
177     <div class="grid gridTwoMaxFlexContent">
178         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
179         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
180     </div>
181 </div>
182
183 <!-- Allow the extra logical space distribution to occur. -->
184 <div style="width: 10px; height: 60px">
185     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
186         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
187         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
188     </div>
189 </div>
190
191 <div style="width: 10px; height: 60px">
192     <div class="grid gridTwoMaxFlexContent">
193         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
194         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
195     </div>
196 </div>
197
198 <div style="width: 10px; height: 120px;">
199     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
200         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
201         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
202     </div>
203 </div>
204
205 <div style="width: 10px; height: 120px;">
206     <div class="grid gridTwoMaxFlexContent">
207         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
208         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
209     </div>
210 </div>
211
212 <div class="constrainedContainer">
213     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
214         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
215         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
216     </div>
217 </div>
218
219 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
220 <div class="constrainedContainer">
221     <div class="grid gridTwoDoubleMaxFlexContent">
222         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
223         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
224     </div>
225 </div>
226
227 <!-- Allow the extra logical space distribution to occur. -->
228 <div style="width: 10px; height: 60px">
229     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
230         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div>
231         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div>
232     </div>
233 </div>
234
235 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
236 <div style="width: 10px; height: 60px">
237     <div class="grid gridTwoDoubleMaxFlexContent">
238         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
239         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
240     </div>
241 </div>
242
243 <div style="width: 10px; height: 120px;">
244     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
245         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div>
246         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div>
247     </div>
248 </div>
249
250 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
251 <div style="width: 10px; height: 120px;">
252     <div class="grid gridTwoDoubleMaxFlexContent">
253         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
254         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
255     </div>
256 </div>
257
258 <!-- Flex track lengths must be proportional to their flex factors.. -->
259 <div style="width: 10px; height: 275px;">
260     <div class="grid gridRespectProportions" style="height: 100%;">
261         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
262         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
263         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
264     </div>
265 </div>
266
267 <div style="width: 10px; height: 275px;">
268     <div class="grid gridRespectProportions">
269         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
270         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div>
271         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
272     </div>
273 </div>
274
275 <!-- Flex track lengths must be proportional but still respecting their base sizes. -->
276 <div style="width: 10px; height: 350px;">
277     <div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
278         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
279         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
280         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
281     </div>
282 </div>
283
284 <div style="width: 10px; height: 350px;">
285     <div class="grid gridRespectBaseSizeProportions">
286         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
287         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
288         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
289     </div>
290 </div>
291
292 <!-- Not enough space to repsect proportions, because minTrackBreadh it's a harder requirement -->
293 <div style="width: 10px; height: 275px;">
294     <div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;">
295         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
296         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
297         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
298     </div>
299 </div>
300
301 <div style="width: 10px; height: 275px;">
302     <div class="grid gridRespectBaseSizeBeforeProportions">
303         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
304         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
305         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
306     </div>
307 </div>
308
309 </body>
310 </html>