[CSS Grid Layout] Support "sparse" in auto-placed items locked to a row/column
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / resources / grid.css
1 .grid {
2     display: -webkit-grid;
3     background-color: grey;
4 }
5
6 .indefiniteSizeGrid {
7     display: -webkit-grid;
8     background-color: grey;
9     width: -webkit-min-content;
10     height: auto;
11 }
12
13 .inline-grid {
14     display: -webkit-inline-grid;
15     background-color: grey;
16 }
17
18 .firstRowFirstColumn {
19     background-color: blue;
20     -webkit-grid-column: 1;
21     -webkit-grid-row: 1;
22 }
23
24 .firstRowSecondColumn {
25     background-color: lime;
26     -webkit-grid-column: 2;
27     -webkit-grid-row: 1;
28 }
29
30 .secondRowFirstColumn {
31     background-color: purple;
32     -webkit-grid-column: 1;
33     -webkit-grid-row: 2;
34 }
35
36 .secondRowSecondColumn {
37     background-color: orange;
38     -webkit-grid-column: 2;
39     -webkit-grid-row: 2;
40 }
41
42 .firstAutoRowSecondAutoColumn {
43     -webkit-grid-row: 1 / auto;
44     -webkit-grid-column: 2 / auto;
45 }
46
47 .autoLastRowAutoLastColumn {
48     -webkit-grid-row: auto / -1;
49     -webkit-grid-column: auto / -1;
50 }
51
52 .autoSecondRowAutoFirstColumn {
53     -webkit-grid-row: auto / 2;
54     -webkit-grid-column: auto / 1;
55 }
56
57 .firstRowBothColumn {
58     -webkit-grid-row: 1;
59     -webkit-grid-column: 1 / -1;
60 }
61
62 .secondRowBothColumn {
63     -webkit-grid-row: 2;
64     -webkit-grid-column: 1 / -1;
65 }
66
67 .bothRowFirstColumn {
68     -webkit-grid-row: 1 / -1;
69     -webkit-grid-column: 1;
70 }
71
72 .bothRowSecondColumn {
73     -webkit-grid-row: 1 / -1;
74     -webkit-grid-column: 2;
75 }
76
77 .bothRowBothColumn {
78     -webkit-grid-row: 1 / -1;
79     -webkit-grid-column: 1 / -1;
80 }
81
82 /* Auto column / row. */
83 .autoRowAutoColumn {
84     background-color: pink;
85     -webkit-grid-column: auto;
86     -webkit-grid-row: auto;
87 }
88
89 .firstRowAutoColumn {
90     background-color: blue;
91     -webkit-grid-column: auto;
92     -webkit-grid-row: 1;
93 }
94
95 .secondRowAutoColumn {
96     background-color: purple;
97     -webkit-grid-column: auto;
98     -webkit-grid-row: 2;
99 }
100
101 .thirdRowAutoColumn {
102     background-color: navy;
103     -webkit-grid-column: auto;
104     -webkit-grid-row: 3;
105 }
106
107 .autoRowFirstColumn {
108     background-color: lime;
109     -webkit-grid-column: 1;
110     -webkit-grid-row: auto;
111 }
112
113 .autoRowSecondColumn {
114     background-color: orange;
115     -webkit-grid-column: 2;
116     -webkit-grid-row: auto;
117 }
118
119 .autoRowThirdColumn {
120     background-color: magenta;
121     -webkit-grid-column: 3;
122     -webkit-grid-row: auto;
123 }
124
125 .autoRowAutoColumnSpanning2 {
126     background-color: maroon;
127     -webkit-grid-column: span 2;
128     -webkit-grid-row: auto;
129 }
130
131 .autoRowSpanning2AutoColumn {
132     background-color: aqua;
133     -webkit-grid-column: auto;
134     -webkit-grid-row: span 2;
135 }
136
137 .autoRowSpanning2AutoColumnSpanning3 {
138     background-color: olive;
139     -webkit-grid-column: span 3;
140     -webkit-grid-row: span 2;
141 }
142
143 .autoRowSpanning3AutoColumnSpanning2 {
144     background-color: indigo;
145     -webkit-grid-column: span 2;
146     -webkit-grid-row: span 3;
147 }
148
149 .autoRowFirstColumnSpanning2 {
150     background-color: maroon;
151     -webkit-grid-column: 1 / span 2;
152     -webkit-grid-row: auto;
153 }
154
155 .autoRowSecondColumnSpanning2 {
156     background-color: olive;
157     -webkit-grid-column: 2 / span 2;
158     -webkit-grid-row: auto;
159 }
160
161 .firstRowSpanning2AutoColumn {
162     background-color: maroon;
163     -webkit-grid-column: auto;
164     -webkit-grid-row: 1 / span 2;
165     height: 100%;
166 }
167
168 .secondRowSpanning2AutoColumn {
169     background-color: olive;
170     -webkit-grid-column: auto;
171     -webkit-grid-row: 2 / span 2;
172     height: 100%;
173 }
174
175 /* Grid element flow. */
176 .gridAutoFlowColumnSparse {
177     -webkit-grid-auto-flow: column;
178 }
179
180 .gridAutoFlowColumnDense {
181     -webkit-grid-auto-flow: column dense;
182 }
183
184 .gridAutoFlowRowSparse {
185     -webkit-grid-auto-flow: row;
186 }
187
188 .gridAutoFlowRowDense {
189     -webkit-grid-auto-flow: row dense;
190 }
191
192 /* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
193 .constrainedContainer {
194     width: 10px;
195     height: 10px;
196 }
197
198 .unconstrainedContainer {
199     width: 1000px;
200     height: 1000px;
201 }
202
203 .sizedToGridArea {
204     font: 10px/1 Ahem;
205     /* Make us fit our grid area. */
206     width: 100%;
207     height: 100%;
208 }
209
210 .verticalRL {
211     -webkit-writing-mode: vertical-rl;
212 }
213
214 .verticalLR {
215     -webkit-writing-mode: vertical-lr;
216 }
217
218 .horizontalBT {
219     -webkit-writing-mode: horizontal-bt;
220 }
221
222 .directionRTL {
223     direction: rtl;
224 }