Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /web-animations/timing-model/animations/setting-the-target-effect-of-an-animation.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset=utf-8>
<title>Setting the target effect of an animation</title>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='../../testcommon.js'></script>
<body>
<div id='log'></div>
<script>
'use strict';
promise_test(t => {
const anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_true(anim.pending);
const originalReadyPromise = anim.ready.catch(err => {
assert_unreached('Original ready promise should not be rejected');
});
anim.effect = null;
assert_equals(anim.playState, 'finished');
assert_true(anim.pending);
return originalReadyPromise;
}, 'If new effect is null and old effect is not null the animation becomes'
+ ' finish-pending');
promise_test(async t => {
const anim = new Animation();
anim.pause();
assert_true(anim.pending);
anim.effect = new KeyframeEffect(createDiv(t),
{ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_true(anim.pending);
await anim.ready;
assert_false(anim.pending);
assert_equals(anim.playState, 'paused');
}, 'If animation has a pending pause task, reschedule that task to run ' +
'as soon as animation is ready.');
promise_test(async t => {
const anim = new Animation();
anim.play();
assert_true(anim.pending);
anim.effect = new KeyframeEffect(createDiv(t),
{ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_true(anim.pending);
await anim.ready;
assert_false(anim.pending);
assert_equals(anim.playState, 'running');
}, 'If animation has a pending play task, reschedule that task to run ' +
'as soon as animation is ready to play new effect.');
promise_test(async t => {
const anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_equals(anim.playState, 'running');
assert_true(anim.pending);
const originalEffect = anim.effect;
const originalReadyPromise = anim.ready;
anim.effect = null;
assert_equals(anim.playState, 'finished');
assert_true(anim.pending);
anim.effect = originalEffect;
assert_equals(anim.playState, 'running');
assert_true(anim.pending);
await originalReadyPromise;
assert_equals(anim.playState, 'running');
assert_false(anim.pending);
}, 'The pending play task should be rescheduled even after temporarily setting'
+ ' the effect to null');
promise_test(async t => {
const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
const animB = new Animation();
await animA.ready;
animB.effect = animA.effect;
assert_equals(animA.effect, null);
assert_equals(animA.playState, 'finished');
}, 'When setting the effect of an animation to the effect of an existing ' +
'animation, the existing animation\'s target effect should be set to null.');
test(t => {
const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
const animB = new Animation();
const effect = animA.effect;
animA.currentTime = 50 * MS_PER_SEC;
animB.currentTime = 20 * MS_PER_SEC;
assert_equals(effect.getComputedTiming().progress, 0.5,
'Original timing comes from first animation');
animB.effect = effect;
assert_equals(effect.getComputedTiming().progress, 0.2,
'After setting the effect on a different animation, ' +
'it uses the new animation\'s timing');
}, 'After setting the target effect of animation to the target effect of an ' +
'existing animation, the target effect\'s timing is updated to reflect ' +
'the current time of the new animation.');
promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.updatePlaybackRate(2);
assert_equals(anim.playbackRate, 1);
anim.effect = null;
await anim.ready;
assert_equals(anim.playbackRate, 2);
}, 'Setting the target effect to null causes a pending playback rate to be'
+ ' applied');
</script>
</body>