neutral-keyframe.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /web-animations/responsive/neutral-keyframe.html - WPT Dashboard Interop Dashboard

<!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>