253 lines
5.7 KiB
HTML
253 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<title>Named view-timeline lookup</title>
|
|
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named">
|
|
<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, '0');
|
|
}, '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.
|
|
// https://drafts.csswg.org/scroll-animations-1/#timeline-scope
|
|
assert_equals(getComputedStyle(target).zIndex, '0');
|
|
}, 'view-timeline on ancestor sibling, scroll-timeline wins on same element');
|
|
</script>
|