OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset=utf-8> |
| 3 <title>Setting the target effect tests</title> |
| 4 <link rel='help' href='https://w3c.github.io/web-animations/#setting-the-target-
effect'> |
| 5 <script src='/resources/testharness.js'></script> |
| 6 <script src='/resources/testharnessreport.js'></script> |
| 7 <script src='../../testcommon.js'></script> |
| 8 <body> |
| 9 <div id='log'></div> |
| 10 <script> |
| 11 'use strict'; |
| 12 |
| 13 promise_test(function(t) { |
| 14 var anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] }, |
| 15 100 * MS_PER_SEC); |
| 16 assert_equals(anim.playState, 'pending'); |
| 17 |
| 18 var retPromise = anim.ready.then(function() { |
| 19 assert_unreached('ready promise is fulfilled'); |
| 20 }).catch(function(err) { |
| 21 assert_equals(err.name, 'AbortError', |
| 22 'ready promise is rejected with AbortError'); |
| 23 }); |
| 24 |
| 25 anim.effect = null; |
| 26 assert_equals(anim.playState, 'paused'); |
| 27 |
| 28 return retPromise; |
| 29 }, 'If new effect is null and old effect is not null, we reset the pending ' + |
| 30 'tasks and ready promise is rejected'); |
| 31 |
| 32 promise_test(function(t) { |
| 33 var anim = new Animation(); |
| 34 anim.pause(); |
| 35 assert_equals(anim.playState, 'pending'); |
| 36 |
| 37 anim.effect = new KeyframeEffectReadOnly(createDiv(t), |
| 38 { marginLeft: [ '0px', '100px' ] }, |
| 39 100 * MS_PER_SEC); |
| 40 assert_equals(anim.playState, 'pending'); |
| 41 |
| 42 return anim.ready.then(function() { |
| 43 assert_equals(anim.playState, 'paused'); |
| 44 }); |
| 45 }, 'If animation has a pending pause task, reschedule that task to run ' + |
| 46 'as soon as animation is ready.'); |
| 47 |
| 48 promise_test(function(t) { |
| 49 var anim = new Animation(); |
| 50 anim.play(); |
| 51 assert_equals(anim.playState, 'pending'); |
| 52 |
| 53 anim.effect = new KeyframeEffectReadOnly(createDiv(t), |
| 54 { marginLeft: [ '0px', '100px' ] }, |
| 55 100 * MS_PER_SEC); |
| 56 assert_equals(anim.playState, 'pending'); |
| 57 |
| 58 return anim.ready.then(function() { |
| 59 assert_equals(anim.playState, 'running'); |
| 60 }); |
| 61 }, 'If animation has a pending play task, reschedule that task to run ' + |
| 62 'as soon as animation is ready to play new effect.'); |
| 63 |
| 64 promise_test(function(t) { |
| 65 var animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] }, |
| 66 100 * MS_PER_SEC); |
| 67 var animB = new Animation(); |
| 68 |
| 69 return animA.ready.then(function() { |
| 70 animB.effect = animA.effect; |
| 71 assert_equals(animA.effect, null); |
| 72 assert_equals(animA.playState, 'finished'); |
| 73 }); |
| 74 }, 'When setting the effect of an animation to the effect of an existing ' + |
| 75 'animation, the existing animation\'s target effect should be set to null.'); |
| 76 |
| 77 test(function(t) { |
| 78 var animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] }, |
| 79 100 * MS_PER_SEC); |
| 80 var animB = new Animation(); |
| 81 var effect = animA.effect; |
| 82 animA.currentTime = 50 * MS_PER_SEC; |
| 83 animB.currentTime = 20 * MS_PER_SEC; |
| 84 assert_equals(effect.getComputedTiming().progress, 0.5, |
| 85 'Original timing comes from first animation'); |
| 86 animB.effect = effect; |
| 87 assert_equals(effect.getComputedTiming().progress, 0.2, |
| 88 'After setting the effect on a different animation, ' + |
| 89 'it uses the new animation\'s timing'); |
| 90 }, 'After setting the target effect of animation to the target effect of an ' + |
| 91 'existing animation, the target effect\'s timing is updated to reflect ' + |
| 92 'the current time of the new animation.'); |
| 93 |
| 94 </script> |
| 95 </body> |
OLD | NEW |