Move parseFontFaceDescriptor to CSSPropertyParser.cpp
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / alignment / parse-align-self.html
blob54c0ea2d0d35c62abe6fe1629a03b81e45018f49
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #alignSelfBaseline {
6 align-self: baseline;
9 #alignSelfLastBaseline {
10 align-self: last-baseline;
13 #alignSelfStretch {
14 align-self: stretch;
17 #alignSelfStart {
18 align-self: start;
21 #alignSelfEnd {
22 align-self: end;
25 #alignSelfCenter {
26 align-self: center;
29 #alignSelfSelfStart {
30 align-self: self-start;
33 #alignSelfSelfEnd {
34 align-self: self-end;
37 #alignSelfLeft {
38 align-self: left;
41 #alignSelfRight {
42 align-self: right;
45 #alignSelfFlexStart {
46 align-self: flex-start;
49 #alignSelfFlexEnd {
50 align-self: flex-end;
53 #alignSelfEndTrue {
54 align-self: end true;
57 #alignSelfCenterTrue {
58 align-self: center true;
61 #alignSelfSelfEndSafe {
62 align-self: self-end safe;
65 #alignSelfSelfStartSafe {
66 align-self: self-start safe;
69 #alignSelfRightSafe {
70 align-self: right safe;
73 #alignSelfLeftTrue {
74 align-self: left true;
77 #alignSelfFlexStartTrue {
78 align-self: flex-start true;
81 #alignSelfFlexEndSafe {
82 align-self: flex-end safe;
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>
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');
113 debug("Test getting align-self set through CSS");
114 var alignSelfBaseline = document.getElementById("alignSelfBaseline");
115 shouldBe("getComputedStyle(alignSelfBaseline, '').getPropertyValue('align-self')", "'baseline'");
117 var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
118 shouldBe("getComputedStyle(alignSelfLastBaseline, '').getPropertyValue('align-self')", "'last-baseline'");
120 var alignSelfStretch = document.getElementById("alignSelfStretch");
121 shouldBe("getComputedStyle(alignSelfStretch, '').getPropertyValue('align-self')", "'stretch'");
123 var alignSelfStart = document.getElementById("alignSelfStart");
124 shouldBe("getComputedStyle(alignSelfStart, '').getPropertyValue('align-self')", "'start'");
126 var alignSelfEnd = document.getElementById("alignSelfEnd");
127 shouldBe("getComputedStyle(alignSelfEnd, '').getPropertyValue('align-self')", "'end'");
129 var alignSelfCenter = document.getElementById("alignSelfCenter");
130 shouldBe("getComputedStyle(alignSelfCenter, '').getPropertyValue('align-self')", "'center'");
132 var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
133 shouldBe("getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('align-self')", "'self-end'");
135 var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
136 shouldBe("getComputedStyle(alignSelfSelfStart, '').getPropertyValue('align-self')", "'self-start'");
138 var alignSelfLeft = document.getElementById("alignSelfLeft");
139 shouldBe("getComputedStyle(alignSelfLeft, '').getPropertyValue('align-self')", "'left'");
141 var alignSelfRight = document.getElementById("alignSelfRight");
142 shouldBe("getComputedStyle(alignSelfRight, '').getPropertyValue('align-self')", "'right'");
144 var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
145 shouldBe("getComputedStyle(alignSelfFlexStart, '').getPropertyValue('align-self')", "'flex-start'");
147 var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
148 shouldBe("getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('align-self')", "'flex-end'");
150 var alignSelfEndTrue = document.getElementById("alignSelfEndTrue");
151 shouldBe("getComputedStyle(alignSelfEndTrue, '').getPropertyValue('align-self')", "'end true'");
153 var alignSelfCenterTrue = document.getElementById("alignSelfCenterTrue");
154 shouldBe("getComputedStyle(alignSelfCenterTrue, '').getPropertyValue('align-self')", "'center true'");
156 var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
157 shouldBe("getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('align-self')", "'self-end safe'");
159 var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
160 shouldBe("getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('align-self')", "'self-start safe'");
162 var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
163 shouldBe("getComputedStyle(alignSelfRightSafe, '').getPropertyValue('align-self')", "'right safe'");
165 var alignSelfLeftTrue = document.getElementById("alignSelfLeftTrue");
166 shouldBe("getComputedStyle(alignSelfLeftTrue, '').getPropertyValue('align-self')", "'left true'");
168 var alignSelfFlexStartTrue = document.getElementById("alignSelfFlexStartTrue");
169 shouldBe("getComputedStyle(alignSelfFlexStartTrue, '').getPropertyValue('align-self')", "'flex-start true'");
171 var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
172 shouldBe("getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('align-self')", "'flex-end safe'");
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('align-self')", "'start'");
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.alignSelf = "center";
187 checkValues(element, "alignSelf", "align-self", "center", "center");
189 element.style.alignSelf = "true start";
190 checkValues(element, "alignSelf", "align-self", "start true", "start true");
192 element.style.alignSelf = "flex-end safe";
193 checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe");
195 element.style.alignSelf = "right";
196 checkValues(element, "alignSelf", "align-self", "right", "right");
198 element.style.alignSelf = "center";
199 checkValues(element, "alignSelf", "align-self", "center", "center");
201 element.style.alignSelf = "self-start";
202 checkValues(element, "alignSelf", "align-self", "self-start", "self-start");
204 element.style.alignSelf = "auto";
205 checkValues(element, "alignSelf", "align-self", "auto", "start");
207 container.style.display = "flex";
208 element.style.alignSelf = "auto";
209 checkValues(element, "alignSelf", "align-self", "auto", "stretch");
211 container.style.display = "grid";
212 element.style.alignSelf = "auto";
213 checkValues(element, "alignSelf", "align-self", "auto", "stretch");
215 element.style.alignSelf = "self-end";
216 checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
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);
225 checkBadValues(element, "alignSelf", "align-self", "true auto");
226 checkBadValues(element, "alignSelf", "align-self", "auto safe");
227 checkBadValues(element, "alignSelf", "align-self", "auto left");
228 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
229 checkBadValues(element, "alignSelf", "align-self", "baseline center");
230 checkBadValues(element, "alignSelf", "align-self", "stretch true");
231 checkBadValues(element, "alignSelf", "align-self", "stretch right");
232 checkBadValues(element, "alignSelf", "align-self", "true true");
233 checkBadValues(element, "alignSelf", "align-self", "true safe");
234 checkBadValues(element, "alignSelf", "align-self", "center start");
235 checkBadValues(element, "alignSelf", "align-self", "stretch true");
236 checkBadValues(element, "alignSelf", "align-self", "safe stretch");
237 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
238 checkBadValues(element, "alignSelf", "align-self", "true baseline");
239 checkBadValues(element, "alignSelf", "align-self", "true safe left");
240 checkBadValues(element, "alignSelf", "align-self", "true left safe");
241 checkBadValues(element, "alignSelf", "align-self", "left safe true safe");
242 checkBadValues(element, "alignSelf", "align-self", "legacy start");
243 checkBadValues(element, "alignSelf", "align-self", "legacy end");
244 checkBadValues(element, "alignSelf", "align-self", "legacy right true");
245 checkBadValues(element, "alignSelf", "align-self", "legacy auto");
246 checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
247 checkBadValues(element, "alignSelf", "align-self", "legacy");
248 checkBadValues(element, "alignSelf", "align-self", "legacy left right");
250 debug("");
251 debug("Test the value 'initial'");
252 container.style.display = "";
253 checkInitialValues(element, "alignSelf", "align-self", "center", "start");
255 debug("");
256 debug("Test the value 'initial' for grid containers");
257 container.style.display = "grid";
258 checkInitialValues(element, "alignSelf", "align-self", "left safe", "stretch");
260 debug("");
261 debug("Test the value 'initial' for flex containers");
262 container.style.display = "flex";
263 checkInitialValues(element, "alignSelf", "align-self", "right true", "stretch");
265 debug("");
266 debug("Test the value 'initial' for positioned elements");
267 container.style.display = "";
268 element.style.position = "absolute";
269 checkInitialValues(element, "alignSelf", "align-self", "left", "stretch");
271 debug("");
272 debug("Test the value 'initial' for positioned elements in grid containers");
273 container.style.display = "grid";
274 element.style.position = "absolute";
275 checkInitialValues(element, "alignSelf", "align-self", "right", "stretch");
277 debug("");
278 debug("Test the value 'initial' for positioned elements in grid containers");
279 container.style.display = "flex";
280 element.style.position = "absolute";
281 checkInitialValues(element, "alignSelf", "align-self", "end", "stretch");
283 debug("");
284 debug("Test the value 'inherit'");
285 checkInheritValues("alignSelf", "align-self", "end");
286 checkInheritValues("alignSelf", "align-self", "left safe");
287 checkInheritValues("alignSelf", "align-self", "center true");
289 </script>
290 </body>
291 </html>