testing/web-platform/tests/web-animations/responsive/neutral-keyframe.html
author Sotaro Ikeda <sotaro.ikeda.g@gmail.com>
Thu, 10 Jul 2025 00:10:09 +0000 (9 hours ago)
changeset 795941 23763b72c35abeead04f63e4503c28abc73d065d
parent 732320 c8377070070b54fe916617a178391cc548eacf41
permissions -rw-r--r--
Bug 1976135 - Remove nightly only limitation of pref gfx.webrender.layer-compositor r=gfx-reviewers,gw Differential Revision: https://phabricator.services.mozilla.com/D256379
<!DOCTYPE html>
<html class="reftest-wait">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Animation with neutral keyframe is responsive to change in underlying style</title>
  <link rel="help" href="https://www.w3.org/TR/web-animations-1/#the-effect-value-of-a-keyframe-animation-effect">
  <link rel="match" href="neutral-keyframe-ref.html">
  <script src="/common/reftest-wait.js"></script>
  <script src="/web-animations/testcommon.js"></script>
  <style type="text/css">
    #block {
      background-color: green;
      height: 100px;
      width: 100px;
    }
  </style>
</head>
<body>
  <div id="block"></div>
</body>
<script>
  window.onload = async () => {
    const target = document.getElementById('block');
    const anim = target.animate({ translate: '200px' },
                                {
                                  duration: 10000,
                                  easing: 'steps(1,jump-end)'
                                });
    await anim.ready;
    await waitForNextFrame();
    // The neutral keyframe value changes from transform 'none' to '100px'.
    // Since using jump-end for the easing function, the animated value is the
    // underlying (neutral) value. If the box is not translated, then the change
    // to the underlying value is not taking effect.
    target.style.translate = '100px';
    await waitForNextFrame();
    takeScreenshot();
  };
</script>
</html>