181 lines
4.5 KiB
HTML
181 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>view-timeline-name and and shadow trees</title>
|
|
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named">
|
|
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8135">
|
|
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8192">
|
|
<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>
|
|
/* Not using 'anim' at document scope, due to https://crbug.com/1334534 */
|
|
@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>
|