109 lines
3 KiB
HTML
109 lines
3 KiB
HTML
<!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.source, null);
|
|
}, 'Animation.timeline returns a timeline with no source 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.source, null);
|
|
}, 'Animation.timeline returns a timeline with no source for inactive (overattached) deferred timeline');
|
|
</script>
|