[CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks...
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-item-removal-track-breadth-update.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 .gridAutoContent {
10     -webkit-grid-template-columns: auto;
11     -webkit-grid-template-rows: auto;
12 }
13
14 .gridMinContentFixed {
15     -webkit-grid-template-columns: minmax(-webkit-min-content, 100px);
16     -webkit-grid-template-rows: minmax(-webkit-min-content, 40px);
17 }
18
19 .gridMaxContentFixed {
20     -webkit-grid-template-columns: minmax(-webkit-max-content, 150px);
21     -webkit-grid-template-rows: minmax(-webkit-max-content, 40px);
22 }
23
24 .gridFixedMinContent {
25     -webkit-grid-template-columns: minmax(100px, -webkit-min-content);
26     -webkit-grid-template-rows: minmax(40px, -webkit-min-content);
27 }
28
29 .gridFixedMaxContent {
30     -webkit-grid-template-columns: minmax(100px, -webkit-max-content);
31     -webkit-grid-template-rows: minmax(40px, -webkit-max-content);
32 }
33
34 .lessConstrainedContainer {
35     width: 60px;
36     height: 20px;
37 }
38
39 .firstRowFirstColumn {
40     font: 10px/1 Ahem;
41     /* Make us fit our grid area. */
42     width: 100%;
43     height: 100%;
44 }
45 </style>
46 <script src="../../resources/check-layout.js"></script>
47 <script>
48 function testRemoval(gridElementID, size1, size2, size3)
49 {
50     var gridElement = document.getElementById(gridElementID);
51     var gridItem1 = gridElement.firstChild.nextSibling;
52     var gridItem2 = gridItem1.nextSibling.nextSibling;
53     var gridItem3 = gridItem2.nextSibling.nextSibling;
54     gridItem1.setAttribute("data-expected-width", size1.width);
55     gridItem1.setAttribute("data-expected-height", size1.height);
56     gridItem2.setAttribute("data-expected-width", size1.width);
57     gridItem2.setAttribute("data-expected-height", size1.height);
58     gridItem3.setAttribute("data-expected-width", size1.width);
59     gridItem3.setAttribute("data-expected-height", size1.height);
60     checkLayout("#" + gridElementID);
61
62     gridElement.removeChild(gridItem1);
63     gridItem2.setAttribute("data-expected-width", size2.width);
64     gridItem2.setAttribute("data-expected-height", size2.height);
65     gridItem3.setAttribute("data-expected-width", size2.width);
66     gridItem3.setAttribute("data-expected-height", size2.height);
67     checkLayout("#" + gridElementID);
68
69     gridElement.removeChild(gridItem2);
70     gridItem3.setAttribute("data-expected-width", size3.width);
71     gridItem3.setAttribute("data-expected-height", size3.height);
72     checkLayout("#" + gridElementID);
73 }
74
75 function testRemovals()
76 {
77     testRemoval("constrainedAutoGrid", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '30' });
78     testRemoval("constrainedMinContentFixedGrid", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '30' });
79     testRemoval("constrainedMinContentFixedGridUndefinedHeight", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '40' });
80     testRemoval("constrainedMaxContentFixedGrid", { 'width': '190', 'height': '10' }, { 'width': '190', 'height': '10' }, { 'width': '110', 'height': '10' });
81     testRemoval("constrainedMaxContentFixedGridUndefinedHeight", { 'width': '190', 'height': '40' }, { 'width': '190', 'height': '40' }, { 'width': '110', 'height': '40' });
82     testRemoval("constrainedFixedMinContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
83     testRemoval("constrainedFixedMaxContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
84
85     testRemoval("unconstrainedAutoGrid", { 'width': '390', 'height': '10' }, { 'width': '350', 'height': '10' }, { 'width': '170', 'height': '10' });
86     testRemoval("unconstrainedMinContentFixedGrid", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
87     testRemoval("unconstrainedMinContentFixedGridUndefinedHeight", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
88     testRemoval("unconstrainedMaxContentFixedGrid", { 'width': '390', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
89     testRemoval("unconstrainedFixedMinContentGrid", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
90     testRemoval("unconstrainedFixedMaxContentGrid", { 'width': '390', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
91
92     testRemoval("lessConstrainedAutoGrid", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '30' });
93     testRemoval("lessConstrainedMinContentFixedGrid", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '30' });
94     testRemoval("lessConstrainedMinContentFixedGridUndefinedHeight", { 'width': '60', 'height': '40' }, { 'width': '60', 'height': '40' }, { 'width': '60', 'height': '40' });
95     testRemoval("lessConstrainedMaxContentFixedGrid", { 'width': '350', 'height': '20' }, { 'width': '350', 'height': '20' }, { 'width': '170', 'height': '20' });
96     testRemoval("lessConstrainedMaxContentFixedGridUndefinedHeight", { 'width': '350', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
97     testRemoval("lessConstrainedFixedMinContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
98     testRemoval("lessConstrainedFixedMinContentGridUndefinedHeight", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
99     testRemoval("lessConstrainedFixedMaxContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
100     testRemoval("lessConstrainedFixedMaxContentGridUndefinedHeight", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
101 }
102 window.addEventListener("load", testRemovals, false);
103 </script>
104 <body>
105
106 <p>This test checks that the tracks' breadth are recomputed after removing a grid item.</p>
107
108 <div class="constrainedContainer">
109     <div class="grid gridAutoContent" id="constrainedAutoGrid">
110         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
111         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
112         <div class="firstRowFirstColumn">XXX XXX XXX</div>
113     </div>
114 </div>
115
116 <div class="constrainedContainer">
117     <div class="grid gridMinContentFixed" id="constrainedMinContentFixedGrid" style="height: 100%">
118         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
119         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
120         <div class="firstRowFirstColumn">XXX XXX XXX</div>
121     </div>
122 </div>
123
124 <div class="constrainedContainer">
125     <div class="grid gridMinContentFixed" id="constrainedMinContentFixedGridUndefinedHeight">
126         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
127         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
128         <div class="firstRowFirstColumn">XXX XXX XXX</div>
129     </div>
130 </div>
131
132 <div class="constrainedContainer">
133     <div class="grid gridMaxContentFixed" id="constrainedMaxContentFixedGrid" style="height: 100%">
134         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
135         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
136         <div class="firstRowFirstColumn">XXX XXX XXX</div>
137     </div>
138 </div>
139
140 <div class="constrainedContainer">
141     <div class="grid gridMaxContentFixed" id="constrainedMaxContentFixedGridUndefinedHeight">
142         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
143         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
144         <div class="firstRowFirstColumn">XXX XXX XXX</div>
145     </div>
146 </div>
147
148 <div class="constrainedContainer">
149     <div class="grid gridFixedMinContent" id="constrainedFixedMinContentGrid">
150         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
151         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
152         <div class="firstRowFirstColumn">XXX XXX XXX</div>
153     </div>
154 </div>
155
156 <div class="constrainedContainer">
157     <div class="grid gridFixedMaxContent" id="constrainedFixedMaxContentGrid">
158         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
159         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
160         <div class="firstRowFirstColumn">XXX XXX XXX</div>
161     </div>
162 </div>
163
164 <!-- The container is big enough to allow all the extra space distribution we want. -->
165 <div class="unconstrainedContainer">
166     <div class="grid gridAutoContent" id="unconstrainedAutoGrid">
167         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
168         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
169         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
170     </div>
171 </div>
172
173 <div class="unconstrainedContainer">
174     <div class="grid gridMinContentFixed" id="unconstrainedMinContentFixedGrid" style="height: 100%">
175         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
176         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
177         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
178     </div>
179 </div>
180
181 <div class="unconstrainedContainer">
182     <div class="grid gridMinContentFixed" id="unconstrainedMinContentFixedGridUndefinedHeight">
183         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
184         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
185         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
186     </div>
187 </div>
188
189 <div class="unconstrainedContainer">
190     <div class="grid gridMaxContentFixed" id="unconstrainedMaxContentFixedGrid">
191         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
192         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
193         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
194     </div>
195 </div>
196
197 <div class="unconstrainedContainer">
198     <div class="grid gridFixedMinContent" id="unconstrainedFixedMinContentGrid">
199         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
200         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
201         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
202     </div>
203 </div>
204
205 <div class="unconstrainedContainer">
206     <div class="grid gridFixedMaxContent" id="unconstrainedFixedMaxContentGrid">
207         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
208         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
209         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
210     </div>
211 </div>
212
213 <!-- The container allows some expansion but also constrain the growth. -->
214 <div class="lessConstrainedContainer">
215     <div class="grid gridAutoContent" id="lessConstrainedAutoGrid">
216         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
217         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
218         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
219     </div>
220 </div>
221
222 <div class="lessConstrainedContainer">
223     <div class="grid gridMinContentFixed" id="lessConstrainedMinContentFixedGrid" style="height: 100%">
224         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
225         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
226         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
227     </div>
228 </div>
229
230 <div class="lessConstrainedContainer">
231     <div class="grid gridMinContentFixed" id="lessConstrainedMinContentFixedGridUndefinedHeight">
232         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
233         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
234         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
235     </div>
236 </div>
237
238 <div class="lessConstrainedContainer">
239     <div class="grid gridMaxContentFixed" id="lessConstrainedMaxContentFixedGrid" style="height: 100%">
240         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
241         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
242         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
243     </div>
244 </div>
245
246 <div class="lessConstrainedContainer">
247     <div class="grid gridMaxContentFixed" id="lessConstrainedMaxContentFixedGridUndefinedHeight">
248         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
249         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
250         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
251     </div>
252 </div>
253
254 <div class="lessConstrainedContainer">
255     <div class="grid gridFixedMinContent" id="lessConstrainedFixedMinContentGrid" style="height: 100%">
256         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
257         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
258         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
259     </div>
260 </div>
261
262 <div class="lessConstrainedContainer">
263     <div class="grid gridFixedMinContent" id="lessConstrainedFixedMinContentGridUndefinedHeight">
264         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
265         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
266         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
267     </div>
268 </div>
269
270 <div class="lessConstrainedContainer">
271     <div class="grid gridFixedMaxContent" id="lessConstrainedFixedMaxContentGrid" style="height: 100%">
272         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
273         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
274         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
275     </div>
276 </div>
277
278 <div class="lessConstrainedContainer">
279     <div class="grid gridFixedMaxContent" id="lessConstrainedFixedMaxContentGridUndefinedHeight">
280         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
281         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
282         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
283     </div>
284 </div>
285
286 </body>
287 </html>