<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<title>Animation range and delay</title>
</head>
<style type="text/css">
#scroller {
border: 10px solid lightgray;
overflow-y: scroll;
overflow-x: hidden;
width: 300px;
height: 200px;
}
#target {
margin: 800px 10px;
width: 100px;
height: 100px;
z-index: -1;
background-color: green;
}
</style>
<body>
<div id=scroller>
<div id=target></div>
</div>
</body>
<script type="text/javascript">
async function runTest() {
function assert_progress_equals(anim, expected, errorMessage) {
assert_approx_equals(
anim.effect.getComputedTiming().progress,
expected, 1e-6, errorMessage);
}
function assert_opacity_equals(expected, errorMessage) {
assert_approx_equals(
parseFloat(getComputedStyle(target).opacity), expected, 1e-6,
errorMessage);
}
async function runTimelineOffsetsInKeyframesTest(keyframes) {
const testcase = JSON.stringify(keyframes);
const anim = target.animate(keyframes, {
timeline: new ViewTimeline( { subject: target }),
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) },
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
duration: 'auto', fill: 'both'
});
await anim.ready;
await waitForNextFrame();
// @ contain 0%
scroller.scrollTop = 700;
await waitForNextFrame();
assert_progress_equals(
anim, 0, `Testcase '${testcase}': progress at contain 0%`);
assert_opacity_equals(
1/3, `Testcase '${testcase}': opacity at contain 0%`);
// @ contain 50%
scroller.scrollTop = 750;
await waitForNextFrame();
assert_progress_equals(
anim, 0.5, `Testcase '${testcase}': progress at contain 50%`);
assert_opacity_equals(
0.5, `Testcase '${testcase}': opacity at contain 50%`);
// @ contain 100%
scroller.scrollTop = 800;
await waitForNextFrame();
assert_progress_equals(
anim, 1, `Testcase '${testcase}': progress at contain 100%`);
assert_opacity_equals(
2/3, `Testcase '${testcase}': opacity at contain 100%`);
anim.cancel();
}
async function runParseNumberOrPercentInKeyframesTest(keyframes) {
const anim = target.animate(keyframes, {
timeline: new ViewTimeline( { subject: target }),
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) },
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
duration: 'auto', fill: 'both'
});
await anim.ready;
await waitForNextFrame();
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = maxScroll / 2;
await waitForNextFrame();
const testcase = JSON.stringify(keyframes);
assert_progress_equals(anim, 0.5, testcase);
assert_opacity_equals(0.5, testcase);
anim.cancel();
}
async function runInvalidKeyframesTest(keyframes) {
assert_throws_js(TypeError, () => {
target.animate(keyframes, {
timeline: new ViewTimeline( { subject: target }),
});
}, `Invalid keyframes test case "${JSON.stringify(keyframes)}"`);
}
promise_test(async t => {
// Test equivalent typed-OM and CSS representations of timeline offsets.
// Test array and object form for keyframes.
const keyframeTests = [
// BaseKeyframe form with offsets expressed as typed-OM.
[
{
offset: { rangeName: 'cover', offset: CSS.percent(0) },
opacity: 0
},
{
offset: { rangeName: 'cover', offset: CSS.percent(100) },
opacity: 1
}
],
// BaseKeyframe form with offsets expressed as CSS text.
[
{ offset: "cover 0%", opacity: 0 },
{ offset: "cover 100%", opacity: 1 }
],
// BasePropertyIndexedKeyframe form with offsets expressed as typed-OM.
{
opacity: [0, 1],
offset: [
{ rangeName: 'cover', offset: CSS.percent(0) },
{ rangeName: 'cover', offset: CSS.percent(100) }
]
},
// BasePropertyIndexedKeyframe form with offsets expressed as CSS text.
{ opacity: [0, 1], offset: [ "cover 0%", "cover 100%" ]}
];
for (let i = 0; i < keyframeTests.length; i++) {
await runTimelineOffsetsInKeyframesTest(keyframeTests[i]);
}
}, 'Timeline offsets in programmatic keyframes');
promise_test(async t => {
const keyframeTests = [
[{offset: "0.5", opacity: 0.5 }],
[{offset: "50%", opacity: 0.5 }],
[{offset: "calc(20% + 30%)", opacity: 0.5 }]
];
for (let i = 0; i < keyframeTests.length; i++) {
await runParseNumberOrPercentInKeyframesTest(keyframeTests[i]);
}
}, 'String offsets in programmatic keyframes');
promise_test(async t => {
const invalidKeyframeTests = [
// BasePropertyKefyrame:
[{ offset: { rangeName: 'somewhere', offset: CSS.percent(0) }}],
[{ offset: { rangeName: 'entry', offset: CSS.px(0) }}],
[{ offset: "here 0%" }],
[{ offset: "entry 3px" }],
// BasePropertyIndexedKeyframe with sequence:
{ offset: [{ rangeName: 'somewhere', offset: CSS.percent(0) }]},
{ offset: [{ rangeName: 'entry', offset: CSS.px(0) }]},
{ offset: ["here 0%"] },
{ offset: ["entry 3px" ]},
// BasePropertyIndexedKeyframe without sequence:
{ offset: { rangeName: 'somewhere', offset: CSS.percent(0) }},
{ offset: { rangeName: 'entry', offset: CSS.px(0) }},
{ offset: "here 0%" },
{ offset: "entry 3px" },
// <number> or <percent> as string:
[{ offset: "-1" }],
[{ offset: "2" }],
[{ offset: "-10%" }],
[{ offset: "110%" }],
{ offset: ["-1"], opacity: [0.5] },
{ offset: ["2"], opacity: [0.5] },
{ offset: "-1", opacity: 0.5 },
{ offset: "2", opacity: 0.5 },
// Extra stuff at the end.
[{ offset: "0.5 trailing nonsense" }],
[{ offset: "cover 50% eureka" }]
];
for( let i = 0; i < invalidKeyframeTests.length; i++) {
await runInvalidKeyframesTest(invalidKeyframeTests[i]);
}
}, 'Invalid timeline offset in programmatic keyframe throws');
promise_test(async t => {
const anim = target.animate([
{ offset: "cover 0%", opacity: 0 },
{ offset: "cover 100%", opacity: 1 }
], {
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) },
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
duration: 10000, fill: 'both'
});
scroller.scrollTop = 750;
await anim.ready;
assert_opacity_equals(1, `Opacity with document timeline`);
anim.timeline = new ViewTimeline( { subject: target });
await anim.ready;
assert_progress_equals(anim, 0.5, `Progress at contain 50%`);
assert_opacity_equals(0.5, `Opacity at contain 50%`);
anim.timeline = document.timeline;
assert_false(anim.pending);
await waitForNextFrame();
assert_opacity_equals(1, `Opacity after resetting timeline`);
anim.cancel();
}, 'Timeline offsets in programmatic keyframes adjust for change in ' +
'timeline');
promise_test(async t => {
const anim = target.animate([], {
timeline: new ViewTimeline( { subject: target }),
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) },
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
duration: 'auto', fill: 'both'
});
await anim.ready;
await waitForNextFrame();
scroller.scrollTop = 750;
await waitForNextFrame();
assert_progress_equals(
anim, 0.5, `Progress at contain 50% before effect change`);
assert_opacity_equals(1, `Opacity at contain 50% before effect change`);
anim.effect = new KeyframeEffect(target, [
{ offset: "cover 0%", opacity: 0 },
{ offset: "cover 100%", opacity: 1 }
], { duration: 'auto', fill: 'both' });
await waitForNextFrame();
assert_progress_equals(
anim, 0.5, `Progress at contain 50% after effect change`);
assert_opacity_equals(0.5, `Opacity at contain 50% after effect change`);
}, 'Timeline offsets in programmatic keyframes resolved when updating ' +
'the animation effect');
}
// TODO(kevers): Add tests for getKeyframes once
// https://github.com/w3c/csswg-drafts/issues/8507 is resolved.
window.onload = runTest;
</script>
</html>
Codebase Browser
chromium