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
|
<!DOCTYPE html>
<title>Deferred timelines via Animation.timeline</title>
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7759">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<main id=main></main>
<script>
function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
main.offsetTop;
}
async function scrollTop(e, value) {
e.scrollTop = value;
await waitForNextFrame();
}
</script>
<style>
@keyframes anim {
from { width: 0px; }
to { width: 200px; }
}
.scroller {
overflow-y: hidden;
width: 200px;
height: 200px;
}
.scroller > .content {
margin: 400px 0px;
width: 100px;
height: 100px;
background-color: green;
}
.animating {
background-color: coral;
width: 0px;
animation: anim auto linear;
animation-timeline: --t1;
}
.timeline {
scroll-timeline-name: --t1;
}
.scope {
timeline-scope: --t1;
}
</style>
<template id=animation_timeline_attached>
<div class="scope">
<div class=animating>Test</div>
<div class="scroller timeline">
<div class="content animating"></div>
</div>
</div>
</template>
<script>
promise_test(async (t) => {
inflate(t, animation_timeline_attached);
let scroller = main.querySelector('.scroller');
let animating = Array.from(main.querySelectorAll('.animating'));
assert_equals(animating.length, 2);
let animations = animating.map((e) => e.getAnimations()[0]);
assert_equals(animations.length, 2);
// animations[0] is attached via deferred timeline (timeline-scope),
// and animations[1] is attached directly.
assert_equals(animations[0].timeline, animations[1].timeline);
}, 'Animation.timeline returns attached timeline');
</script>
<template id=animation_timeline_inactive>
<div class="scope">
<div class=animating>Test</div>
</div>
</template>
<script>
promise_test(async (t) => {
inflate(t, animation_timeline_inactive);
let scroller = main.querySelector('.scroller');
let animating = main.querySelector('.animating');
assert_equals(animating.getAnimations()[0].timeline, null);
}, 'Animation.timeline returns null for inactive deferred timeline');
</script>
<template id=animation_timeline_overattached>
<div class="scope">
<div class=animating>Test</div>
<div class="scroller timeline">
<div class="content"></div>
</div>
<div class="scroller timeline">
<div class="content"></div>
</div>
</div>
</template>
<script>
promise_test(async (t) => {
inflate(t, animation_timeline_overattached);
let scroller = main.querySelector('.scroller');
let animating = main.querySelector('.animating');
assert_equals(animating.getAnimations()[0].timeline, null);
}, 'Animation.timeline returns null for inactive (overattached) deferred timeline');
</script>
|
