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