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
|
<!DOCTYPE html>
<html class="reftest-wait">
<title>Setting localTime to null means effect does not apply (reftest)</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<link rel="match" href="worklet-animation-local-time-null-2-ref.html">
<meta name="timeout" content="long">
<script src="/common/reftest-wait.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="common.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
</style>
<div>
<div class="box" id="target1"></div>
<div class="box" id="target2"></div>
<div class="box" id="target3"></div>
<div class="box" id="target4"></div>
<div class="box" id="control"></div>
</div>
<script>
runInAnimationWorklet(`
registerAnimator("blank_animator", class {
animate(currentTime, effect) {
// Unset effect.localTime is equivalent to 'null'
}
});
registerAnimator("null_animator", class {
animate(currentTime, effect) {
effect.localTime = null;
}
});
registerAnimator("drop_animator", class {
animate(currentTime, effect) {
if (currentTime < 500)
effect.localTime = 500;
else if (currentTime < 1000)
effect.localTime = 0;
else
effect.localTime = null;
}
});
registerAnimator("add_animator", class {
animate(currentTime, effect) {
if (currentTime < 1000)
effect.localTime = 500;
else
effect.localTime = 0;
}
});
`).then(() => {
const start_animation = (animator, targetId, keyframes) => {
const animation = new WorkletAnimation(animator,
new KeyframeEffect(
document.getElementById(targetId),
keyframes,
{duration: 1000}
)
);
animation.play();
return animation;
};
start_animation('blank_animator','target1', [
{ transform: 'translateY(100px)' },
{ transform: 'translateY(200px)' }
]);
start_animation('null_animator','target2', [
{ transform: 'translateY(100px)' },
{ transform: 'translateY(200px)' }
]);
start_animation('drop_animator','target3', [
{ transform: 'translateY(100px)' },
{ transform: 'translateY(200px)' }
]);
start_animation('drop_animator','target4', [
{ backgroundColor: 'red' },
{ backgroundColor: 'blue' }
]);
// check that animation worklets are running to stop accidental pass
const control_anim = start_animation('add_animator','control', [
{ backgroundColor: 'red', transform: 'translateY(100px)' },
{ backgroundColor: 'blue', transform: 'translateY(200px)' }
]);
waitForAnimationFrameWithCondition(() => control_anim.currentTime > 1000)
// long timeout due to laggy compositor thread on debug build.
.then(() => waitForAsyncAnimationFrames(120))
.then(takeScreenshot);
});
</script>
|
