153 lines
4.7 KiB
HTML
153 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="match" href="range-boundary-ref.html">
|
|
<title></title>
|
|
</head>
|
|
<style type="text/css">
|
|
@keyframes transform {
|
|
0% { transform: translateX(25px); }
|
|
100% { transform: translateX(50px); }
|
|
}
|
|
|
|
@keyframes background {
|
|
0% { background-color: #99f; }
|
|
100% { background-color: #9f9; }
|
|
}
|
|
|
|
.scroller {
|
|
display: inline-block;
|
|
border: 2px solid black;
|
|
height: 100px;
|
|
width: 100px;
|
|
overflow: hidden;
|
|
}
|
|
.spacer {
|
|
height: 300px;
|
|
margin: 0;
|
|
}
|
|
.box {
|
|
background: gray;
|
|
height: 50px;
|
|
width: 50px;
|
|
margin: 0;
|
|
animation: transform auto, background auto;
|
|
animation-timeline: view(), view();
|
|
animation-range: entry 0% entry 100%, contain 0% contain 100%;
|
|
}
|
|
</style>
|
|
<body>
|
|
<!-- scroll to bottom
|
|
top-box:
|
|
transform: none (after phase)
|
|
bg-color: #9f9 (at active-after boundary with inclusive endpoint)
|
|
bottom-box:
|
|
transform: 100px (at active-after boundary with inclusive endpoint)
|
|
bg-color: #99f (at active-before boundary with inclusive endpoint)
|
|
-->
|
|
<div id="scroller-1" class="scroller">
|
|
<div class="spacer"></div>
|
|
<div class="box"></div>
|
|
<div class="box"></div>
|
|
</div>
|
|
<!-- scroll to top
|
|
top-box:
|
|
transform: none (after phase)
|
|
bg-color: gray (at active-after boundary with exclusive endpoint)
|
|
bottom-box:
|
|
transform: none (at active-after boundary with exclusive endpoint)
|
|
bg-color: #99f (at active-before boundary with inclusive endpoint)
|
|
-->
|
|
<div id="scroller-2" class="scroller">
|
|
<div class="box"></div>
|
|
<div class="box"></div>
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<br>
|
|
<!-- scroll to midpoint
|
|
top-box:
|
|
transform: none (after phase)
|
|
bg-color: gray (at active-after boundary with exclusive endpoint)
|
|
bottom-box:
|
|
transform: none (at active-after boundary with exclusive endpoint)
|
|
bg-color: #99f (at active-before boundary with inclusive endpoint)
|
|
-->
|
|
<div id="scroller-3" class="scroller">
|
|
<div class="spacer"></div>
|
|
<div class="box"></div>
|
|
<div class="box"></div>
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<!-- scroll to bottom + reverse
|
|
top-box:
|
|
transform: none (before phase)
|
|
bg-color: gray (at active-before boundary with exclusive endpoint)
|
|
bottom-box:
|
|
transform: none (at active-before boundary with exclusive endpoint)
|
|
bg-color: #9f9 (at active-after boundary with inclusive endpoint)
|
|
-->
|
|
<div id="scroller-4" class="scroller">
|
|
<div class="spacer"></div>
|
|
<div class="box reverse"></div>
|
|
<div class="box reverse"></div>
|
|
</div>
|
|
<br>
|
|
<!-- scroll to top + reverse
|
|
top-box:
|
|
transform: none (before phase)
|
|
bg-color: #99f (at active-before boundary with inclusive endpoint)
|
|
bottom-box:
|
|
transform: 25px (at active-before boundary with inclusive endpoint)
|
|
bg-color: #9f9 (at active-after boundary with inclusive endpoint)
|
|
-->
|
|
<div id="scroller-5" class="scroller">
|
|
<div class="box reverse"></div>
|
|
<div class="box reverse"></div>
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<!-- scroll to midpoint + reverse
|
|
top-box:
|
|
transform: none (before phase)
|
|
bg-color: gray (at active-before boundary with exclusive endpoint)
|
|
bottom-box:
|
|
transform: none (at active-before boundary with exclusive endpoint)
|
|
bg-color: #9f9 (at active-before boundary with inclusive endpoint)
|
|
-->
|
|
<div id="scroller-6" class="scroller">
|
|
<div class="spacer"></div>
|
|
<div class="box reverse"></div>
|
|
<div class="box reverse"></div>
|
|
<div class="spacer"></div>
|
|
</div>
|
|
</body>
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<script src="/web-animations/testcommon.js"></script>
|
|
<script>
|
|
function scrollTo(scroller_id, relative_offset) {
|
|
const scroller = document.getElementById(scroller_id);
|
|
const max_scroll = scroller.scrollHeight - scroller.clientHeight;
|
|
scroller.scrollTop = relative_offset * max_scroll;
|
|
}
|
|
|
|
window.onload = async () => {
|
|
await waitForCompositorReady();
|
|
document.querySelectorAll('.reverse').forEach(elem => {
|
|
elem.getAnimations().forEach(anim => {
|
|
anim.reverse();
|
|
});
|
|
});
|
|
// Playing forward
|
|
scrollTo('scroller-1', 1);
|
|
scrollTo('scroller-2', 0);
|
|
scrollTo('scroller-3', 0.5);
|
|
// Playing reverse
|
|
scrollTo('scroller-4', 1);
|
|
scrollTo('scroller-5', 0);
|
|
scrollTo('scroller-6', 0.5);
|
|
await waitForNextFrame();
|
|
takeScreenshot();
|
|
};
|
|
</script>
|
|
</html>
|