OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../resources/testharness.js"></script> | 2 <script src="../../resources/testharness.js"></script> |
3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../../resources/testharnessreport.js"></script> |
4 <script src="w3c/resources/keyframes-test.js"></script> | 4 <script src="resources/keyframes-test.js"></script> |
5 <script> | 5 <script> |
6 // FIXME: Remove the need for and use of this function. | 6 test(function() { |
7 // Currently our animation timeline is not stable during page load script execut
ion. | |
8 // By deferring the tests to requestAnimationFrame() we can get a stable timelin
e and | |
9 // avoid flaky test results. | |
10 function testInRAF(testFunction, description, properties) { | |
11 async_test(function(testHandle) { | |
12 requestAnimationFrame(function() { | |
13 testHandle.step(testFunction); | |
14 testHandle.done(); | |
15 }) | |
16 }, description, properties); | |
17 } | |
18 | |
19 testInRAF(function() { | |
20 assertAnimationStyles([ | 7 assertAnimationStyles([ |
21 {opacity: '0', left: '0px', easing: 'steps(2, start)'}, | 8 {opacity: '0', left: '0px', easing: 'steps(2, start)'}, |
22 {opacity: '0.25', left: '25px'}, | 9 {opacity: '0.25', left: '25px'}, |
23 {opacity: '0.75', left: '75px'}, | 10 {opacity: '0.75', left: '75px'}, |
24 ], { | 11 ], { |
25 0: {opacity: '0.125', left: '12.5px'}, | 12 0: {opacity: '0.125', left: '12.5px'}, |
26 0.125: {opacity: '0.125', left: '12.5px'}, | 13 0.125: {opacity: '0.125', left: '12.5px'}, |
27 0.25: {opacity: '0.25', left: '25px'}, | 14 0.25: {opacity: '0.25', left: '25px'}, |
28 0.375: {opacity: '0.25', left: '25px'}, | 15 0.375: {opacity: '0.25', left: '25px'}, |
29 0.5: {opacity: '0.25', left: '25px'}, | 16 0.5: {opacity: '0.25', left: '25px'}, |
(...skipping 23 matching lines...) Expand all Loading... |
53 { | 40 { |
54 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', | 41 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', |
55 assert: [ | 42 assert: [ |
56 'element.animate() should start an animation when keyframes are specified wi
th timing functions', | 43 'element.animate() should start an animation when keyframes are specified wi
th timing functions', |
57 'for their easing property. The animation should use the given timing functi
on between consecutive', | 44 'for their easing property. The animation should use the given timing functi
on between consecutive', |
58 'keyframe offsets.', | 45 'keyframe offsets.', |
59 ], | 46 ], |
60 author: 'Alan Cutter', | 47 author: 'Alan Cutter', |
61 }); | 48 }); |
62 | 49 |
63 testInRAF(function() { | 50 test(function() { |
64 assertAnimationStyles([ | 51 assertAnimationStyles([ |
65 {opacity: '0', offset: 0, easing: 'steps(2, start)'}, | 52 {opacity: '0', offset: 0, easing: 'steps(2, start)'}, |
66 {left: '0px', offset: 0}, | 53 {left: '0px', offset: 0}, |
67 {opacity: '0.5', left: '50px'}, | 54 {opacity: '0.5', left: '50px'}, |
68 ], { | 55 ], { |
69 0: {opacity: '0.25', left: '0px'}, | 56 0: {opacity: '0.25', left: '0px'}, |
70 0.25: {opacity: '0.25', left: '12.5px'}, | 57 0.25: {opacity: '0.25', left: '12.5px'}, |
71 0.5: {opacity: '0.5', left: '25px'}, | 58 0.5: {opacity: '0.5', left: '25px'}, |
72 0.75: {opacity: '0.5', left: '37.5px'}, | 59 0.75: {opacity: '0.5', left: '37.5px'}, |
73 1: {opacity: '0.5', left: '50px'}, | 60 1: {opacity: '0.5', left: '50px'}, |
74 }); | 61 }); |
75 }, | 62 }, |
76 'element.animate() with eased keyframe on single property', | 63 'element.animate() with eased keyframe on single property', |
77 { | 64 { |
78 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', | 65 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', |
79 assert: [ | 66 assert: [ |
80 'element.animate() should start an animation when keyframes are specified wi
th timing functions', | 67 'element.animate() should start an animation when keyframes are specified wi
th timing functions', |
81 'for their easing property. The animation should use the given timing functi
on only on the properties', | 68 'for their easing property. The animation should use the given timing functi
on only on the properties', |
82 'specified in the same keyframe.', | 69 'specified in the same keyframe.', |
83 ], | 70 ], |
84 author: 'Alan Cutter', | 71 author: 'Alan Cutter', |
85 }); | 72 }); |
86 | 73 |
87 testInRAF(function() { | 74 test(function() { |
88 assertAnimationStyles([ | 75 assertAnimationStyles([ |
89 {opacity: '0', left: '0px'}, | 76 {opacity: '0', left: '0px'}, |
90 {opacity: '0.5', left: '50px', easing: 'steps(2, start)'}, | 77 {opacity: '0.5', left: '50px', easing: 'steps(2, start)'}, |
91 ], { | 78 ], { |
92 0: {opacity: '0', left: '0px'}, | 79 0: {opacity: '0', left: '0px'}, |
93 0.25: {opacity: '0.125', left: '12.5px'}, | 80 0.25: {opacity: '0.125', left: '12.5px'}, |
94 0.5: {opacity: '0.25', left: '25px'}, | 81 0.5: {opacity: '0.25', left: '25px'}, |
95 0.75: {opacity: '0.375', left: '37.5px'}, | 82 0.75: {opacity: '0.375', left: '37.5px'}, |
96 1: {opacity: '0.5', left: '50px'}, | 83 1: {opacity: '0.5', left: '50px'}, |
97 }); | 84 }); |
98 }, | 85 }, |
99 'element.animate() with easing on last keyframe', | 86 'element.animate() with easing on last keyframe', |
100 { | 87 { |
101 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', | 88 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', |
102 assert: [ | 89 assert: [ |
103 'element.animate() should start an animation when keyframes are specified wi
th timing functions', | 90 'element.animate() should start an animation when keyframes are specified wi
th timing functions', |
104 'for their easing property. Easing on the last keyframes should have no effe
ct on the animation.', | 91 'for their easing property. Easing on the last keyframes should have no effe
ct on the animation.', |
105 ], | 92 ], |
106 author: 'Alan Cutter', | 93 author: 'Alan Cutter', |
107 }); | 94 }); |
108 </script> | 95 </script> |
OLD | NEW |