<!DOCTYPE html>
<html id="top">
<meta charset="utf-8">
<title>View timeline delay</title>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
<script src="/scroll-animations/view-timelines/testcommon.js"></script>
<script src="/css/css-typed-om/resources/testhelper.js"></script>
<style>
#container {
border: 10px solid lightgray;
overflow-x: scroll;
height: 200px;
width: 200px;
}
#content {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
width: 1800px;
margin: 0;
}
.spacer {
width: 800px;
display: inline-block;
}
#target {
background-color: green;
height: 100px;
width: 100px;
display: inline-block;
font-size: 10px;
}
</style>
<body>
<div id="container">
<div id="content">
<div class="spacer"></div>
<div id="target"></div>
<div class="spacer"></div>
</div>
</div>
</body>
<script type="text/javascript">
function assert_timeline_offset(actual, expected, errorMessage) {
assert_equals(actual.rangeName, expected.rangeName, errorMessage);
assert_style_value_equals(actual.offset, expected.offset);
}
promise_test(async t => {
const timeline = new ViewTimeline({ subject: target, axis: 'inline' });
const anim = target.animate({ opacity: [0, 1 ] }, { timeline: timeline });
t.add_cleanup(() => {
anim.cancel();
});
await anim.ready;
container.scrollLeft = 750;
await waitForNextFrame();
// normal ==> cover 0% to cover 100%
// cover 0% @ 600px
// cover 100% @ 900px
// expected opacity = (750 - 600) / (900 - 600) = 0.5
assert_equals(anim.rangeStart, 'normal', 'Initial value for rangeStart');
assert_equals(anim.rangeEnd, 'normal', 'Initial value for rangeEnd');
assert_equals(getComputedStyle(target).opacity, '0.5',
'Opacity with range set to [normal, normal]');
// contain 0% @ 700px
// cover 100% @ 900px
// expected opacity = (750 - 700) / (900 - 700) = 0.25
await runAndWaitForFrameUpdate(() => {
anim.rangeStart = "contain 0%";
anim.rangeEnd = "cover 100%";
});
assert_timeline_offset(
anim.rangeStart,
{ rangeName: 'contain', offset: CSS.percent(0) },
'rangeStart set to contain 0%');
assert_timeline_offset(
anim.rangeEnd,
{ rangeName: 'cover', offset: CSS.percent(100) },
'rangeEnd set to cover 100%');
assert_equals(getComputedStyle(target).opacity, '0.25',
'opacity with range set to [contain 0%, cover 100%]');
// entry -20px @ 580px
// exit-crossing 10% @ 810px
// expected opacity = (750 - 580) / (810 - 580) = 0.739130
await runAndWaitForFrameUpdate(() => {
anim.rangeStart = { rangeName: 'entry', offset: CSS.px(-20), };
anim.rangeEnd = { rangeName: 'exit-crossing', offset: CSS.percent(10) };
});
assert_timeline_offset(
anim.rangeStart,
{ rangeName: 'entry', offset: CSS.px(-20) },
'rangeStart set to entry -20px');
assert_timeline_offset(
anim.rangeEnd,
{ rangeName: 'exit-crossing', offset: CSS.percent(10) },
'rangeEnd set to exit-crossing 10%');
assert_approx_equals(
parseFloat(getComputedStyle(target).opacity), 0.739130, 1e-6,
'opacity with range set to [entry -20px, exit-crossing 10%]');
// normal [start] @ 600px
// contain 100% @ 800px
// expected opacity = (750 - 600) / (800 - 600) = 0.75
await runAndWaitForFrameUpdate(() => {
anim.rangeStart = "normal";
anim.rangeEnd = "contain calc(60% + 40%)";
});
assert_equals(anim.rangeStart, 'normal','rangeStart set to normal');
assert_timeline_offset(
anim.rangeEnd,
{ rangeName: 'contain', offset: CSS.percent(100) },
'rangeEnd set to contain 100%');
assert_equals(getComputedStyle(target).opacity, '0.75',
'opacity with range set to [normal, contain 100%]');
}, 'Getting and setting the animation range');
</script>
</html>
Codebase Browser
chromium