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
|
<!DOCTYPE html>
<title>Verify that WorkletAnimation is correctly created</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>
.scroller {
height: 100px;
width: 100px;
overflow: scroll;
}
.content {
height: 500px;
width: 500px;
}
</style>
<script>
function CreateKeyframeEffect(element) {
return new KeyframeEffect(
element,
[
{ transform: 'translateY(0%)' },
{ transform: 'translateY(100%)' }
],
{ duration: 3000, fill: 'forwards' }
);
}
</script>
<script id="simple_animate" type="text/worklet">
registerAnimator("test-animator", class {
animate(currentTime, effect) {}
});
</script>
<div id='element'></div>
<div id='element2'></div>
<div class='scroller'>
<div class='content'></div>
</div>
<script>
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let workletAnimation = new WorkletAnimation('test-animator', effect);
assert_equals(workletAnimation.playState, 'idle');
assert_equals(workletAnimation.timeline, document.timeline);
}, 'WorkletAnimation creation without timeline should use default documentation timeline');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let workletAnimation = new WorkletAnimation('test-animator', effect);
assert_equals(workletAnimation.playState, 'idle');
}, 'WorkletAnimation creation with timeline should work');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let options = { my_param: 'foo', my_other_param: true };
let workletAnimation = new WorkletAnimation(
'test-animator', effect, document.timeline, options);
assert_equals(workletAnimation.playState, 'idle');
}, 'WorkletAnimation creation with timeline and options should work');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let scroller = document.querySelector('.scroller');
let scrollTimeline = new ScrollTimeline(
{ scrollSource: scroller, timeRange: 100, orientation: 'inline' });
let workletAnimation = new WorkletAnimation(
'test-animator', effect, scrollTimeline);
assert_equals(workletAnimation.playState, 'idle');
}, 'ScrollTimeline is a valid timeline for a WorkletAnimation');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let constructorFunc = function() { new WorkletAnimation(
'test-animator', []); };
assert_throws('NotSupportedError', constructorFunc);
}, 'If there are no effects specified, object construction should fail');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let otherDoc = document.implementation.createHTMLDocument();
let otherElement = otherDoc.createElement('div');
otherDoc.body.appendChild(otherElement);
let otherEffect = CreateKeyframeEffect(otherElement);
let constructorFunc = function() { new WorkletAnimation(
'test-animator', [ effect, otherEffect ]); };
assert_throws('NotSupportedError', constructorFunc);
}, 'If the effects are from different documents, object construction should fail');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
// TODO(crbug.com/781816): Allow KeyframeEffects with no target in AnimationWorklet.
let effect = CreateKeyframeEffect(null);
let effect2 = CreateKeyframeEffect(document.querySelector('#element'));
let constructorFunc = function() { new WorkletAnimation(
'test-animator', [ effect, effect2 ]); };
assert_throws('NotSupportedError', constructorFunc);
let constructorFunc2 = function() { new WorkletAnimation(
'test-animator', [ effect2, effect ]); };
assert_throws('NotSupportedError', constructorFunc2);
}, 'If an effect has no target, object construction should fail');
promise_test(async t => {
await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
let effect = CreateKeyframeEffect(document.querySelector('#element'));
let constructorFunc = function() {
new WorkletAnimation('unregistered-animator', effect);
};
assert_throws('InvalidStateError', constructorFunc);
}, 'Constructing worklet animation for unregisested animator should throw');
</script>
|
