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