146 lines
4.9 KiB
HTML
146 lines
4.9 KiB
HTML
<!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%]');
|
|
|
|
// scroll 10% @ 160px
|
|
// scroll 90% @ 1440px
|
|
// expected opacity = (750 - 160) / (1440 - 160) = 0.4609375
|
|
await runAndWaitForFrameUpdate(() => {
|
|
anim.rangeStart = "scroll 10%";
|
|
anim.rangeEnd = "scroll 90%";
|
|
});
|
|
assert_timeline_offset(
|
|
anim.rangeStart,
|
|
{ rangeName: 'scroll', offset: CSS.percent(10) },
|
|
'rangeStart set to scroll 10%');
|
|
assert_timeline_offset(
|
|
anim.rangeEnd,
|
|
{ rangeName: 'scroll', offset: CSS.percent(90) },
|
|
'rangeEnd set to scroll 90%');
|
|
assert_approx_equals(
|
|
parseFloat(getComputedStyle(target).opacity), 0.4609375, 1e-6,
|
|
'opacity with range set to [scroll 10%, scroll 90%]');
|
|
}, 'Getting and setting the animation range');
|
|
</script>
|
|
</html>
|