104 lines
2.9 KiB
HTML
104 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>Used values of view-timeline properties</title>
|
|
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis">
|
|
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name">
|
|
<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: hidden;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.scroller > div {
|
|
width: 300px;
|
|
height: 300px;
|
|
z-index: -1;
|
|
}
|
|
</style>
|
|
<main id=main></main>
|
|
<script>
|
|
setup(assert_implements_animation_timeline);
|
|
|
|
function inflate(t, template) {
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
main.append(template.content.cloneNode(true));
|
|
}
|
|
async function scrollTop(e, value) {
|
|
e.scrollTop = value;
|
|
await waitForNextFrame();
|
|
}
|
|
async function scrollLeft(e, value) {
|
|
e.scrollLeft = value;
|
|
await waitForNextFrame();
|
|
}
|
|
</script>
|
|
|
|
<template id=omitted_axis>
|
|
<style>
|
|
#target {
|
|
view-timeline-name: --t1, --t2; /* Two items */
|
|
view-timeline-axis: inline; /* One item */
|
|
animation: anim 1s linear;
|
|
animation-timeline: --t2;
|
|
}
|
|
</style>
|
|
<div id=scroller class=scroller>
|
|
<div id=target></div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
promise_test(async (t) => {
|
|
inflate(t, omitted_axis);
|
|
assert_equals(getComputedStyle(target).zIndex, '-1');
|
|
|
|
// enter 0% is at scrollTop/Left = -100
|
|
// exit 100% is at scrollTop/Left = 300
|
|
// This means that at scrollTop/Left=0, the animation is at 25%.
|
|
|
|
await scrollTop(scroller, 0);
|
|
await scrollLeft(scroller, 0);
|
|
assert_equals(getComputedStyle(target).zIndex, '25');
|
|
|
|
// The timeline should be inline-axis:
|
|
await scrollTop(scroller, 100); // 50%
|
|
await scrollLeft(scroller, 40); // 35%
|
|
assert_equals(getComputedStyle(target).zIndex, '35');
|
|
}, 'Use the last value from view-timeline-axis if omitted');
|
|
</script>
|
|
|
|
<template id=omitted_inset>
|
|
<style>
|
|
#target {
|
|
view-timeline-name: --t1, --t2; /* Two items */
|
|
view-timeline-inset: 100px; /* One item */
|
|
animation: anim 1s linear;
|
|
animation-timeline: --t2;
|
|
}
|
|
</style>
|
|
<div id=scroller class=scroller>
|
|
<div id=target></div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
promise_test(async (t) => {
|
|
inflate(t, omitted_inset);
|
|
assert_equals(getComputedStyle(target).zIndex, '-1');
|
|
|
|
// 0% is normally at at scrollTop = -100
|
|
// 100% is normally at scrollTop/Left = 300
|
|
// However, we have a 100px inset in both ends, which makes the
|
|
// range [0, 200].
|
|
|
|
await scrollTop(scroller, 0);
|
|
assert_equals(getComputedStyle(target).zIndex, '0');
|
|
await scrollTop(scroller, 100); // 50%
|
|
assert_equals(getComputedStyle(target).zIndex, '50');
|
|
}, 'Use the last value from view-timeline-inset if omitted');
|
|
</script>
|