change-one-anim.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <style>
    #box {
      position: relative;
      height: 20px;
      width: 20px;
      background-color: #9bb;
      left: 0px;
      top: 0px;
      animation-name: horiz, vert;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: linear;
    }
    @keyframes horiz {
      from { left: 100px; }
      to { left: 500px; }
    }
    @keyframes vert {
      from { top: 100px; }
      to { top: 500px; }
    }
  </style>
</head>
<body>
  <!--
    This test performs two animations, left and top.
    When it removes the left animation, the top animation
    should continue from where it left off.
  -->
  <div id="box"></div>
  <script>
    'use strict';
    function waitForProgress() {
      var initialTop = getComputedStyle(box).top;
      return new Promise(resolve => {
        function poll() {
          var top = getComputedStyle(box).top;
          if (top === initialTop) {
            requestAnimationFrame(poll);
          } else {
            resolve();
          }
        }
        requestAnimationFrame(poll);
      });
    }

    async_test(t => {
      var previousTop = getComputedStyle(box).top;
      waitForProgress().then(t.step_func(() => {
        assert_greater_than(parseFloat(getComputedStyle(box).left), 100);
        var currentTop = getComputedStyle(box).top;
        assert_greater_than(parseFloat(currentTop), parseFloat(previousTop));
        box.style.animationName = 'vert';
        assert_equals(getComputedStyle(box).left, '0px');
        assert_equals(getComputedStyle(box).top, currentTop);
        previousTop = currentTop;
      })).then(waitForProgress).then(t.step_func_done(() => {
        assert_equals(getComputedStyle(box).left, '0px');
        assert_greater_than(parseFloat(getComputedStyle(box).top), parseFloat(previousTop));
      }));
    }, 'top animation continues when left animation stops');
  </script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/change-one-anim.html
