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
|
<!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 iframe = document.createElement('iframe');
iframe.src = 'resources/iframe.html';
document.body.appendChild(iframe);
await waitForAnimationFrameWithCondition(_ => {
return iframe.contentDocument.getElementById('iframe_box') != null;
});
let iframe_document = iframe.contentDocument;
let effect = CreateKeyframeEffect(iframe_document.getElementById('iframe_box'));
let animation_with_main_frame_timeline =
new WorkletAnimation('test-animator', effect, document.timeline);
assert_equals(animation_with_main_frame_timeline.timeline, document.timeline);
let animation_with_iframe_timeline =
new WorkletAnimation('test-animator', effect, iframe_document.timeline);
assert_equals(animation_with_iframe_timeline.timeline, iframe_document.timeline);
let animation_with_default_timeline = new WorkletAnimation('test-animator', effect);
// The spec says that the default timeline is taken from 'the Document that is
// associated with the window that is the current global object'. In this case
// that is the main document's timeline, not the iframe (despite the target
// being in the iframe).
assert_equals(animation_with_default_timeline.timeline, document.timeline);
iframe.remove();
}, 'WorkletAnimation creation should choose the correct timeline based on the current global object');
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, 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_dom('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 workletAnimation = new WorkletAnimation(
'test-animator', [ effect, otherEffect ]);
assert_equals(workletAnimation.playState, 'idle');
}, 'Creating animation with effects from different documents is allowed');
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_dom('InvalidStateError', constructorFunc);
}, 'Constructing worklet animation for unregisested animator should throw');
</script>
|
