Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 4 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /scroll-animations/css/view-timeline-lookup.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Named view-timeline lookup</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { z-index: 0; }
to { z-index: 100; }
}
.scroller {
overflow: auto;
width: 100px;
height: 100px;
}
.scroller > div {
height: 25px;
z-index: -1;
}
</style>
<main id=main></main>
<script>
async function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
return runAndWaitForFrameUpdate(() => {
main.append(template.content.cloneNode(true));
});
}
</script>
<template id=timeline_self>
<style>
#target {
height: 0px;
view-timeline: --t1;
animation: anim 1s linear forwards;
animation-timeline: --t1;
}
</style>
<div id=scroller class=scroller>
<div id=target></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, timeline_self);
assert_equals(getComputedStyle(target).zIndex, '100');
}, 'view-timeline on self');
</script>
<template id=timeline_preceding_sibling>
<style>
#scroller {
timeline-scope: --t1;
}
#timeline {
height: 0px;
view-timeline: --t1;
}
#target {
animation: anim 1s linear;
animation-timeline: --t1;
}
</style>
<div id=scroller class=scroller>
<div></div>
<div id=timeline></div>
<div></div>
<div></div>
<div id=target></div>
<div></div>
<div></div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, timeline_preceding_sibling);
assert_equals(getComputedStyle(target).zIndex, '75');
}, 'timeline-scope on preceding sibling');
</script>
<template id=timeline_ancestor>
<style>
#timeline {
height: 0px;
view-timeline: --t1;
}
#target {
animation: anim 1s linear;
animation-timeline: --t1;
}
</style>
<div id=scroller class=scroller>
<div></div>
<div></div>
<div></div>
<div id=timeline>
<div>
<div id=target></div>
</div>
</div>
<div></div>
<div></div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, timeline_ancestor);
assert_equals(getComputedStyle(target).zIndex, '25');
}, 'view-timeline on ancestor');
</script>
<template id=timeline_ancestor_sibling>
<style>
#scroller {
timeline-scope: --t1;
}
#timeline {
height: 0px;
view-timeline: --t1;
}
#target {
animation: anim 1s linear;
animation-timeline: --t1;
}
</style>
<div id=scroller class=scroller>
<div></div>
<div id=timeline></div>
<div></div>
<div>
<div>
<div id=target></div>
</div>
</div>
<div></div>
<div></div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, timeline_ancestor_sibling);
assert_equals(getComputedStyle(target).zIndex, '75');
}, 'timeline-scope on ancestor sibling');
</script>
<template id=timeline_ancestor_sibling_conflict>
<style>
#scroller {
timeline-scope: --t1;
}
#timeline1, #timeline2 {
height: 0px;
view-timeline: --t1;
}
#target {
animation: anim 1s linear;
animation-timeline: --t1;
}
</style>
<div id=scroller class=scroller>
<div></div>
<div id=timeline1></div>
<div></div>
<div id=timeline2></div>
<div>
<div>
<div id=target></div>
</div>
</div>
<div></div>
<div></div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, timeline_ancestor_sibling_conflict);
assert_equals(getComputedStyle(target).zIndex, 'auto');
}, 'timeline-scope on ancestor sibling, conflict remains unresolved');
</script>
<template id=timeline_ancestor_closer_timeline_wins>
<style>
#scroller {
timeline-scope: --t1;
}
#timeline {
height: 0px;
view-timeline: --t1;
}
#parent {
timeline-scope: --t1; /* Inactive */
}
#target {
animation: anim 1s linear;
animation-timeline: --t1;
}
</style>
<div id=scroller class=scroller>
<div></div>
<div id=timeline></div>
<div></div>
<div id=parent>
<div id=target></div>
</div>
<div></div>
<div></div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, timeline_ancestor_closer_timeline_wins);
assert_equals(getComputedStyle(target).zIndex, 'auto');
}, 'timeline-scope on ancestor sibling, closer timeline wins');
</script>
<template id=timeline_ancestor_scroll_timeline_wins_on_same_element>
<style>
#scroller {
view-timeline: --t1;
view-timeline-inset: 50px;
scroll-timeline: --t1;
}
#target {
animation: anim 1s linear;
animation-timeline: --t1;
}
</style>
<div id=scroller class=scroller>
<div id=target></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</template>
<script>
promise_test(async (t) => {
await inflate(t, timeline_ancestor_scroll_timeline_wins_on_same_element);
// In case of a name conflict on the same element, scroll progress timelines
// take precedence over view progress timelines.
assert_equals(getComputedStyle(target).zIndex, '0');
}, 'view-timeline on ancestor sibling, scroll-timeline wins on same element');
</script>