[CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks...
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / flex-and-minmax-content-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 .gridMaxMaxContent {
10     -webkit-grid-template-columns: 50px;
11     -webkit-grid-template-rows: minmax(10px, -webkit-max-content) minmax(10px, 1fr);
12 }
13
14 .gridMinMinContent {
15     -webkit-grid-template-columns: 50px;
16     -webkit-grid-template-rows: minmax(10px, 1fr) minmax(-webkit-min-content, 50px);
17 }
18
19 .gridWithIntrinsicSizeBiggerThanFlex {
20     -webkit-grid-template-columns: 50px;
21     -webkit-grid-template-rows: minmax(-webkit-min-content, 0.5fr) minmax(18px, 2fr);
22 }
23
24 .gridShrinkBelowItemsIntrinsicSize {
25     -webkit-grid-template-columns: 50px;
26     -webkit-grid-template-rows: minmax(0px, 1fr) minmax(0px, 2fr);
27 }
28
29 .gridWithNonFlexingItems {
30     -webkit-grid-template-columns: 50px;
31     -webkit-grid-template-rows: 40px minmax(-webkit-min-content, 1fr) auto minmax(20px, 2fr);
32 }
33
34 .thirdRowFirstColumn {
35     -webkit-grid-column: 1;
36     -webkit-grid-row: 3;
37 }
38 .fourthRowFirstColumn {
39     -webkit-grid-column: 1;
40     -webkit-grid-row: 4;
41 }
42 </style>
43 <script src="../../resources/check-layout.js"></script>
44 <body onload="checkLayout('.grid');">
45
46 <p>Test that resolving auto tracks on grid items works properly.</p>
47
48 <div class="constrainedContainer">
49     <div class="grid gridMaxMaxContent">
50         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
51         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
52     </div>
53 </div>
54
55 <!-- Allow the extra logical space distribution to occur. -->
56 <div style="width: 10px; height: 40px">
57     <div class="grid gridMaxMaxContent" style="height: 100%">
58         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
59         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
60     </div>
61 </div>
62
63 <div style="width: 10px; height: 40px">
64     <div class="grid gridMaxMaxContent">
65         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
66         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
67     </div>
68 </div>
69
70 <div style="width: 10px; height: 110px;">
71     <div class="grid gridMaxMaxContent" style="height: 100%">
72         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
73         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
74     </div>
75 </div>
76
77 <div style="width: 10px; height: 110px;">
78     <div class="grid gridMaxMaxContent">
79         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
80         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
81     </div>
82 </div>
83
84 <div class="constrainedContainer">
85     <div class="grid gridMinMinContent" style="height: 100%">
86         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
87         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
88     </div>
89 </div>
90
91 <div class="constrainedContainer">
92     <div class="grid gridMinMinContent">
93         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
94         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
95     </div>
96 </div>
97
98 <!-- Allow the extra logical space distribution to occur. -->
99 <div style="width: 10px; height: 40px">
100     <div class="grid gridMinMinContent" style="height: 100%">
101         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
102         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
103     </div>
104 </div>
105
106 <div style="width: 10px; height: 40px">
107     <div class="grid gridMinMinContent">
108         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
109         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
110     </div>
111 </div>
112
113 <div style="width: 10px; height: 110px;">
114     <div class="grid gridMinMinContent" style="height: 100%">
115         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div>
116         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
117     </div>
118 </div>
119
120 <div style="width: 10px; height: 110px;">
121     <div class="grid gridMinMinContent">
122         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
123         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
124     </div>
125 </div>
126
127 <div style="width: 10px; height: 60px;">
128     <div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%">
129         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
130         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
131     </div>
132 </div>
133
134 <div style="width: 10px; height: 60px;">
135     <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
136         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
137         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="160"></div>
138     </div>
139 </div>
140
141 <div style="width: 10px; height: 60px;">
142     <div class="grid gridShrinkBelowItemsIntrinsicSize" style="height: 100%">
143         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
144         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
145     </div>
146 </div>
147
148 <div style="width: 10px; height: 60px;">
149     <div class="grid gridShrinkBelowItemsIntrinsicSize">
150         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
151         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
152     </div>
153 </div>
154
155 <!-- No space available for the <flex> -->
156 <div style="width: 10px; height: 100px;">
157     <div class="grid gridWithNonFlexingItems" style="height: 100%">
158         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
159         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
160         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
161         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
162     </div>
163 </div>
164
165 <div style="width: 10px; height: 100px;">
166     <div class="grid gridWithNonFlexingItems">
167         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
168         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
169         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
170         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
171     </div>
172 </div>
173
174 <!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
175 <div style="width: 10px; height: 180px;">
176     <div class="grid gridWithNonFlexingItems" style="height: 100%">
177         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
178         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
179         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
180         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
181     </div>
182 </div>
183
184 <div style="width: 10px; height: 180px;">
185     <div class="grid gridWithNonFlexingItems">
186         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
187         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
188         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
189         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
190     </div>
191 </div>
192
193 <div style="width: 10px; height: 400px;">
194     <div class="grid gridWithNonFlexingItems" style="height: 100%">
195         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
196         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
197         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
198         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
199     </div>
200 </div>
201
202 <div style="width: 10px; height: 400px;">
203     <div class="grid gridWithNonFlexingItems">
204         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
205         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
206         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
207         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
208     </div>
209 </div>
210
211 </body>
212 </html>