scroll-animations/css/scroll-animation-initial-offset.html

<!DOCTYPE html>
<html class="reftest-wait">
<title>Composited scroll-linked animation with initial scroll offset</title>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/">
<link rel="match" href="scroll-animation-initial-offset-ref.html">
<style>

#scroller {
  overflow-y: auto;
  height: 200px;
  border: 2px solid green;
  position: relative;
  background: gray;
}

.spacer {
  height: 1000px;
}

@keyframes anim {
  0% { transform: translateY(0); }
  100% { transform: translateY(800px); }
}

#align {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background: rgba(0, 0, 200, 0.2);
  color: white;
  position: absolute;
  border: 1px solid white;
  animation: anim linear 10s;
  animation-timeline: scroll();
  will-change: transform;
}

#marker {
  width: 100%;
  height: 50px;
  background: #640;
  position: absolute;
  top: 350px;
}

</style>
<div id="scroller">
  <div id="align">TOP</div>
  <div class="spacer"></div>
  <div id="marker">BOTTOM</div>
</div>
<script>

  // Test that a scroll-linked animation of a composited property reacts
  // correctly to a programmatic scroll early during the page load.
  //
  // The scroll offset will change before the animation is "started" on the
  // compositor, so it needs to be able to handle a non-zero initial offset.
  //
  scroller.scrollTo(0, 200);

</script>
<script src="/web-animations/testcommon.js"></script>
<script>

  document.documentElement.addEventListener('TestRendered', async () => {
    await waitForCompositorReady();
    await waitForNextFrame();
    await waitForNextFrame();
    document.documentElement.classList.remove("reftest-wait");
  }, { once: true });

</script>