cancel-and-start-new.html | Explore in Territory

<!DOCTYPE html>
<meta charset="utf-8">
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  #target {
    left: 0px;
    top: 0px;
  }
  #target.transition-top {
    top: 100px;
    transition: top 1s linear;
  }
  #target.transition-left {
    left: 100px;
    transition: left 50ms linear;
  }
</style>
<div id="target"></div>
<script>
  'use strict';
  function waitForNextFrame() {
    return new Promise(function(resolve, reject) {
      requestAnimationFrame(() => {
        resolve();
      });
    });
  }

  async_test(t => {
    waitForNextFrame().then(() => {
      target.classList.add('transition-top');
    }).then(waitForNextFrame).then(() => {
      target.classList.remove('transition-top');
    }).then(waitForNextFrame).then(t.step_func(() => {
      target.classList.add('transition-left');
      assert_equals(getComputedStyle(target).top, '0px');
      assert_equals(getComputedStyle(target).left, '0px');
      target.addEventListener('transitionend', t.step_func_done(() => {
        assert_equals(getComputedStyle(target).left, '100px');
      }));
    }));
  }, 'Having stopped a transition before it completes, a subsequent transition starts correctly');
</script>
chromium/third_party/blink/web_tests/transitions/cancel-and-start-new.html
