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
132
133
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.cancel</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-cancel">
<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 div = createDiv(t);
const animation = div.animate(
{ transform: ['translate(100px)', 'translate(100px)'] },
100 * MS_PER_SEC
);
return animation.ready.then(() => {
assert_not_equals(getComputedStyle(div).transform, 'none',
'transform style is animated before cancelling');
animation.cancel();
assert_equals(getComputedStyle(div).transform, 'none',
'transform style is no longer animated after cancelling');
});
}, 'Animated style is cleared after calling Animation.cancel()');
test(t => {
const div = createDiv(t);
const animation = div.animate({ marginLeft: ['100px', '200px'] },
100 * MS_PER_SEC);
animation.effect.updateTiming({ easing: 'linear' });
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.currentTime = 50 * MS_PER_SEC;
assert_equals(getComputedStyle(div).marginLeft, '150px',
'margin-left style is updated when cancelled animation is'
+ ' seeked');
}, 'After cancelling an animation, it can still be seeked');
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({ marginLeft:['100px', '200px'] },
100 * MS_PER_SEC);
return animation.ready.then(() => {
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.play();
assert_equals(getComputedStyle(div).marginLeft, '100px',
'margin-left style is animated after re-starting animation');
return animation.ready;
}).then(() => {
assert_equals(animation.playState, 'running',
'Animation succeeds in running after being re-started');
});
}, 'After cancelling an animation, it can still be re-used');
promise_test(async t => {
for (const type of ["resolve", "reject"]) {
const anim = new Animation();
let isThenGet = false;
let isThenCalled = false;
let resolveFinished;
let rejectFinished;
const thenCalledPromise = new Promise(resolveThenCalledPromise => {
// Make `anim` thenable.
Object.defineProperty(anim, "then", {
get() {
isThenGet = true;
return function(resolve, reject) {
isThenCalled = true;
resolveThenCalledPromise(true);
resolveFinished = resolve;
rejectFinished = reject;
};
},
});
});
// Lazily create finished promise.
const finishedPromise = anim.finished;
assert_false(isThenGet, "then property shouldn't be accessed yet");
// Resolve finished promise with `anim`, that gets `then`, and
// calls in the thenable job.
anim.finish();
assert_true(isThenGet, "then property should be accessed");
assert_false(isThenCalled, "then property shouldn't be called yet");
// Reject finished promise.
// This should be ignored.
anim.cancel();
// Wait for the thenable job.
await thenCalledPromise;
assert_true(isThenCalled, "then property should be called");
const dummyPromise = new Promise(resolve => {
step_timeout(() => {
resolve("dummy");
}, 100);
});
const dummy = await Promise.race([finishedPromise, dummyPromise]);
assert_equals(dummy, "dummy", "finishedPromise shouldn't be settled yet");
if (type === "resolve") {
resolveFinished("hello");
const finished = await finishedPromise;
assert_equals(finished, "hello",
"finishedPromise should be resolved with given value");
} else {
rejectFinished("hello");
try {
await finishedPromise;
assert_unreached("finishedPromise should be rejected")
} catch (e) {
assert_equals(e, "hello",
"finishedPromise should be rejected with given value");
}
}
}
}, "Animation.finished promise should not be rejected by cancel method once "
+ "it is resolved with inside finish method");
</script>
</body>
|
