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