animation-update-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html class="reftest-wait">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Reference file for various tests that update an animation with a scroll timeline</title>

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

</head>

<style type="text/css">

  #scroller {

    border:  1px solid black;

    overflow: hidden;

    width: 300px;

    height: 200px;

  #target {

    margin-bottom: 800px;

    margin-top:  800px;

    margin-left:  10px;

    margin-right:  10px;

    width: 100px;

    height: 100px;

    z-index: -1;

    background-color: green;

</style>

<body>

  <div id="scroller">

    <div id="target"></div>

  </div>

</body>

<script type="text/javascript">

  document.documentElement.addEventListener('TestRendered', async () => {

    runTest();

  }, { once: true });

  async function runTest() {

    // Defaults to exit 60% if using a view timeline with subject = target.

    const DEFAULT_SCROLL_POS = 860;

    await waitForCompositorReady();

    const urlParams = new URLSearchParams(window.location.search);

    target.style.transform =

        `translateX(${urlParams.get('translate') || "0px"}`;

    scroller.scrollTop = urlParams.get('scroll') || DEFAULT_SCROLL_POS;

    await waitForNextFrame();

    await waitForNextFrame();

    // Make sure change to animation range was properly picked up.

    document.documentElement.classList.remove("reftest-wait");

</script>

</body>

</html>