OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <meta charset=utf-8> | 2 <meta charset=utf-8> |
3 <title>easing tests</title> | 3 <title>easing tests</title> |
4 <link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffect
timing-easing"> | 4 <link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffect
timing-easing"> |
5 <script src="/resources/testharness.js"></script> | 5 <script src="/resources/testharness.js"></script> |
6 <script src="/resources/testharnessreport.js"></script> | 6 <script src="/resources/testharnessreport.js"></script> |
7 <script src="../../testcommon.js"></script> | 7 <script src="../../testcommon.js"></script> |
8 <script src="../../resources/effect-easing-tests.js"></script> | 8 <script src="../../resources/easing-tests.js"></script> |
9 <body> | 9 <body> |
10 <div id="log"></div> | 10 <div id="log"></div> |
11 <script> | 11 <script> |
12 'use strict'; | 12 'use strict'; |
13 | 13 |
14 function assert_progress(animation, currentTime, easingFunction) { | 14 function assert_progress(animation, currentTime, easingFunction) { |
15 animation.currentTime = currentTime; | 15 animation.currentTime = currentTime; |
16 var portion = currentTime / animation.effect.timing.duration; | 16 var portion = currentTime / animation.effect.timing.duration; |
17 assert_approx_equals(animation.effect.getComputedTiming().progress, | 17 assert_approx_equals(animation.effect.getComputedTiming().progress, |
18 easingFunction(portion), | 18 easingFunction(portion), |
19 0.01, | 19 0.01, |
20 'The progress of the animation should be approximately '
+ | 20 'The progress of the animation should be approximately '
+ |
21 easingFunction(portion) + ' at ' + currentTime + 'ms'); | 21 easingFunction(portion) + ' at ' + currentTime + 'ms'); |
22 } | 22 } |
23 | 23 |
24 gEffectEasingTests.forEach(function(options) { | 24 gEasingTests.forEach(function(options) { |
25 test(function(t) { | 25 test(function(t) { |
26 var target = createDiv(t); | 26 var target = createDiv(t); |
27 var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ], | 27 var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ], |
28 { duration: 1000 * MS_PER_SEC, | 28 { duration: 1000 * MS_PER_SEC, |
29 fill: 'forwards' }); | 29 fill: 'forwards' }); |
30 anim.effect.timing.easing = options.easing; | 30 anim.effect.timing.easing = options.easing; |
31 assert_equals(anim.effect.timing.easing, | 31 assert_equals(anim.effect.timing.easing, |
32 options.serialization || options.easing); | 32 options.serialization || options.easing); |
33 | 33 |
34 var easing = options.easingFunction; | 34 var easing = options.easingFunction; |
35 assert_progress(anim, 0, easing); | 35 assert_progress(anim, 0, easing); |
36 assert_progress(anim, 250 * MS_PER_SEC, easing); | 36 assert_progress(anim, 250 * MS_PER_SEC, easing); |
37 assert_progress(anim, 500 * MS_PER_SEC, easing); | 37 assert_progress(anim, 500 * MS_PER_SEC, easing); |
38 assert_progress(anim, 750 * MS_PER_SEC, easing); | 38 assert_progress(anim, 750 * MS_PER_SEC, easing); |
39 assert_progress(anim, 1000 * MS_PER_SEC, easing); | 39 assert_progress(anim, 1000 * MS_PER_SEC, easing); |
40 }, options.desc); | 40 }, options.desc); |
41 }); | 41 }); |
42 | 42 |
43 gInvalidEasingTests.forEach(function(options) { | 43 gInvalidEasings.forEach(function(invalidEasing) { |
44 test(function(t) { | 44 test(function(t) { |
45 var div = createDiv(t); | 45 var div = createDiv(t); |
46 var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC); | 46 var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC); |
47 assert_throws({ name: 'TypeError' }, | 47 assert_throws({ name: 'TypeError' }, |
48 function() { | 48 function() { |
49 anim.effect.timing.easing = options.easing; | 49 anim.effect.timing.easing = invalidEasing; |
50 }); | 50 }); |
51 }, 'Invalid effect easing value test: \'' + options.easing + '\''); | 51 }, 'Invalid effect easing value test: \'' + invalidEasing + '\''); |
52 }); | 52 }); |
53 | 53 |
54 test(function(t) { | 54 test(function(t) { |
55 var delay = 1000 * MS_PER_SEC; | 55 var delay = 1000 * MS_PER_SEC; |
56 | 56 |
57 var target = createDiv(t); | 57 var target = createDiv(t); |
58 var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ], | 58 var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ], |
59 { duration: 1000 * MS_PER_SEC, | 59 { duration: 1000 * MS_PER_SEC, |
60 fill: 'both', | 60 fill: 'both', |
61 delay: delay, | 61 delay: delay, |
(...skipping 12 matching lines...) Expand all Loading... |
74 'easing replace to steps(2, start) at active phase'); | 74 'easing replace to steps(2, start) at active phase'); |
75 | 75 |
76 anim.currentTime = delay + 1500 * MS_PER_SEC; | 76 anim.currentTime = delay + 1500 * MS_PER_SEC; |
77 anim.effect.timing.easing = 'steps(2, end)'; | 77 anim.effect.timing.easing = 'steps(2, end)'; |
78 assert_equals(anim.effect.getComputedTiming().progress, 1, | 78 assert_equals(anim.effect.getComputedTiming().progress, 1, |
79 'easing replace to steps(2, end) again at after phase'); | 79 'easing replace to steps(2, end) again at after phase'); |
80 }, 'Change the easing while the animation is running'); | 80 }, 'Change the easing while the animation is running'); |
81 | 81 |
82 </script> | 82 </script> |
83 </body> | 83 </body> |
OLD | NEW |