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