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