transition-property property and transition shorthand property doesn't accept "all...
[WebKit-https.git] / LayoutTests / transitions / transitions-parsing.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../fast/js/resources/js-test-pre.js"></script>
5 </head>
6 <body>
7 <script>
8 description("Test the parsing and the computed style values of the transitions properties.")
9
10 var testContainer = document.createElement("div");
11 document.body.appendChild(testContainer);
12
13 testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test">hello</div></div>';
14
15 e = document.getElementById('test');
16 style = e.style;
17 computedStyle = window.getComputedStyle(e, null);
18
19 // This function checks the return value of computedStyle.transition and verifies WebKit can parse it.
20 function checkTransitionShorthandValue() {
21     var before = computedStyle.getPropertyValue('transition');
22     e.style.transition = '';
23     e.style.transition = before;
24     return (computedStyle.getPropertyValue('transition') == before);
25 }
26
27 debug("Valid transition-property values.");
28 // Initial test.
29 shouldBe("computedStyle.transitionProperty", "'all'");
30 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
31
32 style.transitionProperty = "none";
33 shouldNotBe("Object.keys(style).indexOf('transitionProperty')", "-1");
34 shouldNotBe("Object.keys(style).indexOf('webkitTransitionProperty')", "-1");
35 shouldBe("style.transitionProperty", "'none'");
36 shouldBe("computedStyle.transitionProperty", "'none'");
37 shouldBe("style.webkitTransitionProperty", "'none'");
38 shouldBe("computedStyle.webkitTransitionProperty", "'none'");
39
40 style.transitionProperty = "all";
41 shouldBe("style.transitionProperty", "'all'");
42 shouldBe("computedStyle.transitionProperty", "'all'");
43 shouldBe("style.webkitTransitionProperty", "'all'");
44 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
45
46 style.transitionProperty = "all, all";
47 shouldBe("style.transitionProperty", "'all, all'");
48 shouldBe("computedStyle.transitionProperty", "'all'");
49 shouldBe("style.webkitTransitionProperty", "'all, all'");
50 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
51
52 style.transitionProperty = "background-position";
53 shouldBe("style.transitionProperty", "'background-position'");
54 shouldBe("computedStyle.transitionProperty", "'background-position'");
55 shouldBe("style.webkitTransitionProperty", "'background-position'");
56 shouldBe("computedStyle.webkitTransitionProperty", "'background-position'");
57
58 style.transitionProperty = "background-position, font-size";
59 shouldBe("style.transitionProperty", "'background-position, font-size'");
60 shouldBe("computedStyle.transitionProperty", "'background-position, font-size'");
61 shouldBe("style.webkitTransitionProperty", "'background-position, font-size'");
62 shouldBe("computedStyle.webkitTransitionProperty", "'background-position, font-size'");
63
64 style.transitionProperty = "background-position, font-size, color";
65 shouldBe("style.transitionProperty", "'background-position, font-size, color'");
66 shouldBe("computedStyle.transitionProperty", "'background-position, font-size, color'");
67 shouldBe("style.webkitTransitionProperty", "'background-position, font-size, color'");
68 shouldBe("computedStyle.webkitTransitionProperty", "'background-position, font-size, color'");
69
70 style.transitionProperty = "all, font-size, color";
71 shouldBe("style.transitionProperty", "'all, font-size, color'");
72 shouldBe("computedStyle.transitionProperty", "'all, font-size, color'");
73 shouldBe("style.webkitTransitionProperty", "'all, font-size, color'");
74 shouldBe("computedStyle.webkitTransitionProperty", "'all, font-size, color'");
75
76 style.transitionProperty = "font-size, color, all";
77 shouldBe("style.transitionProperty", "'font-size, color, all'");
78 shouldBe("computedStyle.transitionProperty", "'font-size, color, all'");
79 shouldBe("style.webkitTransitionProperty", "'font-size, color, all'");
80 shouldBe("computedStyle.webkitTransitionProperty", "'font-size, color, all'");
81
82 style.transitionProperty = "font-size, all, color";
83 shouldBe("style.transitionProperty", "'font-size, all, color'");
84 shouldBe("computedStyle.transitionProperty", "'font-size, all, color'");
85 shouldBe("style.webkitTransitionProperty", "'font-size, all, color'");
86 shouldBe("computedStyle.webkitTransitionProperty", "'font-size, all, color'");
87
88 debug("Invalid transition-property values.");
89 style.transitionProperty = "";
90
91 style.transitionProperty = "solid, font-size";
92 shouldBe("style.transitionProperty", "''");
93 shouldBe("computedStyle.transitionProperty", "'all'");
94 shouldBe("style.webkitTransitionProperty", "''");
95 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
96
97 style.transitionProperty = "solid, left";
98 shouldBe("style.transitionProperty", "''");
99 shouldBe("computedStyle.transitionProperty", "'all'");
100 shouldBe("style.webkitTransitionProperty", "''");
101 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
102
103 style.transitionProperty = "solid";
104 shouldBe("style.transitionProperty", "''");
105 shouldBe("computedStyle.transitionProperty", "'all'");
106 shouldBe("style.webkitTransitionProperty", "''");
107 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
108
109 style.transitionProperty = "20px";
110 shouldBe("style.transitionProperty", "''");
111 shouldBe("computedStyle.transitionProperty", "'all'");
112 shouldBe("style.webkitTransitionProperty", "''");
113 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
114
115 style.transitionProperty = "0";
116 shouldBe("style.transitionProperty", "''");
117 shouldBe("computedStyle.transitionProperty", "'all'");
118 shouldBe("style.webkitTransitionProperty", "''");
119 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
120
121 style.transitionProperty = "'font-size'";
122 shouldBe("style.transitionProperty", "''");
123 shouldBe("computedStyle.transitionProperty", "'all'");
124 shouldBe("style.webkitTransitionProperty", "''");
125 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
126
127 style.transitionProperty = "all none";
128 shouldBe("style.transitionProperty", "''");
129 shouldBe("computedStyle.transitionProperty", "'all'");
130 shouldBe("style.webkitTransitionProperty", "''");
131 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
132
133 style.transitionProperty = "opacity width";
134 shouldBe("style.transitionProperty", "''");
135 shouldBe("computedStyle.transitionProperty", "'all'");
136 shouldBe("style.webkitTransitionProperty", "''");
137 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
138
139 style.transitionProperty = "all, none";
140 shouldBe("style.transitionProperty", "''");
141 shouldBe("computedStyle.transitionProperty", "'all'");
142 shouldBe("style.webkitTransitionProperty", "''");
143 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
144
145 style.transitionProperty = "none, none";
146 shouldBe("style.transitionProperty", "''");
147 shouldBe("computedStyle.transitionProperty", "'all'");
148 shouldBe("style.webkitTransitionProperty", "''");
149 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
150
151 style.transitionProperty = "none, all";
152 shouldBe("style.transitionProperty", "''");
153 shouldBe("computedStyle.transitionProperty", "'all'");
154 shouldBe("style.webkitTransitionProperty", "''");
155 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
156
157 style.transitionProperty = "width, none";
158 shouldBe("style.transitionProperty", "''");
159 shouldBe("computedStyle.transitionProperty", "'all'");
160 shouldBe("style.webkitTransitionProperty", "''");
161 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
162
163 style.transitionProperty = "none, width";
164 shouldBe("style.transitionProperty", "''");
165 shouldBe("computedStyle.transitionProperty", "'all'");
166 shouldBe("style.webkitTransitionProperty", "''");
167 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
168
169 style.transitionProperty = "";
170
171 debug("Valid transition-duration values.");
172 // Initial test.
173 shouldBe("computedStyle.transitionDuration", "'0s'");
174 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
175
176 style.transitionDuration = "0s";
177 shouldNotBe("Object.keys(style).indexOf('transitionDuration')", "-1");
178 shouldNotBe("Object.keys(style).indexOf('webkitTransitionDuration')", "-1");
179 shouldBe("style.transitionDuration", "'0s'");
180 shouldBe("computedStyle.transitionDuration", "'0s'");
181 shouldBe("style.webkitTransitionDuration", "'0s'");
182 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
183
184 style.transitionDuration = "5s";
185 shouldBe("style.transitionDuration", "'5s'");
186 shouldBe("computedStyle.transitionDuration", "'5s'");
187 shouldBe("style.webkitTransitionDuration", "'5s'");
188 shouldBe("computedStyle.webkitTransitionDuration", "'5s'");
189
190 style.transitionDuration = "10ms";
191 shouldBe("style.transitionDuration", "'10ms'");
192 shouldBe("computedStyle.transitionDuration", "'0.01s'");
193 shouldBe("style.webkitTransitionDuration", "'10ms'");
194 shouldBe("computedStyle.webkitTransitionDuration", "'0.01s'");
195
196 style.transitionProperty = "opacity, width";
197
198 style.transitionDuration = "10ms, 20s";
199 shouldBe("style.transitionDuration", "'10ms, 20s'");
200 shouldBe("computedStyle.transitionDuration", "'0.01s, 20s'");
201 shouldBe("style.webkitTransitionDuration", "'10ms, 20s'");
202 shouldBe("computedStyle.webkitTransitionDuration", "'0.01s, 20s'");
203
204 debug("Invalid transition-duration values.");
205 style.transitionProperty = "opacity";
206 style.transitionDuration = "";
207
208 // Negative values are invalid.
209 style.transitionDuration = "-10ms";
210 shouldBe("style.transitionDuration", "''");
211 shouldBe("computedStyle.transitionDuration", "'0s'");
212 shouldBe("style.webkitTransitionDuration", "''");
213 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
214
215 style.transitionDuration = "'5ms'";
216 shouldBe("style.transitionDuration", "''");
217 shouldBe("computedStyle.transitionDuration", "'0s'");
218 shouldBe("style.webkitTransitionDuration", "''");
219 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
220
221 style.transitionDuration = "30px";
222 shouldBe("style.transitionDuration", "''");
223 shouldBe("computedStyle.transitionDuration", "'0s'");
224 shouldBe("style.webkitTransitionDuration", "''");
225 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
226
227 style.transitionDuration = "solid";
228 shouldBe("style.transitionDuration", "''");
229 shouldBe("computedStyle.transitionDuration", "'0s'");
230 shouldBe("style.webkitTransitionDuration", "''");
231 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
232
233 style.transitionDuration = "20";
234 shouldBe("style.transitionDuration", "''");
235 shouldBe("computedStyle.transitionDuration", "'0s'");
236 shouldBe("style.webkitTransitionDuration", "''");
237 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
238
239 style.transitionDuration = "20%";
240 shouldBe("style.transitionDuration", "''");
241 shouldBe("computedStyle.transitionDuration", "'0s'");
242 shouldBe("style.webkitTransitionDuration", "''");
243 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
244
245 style.transitionDuration = "0s, 20px";
246 shouldBe("style.transitionDuration", "''");
247 shouldBe("computedStyle.transitionDuration", "'0s'");
248 shouldBe("style.webkitTransitionDuration", "''");
249 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
250
251 debug("Valid transition-timing-function values.");
252 // Initial test.
253 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
254 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
255
256 style.transitionTimingFunction = "linear";
257 shouldNotBe("Object.keys(style).indexOf('transitionTimingFunction')", "-1");
258 shouldNotBe("Object.keys(style).indexOf('webkitTransitionTimingFunction')", "-1");
259 shouldBe("style.transitionTimingFunction", "'linear'");
260 shouldBe("computedStyle.transitionTimingFunction", "'linear'");
261 shouldBe("style.webkitTransitionTimingFunction", "'linear'");
262 shouldBe("computedStyle.webkitTransitionTimingFunction", "'linear'");
263
264 style.transitionTimingFunction = "ease";
265 shouldBe("style.transitionTimingFunction", "'ease'");
266 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
267 shouldBe("style.webkitTransitionTimingFunction", "'ease'");
268 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
269
270 style.transitionTimingFunction = "ease-in";
271 shouldBe("style.transitionTimingFunction", "'ease-in'");
272 shouldBe("computedStyle.transitionTimingFunction", "'ease-in'");
273 shouldBe("style.webkitTransitionTimingFunction", "'ease-in'");
274 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in'");
275
276 style.transitionTimingFunction = "ease-out";
277 shouldBe("style.transitionTimingFunction", "'ease-out'");
278 shouldBe("computedStyle.transitionTimingFunction", "'ease-out'");
279 shouldBe("style.webkitTransitionTimingFunction", "'ease-out'");
280 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-out'");
281
282 style.transitionTimingFunction = "ease-in-out";
283 shouldBe("style.transitionTimingFunction", "'ease-in-out'");
284 shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out'");
285 shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out'");
286 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out'");
287
288 style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)";
289 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
290 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
291 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
292 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
293
294 style.transitionTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)";
295 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
296 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
297 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
298 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
299
300 style.transitionTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)";
301 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
302 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
303 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
304 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
305
306 style.transitionTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)";
307 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
308 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
309 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
310 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
311
312 style.transitionTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)";
313 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
314 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
315 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
316 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
317
318 style.transitionTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)";
319 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
320 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
321 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
322 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
323
324 style.transitionTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)";
325 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
326 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
327 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
328 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
329
330 style.transitionTimingFunction = "step-start";
331 shouldBe("style.transitionTimingFunction", "'step-start'");
332 shouldBe("computedStyle.transitionTimingFunction", "'steps(1, start)'");
333 shouldBe("style.webkitTransitionTimingFunction", "'step-start'");
334 shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(1, start)'");
335
336 style.transitionTimingFunction = "step-end";
337 shouldBe("style.transitionTimingFunction", "'step-end'");
338 shouldBe("computedStyle.transitionTimingFunction", "'steps(1, end)'");
339 shouldBe("style.webkitTransitionTimingFunction", "'step-end'");
340 shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(1, end)'");
341
342 style.transitionTimingFunction = "steps(3)";
343 shouldBe("style.transitionTimingFunction", "'steps(3, end)'");
344 shouldBe("computedStyle.transitionTimingFunction", "'steps(3, end)'");
345 shouldBe("style.webkitTransitionTimingFunction", "'steps(3, end)'");
346 shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(3, end)'");
347
348 style.transitionTimingFunction = "steps(4, end)";
349 shouldBe("style.transitionTimingFunction", "'steps(4, end)'");
350 shouldBe("computedStyle.transitionTimingFunction", "'steps(4, end)'");
351 shouldBe("style.webkitTransitionTimingFunction", "'steps(4, end)'");
352 shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(4, end)'");
353
354 style.transitionTimingFunction = "steps(5, start)";
355 shouldBe("style.transitionTimingFunction", "'steps(5, start)'");
356 shouldBe("computedStyle.transitionTimingFunction", "'steps(5, start)'");
357 shouldBe("style.webkitTransitionTimingFunction", "'steps(5, start)'");
358 shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(5, start)'");
359
360 style.transitionProperty = "opacity, width";
361
362 style.transitionTimingFunction = "ease-in-out, ease-in";
363 shouldBe("style.transitionTimingFunction", "'ease-in-out, ease-in'");
364 shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out, ease-in'");
365 shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out, ease-in'");
366 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out, ease-in'");
367
368 style.transitionTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)";
369 shouldBe("style.transitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
370 shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
371 shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
372 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
373
374 style.transitionTimingFunction = "steps(3, start), ease-in-out";
375 shouldBe("style.transitionTimingFunction", "'steps(3, start), ease-in-out'");
376 shouldBe("computedStyle.transitionTimingFunction", "'steps(3, start), ease-in-out'");
377 shouldBe("style.webkitTransitionTimingFunction", "'steps(3, start), ease-in-out'");
378 shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(3, start), ease-in-out'");
379
380 debug("Invalid transition-timing-function values.");
381 style.transitionProperty = "";
382 style.transitionTimingFunction = "";
383
384 style.transitionTimingFunction = "cubic-bezier(3, 0.1, 4, 1)";
385 shouldBe("style.transitionTimingFunction", "''");
386 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
387 shouldBe("style.webkitTransitionTimingFunction", "''");
388 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
389
390 style.transitionTimingFunction = "cubic-bezier(1, 0.1, 3, 1)";
391 shouldBe("style.transitionTimingFunction", "''");
392 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
393 shouldBe("style.webkitTransitionTimingFunction", "''");
394 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
395
396 style.transitionTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)";
397 shouldBe("style.transitionTimingFunction", "''");
398 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
399 shouldBe("style.webkitTransitionTimingFunction", "''");
400 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
401
402 style.transitionTimingFunction = "cubic-bezier(3, 0, 4, 0.4)";
403 shouldBe("style.transitionTimingFunction", "''");
404 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
405 shouldBe("style.webkitTransitionTimingFunction", "''");
406 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
407
408 style.transitionTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)";
409 shouldBe("style.transitionTimingFunction", "''");
410 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
411 shouldBe("style.webkitTransitionTimingFunction", "''");
412 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
413
414 style.transitionTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)";
415 shouldBe("style.transitionTimingFunction", "''");
416 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
417 shouldBe("style.webkitTransitionTimingFunction", "''");
418 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
419
420 style.transitionTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)";
421 shouldBe("style.transitionTimingFunction", "''");
422 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
423 shouldBe("style.webkitTransitionTimingFunction", "''");
424 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
425
426 style.transitionTimingFunction = "steps(5, 3)";
427 shouldBe("style.transitionTimingFunction", "''");
428 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
429 shouldBe("style.webkitTransitionTimingFunction", "''");
430 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
431
432 style.transitionTimingFunction = "steps(-5, start)";
433 shouldBe("style.transitionTimingFunction", "''");
434 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
435 shouldBe("style.webkitTransitionTimingFunction", "''");
436 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
437
438 style.transitionTimingFunction = "steps(5, start, end)";
439 shouldBe("style.transitionTimingFunction", "''");
440 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
441 shouldBe("style.webkitTransitionTimingFunction", "''");
442 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
443
444 style.transitionTimingFunction = "step(5)";
445 shouldBe("style.transitionTimingFunction", "''");
446 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
447 shouldBe("style.webkitTransitionTimingFunction", "''");
448 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
449
450 style.transitionTimingFunction = "red";
451 shouldBe("style.transitionTimingFunction", "''");
452 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
453 shouldBe("style.webkitTransitionTimingFunction", "''");
454 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
455
456 style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)";
457 shouldBe("style.transitionTimingFunction", "''");
458 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
459 shouldBe("style.webkitTransitionTimingFunction", "''");
460 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
461
462 style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)";
463 shouldBe("style.transitionTimingFunction", "''");
464 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
465 shouldBe("style.webkitTransitionTimingFunction", "''");
466 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
467
468 style.transitionTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)";
469 shouldBe("style.transitionTimingFunction", "''");
470 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
471 shouldBe("style.webkitTransitionTimingFunction", "''");
472 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
473
474 debug("Valid transition-delay values.");
475 // Initial test.
476 shouldBe("computedStyle.transitionDelay", "'0s'");
477 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
478
479 style.transitionDelay = "0s";
480 shouldNotBe("Object.keys(style).indexOf('transitionDelay')", "-1");
481 shouldNotBe("Object.keys(style).indexOf('webkitTransitionDelay')", "-1");
482 shouldBe("style.transitionDelay", "'0s'");
483 shouldBe("computedStyle.transitionDelay", "'0s'");
484 shouldBe("style.webkitTransitionDelay", "'0s'");
485 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
486
487 style.transitionDelay = "5s";
488 shouldBe("style.transitionDelay", "'5s'");
489 shouldBe("computedStyle.transitionDelay", "'5s'");
490 shouldBe("style.webkitTransitionDelay", "'5s'");
491 shouldBe("computedStyle.webkitTransitionDelay", "'5s'");
492
493 style.transitionDelay = "10ms";
494 shouldBe("style.transitionDelay", "'10ms'");
495 shouldBe("computedStyle.transitionDelay", "'0.01s'");
496 shouldBe("style.webkitTransitionDelay", "'10ms'");
497 shouldBe("computedStyle.webkitTransitionDelay", "'0.01s'");
498
499 style.transitionDelay = "-10ms";
500 shouldBe("style.transitionDelay", "'-10ms'");
501 shouldBe("computedStyle.transitionDelay", "'-0.01s'");
502 shouldBe("style.webkitTransitionDelay", "'-10ms'");
503 shouldBe("computedStyle.webkitTransitionDelay", "'-0.01s'");
504
505 style.transitionProperty = "opacity, width";
506
507 style.transitionDelay = "-10ms, 20s";
508 shouldBe("style.transitionDelay", "'-10ms, 20s'");
509 shouldBe("computedStyle.transitionDelay", "'-0.01s, 20s'");
510 shouldBe("style.webkitTransitionDelay", "'-10ms, 20s'");
511 shouldBe("computedStyle.webkitTransitionDelay", "'-0.01s, 20s'");
512
513 debug("Invalid transition-duration values.");
514 style.transitionProperty = "opacity";
515 style.transitionDelay = "";
516
517 style.transitionDelay = "'5ms'";
518 shouldBe("style.transitionDelay", "''");
519 shouldBe("computedStyle.transitionDelay", "'0s'");
520 shouldBe("style.webkitTransitionDelay", "''");
521 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
522
523 style.transitionDelay = "30px";
524 shouldBe("style.transitionDelay", "''");
525 shouldBe("computedStyle.transitionDelay", "'0s'");
526 shouldBe("style.webkitTransitionDelay", "''");
527 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
528
529 style.transitionDelay = "solid";
530 shouldBe("style.transitionDelay", "''");
531 shouldBe("computedStyle.transitionDelay", "'0s'");
532 shouldBe("style.webkitTransitionDelay", "''");
533 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
534
535 style.transitionDelay = "20";
536 shouldBe("style.transitionDelay", "''");
537 shouldBe("computedStyle.transitionDelay", "'0s'");
538 shouldBe("style.webkitTransitionDelay", "''");
539 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
540
541 style.transitionDelay = "20%";
542 shouldBe("style.transitionDelay", "''");
543 shouldBe("computedStyle.transitionDelay", "'0s'");
544 shouldBe("style.webkitTransitionDelay", "''");
545 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
546
547 style.transitionDelay = "0s, 20px";
548 shouldBe("style.transitionDelay", "''");
549 shouldBe("computedStyle.transitionDelay", "'0s'");
550 shouldBe("style.webkitTransitionDelay", "''");
551 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
552
553 debug("Valid transition shorthand values.");
554 style.transition = "";
555 // Initial test.
556 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
557 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
558
559 style.transition = "none";
560 shouldNotBe("Object.keys(style).indexOf('transition')", "-1");
561 shouldNotBe("Object.keys(style).indexOf('webkitTransition')", "-1");
562 shouldBe("style.transition", "'none'");
563 shouldBe("computedStyle.transition", "'none 0s ease 0s'");
564 shouldBe("style.webkitTransition", "'none'");
565 shouldBe("computedStyle.webkitTransition", "'none 0s ease 0s'");
566 shouldBe("checkTransitionShorthandValue()", "true");
567
568 style.transition = "none 20s";
569 shouldBe("style.transition", "'none 20s'");
570 shouldBe("computedStyle.transition", "'none 20s ease 0s'");
571 shouldBe("style.webkitTransition", "'none 20s'");
572 shouldBe("computedStyle.webkitTransition", "'none 20s ease 0s'");
573 shouldBe("checkTransitionShorthandValue()", "true");
574
575 style.transition = "ease-in none 20s";
576 shouldBe("style.transition", "'none 20s ease-in'");
577 shouldBe("computedStyle.transition", "'none 20s ease-in 0s'");
578 shouldBe("style.webkitTransition", "'none 20s ease-in'");
579 shouldBe("computedStyle.webkitTransition", "'none 20s ease-in 0s'");
580 shouldBe("checkTransitionShorthandValue()", "true");
581
582 style.transition = "ease-in opacity 20s";
583 shouldBe("style.transition", "'opacity 20s ease-in'");
584 shouldBe("computedStyle.transition", "'opacity 20s ease-in 0s'");
585 shouldBe("style.webkitTransition", "'opacity 20s ease-in'");
586 shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 0s'");
587 shouldBe("checkTransitionShorthandValue()", "true");
588
589 style.transition = "ease-in opacity 20s 10s";
590 shouldBe("style.transition", "'opacity 20s ease-in 10s'");
591 shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s'");
592 shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s'");
593 shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s'");
594 // Let's double check here the delay and duration. As stated in the spec the first value parsed
595 // is assigned to the duration.
596 shouldBe("computedStyle.transitionDuration", "'20s'");
597 shouldBe("computedStyle.webkitTransitionDuration", "'20s'");
598 shouldBe("computedStyle.transitionDelay", "'10s'");
599 shouldBe("computedStyle.webkitTransitionDelay", "'10s'");
600 shouldBe("checkTransitionShorthandValue()", "true");
601
602 style.transition = "20s ease-in opacity 10s";
603 shouldBe("style.transition", "'opacity 20s ease-in 10s'");
604 shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s'");
605 shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s'");
606 shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s'");
607 shouldBe("computedStyle.transitionDuration", "'20s'");
608 shouldBe("computedStyle.webkitTransitionDuration", "'20s'");
609 shouldBe("computedStyle.transitionDelay", "'10s'");
610 shouldBe("computedStyle.webkitTransitionDelay", "'10s'");
611 shouldBe("checkTransitionShorthandValue()", "true");
612
613 style.transition = "ease-in opacity 20s 10s, cubic-bezier(0.32, 0, 1, 1) 10s width 20s";
614 shouldBe("style.transition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
615 shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
616 shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
617 shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
618 // Let's double check here the delay and duration. As stated in the spec the first value parsed
619 // is assigned to the duration.
620 shouldBe("computedStyle.transitionDuration", "'20s, 10s'");
621 shouldBe("computedStyle.webkitTransitionDuration", "'20s, 10s'");
622 shouldBe("computedStyle.transitionDelay", "'10s, 20s'");
623 shouldBe("computedStyle.webkitTransitionDelay", "'10s, 20s'");
624 shouldBe("checkTransitionShorthandValue()", "true");
625
626 style.transition = "all, all";
627 shouldBe("style.transition", "'all, all'");
628 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
629 shouldBe("style.webkitTransition", "'all, all'");
630 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
631
632 style.transition = "all 20s 10s ease-in, all ease-out 20s";
633 shouldBe("style.transition", "'all 20s ease-in 10s, all 20s ease-out'");
634 shouldBe("computedStyle.transition", "'all 20s ease-out 0s'");
635 shouldBe("style.webkitTransition", "'all 20s ease-in 10s, all 20s ease-out'");
636 shouldBe("computedStyle.webkitTransition", "'all 20s ease-out 0s'");
637
638 style.transition = "ease-in opacity 20s 10s, all ease-out 20s";
639 shouldBe("style.transition", "'opacity 20s ease-in 10s, all 20s ease-out'");
640 shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s, all 20s ease-out 0s'");
641 shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s, all 20s ease-out'");
642 shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s, all 20s ease-out 0s'");
643 shouldBe("checkTransitionShorthandValue()", "true");
644
645 style.transition = " all ease-out 20s, ease-in opacity 20s 10s";
646 shouldBe("style.transition", "'all 20s ease-out, opacity 20s ease-in 10s'");
647 shouldBe("computedStyle.transition", "'all 20s ease-out 0s, opacity 20s ease-in 10s'");
648 shouldBe("style.webkitTransition", "'all 20s ease-out, opacity 20s ease-in 10s'");
649 shouldBe("computedStyle.webkitTransition", "'all 20s ease-out 0s, opacity 20s ease-in 10s'");
650 shouldBe("checkTransitionShorthandValue()", "true");
651
652 debug("Invalid transition shorthand values.");
653 style.transition = "";
654
655 style.transition = "20";
656 shouldBe("style.transition", "''");
657 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
658 shouldBe("style.webkitTransition", "''");
659 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
660
661 style.transition = "20, 20";
662 shouldBe("style.transition", "''");
663 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
664 shouldBe("style.webkitTransition", "''");
665 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
666
667 style.transition = "widthFoo";
668 shouldBe("style.transition", "''");
669 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
670 shouldBe("style.webkitTransition", "''");
671 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
672
673 style.transition = "all 30s width ease-in";
674 shouldBe("style.transition", "''");
675 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
676 shouldBe("style.webkitTransition", "''");
677 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
678
679 style.transition = "all 30s ease-in 20px";
680 shouldBe("style.transition", "''");
681 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
682 shouldBe("style.webkitTransition", "''");
683 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
684
685 style.transition = "all 30s ease-in 20s, 20px";
686 shouldBe("style.transition", "''");
687 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
688 shouldBe("style.webkitTransition", "''");
689 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
690
691 style.transition = "all 30s ease-in 20s, step-start(2)";
692 shouldBe("style.transition", "''");
693 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
694 shouldBe("style.webkitTransition", "''");
695 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
696
697 style.transition = "ease-in opacity 20s 10s, none";
698 shouldBe("style.transition", "''");
699 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
700 shouldBe("style.webkitTransition", "''");
701 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
702
703 style.transition = "none, ease-in opacity 20s 10s, none";
704 shouldBe("style.transition", "''");
705 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
706 shouldBe("style.webkitTransition", "''");
707 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
708
709 style.transition = "none, ease-in opacity 20s 10s";
710 shouldBe("style.transition", "''");
711 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
712 shouldBe("style.webkitTransition", "''");
713 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
714
715 style.transition = "ease-in opacity 20s 10s, all 20s ease-out 0s, none";
716 shouldBe("style.transition", "''");
717 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
718 shouldBe("style.webkitTransition", "''");
719 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
720
721 style.transition = "ease-in opacity 20s 10s, ease-in width 20s 10s, none";
722 shouldBe("style.transition", "''");
723 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
724 shouldBe("style.webkitTransition", "''");
725 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
726
727 style.transition = "none, none";
728 shouldBe("style.transition", "''");
729 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
730 shouldBe("style.webkitTransition", "''");
731 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
732
733 document.body.removeChild(testContainer);
734 </script>
735 <script src="../fast/js/resources/js-test-post.js"></script>
736 </body>
737 </html>