90 lines
2.5 KiB
HTML
90 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html id="top">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>View timeline with sticky</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>
|
|
<style>
|
|
|
|
#container {
|
|
width: 500px;
|
|
height: 500px;
|
|
overflow: auto;
|
|
white-space: nowrap;
|
|
}
|
|
.space {
|
|
display: inline-block;
|
|
width: 500px;
|
|
height: 400px;
|
|
white-space: nowrap;
|
|
}
|
|
#target {
|
|
display: inline-block;
|
|
background: yellow;
|
|
position: sticky;
|
|
left: 0px;
|
|
right: 0px;
|
|
width: 50px;
|
|
height: 400px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container"><!--
|
|
--><div class="space"></div><!--
|
|
--><div class="space"><!--
|
|
--><div style="display:inline-block; width:200px"></div><!--
|
|
--><div id="target"></div><!--
|
|
--></div><!--
|
|
--><div class="space"></div><!--
|
|
--></div>
|
|
<script type="text/javascript">
|
|
|
|
promise_test(async t => {
|
|
await runTimelineRangeTest(t, {
|
|
rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } ,
|
|
rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) },
|
|
startOffset: 0,
|
|
endOffset: 1000
|
|
});
|
|
await runTimelineRangeTest(t, {
|
|
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } ,
|
|
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
|
|
startOffset: 50,
|
|
endOffset: 950
|
|
});
|
|
await runTimelineRangeTest(t, {
|
|
rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
|
|
rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
|
|
startOffset: 0,
|
|
endOffset: 50
|
|
});
|
|
await runTimelineRangeTest(t, {
|
|
rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) },
|
|
rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) },
|
|
startOffset: 0,
|
|
endOffset: 50
|
|
});
|
|
await runTimelineRangeTest(t, {
|
|
rangeStart: { rangeName: 'exit', offset: CSS.percent(0) },
|
|
rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) },
|
|
startOffset: 950,
|
|
endOffset: 1000
|
|
});
|
|
await runTimelineRangeTest(t, {
|
|
rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) },
|
|
rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) },
|
|
startOffset: 950,
|
|
endOffset: 1000
|
|
});
|
|
}, 'View timeline with sticky target, block axis.' );
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|