OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <script src="../../resources/testharness.js"></script> | |
3 <script src="../../resources/testharnessreport.js"></script> | |
4 <script src="resources/keyframes-test.js"></script> | |
5 <script> | |
6 test(function() { | |
7 assertAnimationStyles([ | |
8 {opacity: '0', left: '0px', easing: 'steps(2, start)'}, | |
9 {opacity: '0.25', left: '25px'}, | |
10 {opacity: '0.75', left: '75px'}, | |
11 ], { | |
12 0: {opacity: '0.125', left: '12.5px'}, | |
13 0.125: {opacity: '0.125', left: '12.5px'}, | |
14 0.25: {opacity: '0.25', left: '25px'}, | |
15 0.375: {opacity: '0.25', left: '25px'}, | |
16 0.5: {opacity: '0.25', left: '25px'}, | |
17 0.625: {opacity: '0.375', left: '37.5px'}, | |
18 0.75: {opacity: '0.5', left: '50px'}, | |
19 0.875: {opacity: '0.625', left: '62.5px'}, | |
20 1: {opacity: '0.75', left: '75px'}, | |
21 }, 'with easing on first keyframe'); | |
22 | |
23 assertAnimationStyles([ | |
24 {opacity: '0', left: '0px'}, | |
25 {opacity: '0.5', left: '50px', easing: 'steps(2, start)'}, | |
26 {opacity: '0.75', left: '75px'}, | |
27 ], { | |
28 0: {opacity: '0', left: '0px'}, | |
29 0.125: {opacity: '0.125', left: '12.5px'}, | |
30 0.25: {opacity: '0.25', left: '25px'}, | |
31 0.375: {opacity: '0.375', left: '37.5px'}, | |
32 0.5: {opacity: '0.625', left: '62.5px'}, | |
33 0.625: {opacity: '0.625', left: '62.5px'}, | |
34 0.75: {opacity: '0.75', left: '75px'}, | |
35 0.875: {opacity: '0.75', left: '75px'}, | |
36 1: {opacity: '0.75', left: '75px'}, | |
37 }, 'with easing on second keyframe'); | |
38 }, | |
39 'element.animate() with eased keyframe', | |
40 { | |
41 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', | |
42 assert: [ | |
43 'element.animate() should start an animation when keyframes are specified wi
th timing functions', | |
44 'for their easing property. The animation should use the given timing functi
on between consecutive', | |
45 'keyframe offsets.', | |
46 ], | |
47 author: 'Alan Cutter', | |
48 }); | |
49 | |
50 test(function() { | |
51 assertAnimationStyles([ | |
52 {opacity: '0', offset: 0, easing: 'steps(2, start)'}, | |
53 {left: '0px', offset: 0}, | |
54 {opacity: '0.5', left: '50px'}, | |
55 ], { | |
56 0: {opacity: '0.25', left: '0px'}, | |
57 0.25: {opacity: '0.25', left: '12.5px'}, | |
58 0.5: {opacity: '0.5', left: '25px'}, | |
59 0.75: {opacity: '0.5', left: '37.5px'}, | |
60 1: {opacity: '0.5', left: '50px'}, | |
61 }); | |
62 }, | |
63 'element.animate() with eased keyframe on single property', | |
64 { | |
65 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', | |
66 assert: [ | |
67 'element.animate() should start an animation when keyframes are specified wi
th timing functions', | |
68 'for their easing property. The animation should use the given timing functi
on only on the properties', | |
69 'specified in the same keyframe.', | |
70 ], | |
71 author: 'Alan Cutter', | |
72 }); | |
73 | |
74 test(function() { | |
75 assertAnimationStyles([ | |
76 {opacity: '0', left: '0px'}, | |
77 {opacity: '0.5', left: '50px', easing: 'steps(2, start)'}, | |
78 ], { | |
79 0: {opacity: '0', left: '0px'}, | |
80 0.25: {opacity: '0.125', left: '12.5px'}, | |
81 0.5: {opacity: '0.25', left: '25px'}, | |
82 0.75: {opacity: '0.375', left: '37.5px'}, | |
83 1: {opacity: '0.5', left: '50px'}, | |
84 }); | |
85 }, | |
86 'element.animate() with easing on last keyframe', | |
87 { | |
88 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', | |
89 assert: [ | |
90 'element.animate() should start an animation when keyframes are specified wi
th timing functions', | |
91 'for their easing property. Easing on the last keyframes should have no effe
ct on the animation.', | |
92 ], | |
93 author: 'Alan Cutter', | |
94 }); | |
95 </script> | |
OLD | NEW |