6043a8c11dec27ee970d55fe6402d563a0d8064c
[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 /* Grid element flow. */
150 .gridAutoFlowStack {
151     -webkit-grid-auto-flow: stack;
152 }
153
154 .gridAutoFlowColumnSparse {
155     -webkit-grid-auto-flow: column;
156 }
157
158 .gridAutoFlowColumnDense {
159     -webkit-grid-auto-flow: column dense;
160 }
161
162 .gridAutoFlowRowSparse {
163     -webkit-grid-auto-flow: row;
164 }
165
166 .gridAutoFlowRowDense {
167     -webkit-grid-auto-flow: row dense;
168 }
169
170 /* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
171 .constrainedContainer {
172     width: 10px;
173     height: 10px;
174 }
175
176 .unconstrainedContainer {
177     width: 1000px;
178     height: 1000px;
179 }
180
181 .sizedToGridArea {
182     font: 10px/1 Ahem;
183     /* Make us fit our grid area. */
184     width: 100%;
185     height: 100%;
186 }
187
188 .verticalRL {
189     -webkit-writing-mode: vertical-rl;
190 }
191
192 .verticalLR {
193     -webkit-writing-mode: vertical-lr;
194 }
195
196 .horizontalBT {
197     -webkit-writing-mode: horizontal-bt;
198 }
199
200 .directionRTL {
201     direction: rtl;
202 }