mirror of
https://github.com/servo/servo.git
synced 2025-10-11 14:00:28 +01:00
203 lines
5.2 KiB
HTML
203 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>Animations using named timeline ranges</title>
|
|
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range">
|
|
<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; background-color: skyblue;}
|
|
to { z-index: 100; background-color: coral; }
|
|
}
|
|
#scroller {
|
|
border: 10px solid lightgray;
|
|
overflow-y: scroll;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
#target {
|
|
margin: 800px 0px;
|
|
width: 100px;
|
|
height: 100px;
|
|
z-index: -1;
|
|
background-color: green;
|
|
font-size: 10px;
|
|
}
|
|
</style>
|
|
<main id=main>
|
|
</main>
|
|
<template>
|
|
<div id=scroller>
|
|
<div id=target></div>
|
|
</div>
|
|
</template>
|
|
<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 waitForAnimationReady(target) {
|
|
await waitForNextFrame();
|
|
await Promise.all(target.getAnimations().map(x => x.promise));
|
|
}
|
|
async function assertValueAt(scroller, target, args) {
|
|
await waitForAnimationReady(target);
|
|
await scrollTop(scroller, args.scrollTop);
|
|
assert_equals(getComputedStyle(target).zIndex, args.expected.toString());
|
|
}
|
|
function test_animation_delay(options) {
|
|
promise_test(async (t) => {
|
|
inflate(t, document.querySelector('template'));
|
|
let scroller = main.querySelector('#scroller');
|
|
let target = main.querySelector('#target');
|
|
|
|
target.style.viewTimeline = '--t1 block';
|
|
// TODO(crbug.com/1375998): Create the timeline in a separate frame to
|
|
// work around a bug.
|
|
await waitForNextFrame();
|
|
|
|
target.style.animation = 'anim auto linear';
|
|
target.style.animationTimeline = '--t1';
|
|
target.style.animationRangeStart = options.rangeStart;
|
|
target.style.animationRangeEnd = options.rangeEnd;
|
|
|
|
// Accommodates floating point precision errors at the endpoints.
|
|
target.style.animationFillMode = 'both';
|
|
|
|
// 0%
|
|
await assertValueAt(scroller, target,
|
|
{ scrollTop: options.startOffset, expected: 0 });
|
|
// 50%
|
|
await assertValueAt(scroller, target,
|
|
{ scrollTop: (options.startOffset + options.endOffset) / 2, expected: 50 });
|
|
// 100%
|
|
await assertValueAt(scroller, target,
|
|
{ scrollTop: options.endOffset, expected: 100 });
|
|
|
|
// Test before/after phases (need to clear the fill mode for that).
|
|
target.style.animationFillMode = 'initial';
|
|
await assertValueAt(scroller, target,
|
|
{ scrollTop: options.startOffset - 10, expected: -1 });
|
|
await assertValueAt(scroller, target,
|
|
{ scrollTop: options.endOffset + 10, expected: -1 });
|
|
// Check 50% again without fill mode.
|
|
await assertValueAt(scroller, target,
|
|
{ scrollTop: (options.startOffset + options.endOffset) / 2, expected: 50 });
|
|
|
|
}, `Animation with ranges [${options.rangeStart}, ${options.rangeEnd}]`);
|
|
}
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'initial',
|
|
rangeEnd: 'initial',
|
|
startOffset: 600,
|
|
endOffset: 900
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'cover 0%',
|
|
rangeEnd: 'cover 100%',
|
|
startOffset: 600,
|
|
endOffset: 900
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'contain 0%',
|
|
rangeEnd: 'contain 100%',
|
|
startOffset: 700,
|
|
endOffset: 800
|
|
});
|
|
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'entry 0%',
|
|
rangeEnd: 'entry 100%',
|
|
startOffset: 600,
|
|
endOffset: 700
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'exit 0%',
|
|
rangeEnd: 'exit 100%',
|
|
startOffset: 800,
|
|
endOffset: 900
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'contain -50%',
|
|
rangeEnd: 'entry 200%',
|
|
startOffset: 650,
|
|
endOffset: 800
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'entry 0%',
|
|
rangeEnd: 'exit 100%',
|
|
startOffset: 600,
|
|
endOffset: 900
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'cover 20px',
|
|
rangeEnd: 'cover 100px',
|
|
startOffset: 620,
|
|
endOffset: 700
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'contain 20px',
|
|
rangeEnd: 'contain 100px',
|
|
startOffset: 720,
|
|
endOffset: 800
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'entry 20px',
|
|
rangeEnd: 'entry 100px',
|
|
startOffset: 620,
|
|
endOffset: 700
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'entry-crossing 20px',
|
|
rangeEnd: 'entry-crossing 100px',
|
|
startOffset: 620,
|
|
endOffset: 700
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'exit 20px',
|
|
rangeEnd: 'exit 80px',
|
|
startOffset: 820,
|
|
endOffset: 880
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'exit-crossing 20px',
|
|
rangeEnd: 'exit-crossing 80px',
|
|
startOffset: 820,
|
|
endOffset: 880
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'contain 20px',
|
|
rangeEnd: 'contain calc(100px - 10%)',
|
|
startOffset: 720,
|
|
endOffset: 790
|
|
});
|
|
|
|
test_animation_delay({
|
|
rangeStart: 'exit 2em',
|
|
rangeEnd: 'exit 8em',
|
|
startOffset: 820,
|
|
endOffset: 880
|
|
});
|
|
|
|
</script>
|