Make color-filter affect caret-color
[WebKit-https.git] / LayoutTests / css3 / parse-place-items.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #placeItemsNormal {
6   place-items: normal;
7 }
8 #placeItemsBaseline {
9   place-items: baseline;
10 }
11 #placeItemsFirstBaseline {
12   place-items: first baseline;
13 }
14 #placeItemsLastBaseline {
15   place-items: last baseline;
16 }
17 #placeItemsStart {
18   place-items: start;
19 }
20 #placeItemsFlexStart {
21   place-items: flex-start;
22 }
23 #placeItemsEnd {
24   place-items: end;
25 }
26 #placeItemsSelfStart {
27   place-items: self-start;
28 }
29 #placeItemsStretch {
30   place-items: stretch;
31 }
32 #placeItemsStartEnd {
33   place-items: start end;
34 }
35 #placeItemsStartSelfEnd {
36   place-items: start self-end;
37 }
38 #placeItemsStartBaseline {
39   place-items: start baseline;
40 }
41
42 <!-- Invalid CSS cases -->
43 #placeItemsEmpty {
44   place-items:;
45 }
46 #placeItemsAuto {
47   place-items: auto;
48 }
49 #placeItemsCenterAuto {
50   place-items: center auto;
51 }
52 #placeItemsNone {
53   place-items: none;
54 }
55 #placeItemsSafe {
56   place-items: safe;
57 }
58 #placeItemsStartSafe {
59   place-items: start safe;
60 }
61 #placeItemsBaselineSafe {
62   place-items: baseline safe;
63 }
64 #placeItemsStartEndLeft {
65   place-items: start end left;
66 }
67 </style>
68 <script src="../resources/testharness.js"></script>
69 <script src="../resources/testharnessreport.js"></script>
70 <script src="resources/alignment-parsing-utils-th.js"></script>
71 </head>
72 <body>
73   <p>Test to verify that the new place-items alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
74   <div id="log"></div>
75
76   <div id="placeItemsNormal"></div>
77   <div id="placeItemsBaseline"></div>
78   <div id="placeItemsFirstBaseline"></div>
79   <div id="placeItemsLastBaseline"></div>
80   <div id="placeItemsStart"></div>
81   <div id="placeItemsFlexStart"></div>
82   <div id="placeItemsEnd"></div>
83   <div id="placeItemsSelfStart"></div>
84   <div id="placeItemsStretch"></div>
85   <div id="placeItemsStartEnd"></div>
86   <div id="placeItemsStartSelfEnd"></div>
87   <div id="placeItemsStartBaseline"></div>
88
89   <div id="placeItemsEmpty"></div>
90   <div id="placeItemsAuto"></div>
91   <div id="placeItemsCenterAuto"></div>
92   <div id="placeItemsNone"></div>
93   <div id="placeItemsSafe"></div>
94   <div id="placeItemsStartSafe"></div>
95   <div id="placeItemsBaselineSafe"></div>
96   <div id="placeItemsStartEndLeft"></div>
97 <script>
98 function checkPlaceItemsValues(element, value, alignValue, justifyValue) {
99   var res = value.split(" ");
100   if (res.length < 2)
101     res[1] = res[0];
102   checkValues(element, "alignItems", "align-items", res[0], alignValue);
103   checkValues(element, "justifyItems", "justify-items", res[1], justifyValue);
104 }
105
106 function checkPlaceItemsValuesJS(value, alignValue, justifyValue)
107 {
108   element = document.createElement("div");
109   document.body.appendChild(element);
110   element.style.placeItems = value;
111   checkValues(element, "placeItems", "place-items", value, alignValue + ' ' + justifyValue)
112   checkPlaceItemsValues(element, value, alignValue, justifyValue)
113 }
114
115 function checkPlaceItemsValuesBadJS(value)
116 {
117   element.style.placeItems = "";
118   element.style.placeItems = value;
119   checkPlaceItemsValues(element, "", "normal", "normal")
120 }
121
122 test(function() {
123   checkValues(placeItemsNormal, "placeItems", "place-items", "", "normal normal");
124   checkPlaceItemsValues(placeItemsNormal, "", "normal", "normal");
125 }, "Test getting the Computed Value of place-items's longhand properties when setting 'normal' value through CSS.");
126
127 test(function() {
128   checkValues(placeItemsBaseline, "placeItems", "place-items", "", "baseline baseline");
129   checkPlaceItemsValues(placeItemsBaseline, "", "baseline", "baseline");
130 }, "Test getting the Computed Value of place-items's longhand properties when setting 'baseline' value through CSS.");
131
132 test(function() {
133   checkValues(placeItemsFirstBaseline, "placeItems", "place-items", "", "baseline baseline");
134   checkPlaceItemsValues(placeItemsFirstBaseline, "", "baseline", "baseline");
135 }, "Test getting the Computed Value of place-items's longhand properties when setting 'first baseline' value through CSS.");
136
137 test(function() {
138   checkValues(placeItemsLastBaseline, "placeItems", "place-items", "", "last baseline last baseline");
139   checkPlaceItemsValues(placeItemsLastBaseline, "", "last baseline", "last baseline");
140 }, "Test getting the Computed Value of place-items's longhand properties when setting 'last baseline' value through CSS.");
141
142 test(function() {
143   checkValues(placeItemsStart, "placeItems", "place-items", "", "start start");
144   checkPlaceItemsValues(placeItemsStart, "", "start", "start");
145 }, "Test getting the Computed Value of place-items's longhand properties when setting 'start' value through CSS.");
146
147 test(function() {
148   checkValues(placeItemsFlexStart, "placeItems", "place-items", "", "flex-start flex-start");
149   checkPlaceItemsValues(placeItemsFlexStart, "", "flex-start", "flex-start");
150 }, "Test getting the Computed Value of place-items's longhand properties when setting 'flex-start' value through CSS.");
151
152 test(function() {
153   checkValues(placeItemsEnd, "placeItems", "place-items", "", "end end");
154   checkPlaceItemsValues(placeItemsEnd, "", "end", "end");
155 }, "Test getting the Computed Value of place-items's longhand properties when setting 'end' value through CSS.");
156
157 test(function() {
158   checkValues(placeItemsSelfStart, "placeItems", "place-items", "", "self-start self-start");
159   checkPlaceItemsValues(placeItemsSelfStart, "", "self-start", "self-start");
160 }, "Test getting the Computed Value of place-items's longhand properties when setting 'self-start' value through CSS.");
161
162 test(function() {
163   checkValues(placeItemsStretch, "placeItems", "place-items", "", "stretch stretch");
164   checkPlaceItemsValues(placeItemsStretch, "", "stretch", "stretch");
165 }, "Test getting the Computed Value of place-items's longhand properties when setting 'stretch' value through CSS.");
166
167 test(function() {
168   checkValues(placeItemsStartEnd, "placeItems", "place-items", "", "start end");
169   checkPlaceItemsValues(placeItemsStartEnd, "", "start", "end");
170 }, "Test getting the Computed Value of place-items's longhand properties when setting 'start end' value through CSS.");
171
172 test(function() {
173   checkValues(placeItemsStartSelfEnd, "placeItems", "place-items", "", "start self-end");
174   checkPlaceItemsValues(placeItemsStartSelfEnd, "", "start", "self-end");
175 }, "Test getting the Computed Value of place-items's longhand properties when setting 'start self-end' value through CSS.");
176
177 test(function() {
178   checkValues(placeItemsStartBaseline, "placeItems", "place-items", "", "start baseline");
179   checkPlaceItemsValues(placeItemsStartBaseline, "", "start", "baseline");
180 }, "Test getting the Computed Value of place-items's longhand properties when setting 'start baseline' value through CSS.");
181
182 test(function() {
183   checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal");
184   checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
185 }, "Test setting 'auto' as incorrect value through CSS.");
186
187 test(function() {
188   checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "normal normal");
189   checkPlaceItemsValues(placeItemsCenterAuto, "", "normal", "normal");
190 }, "Test setting 'center auto' as incorrect value through CSS.");
191
192 test(function() {
193   checkValues(placeItemsNone, "placeItems", "place-items", "", "normal normal");
194   checkPlaceItemsValues(placeItemsNone, "", "normal", "normal");
195 }, "Test setting 'none' as incorrect value through CSS.");
196
197 test(function() {
198   checkValues(placeItemsSafe, "placeItems", "place-items", "", "normal normal");
199   checkPlaceItemsValues(placeItemsSafe, "", "normal", "normal");
200 }, "Test setting 'safe' as incorrect value through CSS.");
201
202 test(function() {
203   checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal normal");
204   checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
205 }, "Test setting 'start safe' as incorrect value through CSS.");
206
207 test(function() {
208   checkValues(placeItemsBaselineSafe, "placeItems", "place-items", "", "normal normal");
209   checkPlaceItemsValues(placeItemsBaselineSafe, "", "normal", "normal");
210 }, "Test setting 'baseline safe' as incorrect value through CSS.");
211
212 test(function() {
213   checkValues(placeItemsStartEndLeft, "placeItems", "place-items", "", "normal normal");
214   checkPlaceItemsValues(placeItemsStartEndLeft, "", "normal", "normal");
215 }, "Test setting 'start end left' as incorrect value through CSS.");
216
217 test(function() {
218   checkPlaceItemsValuesJS("center", "center", "center");
219   checkPlaceItemsValuesJS("center start", "center", "start");
220   checkPlaceItemsValuesJS("self-start end", "self-start", "end");
221   checkPlaceItemsValuesJS("normal end", "normal", "end");
222 }, "Test setting values through JS.");
223
224 test(function() {
225   checkPlaceItemsValuesBadJS("auto");
226   checkPlaceItemsValuesBadJS("auto normal");
227   checkPlaceItemsValuesBadJS("center auto");
228   checkPlaceItemsValuesBadJS("legacy");
229   checkPlaceItemsValuesBadJS("left legacy");
230   checkPlaceItemsValuesBadJS("space-between");
231   checkPlaceItemsValuesBadJS("center safe");
232   checkPlaceItemsValuesBadJS("center self-start center");
233   checkPlaceItemsValuesBadJS("asrt", "normal");
234   checkPlaceItemsValuesBadJS("auto", "normal");
235   checkPlaceItemsValuesBadJS("10px", "normal");
236   checkPlaceItemsValuesBadJS("stretch safe");
237   checkPlaceItemsValuesBadJS("self-start start end");
238   checkPlaceItemsValuesBadJS("");
239 }, "Test setting incorrect values through JS.");
240
241 test(function() {
242   element = document.createElement("div");
243   document.body.appendChild(element);
244   checkValues(element, "placeItems", "place-items", "", "normal normal");
245   element.style.placeItems = "center";
246   checkPlaceItemsValues(element, "center", "center", "center");
247   element.style.placeItems = "initial";
248   checkValues(element, "placeItems", "place-items", "initial", "normal normal");
249   checkPlaceItemsValues(element, "initial", "normal", "normal");
250 }, "Test the 'initial' value of the place-items shorthand and its longhand properties' Computed value");
251
252 test(function() {
253   document.body.style.placeItems = "start";
254   var anotherElement = document.createElement("div");
255   document.body.appendChild(anotherElement);
256   checkPlaceItemsValues(anotherElement, "", "normal", "normal");
257   anotherElement.style.placeItems = "inherit";
258   checkPlaceItemsValues(anotherElement, "inherit", "start", "start");
259 }, "Test the 'inherit' value of the place-items shorthand and its longhand properties' Computed value");
260 </script>
261 </body>
262 </html>