Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 8 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /scroll-animations/css/timeline-scope.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Behavior of the timeline-scope property</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<main id=main></main>
<script>
async function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
return runAndWaitForFrameUpdate(() => {
main.append(template.content.cloneNode(true));
});
}
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;
}
.target {
background-color: coral;
width: 0px;
animation: anim auto linear;
animation-timeline: --t1;
}
.timeline {
scroll-timeline-name: --t1;
}
.scope {
timeline-scope: --t1;
}
</style>
<!-- Basic Behavior -->
<template id=deferred_timeline>
<div class="scope">
<div class=target>Test</div>
<div class="scroller timeline">
<div class=content></div>
</div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, deferred_timeline);
let scroller = main.querySelector('.scroller');
let target = main.querySelector('.target');
const anim = target.getAnimations()[0];
await anim.ready;
await scrollTop(scroller, 350); // 50%
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
}, 'Descendant can attach to deferred timeline');
</script>
<template id=deferred_timeline_no_attachments>
<div class="scope">
<div class=target>Test</div>
<div class="scroller">
<div class=content></div>
</div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, deferred_timeline_no_attachments);
let scroller = main.querySelector('.scroller');
let target = main.querySelector('.target');
await scrollTop(scroller, 350); // 50%
assert_equals(getComputedStyle(target).width, '0px');
}, 'Deferred timeline with no attachments');
</script>
<template id=scroll_timeline_inner_interference>
<div class="scroller timeline">
<div class=content>
<div class=target>Test</div>
<div class="scroller timeline">
<div class=content></div>
</div>
</div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, scroll_timeline_inner_interference);
let scroller = main.querySelector('.scroller');
let target = main.querySelector('.target');
await scrollTop(scroller, 350); // 50%
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
}, 'Inner timeline does not interfere with outer timeline');
</script>
<template id=deferred_timeline_two_attachments>
<div class="scope">
<div class=target>Test</div>
<div class="scroller timeline">
<div class=content></div>
</div>
<!-- Extra attachment -->
<div class="timeline"></div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, deferred_timeline_two_attachments);
let scroller = main.querySelector('.scroller');
let target = main.querySelector('.target');
await scrollTop(scroller, 350); // 50%
assert_equals(getComputedStyle(target).width, '0px');
}, 'Deferred timeline with two attachments');
</script>
<!-- Dynamic Reattachment -->
<template id=deferred_timeline_reattach>
<div class="scope">
<div class=target>Test</div>
<div class="scroller timeline">
<div class=content></div>
</div>
<div class="scroller">
<div class=content></div>
</div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, deferred_timeline_reattach);
let scrollers = main.querySelectorAll('.scroller');
assert_equals(scrollers.length, 2);
let target = main.querySelector('.target');
await scrollTop(scrollers[0], 350); // 50%
await scrollTop(scrollers[1], 175); // 25%
// Attached to scrollers[0].
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
// Reattach to scrollers[1].
await runAndWaitForFrameUpdate(() => {
scrollers[0].classList.remove('timeline');
scrollers[1].classList.add('timeline');
});
assert_equals(getComputedStyle(target).width, '50px'); // 0px => 200px, 25%
}, 'Dynamically re-attaching');
</script>
<template id=deferred_timeline_dynamic_detach>
<div class="scope">
<div class=target>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) => {
await inflate(t, deferred_timeline_dynamic_detach);
let scrollers = main.querySelectorAll('.scroller');
assert_equals(scrollers.length, 2);
let target = main.querySelector('.target');
await scrollTop(scrollers[0], 350); // 50%
await scrollTop(scrollers[1], 175); // 25%
// Attached to two timelines initially:
assert_equals(getComputedStyle(target).width, '0px');
// Detach scrollers[1].
await runAndWaitForFrameUpdate(() => {
scrollers[1].classList.remove('timeline');
});
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
// Also detach scrollers[0].
scrollers[0].classList.remove('timeline');
await waitForNextFrame();
assert_equals(getComputedStyle(target).width, '0px');
}, 'Dynamically detaching');
</script>
<template id=deferred_timeline_attached_removed>
<div class="scope">
<div class=target>Test</div>
<div class="scroller timeline">
<div class=content></div>
</div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, deferred_timeline_attached_removed);
let scroller = main.querySelector('.scroller');
let target = main.querySelector('.target');
await scrollTop(scroller, 350); // 50%
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
let scroller_parent = scroller.parentElement;
scroller.remove();
await waitForNextFrame();
assert_equals(getComputedStyle(target).width, '0px');
scroller_parent.append(scroller);
await scrollTop(scroller, 350); // 50%
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
}, 'Removing/inserting element with attaching timeline');
</script>
<template id=deferred_timeline_attached_display_none>
<div class="scope">
<div class=target>Test</div>
<div class="scroller timeline">
<div class=content></div>
</div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, deferred_timeline_attached_display_none);
let scroller = main.querySelector('.scroller');
let target = main.querySelector('.target');
await scrollTop(scroller, 350); // 50%
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
scroller.style.display = 'none';
await waitForNextFrame();
assert_equals(getComputedStyle(target).width, '0px');
scroller.style.display = 'block';
await scrollTop(scroller, 350); // 50%
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
}, 'Ancestor attached element becoming display:none/block');
</script>
<template id=deferred_timeline_appearing>
<div class=container>
<div class=target>Test</div>
<div class="scroller timeline">
<div class=content></div>
</div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, deferred_timeline_appearing);
let container = main.querySelector('.container');
let scroller = main.querySelector('.scroller');
let target = main.querySelector('.target');
await scrollTop(scroller, 350); // 50%
// Not attached to any timeline initially.
assert_equals(getComputedStyle(target).width, '0px');
// Add the deferred timeline.
container.classList.add('scope');
await waitForNextFrame();
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
// Remove the deferred timeline.
container.classList.remove('scope');
await waitForNextFrame();
assert_equals(getComputedStyle(target).width, '0px');
}, 'A deferred timeline appearing dynamically in the ancestor chain');
</script>
<template id=deferred_timeline_on_self>
<div class="scroller timeline scope">
<div class=content>
<div class=target></div>
</div>
<div class=scroller2></div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, deferred_timeline_on_self);
let scroller = main.querySelector('.scroller');
let target = main.querySelector('.target');
await scrollTop(scroller, 525); // 75%
assert_equals(getComputedStyle(target).width, '150px'); // 0px => 200px, 75%
// A second scroll-timeline now attaches to the same root.
let scroller2 = main.querySelector('.scroller2');
scroller2.classList.add('timeline');
await waitForNextFrame();
// The deferred timeline produced by timeline-scope is now inactive,
// but it doesn't matter, because we preferred to attach
// to the non-deferred timeline.
assert_equals(getComputedStyle(target).width, '150px'); // 0px => 200px, 75%
}, 'Animations prefer non-deferred timelines');
</script>