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