[CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks...
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / minmax-spanning-resolution-rows.html
1 <!DOCTYPE html>
2 <html>
3 <script>
4 if (window.testRunner)
5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
6 </script>
7 <link href="resources/grid.css" rel="stylesheet">
8 <style>
9 .gridAutoAutoContent {
10     -webkit-grid-template-columns: 50px 100px;
11     -webkit-grid-template-rows: auto auto;
12 }
13
14 .gridFixedAutoContent {
15     -webkit-grid-template-columns: 50px 100px;
16     -webkit-grid-template-rows: 10px auto;
17 }
18
19 .gridMinMaxMin {
20     -webkit-grid-template-columns: 50px 100px;
21     -webkit-grid-template-rows: minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 140px);
22 }
23
24 .gridMinMaxMax {
25     -webkit-grid-template-columns: 50px 100px;
26     -webkit-grid-template-rows: minmax(50px, -webkit-min-content) minmax(40px, -webkit-max-content);
27 }
28 </style>
29 <script src="../../resources/check-layout.js"></script>
30 <body onload="checkLayout('.grid');">
31
32 <p>Test that resolving tracks on spanning grid items works properly.</p>
33
34 <div class="constrainedContainer">
35     <div class="grid gridAutoAutoContent">
36         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
37         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
38         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
39     </div>
40 </div>
41
42 <div class="constrainedContainer">
43     <div class="grid gridAutoAutoContent">
44         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
45         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
46         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
47         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
48         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
49     </div>
50 </div>
51
52 <!-- Allow the extra logical space distribution to occur. -->
53 <div style="width: 50px; height: 60px">
54     <div class="grid gridAutoAutoContent">
55         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
56         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
57         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
58     </div>
59 </div>
60
61 <div style="width: 50px; height: 60px">
62     <div class="grid gridAutoAutoContent">
63         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
64         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
65         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
66         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
67         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
68     </div>
69 </div>
70
71 <div class="unconstrainedContainer">
72     <div class="grid gridAutoAutoContent">
73         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
74         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
75         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
76     </div>
77 </div>
78
79 <div class="unconstrainedContainer">
80     <div class="grid gridAutoAutoContent">
81         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
82         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
83         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
84         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
85         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
86     </div>
87 </div>
88
89 <div class="constrainedContainer">
90     <div class="grid gridFixedAutoContent">
91         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
92         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
93         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
94     </div>
95 </div>
96
97 <div class="constrainedContainer">
98     <div class="grid gridFixedAutoContent">
99         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
100         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
101         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
102         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="10"></div>
103         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="20"></div>
104     </div>
105 </div>
106
107 <!-- Allow the extra logical space distribution to occur. -->
108 <div style="width: 50px; height: 60px">
109     <div class="grid gridFixedAutoContent">
110         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
111         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
112         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
113     </div>
114 </div>
115
116 <div style="width: 50px; height: 60px">
117     <div class="grid gridFixedAutoContent">
118         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
119         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
120         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
121         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="10"></div>
122         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="20"></div>
123     </div>
124 </div>
125
126 <div class="unconstrainedContainer">
127     <div class="grid gridFixedAutoContent">
128         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
129         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
130         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
131     </div>
132 </div>
133
134 <div class="unconstrainedContainer">
135     <div class="grid gridFixedAutoContent">
136         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
137         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
138         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
139         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="10"></div>
140         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="20"></div>
141     </div>
142 </div>
143
144 <div class="constrainedContainer">
145     <div class="grid gridMinMaxMin" style="height: 100%">
146         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
147         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
148         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
149     </div>
150 </div>
151
152 <div class="constrainedContainer">
153     <div class="grid gridMinMaxMin">
154         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
155         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
156         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
157     </div>
158 </div>
159
160 <div class="constrainedContainer">
161     <div class="grid gridMinMaxMin" style="height: 100%">
162         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
163         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
164         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
165         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
166         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
167     </div>
168 </div>
169
170 <div class="constrainedContainer">
171     <div class="grid gridMinMaxMin">
172         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
173         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
174         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
175         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
176         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
177     </div>
178 </div>
179
180 <!-- Allow the extra logical space distribution to occur. -->
181 <div style="width: 50px; height: 60px">
182     <div class="grid gridMinMaxMin" style="height: 100%">
183         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX</div>
184         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
185         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
186     </div>
187 </div>
188
189 <div style="width: 50px; height: 60px">
190     <div class="grid gridMinMaxMin">
191         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
192         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
193         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
194     </div>
195 </div>
196
197 <div style="width: 50px; height: 60px">
198     <div class="grid gridMinMaxMin" style="height: 100%">
199         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
200         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
201         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
202         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="30"></div>
203         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="30"></div>
204     </div>
205 </div>
206
207 <div style="width: 50px; height: 60px">
208     <div class="grid gridMinMaxMin">
209         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
210         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
211         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
212         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
213         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
214     </div>
215 </div>
216
217 <div class="unconstrainedContainer">
218     <div class="grid gridMinMaxMin">
219         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
220         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
221         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
222     </div>
223 </div>
224
225 <div class="unconstrainedContainer">
226     <div class="grid gridMinMaxMin">
227         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
228         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
229         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
230         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
231         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
232     </div>
233 </div>
234
235 <div class="constrainedContainer">
236     <div class="grid gridMinMaxMax">
237         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="90">XXXXX XXXXX XXXXX</div>
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="40"></div>
240     </div>
241 </div>
242
243 <div class="constrainedContainer">
244     <div class="grid gridMinMaxMax">
245         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="90">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
246         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
247         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
248         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
249         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40"></div>
250     </div>
251 </div>
252
253 <!-- Allow the extra logical space distribution to occur. -->
254 <div style="width: 50px; height: 60px">
255     <div class="grid gridMinMaxMax">
256         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="90">XXXXX XXXXX XXXXX</div>
257         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
258         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
259     </div>
260 </div>
261
262 <div style="width: 50px; height: 60px">
263     <div class="grid gridMinMaxMax">
264         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="90">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
265         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
266         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
267         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
268         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40"></div>
269     </div>
270 </div>
271
272 <div class="unconstrainedContainer">
273     <div class="grid gridMinMaxMax">
274         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="90">XXXXX XXXXX XXXXX</div>
275         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
276         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
277     </div>
278 </div>
279
280 <div class="unconstrainedContainer">
281     <div class="grid gridMinMaxMax">
282         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="90">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
283         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
284         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
285         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
286         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40"></div>
287     </div>
288 </div>
289
290 </body>
291 </html>