[CSS Grid Layout] Support "sparse" in auto-placed items locked to a row/column
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-item-auto-placement-fixed-row-column.html
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5 .grid {
6     -webkit-grid-auto-columns: 50px;
7     -webkit-grid-auto-rows: 50px;
8 }
9
10 .firstRowAutoColumnSpanning2 {
11     background-color: maroon;
12     -webkit-grid-column: span 2;
13     -webkit-grid-row: 1;
14 }
15
16 .autoRowSpanning2FirstColumn {
17     background-color: aqua;
18     -webkit-grid-column: 1;
19     -webkit-grid-row: span 2;
20 }
21
22 .firstRowFourthColumn {
23     background-color: salmon;
24     -webkit-grid-column: 4;
25     -webkit-grid-row: 1;
26 }
27
28 .fourthRowFirstColumn {
29     background-color: salmon;
30     -webkit-grid-column: 1;
31     -webkit-grid-row: 4;
32 }
33
34 .secondRowThirdColumn {
35     background-color: red;
36     -webkit-grid-column: 3;
37     -webkit-grid-row: 2;
38 }
39
40 .thirdRowSecondColumn {
41     background-color: red;
42     -webkit-grid-column: 2;
43     -webkit-grid-row: 3;
44 }
45 </style>
46 <script src="../../resources/check-layout.js"></script>
47 <body onload="checkLayout('.grid');">
48
49 <p>Thist test checks that sparse and dense packing modes are supported in auto-placement for fixed rows/columns.</p>
50
51 <div style="position: relative">
52     <div class="grid gridAutoFlowRowSparse">
53         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
54         <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
55         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
56         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
57     </div>
58 </div>
59
60 <div style="position: relative">
61     <div class="grid gridAutoFlowRowSparse">
62         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
63         <div class="sizedToGridArea firstRowFourthColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
64         <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
65         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
66         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="350" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
67         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
68     </div>
69 </div>
70
71 <div style="position: relative">
72     <div class="grid gridAutoFlowRowSparse">
73         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
74         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
75         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
76         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
77         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
78         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
79     </div>
80 </div>
81
82 <div style="position: relative">
83     <div class="grid gridAutoFlowRowSparse">
84         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
85         <div class="sizedToGridArea thirdRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
86         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
87         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
88         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
89         <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
90         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
91     </div>
92 </div>
93
94 <div style="position: relative">
95     <div class="grid gridAutoFlowRowDense">
96         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
97         <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
98         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
99         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
100     </div>
101 </div>
102
103 <div style="position: relative">
104     <div class="grid gridAutoFlowRowDense">
105         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
106         <div class="sizedToGridArea firstRowFourthColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
107         <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
108         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
109         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
110         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
111     </div>
112 </div>
113
114 <div style="position: relative">
115     <div class="grid gridAutoFlowRowDense">
116         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
117         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
118         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
119         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
120         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
121         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
122     </div>
123 </div>
124
125 <div style="position: relative">
126     <div class="grid gridAutoFlowRowDense">
127         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
128         <div class="sizedToGridArea thirdRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
129         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
130         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
131         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
132         <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
133         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
134     </div>
135 </div>
136
137 <div style="position: relative">
138     <div class="grid gridAutoFlowColumnSparse">
139         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
140         <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
141         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="50"></div>
142         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
143     </div>
144 </div>
145
146 <div style="position: relative">
147     <div class="grid gridAutoFlowColumnSparse">
148         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
149         <div class="sizedToGridArea fourthRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
150         <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
151         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="300" data-expected-width="50" data-expected-height="50"></div>
152         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="50"></div>
153         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
154     </div>
155 </div>
156
157 <div style="position: relative">
158     <div class="grid gridAutoFlowColumnSparse">
159         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
160         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
161         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
162         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
163         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
164         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
165     </div>
166 </div>
167
168 <div style="position: relative">
169     <div class="grid gridAutoFlowColumnSparse">
170         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
171         <div class="sizedToGridArea secondRowThirdColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
172         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
173         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
174         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
175         <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
176         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
177     </div>
178 </div>
179
180 <div style="position: relative">
181     <div class="grid gridAutoFlowColumnDense">
182         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
183         <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
184         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
185         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
186     </div>
187 </div>
188
189 <div style="position: relative">
190     <div class="grid gridAutoFlowColumnDense">
191         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
192         <div class="sizedToGridArea fourthRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
193         <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
194         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
195         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
196         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
197     </div>
198 </div>
199
200 <div style="position: relative">
201     <div class="grid gridAutoFlowColumnDense">
202         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
203         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
204         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
205         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
206         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
207         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
208     </div>
209 </div>
210
211 <div style="position: relative">
212     <div class="grid gridAutoFlowColumnDense">
213         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
214         <div class="sizedToGridArea secondRowThirdColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
215         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
216         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
217         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
218         <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
219         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
220     </div>
221 </div>
222
223 </body>
224 </html>