[css-align][css-grid] Overflow alignment value 'true' renamed to 'unsafe'
[WebKit-https.git] / LayoutTests / css3 / parse-justify-content.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #justifyContentAuto {
6     justify-content: auto;
7 }
8
9 #justifyContentBaseline {
10     justify-content: baseline;
11 }
12
13 #justifyContentLastBaseline {
14     justify-content: last-baseline;
15 }
16
17 #justifyContentSpaceBetween {
18     justify-content: space-between;
19 }
20
21 #justifyContentSpaceAround {
22     justify-content: space-around;
23 }
24
25 #justifyContentSpaceEvenly {
26     justify-content: space-evenly;
27 }
28
29 #justifyContentStretch {
30     justify-content: stretch;
31 }
32
33 #justifyContentStart {
34     justify-content: start;
35 }
36
37 #justifyContentEnd {
38     justify-content: end;
39 }
40
41 #justifyContentCenter {
42     justify-content: center;
43 }
44
45 #justifyContentLeft {
46     justify-content: left;
47 }
48
49 #justifyContentRight {
50     justify-content: right;
51 }
52
53 #justifyContentFlexStart {
54     justify-content: flex-start;
55 }
56
57 #justifyContentFlexEnd {
58     justify-content: flex-end;
59 }
60
61 #justifyContentEndUnsafe {
62     justify-content: end unsafe;
63 }
64
65 #justifyContentCenterUnsafe {
66     justify-content: center unsafe;
67 }
68
69 #justifyContentRightSafe {
70     justify-content: right safe;
71 }
72
73 #justifyContentLeftUnsafe {
74     justify-content: left unsafe;
75 }
76
77 #justifyContentFlexStartUnsafe {
78     justify-content: flex-start unsafe;
79 }
80
81 #justifyContentFlexEndSafe {
82     justify-content: flex-end safe;
83 }
84
85 #justifyContentSpaceBetweenLeft {
86     justify-content: space-between left;
87 }
88
89 #justifyContentSpaceAroundCenter {
90     justify-content: space-around center;
91 }
92
93 #justifyContentSpaceEvenlyRight {
94     justify-content: space-evenly right;
95 }
96
97 #justifyContentStretchStartSafe {
98     justify-content: stretch start safe;
99 }
100
101 #justifyContentSpaceAroundEndUnsafe {
102     justify-content: space-around end unsafe;
103 }
104
105 #justifyContentSpaceEvenlyFlexStartSafe {
106     justify-content: space-evenly flex-start safe;
107 }
108
109 <!-- Invalid CSS cases -->
110 #justifyContentSpaceBetweenSafe {
111     justify-content: space-between safe;
112 }
113
114 #justifyContentSpaceBetweenStretch {
115     justify-content: space-between stretch;
116 }
117
118 #justifyContentSafe {
119     justify-content: safe;
120 }
121
122 #justifyContentRightSafeUnsafe {
123     justify-content: right safe unsafe;
124 }
125
126 #justifyContentCenterLeft {
127     justify-content: center left;
128 }
129 </style>
130 <script src="../resources/js-test.js"></script>
131 </head>
132 <body>
133 <div id="justifyContentAuto"></div>
134 <div id="justifyContentBaseline"></div>
135 <div id="justifyContentLastBaseline"></div>
136 <div id="justifyContentSpaceBetween"></div>
137 <div id="justifyContentSpaceAround"></div>
138 <div id="justifyContentSpaceEvenly"></div>
139 <div id="justifyContentStretch"></div>
140 <div id="justifyContentStart"></div>
141 <div id="justifyContentEnd"></div>
142 <div id="justifyContentCenter"></div>
143 <div id="justifyContentLeft"></div>
144 <div id="justifyContentRight"></div>
145 <div id="justifyContentFlexStart"></div>
146 <div id="justifyContentFlexEnd"></div>
147 <div id="justifyContentEndUnsafe"></div>
148 <div id="justifyContentCenterUnsafe"></div>
149 <div id="justifyContentRightSafe"></div>
150 <div id="justifyContentLeftUnsafe"></div>
151 <div id="justifyContentFlexStartUnsafe"></div>
152 <div id="justifyContentFlexEndSafe"></div>
153 <div id="justifyContentSpaceBetweenLeft"></div>
154 <div id="justifyContentSpaceAroundCenter"></div>
155 <div id="justifyContentSpaceEvenlyRight"></div>
156 <div id="justifyContentStretchStartSafe"></div>
157 <div id="justifyContentSpaceAroundEndUnsafe"></div>
158 <div id="justifyContentSpaceEvenlyFlexStartSafe"></div>
159
160 <div id="justifyContentSpaceBetweenSafe"></div>
161 <div id="justifyContentSpaceBetweenStretch"></div>
162 <div id="justifyContentSafe"></div>
163 <div id="justifyContentRightSafeUnsafe"></div>
164 <div id="justifyContentCenterLeft"></div>
165
166 <script src="resources/alignment-parsing-utils.js"></script>
167 <script>
168 description('Test that setting and getting justify-content works as expected');
169
170 debug("Test getting justify-content set through CSS");
171 var justifyContentAuto = document.getElementById("justifyContentAuto");
172 shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "start");
173
174 var justifyContentBaseline = document.getElementById("justifyContentBaseline");
175 shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content')", "baseline");
176
177 var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
178 shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content')", "last-baseline");
179
180 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
181 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content')", "space-between");
182
183 var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
184 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content')", "space-around");
185
186 var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly");
187 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content')", "space-evenly");
188
189 var justifyContentStretch = document.getElementById("justifyContentStretch");
190 shouldBeEqualToString("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content')", "stretch");
191
192 var justifyContentStart = document.getElementById("justifyContentStart");
193 shouldBeEqualToString("getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content')", "start");
194
195 var justifyContentEnd = document.getElementById("justifyContentEnd");
196 shouldBeEqualToString("getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content')", "end");
197
198 var justifyContentCenter = document.getElementById("justifyContentCenter");
199 shouldBeEqualToString("getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content')", "center");
200
201 var justifyContentLeft = document.getElementById("justifyContentLeft");
202 shouldBeEqualToString("getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content')", "left");
203
204 var justifyContentRight = document.getElementById("justifyContentRight");
205 shouldBeEqualToString("getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content')", "right");
206
207 var justifyContentFlexStart = document.getElementById("justifyContentFlexStart");
208 shouldBeEqualToString("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content')", "flex-start");
209
210 var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
211 shouldBeEqualToString("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content')", "flex-end");
212
213 var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe");
214 shouldBeEqualToString("getComputedStyle(justifyContentEndUnsafe, '').getPropertyValue('justify-content')", "end unsafe");
215
216 var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe");
217 shouldBeEqualToString("getComputedStyle(justifyContentCenterUnsafe, '').getPropertyValue('justify-content')", "center unsafe");
218
219 var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
220 shouldBeEqualToString("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content')", "right safe");
221
222 var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUnsafe");
223 shouldBeEqualToString("getComputedStyle(justifyContentLeftUnsafe, '').getPropertyValue('justify-content')", "left unsafe");
224
225 var justifyContentFlexStartUnsafe = document.getElementById("justifyContentFlexStartUnsafe");
226 shouldBeEqualToString("getComputedStyle(justifyContentFlexStartUnsafe, '').getPropertyValue('justify-content')", "flex-start unsafe");
227
228 var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
229 shouldBeEqualToString("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content')", "flex-end safe");
230
231 var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft");
232 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content')", "space-between left");
233
234 var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter");
235 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content')", "space-around center");
236
237 var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight");
238 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content')", "space-evenly right");
239
240 var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe");
241 shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content')", "stretch start safe");
242
243 var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContentSpaceAroundEndUnsafe");
244 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').getPropertyValue('justify-content')", "space-around end unsafe");
245
246 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe");
247 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content')", "space-evenly flex-start safe");
248
249 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
250 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "start");
251
252 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSpaceBetweenStretch");
253 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content')", "start");
254
255 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSafe");
256 shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content')", "start");
257
258 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentRightSafeUnsafe");
259 shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content')", "start");
260
261 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentCenterLeft");
262 shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content')", "start");
263
264 debug("");
265 debug("Test initial value of justify-content through JS");
266 element = document.createElement("div");
267 document.body.appendChild(element);
268 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-content')", "start");
269
270 debug("");
271 debug("Test getting and setting justify-content through JS");
272 element = document.createElement("div");
273 document.body.appendChild(element);
274 element.style.justifyContent = "center";
275 checkValues(element, "justifyContent", "justify-content",  "center", "center");
276
277 element.style.justifyContent = "unsafe start";
278 checkValues(element, "justifyContent", "justify-content",  "start unsafe", "start unsafe");
279
280 element.style.justifyContent = "flex-end safe";
281 checkValues(element, "justifyContent", "justify-content",  "flex-end safe", "flex-end safe");
282
283 element.style.justifyContent = "space-between right safe";
284 checkValues(element, "justifyContent", "justify-content",  "space-between right safe", "space-between right safe");
285
286 element.style.justifyContent = "center stretch";
287 checkValues(element, "justifyContent", "justify-content",  "stretch center", "stretch center");
288
289 element.style.justifyContent = "right unsafe";
290 checkValues(element, "justifyContent", "justify-content",  "right unsafe", "right unsafe");
291
292 element.style.justifyContent = "auto";
293 checkValues(element, "justifyContent", "justify-content",  "auto", "start");
294
295 element.style.display = "-webkit-flex";
296 element.style.justifyContent = "auto";
297 checkValues(element, "justifyContent", "justify-content",  "auto", "stretch");
298
299 element.style.display = "-webkit-grid";
300 element.style.justifyContent = "auto";
301 checkValues(element, "justifyContent", "justify-content",  "auto", "start");
302
303 element.style.justifyContent = "flex-end";
304 checkValues(element, "justifyContent", "justify-content",  "flex-end", "flex-end");
305
306 debug("");
307 debug("Test bad combinations of justify-content");
308 element = document.createElement("div");
309 document.body.appendChild(element);
310
311 checkBadValues(element, "justifyContent", "justify-content",  "");
312 checkBadValues(element, "justifyContent", "justify-content",  "unsafe auto");
313 checkBadValues(element, "justifyContent", "justify-content",  "auto safe");
314 checkBadValues(element, "justifyContent", "justify-content",  "auto left");
315 checkBadValues(element, "justifyContent", "justify-content",  "baseline safe");
316 checkBadValues(element, "justifyContent", "justify-content",  "last baseline center");
317 checkBadValues(element, "justifyContent", "justify-content",  "unsafe unsafe");
318 checkBadValues(element, "justifyContent", "justify-content",  "unsafe safe");
319 checkBadValues(element, "justifyContent", "justify-content",  "center start");
320 checkBadValues(element, "justifyContent", "justify-content",  "baseline safe");
321 checkBadValues(element, "justifyContent", "justify-content",  "unsafe baseline");
322 checkBadValues(element, "justifyContent", "justify-content",  "unsafe safe left");
323 checkBadValues(element, "justifyContent", "justify-content",  "unsafe left safe");
324 checkBadValues(element, "justifyContent", "justify-content",  "left safe unsafe safe");
325 checkBadValues(element, "justifyContent", "justify-content",  "start right space-between");
326 checkBadValues(element, "justifyContent", "justify-content",  "safe stretch");
327 checkBadValues(element, "justifyContent", "justify-content",  "space-around stretch");
328 checkBadValues(element, "justifyContent", "justify-content",  "end space-between start");
329 checkBadValues(element, "justifyContent", "justify-content",  "right safe left");
330 checkBadValues(element, "justifyContent", "justify-content",  "unsafe");
331 checkBadValues(element, "justifyContent", "justify-content",  "safe");
332
333 debug("");
334 debug("Test the value 'initial'");
335 element.style.display = "";
336 checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "start");
337
338 debug("");
339 debug("Test the value 'initial' for grid containers");
340 element.style.display = "-webkit-grid";
341 checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "start");
342
343 debug("");
344 debug("Test the value 'initial' for flex containers");
345 element.style.display = "-webkit-flex";
346 checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "stretch");
347
348 debug("");
349 debug("Test the value 'inherit'");
350 checkInheritValues("justifyContent", "justify-content", "end");
351 checkInheritValues("justifyContent", "justify-content", "left safe");
352 checkInheritValues("justifyContent", "justify-content", "stretch center");
353
354 </script>
355 </body>
356 </html>