[CSS Grid Layout] Upgrade align-self and align-items parsing to CSS 3
[WebKit-https.git] / LayoutTests / css3 / parse-align-items.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #alignItemsBaseline {
6     -webkit-align-items: baseline;
7 }
8
9 #alignItemsLastBaseline {
10     -webkit-align-items: last-baseline;
11 }
12
13 #alignItemsStretch {
14     -webkit-align-items: stretch;
15 }
16
17 #alignItemsStart {
18     -webkit-align-items: start;
19 }
20
21 #alignItemsEnd {
22     -webkit-align-items: end;
23 }
24
25 #alignItemsCenter {
26     -webkit-align-items: center;
27 }
28
29 #alignItemsSelfStart {
30     -webkit-align-items: self-start;
31 }
32
33 #alignItemsSelfEnd {
34     -webkit-align-items: self-end;
35 }
36
37 #alignItemsLeft {
38     -webkit-align-items: left;
39 }
40
41 #alignItemsRight {
42     -webkit-align-items: right;
43 }
44
45 #alignItemsFlexStart {
46     -webkit-align-items: flex-start;
47 }
48
49 #alignItemsFlexEnd {
50     -webkit-align-items: flex-end;
51 }
52
53 #alignItemsEndTrue {
54     -webkit-align-items: end true;
55 }
56
57 #alignItemsCenterTrue {
58     -webkit-align-items: center true;
59 }
60
61 #alignItemsSelfEndSafe {
62     -webkit-align-items: self-end safe;
63 }
64
65 #alignItemsSelfStartSafe {
66     -webkit-align-items: self-start safe;
67 }
68
69 #alignItemsRightSafe {
70     -webkit-align-items: right safe;
71 }
72
73 #alignItemsLeftTrue {
74     -webkit-align-items: left true;
75 }
76
77 #alignItemsFlexStartTrue {
78     -webkit-align-items: flex-start true;
79 }
80
81 #alignItemsFlexEndSafe {
82     -webkit-align-items: flex-end safe;
83 }
84
85 </style>
86 <script src="../resources/js-test.js"></script>
87 </head>
88 <body>
89 <div id="alignItemsBaseline"></div>
90 <div id="alignItemsLastBaseline"></div>
91 <div id="alignItemsStretch"></div>
92 <div id="alignItemsStart"></div>
93 <div id="alignItemsEnd"></div>
94 <div id="alignItemsCenter"></div>
95 <div id="alignItemsSelfStart"></div>
96 <div id="alignItemsSelfEnd"></div>
97 <div id="alignItemsLeft"></div>
98 <div id="alignItemsRight"></div>
99 <div id="alignItemsFlexStart"></div>
100 <div id="alignItemsFlexEnd"></div>
101
102 <div id="alignItemsEndTrue"></div>
103 <div id="alignItemsCenterTrue"></div>
104 <div id="alignItemsSelfEndSafe"></div>
105 <div id="alignItemsSelfStartSafe"></div>
106 <div id="alignItemsRightSafe"></div>
107 <div id="alignItemsLeftTrue"></div>
108 <div id="alignItemsFlexStartTrue"></div>
109 <div id="alignItemsFlexEndSafe"></div>
110 <script src="resources/alignment-parsing-utils.js"></script>
111 <script>
112 description('Test that setting and getting align-items works as expected');
113
114 debug("Test getting align-items set through CSS");
115 var alignItemsBaseline = document.getElementById("alignItemsBaseline");
116 shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('-webkit-align-items')", "'baseline'");
117
118 var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");
119 shouldBe("getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('-webkit-align-items')", "'last-baseline'");
120
121 var alignItemsStretch = document.getElementById("alignItemsStretch");
122 shouldBe("getComputedStyle(alignItemsStretch, '').getPropertyValue('-webkit-align-items')", "'stretch'");
123
124 var alignItemsStart = document.getElementById("alignItemsStart");
125 shouldBe("getComputedStyle(alignItemsStart, '').getPropertyValue('-webkit-align-items')", "'start'");
126
127 var alignItemsEnd = document.getElementById("alignItemsEnd");
128 shouldBe("getComputedStyle(alignItemsEnd, '').getPropertyValue('-webkit-align-items')", "'end'");
129
130 var alignItemsCenter = document.getElementById("alignItemsCenter");
131 shouldBe("getComputedStyle(alignItemsCenter, '').getPropertyValue('-webkit-align-items')", "'center'");
132
133 var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
134 shouldBe("getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('-webkit-align-items')", "'self-end'");
135
136 var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
137 shouldBe("getComputedStyle(alignItemsSelfStart, '').getPropertyValue('-webkit-align-items')", "'self-start'");
138
139 var alignItemsLeft = document.getElementById("alignItemsLeft");
140 shouldBe("getComputedStyle(alignItemsLeft, '').getPropertyValue('-webkit-align-items')", "'left'");
141
142 var alignItemsRight = document.getElementById("alignItemsRight");
143 shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('-webkit-align-items')", "'right'");
144
145 var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
146 shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('-webkit-align-items')", "'flex-start'");
147
148 var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
149 shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('-webkit-align-items')", "'flex-end'");
150
151 var alignItemsEndTrue = document.getElementById("alignItemsEndTrue");
152 shouldBe("getComputedStyle(alignItemsEndTrue, '').getPropertyValue('-webkit-align-items')", "'end true'");
153
154 var alignItemsCenterTrue = document.getElementById("alignItemsCenterTrue");
155 shouldBe("getComputedStyle(alignItemsCenterTrue, '').getPropertyValue('-webkit-align-items')", "'center true'");
156
157 var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
158 shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('-webkit-align-items')", "'self-end safe'");
159
160 var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe");
161 shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('-webkit-align-items')", "'self-start safe'");
162
163 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
164 shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('-webkit-align-items')", "'right safe'");
165
166 var alignItemsLeftTrue = document.getElementById("alignItemsLeftTrue");
167 shouldBe("getComputedStyle(alignItemsLeftTrue, '').getPropertyValue('-webkit-align-items')", "'left true'");
168
169 var alignItemsFlexStartTrue = document.getElementById("alignItemsFlexStartTrue");
170 shouldBe("getComputedStyle(alignItemsFlexStartTrue, '').getPropertyValue('-webkit-align-items')", "'flex-start true'");
171
172 var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
173 shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('-webkit-align-items')", "'flex-end safe'");
174
175 debug("");
176 debug("Test initial value of align-items through JS");
177 element = document.createElement("div");
178 document.body.appendChild(element);
179 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-align-items')", "'start'");
180
181 debug("");
182 debug("Test getting and setting align-items through JS");
183 element = document.createElement("div");
184 document.body.appendChild(element);
185 element.style.webkitAlignItems = "center";
186 checkValues(element, "webkitAlignItems", "-webkit-align-items",  "center", "center");
187
188 element.style.webkitAlignItems = "true start";
189 checkValues(element, "webkitAlignItems", "-webkit-align-items",  "start true", "start true");
190
191 element.style.webkitAlignItems = "flex-end safe";
192 checkValues(element, "webkitAlignItems", "-webkit-align-items",  "flex-end safe", "flex-end safe");
193
194 element.style.webkitAlignItems = "right";
195 checkValues(element, "webkitAlignItems", "-webkit-align-items",  "right", "right");
196
197 element.style.webkitAlignItems = "center";
198 checkValues(element, "webkitAlignItems", "-webkit-align-items",  "center", "center");
199
200 element.style.webkitAlignItems = "self-start";
201 checkValues(element, "webkitAlignItems", "-webkit-align-items",  "self-start", "self-start");
202
203 element.style.webkitAlignItems = "auto";
204 checkValues(element, "webkitAlignItems", "-webkit-align-items",  "auto", "start");
205
206 element.style.display = "-webkit-flex";
207 element.style.webkitAlignItems = "auto";
208 checkValues(element, "webkitAlignItems", "-webkit-align-items",  "auto", "stretch");
209
210 element.style.display = "-webkit-grid";
211 element.style.webkitAlignItems = "auto";
212 checkValues(element, "webkitAlignItems", "-webkit-align-items",  "auto", "stretch");
213
214 element.style.webkitAlignItems = "self-end";
215 checkValues(element, "webkitAlignItems", "-webkit-align-items",  "self-end", "self-end");
216
217 debug("");
218 debug("Test bad combinations of align-items");
219 element = document.createElement("div");
220 document.body.appendChild(element);
221
222 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true auto");
223 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "auto safe");
224 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "auto left");
225 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "baseline safe");
226 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "baseline center");
227 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "stretch true");
228 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "stretch right");
229 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true true");
230 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true safe");
231 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "center start");
232 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "stretch true");
233 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "safe stretch");
234 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "baseline safe");
235 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true baseline");
236 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true safe left");
237 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true left safe");
238 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "left safe true safe");
239 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy start");
240 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy end");
241 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy right true");
242 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy auto");
243 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy stretch");
244 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy");
245 checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy left right");
246
247 debug("");
248 debug("Test the value 'initial'");
249 element.style.display = "";
250 checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "center", "start");
251
252 debug("");
253 debug("Test the value 'initial' for grid containers");
254 element.style.display = "-webkit-grid";
255 checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "left safe", "stretch");
256
257 debug("");
258 debug("Test the value 'initial' for flex containers");
259 element.style.display = "-webkit-flex";
260 checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "right true", "stretch");
261
262 debug("");
263 debug("Test the value 'inherit'");
264 checkInheritValues("webkitAlignItems", "-webkit-align-items", "end");
265 checkInheritValues("webkitAlignItems", "-webkit-align-items", "left safe");
266 checkInheritValues("webkitAlignItems", "-webkit-align-items", "center true");
267
268 </script>
269 </body>
270 </html>