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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<!doctype html>
<meta charset=utf-8>
<title>CSSAnimation.effect</title>
<meta name="timeout" content="long">
<!-- TODO: Add a more specific link for this once it is specified. -->
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from {
margin-left: 0px;
}
to {
margin-left: 100px;
}
}
</style>
<div id="log"></div>
<script>
'use strict';
promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim 100s';
const watcher = new EventWatcher(t, div, [ 'animationend',
'animationcancel' ]);
const animation = div.getAnimations()[0];
await animation.ready;
animation.currentTime = 50 * MS_PER_SEC;
animation.effect = null;
assert_equals(animation.playState, 'finished');
assert_equals(getComputedStyle(div).marginLeft, '0px');
await watcher.wait_for('animationend');
}, 'Setting a null effect on a running animation fires an animationend event');
promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
await animation.ready;
animation.currentTime = 50 * MS_PER_SEC;
animation.effect = new KeyframeEffect(div,
{ left: [ '0px' , '100px'] },
100 * MS_PER_SEC);
assert_equals(getComputedStyle(div).marginLeft, '0px');
assert_equals(getComputedStyle(div).left, '50px');
}, 'Replacing an animation\'s effect with an effect that targets a different ' +
'property should update both properties');
promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
await animation.ready;
animation.currentTime = 50 * MS_PER_SEC;
animation.effect = new KeyframeEffect(div,
{ left: [ '0px' , '100px'] },
20 * MS_PER_SEC);
assert_equals(animation.playState, 'finished');
}, 'Replacing an animation\'s effect with a shorter one that should have ' +
'already finished, the animation finishes immediately');
promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
assert_true(animation.pending);
animation.effect = new KeyframeEffect(div,
{ left: [ '0px' , '100px'] },
100 * MS_PER_SEC);
assert_true(animation.pending);
await animation.ready;
assert_false(animation.pending);
}, 'A play-pending animation\'s effect whose effect is replaced still exits ' +
'the pending state');
promise_test(async t => {
const div1 = addDiv(t);
const div2 = addDiv(t);
const watcher1 = new EventWatcher(t, div1, 'animationstart');
// Watch |div2| as well to ensure it does *not* get events.
const watcher2 = new EventWatcher(t, div2, 'animationstart');
div1.style.animation = 'anim 100s';
const animation = div1.getAnimations()[0];
animation.effect = new KeyframeEffect(div2,
{ left: [ '0px', '100px' ] },
100 * MS_PER_SEC);
await watcher1.wait_for('animationstart');
assert_equals(animation.effect.target, div2);
// Then wait a couple of frames and check that no event was dispatched.
await waitForAnimationFrames(2);
}, 'CSS animation events are dispatched at the original element even after'
+ ' setting an effect with a different target element');
promise_test(async t => {
const div = addDiv(t);
const watcher = new EventWatcher(t, div, [ 'animationstart',
'animationend',
'animationcancel' ]);
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
animation.finish();
await watcher.wait_for([ 'animationstart', 'animationend' ]);
// Set a longer effect
animation.effect = new KeyframeEffect(div,
{ left: [ '0px', '100px' ] },
200 * MS_PER_SEC);
await watcher.wait_for('animationstart');
}, 'After replacing a finished animation\'s effect with a longer one ' +
'it fires an animationstart event');
</script>
|
