[CSS Grid Layout] Support sparse in auto-placement algorithm
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / named-grid-lines-with-named-grid-areas-resolution.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <style type="text/css">
6
7   .gridAreas {
8       -webkit-grid-template-areas: ". a a"
9                                    "c a a"
10                                    ". . d";
11   }
12
13   .gridAreasSpecial {
14       -webkit-grid-template-areas: ". a-start a-start"
15                                    "c a-end a-end"
16                                    ". . d";
17   }
18
19   .gridNoLineNames {
20       -webkit-grid-template-columns: 50px 100px 200px;
21       -webkit-grid-template-rows: 50px 100px 200px;
22   }
23
24   .gridUniqueNames {
25       -webkit-grid-template-columns: (a) 50px (b b-start) 100px (c -start) 200px (d);
26       -webkit-grid-template-rows: (e) 50px (f -end) 100px (g g-start) 200px (h);
27   }
28
29   .gridWithNamedLineBeforeGridArea {
30       -webkit-grid-template-columns: (a-start c-start) 50px (d-start) 100px 200px;
31       -webkit-grid-template-rows: (c-start) 50px (d-start) 100px 200px;
32   }
33
34   .gridWithNamedLineAfterGridArea {
35       -webkit-grid-template-columns: 50px 100px (a-start) 200px;
36       -webkit-grid-template-rows: 50px 100px (c-start) 200px;
37   }
38
39   .gridWithEndLines {
40       -webkit-grid-template-columns: 50px 100px (a-end) 200px (c-end);
41       -webkit-grid-template-rows: 50px (c-end) 100px (d-end) 200px;
42   }
43
44   .gridRepeatedNames {
45       -webkit-grid-template-columns: (d-start) 50px (d-start) 100px (d-start) 200px;
46       -webkit-grid-template-rows: 50px (c-end) 100px (c-end) 200px (c-end);
47   }
48
49   .gridImplicitArea {
50       -webkit-grid-template-columns: 50px (z-start) 100px (z-end) 200px;
51       -webkit-grid-template-rows: 50px (z-start) 100px 200px (z-end);
52   }
53
54 </style>
55 <script src="../../resources/check-layout.js"></script>
56 </head>
57 <body onload="checkLayout('.grid')">
58
59 <p>This test checks that we resolve named grid line per the specification.</p>
60
61 <!-- Check positioning using unique grid-line names -->
62 <div style="position: relative">
63   <div class="grid gridUniqueNames gridAutoFlowStack">
64     <div class="sizedToGridArea" style="-webkit-grid-column: b;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
65     <div class="sizedToGridArea" style="-webkit-grid-row: e;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
66     <div class="sizedToGridArea" style="-webkit-grid-column: b-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
67     <div class="sizedToGridArea" style="-webkit-grid-row: g-start;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
68   </div>
69 </div>
70
71 <div style="position: relative">
72   <div class="grid gridUniqueNames">
73     <div class="sizedToGridArea" style="-webkit-grid-column: b / d;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
74     <div class="sizedToGridArea" style="-webkit-grid-row: g / h;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
75     <div class="sizedToGridArea" style="-webkit-grid-column: c; -webkit-grid-row: f;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
76   </div>
77 </div>
78
79 <!-- Check positioning using unique grid-line names mixed with integers -->
80 <div style="position: relative">
81   <div class="grid gridUniqueNames">
82     <div class="sizedToGridArea" style="-webkit-grid-column: b / 4;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
83     <div class="sizedToGridArea" style="-webkit-grid-row: 3 / h;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
84     <div class="sizedToGridArea" style="-webkit-grid-column: 2; -webkit-grid-row: g;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
85     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: 2;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
86   </div>
87 </div>
88
89 <!-- Check that without named gridAreas there are no implicit grid-line names defined -->
90 <div style="position: relative">
91   <div class="grid gridUniqueNames gridAutoFlowStack">
92     <div class="sizedToGridArea" style="-webkit-grid-column: c-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
93     <div class="sizedToGridArea" style="-webkit-grid-row: f-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
94     <div class="sizedToGridArea" style="-webkit-grid-column: c-start; -webkit-grid-row: f-end" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
95     <div class="sizedToGridArea" style="-webkit-grid-column: b-end; -webkit-grid-row: h-start" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
96   </div>
97 </div>
98
99 <!-- Check that gridArea's implicit names are well defined -->
100 <div style="position: relative">
101   <div class="grid gridAreas gridNoLineNames">
102     <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: d-start;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
103     <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
104     <div class="sizedToGridArea" style="-webkit-grid-column: d-start; -webkit-grid-row: c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
105   </div>
106 </div>
107
108 <!-- Check positioning using grid areas -->
109 <div style="position: relative">
110   <div class="grid gridAreas gridNoLineNames gridAutoFlowRowDense">
111     <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
112     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
113     <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
114     <div class="sizedToGridArea" style="-webkit-grid-row: c;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
115   </div>
116 </div>
117
118 <div style="position: relative">
119   <div class="grid gridAreas gridNoLineNames gridAutoFlowStack">
120     <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
121     <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
122     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="150"></div>
123   </div>
124 </div>
125
126 <!-- Use grid area's implicit line names if defined before explicitly named grid lines -->
127 <div style="position: relative">
128   <div class="grid gridAreas gridWithNamedLineAfterGridArea gridAutoFlowRowDense">
129     <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
130     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
131     <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
132     <div class="sizedToGridArea" style="-webkit-grid-row: c;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
133   </div>
134 </div>
135
136 <div style="position: relative">
137   <div class="grid gridAreas gridWithNamedLineAfterGridArea">
138     <div class="sizedToGridArea" style="-webkit-grid-column-start: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
139     <div class="sizedToGridArea" style="-webkit-grid-row-start: c-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
140   </div>
141 </div>
142
143 <div style="position: relative">
144   <div class="grid gridAreas gridWithNamedLineAfterGridArea">
145     <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
146     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
147     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
148   </div>
149 </div>
150
151 <!-- Use explicitly named grid lines if they're defined before the grid area -->
152 <div style="position: relative">
153   <div class="grid gridAreas gridWithNamedLineBeforeGridArea gridAutoFlowStack">
154     <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
155     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
156     <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
157     <div class="sizedToGridArea" style="-webkit-grid-row: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
158   </div>
159 </div>
160
161 <div style="position: relative">
162   <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
163     <div class="sizedToGridArea" style="-webkit-grid-column-start: d-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
164     <div class="sizedToGridArea" style="-webkit-grid-row-start: d-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
165   </div>
166 </div>
167
168 <div style="position: relative">
169   <div class="grid gridAreas gridWithNamedLineBeforeGridArea gridAutoFlowStack">
170     <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
171     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
172     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
173   </div>
174 </div>
175
176 <!-- Check that a "-start" ident in a end column or a "-end" ident in a start column is not treated as a implicit grid line of a grid area -->
177 <div style="position: relative">
178   <div class="grid gridAreas gridNoLineNames">
179     <div class="sizedToGridArea" style="-webkit-grid-column: a / a-start; -webkit-grid-row: d-start;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
180     <div class="sizedToGridArea" style="-webkit-grid-column: d / d-start; -webkit-grid-row: c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
181     <div class="sizedToGridArea" style="-webkit-grid-column: c; -webkit-grid-row: a / a-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
182     <div class="sizedToGridArea" style="-webkit-grid-column: d; -webkit-grid-row: c / c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
183   </div>
184 </div>
185
186 <!-- Check that we propertly resolve explicit "-end" lines inside grid areas -->
187 <div style="position: relative">
188   <div class="grid gridAreas gridWithEndLines">
189     <div class="sizedToGridArea" style="-webkit-grid-column: a" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
190     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: c" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
191     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
192     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
193   </div>
194 </div>
195
196 <!-- Check that we always pick the first definition when multiple grid lines have the same name -->
197 <div style="position: relative">
198   <div class="grid gridAreas gridRepeatedNames">
199     <div class="sizedToGridArea" style="-webkit-grid-column: d; -webkit-grid-row: c" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"></div>
200     <div class="sizedToGridArea" style="-webkit-grid-column: d-start / d-end; -webkit-grid-row: c-start / c-end" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"></div>
201     <div class="sizedToGridArea" style="-webkit-grid-column: c; -webkit-grid-row: d" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
202   </div>
203 </div>
204
205 <!-- Check behavior with areas named *-start or *-end -->
206 <div style="position: relative">
207   <div class="grid gridAreasSpecial gridNoLineNames gridAutoFlowStack">
208     <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
209     <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
210     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
211   </div>
212 </div>
213
214 <div style="position: relative">
215   <div class="grid gridAreasSpecial gridNoLineNames">
216     <div class="sizedToGridArea" style="-webkit-grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
217     <div class="sizedToGridArea" style="-webkit-grid-row: a-end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
218     <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: a-end;" data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-height="100"></div>
219   </div>
220 </div>
221
222 <div style="position: relative">
223   <div class="grid gridAreasSpecial gridWithNamedLineBeforeGridArea">
224     <div class="sizedToGridArea" style="-webkit-grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
225     <div class="sizedToGridArea" style="-webkit-grid-row: a-end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
226     <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: a-end;" data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-height="100"></div>
227   </div>
228 </div>
229
230 <div style="position: relative">
231   <div class="grid gridAreasSpecial gridWithNamedLineAfterGridArea">
232     <div class="sizedToGridArea" style="-webkit-grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
233     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
234     <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
235   </div>
236 </div>
237
238 <!-- Check behavior with lines named *-start or *-end -->
239 <div style="position: relative">
240   <div class="grid gridAreasSpecial gridUniqueNames">
241     <div class="sizedToGridArea" style="-webkit-grid-column: -start;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
242     <div class="sizedToGridArea" style="-webkit-grid-row: -end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
243     <div class="sizedToGridArea" style="-webkit-grid-column-end: -start; -webkit-grid-row-start: -end;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
244
245   </div>
246 </div>
247
248 <!-- Check that <custom-ident>-{start|end} named lines define implicit named areas -->
249 <div style="position: relative">
250   <div class="grid gridAreas gridImplicitArea">
251     <div class="sizedToGridArea" style="-webkit-grid-column: z;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
252     <div class="sizedToGridArea" style="-webkit-grid-row: z;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
253     <div class="sizedToGridArea" style="-webkit-grid-column-end: z; -webkit-grid-row-start: z;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
254   </div>
255 </div>
256
257 </body>
258 </html>