1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>Setting the target effect of an animation</title>
<link rel='help' href='https://drafts.csswg.org/web-animations/#setting-the-target-effect'>
<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 retPromise = anim.ready.then(() => {
assert_unreached('ready promise is fulfilled');
}).catch(err => {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
anim.effect = null;
// This is a bit odd, see: https://github.com/w3c/web-animations/issues/207
assert_equals(anim.playState, 'paused');
assert_false(anim.pending);
return retPromise;
}, 'If new effect is null and old effect is not null, we reset the pending ' +
'tasks and ready promise is rejected');
promise_test(async t => {
const anim = new Animation();
anim.pause();
assert_true(anim.pending);
anim.effect = new KeyframeEffectReadOnly(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 KeyframeEffectReadOnly(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 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.');
test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.updatePlaybackRate(2);
assert_equals(anim.playbackRate, 1);
anim.effect = null;
assert_equals(anim.playbackRate, 2);
}, 'Setting the target effect to null causes a pending playback rate to be'
+ ' applied');
</script>
</body>
|
