f2b3a6f9eb326ce3a5dcfbab55417d0edcff353a
[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">
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 bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
155         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
156         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
157         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
158         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
159     </div>
160 </div>
161
162 <!-- Allow the extra logical space distribution to occur. -->
163 <div style="width: 50px; height: 60px">
164     <div class="grid gridMinMaxMin">
165         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX</div>
166         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
167         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
168     </div>
169 </div>
170
171 <div style="width: 50px; height: 60px">
172     <div class="grid gridMinMaxMin">
173         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
174         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
175         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
176         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="30"></div>
177         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="30"></div>
178     </div>
179 </div>
180
181 <div class="unconstrainedContainer">
182     <div class="grid gridMinMaxMin">
183         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
184         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
185         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
186     </div>
187 </div>
188
189 <div class="unconstrainedContainer">
190     <div class="grid gridMinMaxMin">
191         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX 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 class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
195         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
196     </div>
197 </div>
198
199 <div class="constrainedContainer">
200     <div class="grid gridMinMaxMax">
201         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="90">XXXXX XXXXX XXXXX</div>
202         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
203         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
204     </div>
205 </div>
206
207 <div class="constrainedContainer">
208     <div class="grid gridMinMaxMax">
209         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="90">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="40"></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="40"></div>
214     </div>
215 </div>
216
217 <!-- Allow the extra logical space distribution to occur. -->
218 <div style="width: 50px; height: 60px">
219     <div class="grid gridMinMaxMax">
220         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="90">XXXXX XXXXX XXXXX</div>
221         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
222         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
223     </div>
224 </div>
225
226 <div style="width: 50px; height: 60px">
227     <div class="grid gridMinMaxMax">
228         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="90">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
229         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
230         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
231         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
232         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40"></div>
233     </div>
234 </div>
235
236 <div class="unconstrainedContainer">
237     <div class="grid gridMinMaxMax">
238         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="90">XXXXX XXXXX XXXXX</div>
239         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
240         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
241     </div>
242 </div>
243
244 <div class="unconstrainedContainer">
245     <div class="grid gridMinMaxMax">
246         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="90">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
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="40"></div>
249         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
250         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40"></div>
251     </div>
252 </div>
253
254 </body>
255 </html>