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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!DOCTYPE html>
<title>Test that worklet animation works with different fill modes</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="common.js"></script>
<style>
.target {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div id="target" class='target'></div>
<script>
setup(setupAndRegisterTests, {explicit_done: true});
function setupAndRegisterTests() {
registerConstantLocalTimeAnimator(2000).then(() => {
promise_test(
effect_with_fill_mode_forwards,
"Effect with fill mode forwards in after phase produces output that is equivalent to effect's end value.");
promise_test(
effect_without_fill_mode_forwards,
'Effect without fill mode forwards in after phase (local time beyond end) should deactivate the animation.');
promise_test(
effect_without_fill_forwards_at_end,
'Effect without fill mode in after phase (local time at end) should deactivate the animation.');
promise_test(
effect_with_fill_backwards,
"Effect with fill mode backwards in before phase produces output that is equivalent to effect's start value.");
promise_test(
effect_without_fill_backwards,
'Effect without fill mode backwards in before phase (local time before start) should deactivate the animation.');
promise_test(
effect_without_fill_backwards_at_start,
'Effect with local time at start point is in active phase.');
done();
});
}
async function effect_with_fill_mode_forwards(t) {
const effect_with_fill_forwards = new KeyframeEffect(
target,
{ opacity: [0.5, 0] },
{ duration: 1000, fill: 'forwards' });
const animation = new WorkletAnimation(
'constant_time',
effect_with_fill_forwards);
animation.play();
await waitForNotNullLocalTime(animation);
assert_equals(getComputedStyle(target).opacity, '0');
animation.cancel();
}
async function effect_without_fill_mode_forwards(t) {
const effect_without_fill_forwards = new KeyframeEffect(
target,
{ opacity: [0.5, 0] },
{ duration: 1000 });
const animation = new WorkletAnimation(
'constant_time',
effect_without_fill_forwards);
animation.play();
await waitForNotNullLocalTime(animation);
assert_equals(getComputedStyle(target).opacity, '1');
animation.cancel();
}
async function effect_without_fill_forwards_at_end(t) {
const effect_without_fill_forwards_at_end = new KeyframeEffect(
target,
{ opacity: [0.5, 0] },
{ duration: 2000 });
const animation = new WorkletAnimation(
'constant_time',
effect_without_fill_forwards_at_end);
animation.play();
await waitForNotNullLocalTime(animation);
assert_equals(getComputedStyle(target).opacity, '1');
animation.cancel();
}
async function effect_with_fill_backwards(t) {
const effect_with_fill_backwards = new KeyframeEffect(
target,
{ opacity: [0.5, 0] },
{ duration: 1000, delay: 2001, fill: 'backwards' });
const animation = new WorkletAnimation(
'constant_time',
effect_with_fill_backwards);
animation.play();
await waitForNotNullLocalTime(animation);
assert_equals(getComputedStyle(target).opacity, '0.5');
animation.cancel();
}
async function effect_without_fill_backwards(t) {
const effect_without_fill_backwards = new KeyframeEffect(
target,
{ opacity: [0.5, 0] },
{ duration: 1000, delay: 2001 });
const animation = new WorkletAnimation(
'constant_time',
effect_without_fill_backwards);
animation.play();
waitForNotNullLocalTime(animation);
assert_equals(getComputedStyle(target).opacity, '1');
animation.cancel();
}
async function effect_without_fill_backwards_at_start(t) {
const effect_without_fill_backwards_at_start = new KeyframeEffect(
target,
{ opacity: [0.5, 0] },
{ duration: 1000, delay: 2000 });
const animation = new WorkletAnimation(
'constant_time',
effect_without_fill_backwards_at_start);
animation.play();
await waitForNotNullLocalTime(animation);
assert_equals(getComputedStyle(target).opacity, '0.5');
animation.cancel();
}
</script>
|
