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