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