Move parseFontFaceDescriptor to CSSPropertyParser.cpp
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / alignment / parse-justify-items.html
blobf67e4f968eb85d1a05b5469e47254a7407c72dd7
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #justifyItemsBaseline {
6 justify-items: baseline;
9 #justifyItemsLastBaseline {
10 justify-items: last-baseline;
13 #justifyItemsStretch {
14 justify-items: stretch;
17 #justifyItemsStart {
18 justify-items: start;
21 #justifyItemsEnd {
22 justify-items: end;
25 #justifyItemsCenter {
26 justify-items: center;
29 #justifyItemsSelfStart {
30 justify-items: self-start;
33 #justifyItemsSelfEnd {
34 justify-items: self-end;
37 #justifyItemsLeft {
38 justify-items: left;
41 #justifyItemsRight {
42 justify-items: right;
45 #justifyItemsFlexStart {
46 justify-items: flex-start;
49 #justifyItemsFlexEnd {
50 justify-items: flex-end;
53 #justifyItemsEndTrue {
54 justify-items: end true;
57 #justifyItemsCenterTrue {
58 justify-items: center true;
61 #justifyItemsSelfEndSafe {
62 justify-items: self-end safe;
65 #justifyItemsSelfStartSafe {
66 justify-items: self-start safe;
69 #justifyItemsRightSafe {
70 justify-items: right safe;
73 #justifyItemsLeftTrue {
74 justify-items: left true;
77 #justifyItemsFlexStartTrue {
78 justify-items: flex-start true;
81 #justifyItemsFlexEndSafe {
82 justify-items: flex-end safe;
85 #justifyItemsLegacyLeft {
86 justify-items: legacy left;
89 #justifyItemsLegacyCenter {
90 justify-items: legacy center;
93 #justifyItemsLegacyRight {
94 justify-items: legacy right;
97 #justifyItemsLeftLegacy {
98 justify-items: left legacy;
101 #justifyItemsCenterLegacy {
102 justify-items: center legacy;
105 #justifyItemsRightLegacy {
106 justify-items: right legacy;
108 </style>
109 <script src="../../resources/js-test.js"></script>
110 </head>
111 <body>
112 <div id="justifyItemsBaseline"></div>
113 <div id="justifyItemsLastBaseline"></div>
114 <div id="justifyItemsStretch"></div>
115 <div id="justifyItemsStart"></div>
116 <div id="justifyItemsEnd"></div>
117 <div id="justifyItemsCenter"></div>
118 <div id="justifyItemsSelfStart"></div>
119 <div id="justifyItemsSelfEnd"></div>
120 <div id="justifyItemsLeft"></div>
121 <div id="justifyItemsRight"></div>
122 <div id="justifyItemsFlexStart"></div>
123 <div id="justifyItemsFlexEnd"></div>
125 <div id="justifyItemsEndTrue"></div>
126 <div id="justifyItemsCenterTrue"></div>
127 <div id="justifyItemsSelfEndSafe"></div>
128 <div id="justifyItemsSelfStartSafe"></div>
129 <div id="justifyItemsRightSafe"></div>
130 <div id="justifyItemsLeftTrue"></div>
131 <div id="justifyItemsFlexStartTrue"></div>
132 <div id="justifyItemsFlexEndSafe"></div>
133 <div id="justifyItemsLegacyLeft"></div>
134 <div id="justifyItemsLegacyCenter"></div>
135 <div id="justifyItemsLegacyRight"></div>
136 <div id="justifyItemsLeftLegacy"></div>
137 <div id="justifyItemsCenterLegacy"></div>
138 <div id="justifyItemsRightLegacy"></div>
139 <script src="resources/alignment-parsing-utils.js"></script>
140 <script>
141 description('Test that setting and getting justify-items works as expected');
143 debug("Test getting justify-items set through CSS");
144 var justifyItemsBaseline = document.getElementById("justifyItemsBaseline");
145 shouldBe("getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-items')", "'baseline'");
147 var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline");
148 shouldBe("getComputedStyle(justifyItemsLastBaseline, '').getPropertyValue('justify-items')", "'last-baseline'");
150 var justifyItemsStretch = document.getElementById("justifyItemsStretch");
151 shouldBe("getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-items')", "'stretch'");
153 var justifyItemsStart = document.getElementById("justifyItemsStart");
154 shouldBe("getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-items')", "'start'");
156 var justifyItemsEnd = document.getElementById("justifyItemsEnd");
157 shouldBe("getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items')", "'end'");
159 var justifyItemsCenter = document.getElementById("justifyItemsCenter");
160 shouldBe("getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-items')", "'center'");
162 var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd");
163 shouldBe("getComputedStyle(justifyItemsSelfEnd, '').getPropertyValue('justify-items')", "'self-end'");
165 var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart");
166 shouldBe("getComputedStyle(justifyItemsSelfStart, '').getPropertyValue('justify-items')", "'self-start'");
168 var justifyItemsLeft = document.getElementById("justifyItemsLeft");
169 shouldBe("getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items')", "'left'");
171 var justifyItemsRight = document.getElementById("justifyItemsRight");
172 shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-items')", "'right'");
174 var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart");
175 shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-items')", "'flex-start'");
177 var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd");
178 shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-items')", "'flex-end'");
180 var justifyItemsEndTrue = document.getElementById("justifyItemsEndTrue");
181 shouldBe("getComputedStyle(justifyItemsEndTrue, '').getPropertyValue('justify-items')", "'end true'");
183 var justifyItemsCenterTrue = document.getElementById("justifyItemsCenterTrue");
184 shouldBe("getComputedStyle(justifyItemsCenterTrue, '').getPropertyValue('justify-items')", "'center true'");
186 var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe");
187 shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justify-items')", "'self-end safe'");
189 var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSafe");
190 shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('justify-items')", "'self-start safe'");
192 var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe");
193 shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-items')", "'right safe'");
195 var justifyItemsLeftTrue = document.getElementById("justifyItemsLeftTrue");
196 shouldBe("getComputedStyle(justifyItemsLeftTrue, '').getPropertyValue('justify-items')", "'left true'");
198 var justifyItemsFlexStartTrue = document.getElementById("justifyItemsFlexStartTrue");
199 shouldBe("getComputedStyle(justifyItemsFlexStartTrue, '').getPropertyValue('justify-items')", "'flex-start true'");
201 var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe");
202 shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justify-items')", "'flex-end safe'");
204 var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
205 shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify-items')", "'legacy left'");
207 var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter");
208 shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justify-items')", "'legacy center'");
210 var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight");
211 shouldBe("getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justify-items')", "'legacy right'");
213 var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy");
214 shouldBe("getComputedStyle(justifyItemsLeftLegacy, '').getPropertyValue('justify-items')", "'legacy left'");
216 var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy");
217 shouldBe("getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justify-items')", "'legacy center'");
219 var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy");
220 shouldBe("getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justify-items')", "'legacy right'");
222 debug("");
223 debug("Test initial value of justify-items through JS");
224 element = document.createElement("div");
225 document.body.appendChild(element);
226 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
228 debug("");
229 debug("Test getting and setting justify-items through JS");
230 element = document.createElement("div");
231 document.body.appendChild(element);
232 element.style.justifyItems = "center";
233 checkValues(element, "justifyItems", "justify-items", "center", "center");
235 element.style.justifyItems = "true start";
236 checkValues(element, "justifyItems", "justify-items", "start true", "start true");
238 element.style.justifyItems = "flex-end safe";
239 checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-end safe");
241 element.style.justifyItems = "right legacy";
242 checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy right");
244 element.style.justifyItems = "center legacy";
245 checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy center");
247 element.style.justifyItems = "left legacy";
248 checkValues(element, "justifyItems", "justify-items", "legacy left", "legacy left");
250 element.style.justifyItems = "auto";
251 checkValues(element, "justifyItems", "justify-items", "auto", "start");
253 element.style.display = "flex";
254 element.style.justifyItems = "auto";
255 checkValues(element, "justifyItems", "justify-items", "auto", "stretch");
257 element.style.display = "grid";
258 element.style.justifyItems = "auto";
259 checkValues(element, "justifyItems", "justify-items", "auto", "stretch");
261 element.style.justifyItems = "self-end";
262 checkValues(element, "justifyItems", "justify-items", "self-end", "self-end");
264 debug("");
265 debug("Test bad combinations of justify-items");
266 element = document.createElement("div");
267 document.body.appendChild(element);
269 checkBadValues(element, "justifyItems", "justify-items", "true auto");
270 checkBadValues(element, "justifyItems", "justify-items", "auto safe");
271 checkBadValues(element, "justifyItems", "justify-items", "auto left");
272 checkBadValues(element, "justifyItems", "justify-items", "baseline safe");
273 checkBadValues(element, "justifyItems", "justify-items", "baseline center");
274 checkBadValues(element, "justifyItems", "justify-items", "stretch true");
275 checkBadValues(element, "justifyItems", "justify-items", "stretch right");
276 checkBadValues(element, "justifyItems", "justify-items", "true true");
277 checkBadValues(element, "justifyItems", "justify-items", "true safe");
278 checkBadValues(element, "justifyItems", "justify-items", "center start");
279 checkBadValues(element, "justifyItems", "justify-items", "stretch true");
280 checkBadValues(element, "justifyItems", "justify-items", "safe stretch");
281 checkBadValues(element, "justifyItems", "justify-items", "baseline safe");
282 checkBadValues(element, "justifyItems", "justify-items", "true baseline");
283 checkBadValues(element, "justifyItems", "justify-items", "true safe left");
284 checkBadValues(element, "justifyItems", "justify-items", "true left safe");
285 checkBadValues(element, "justifyItems", "justify-items", "left safe true safe");
286 checkBadValues(element, "justifyItems", "justify-items", "legacy start");
287 checkBadValues(element, "justifyItems", "justify-items", "legacy end");
288 checkBadValues(element, "justifyItems", "justify-items", "legacy right true");
289 checkBadValues(element, "justifyItems", "justify-items", "legacy auto");
290 checkBadValues(element, "justifyItems", "justify-items", "legacy stretch");
291 checkBadValues(element, "justifyItems", "justify-items", "legacy");
292 checkBadValues(element, "justifyItems", "justify-items", "legacy left right");
294 debug("");
295 debug("Test the value 'initial'");
296 element.style.display = "";
297 checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "start");
299 debug("");
300 debug("Test the value 'initial' for grid containers");
301 element.style.display = "grid";
302 checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stretch");
304 debug("");
305 debug("Test the value 'initial' for flex containers");
306 element.style.display = "flex";
307 checkInitialValues(element, "justifyItems", "justify-items", "right true", "stretch");
309 debug("");
310 debug("Test the value 'inherit'");
311 checkInheritValues("justifyItems", "justify-items", "end");
312 checkInheritValues("justifyItems", "justify-items", "left safe");
313 checkInheritValues("justifyItems", "justify-items", "legacy center");
315 debug("");
316 debug("Test the value 'legacy'");
317 checkLegacyValues("justifyItems", "justify-items", "legacy left");
318 checkLegacyValues("justifyItems", "justify-items", "legacy center");
319 checkLegacyValues("justifyItems", "justify-items", "legacy right");
321 </script>
322 </body>
323 </html>