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-name-shadow.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>view-timeline-name and and shadow trees</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>
function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
main.offsetTop;
}
</script>
<style>
@keyframes anim {
from { z-index: 100; }
to { z-index: 100; }
}
</style>
<template id=view_timeline_host>
<style>
.target {
animation: anim 10s linear;
animation-timeline: --timeline;
}
.scroller > div {
view-timeline: --timeline x;
}
</style>
<div class=scroller>
<div>
<div class=target>
<template shadowrootmode=open shadowrootclonable>
<style>
:host {
view-timeline: --timeline y;
}
</style>
</template>
</div>
</div>
</div>
<style>
</style>
</template>
<script>
promise_test(async (t) => {
inflate(t, view_timeline_host);
let target = main.querySelector('.target');
assert_equals(target.getAnimations().length, 1);
let anim = target.getAnimations()[0];
assert_not_equals(anim.timeline, null);
assert_equals(anim.timeline.axis, 'y');
}, 'Outer animation can see view timeline defined by :host');
</script>
<template id=view_timeline_slotted>
<style>
.target {
animation: anim 10s linear;
animation-timeline: --timeline;
}
.host {
view-timeline: --timeline x;
}
</style>
<div class=scroller>
<div class=host>
<template shadowrootmode=open shadowrootclonable>
<style>
::slotted(.target) {
view-timeline: --timeline y;
}
</style>
<slot></slot>
</template>
<div class=target></div>
</div>
</div>
<style>
</style>
</template>
<script>
promise_test(async (t) => {
inflate(t, view_timeline_slotted);
let target = main.querySelector('.target');
assert_equals(target.getAnimations().length, 1);
let anim = target.getAnimations()[0];
assert_not_equals(anim.timeline, null);
assert_equals(anim.timeline.axis, 'y');
}, 'Outer animation can see view timeline defined by ::slotted');
</script>
<template id=view_timeline_part>
<style>
.host {
view-timeline: --timeline y;
}
.host::part(foo) {
view-timeline: --timeline x;
}
</style>
<div class=host>
<template shadowrootmode=open shadowrootclonable>
<style>
@keyframes anim2 {
from { z-index: 100; }
to { z-index: 100; }
}
.target {
animation: anim2 10s linear;
animation-timeline: --timeline;
}
</style>
<div part=foo>
<div class=target></div>
</div>
</template>
</div>
<style>
</style>
</template>
<script>
promise_test(async (t) => {
inflate(t, view_timeline_part);
let target = main.querySelector('.host').shadowRoot.querySelector('.target');
assert_equals(target.getAnimations().length, 1);
let anim = target.getAnimations()[0];
assert_not_equals(anim.timeline, null);
assert_equals(anim.timeline.axis, 'x');
}, 'Inner animation can see view timeline defined by ::part');
</script>
<template id=view_timeline_shadow>
<style>
.target {
animation: anim 10s linear;
animation-timeline: --timeline;
}
.host {
view-timeline: --timeline x;
}
</style>
<div class=scroller>
<div class=host>
<template shadowrootmode=open shadowrootclonable>
<style>
div {
view-timeline: --timeline y;
}
</style>
<div>
<slot></slot>
</div>
</template>
<div class=target></div>
</div>
</div>
<style>
</style>
</template>
<script>
promise_test(async (t) => {
inflate(t, view_timeline_shadow);
let target = main.querySelector('.target');
assert_equals(target.getAnimations().length, 1);
let anim = target.getAnimations()[0];
assert_not_equals(anim.timeline, null);
assert_equals(anim.timeline.axis, 'y');
}, 'Slotted element can see view timeline within the shadow');
</script>