interrupt-transform-transition.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <style>
    .box {
      position: relative;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: blue;
      transform: translate(0, 0);
      transition-delay: -1s;
      transition-duration: 10s;
      transition-property: transform;
      transition-timing-function: linear;
    }
  </style>
</head>
<body>
  <div id="box" class="box"></div>
  <script>
    'use strict';
    test(() => {
      box.offsetTop; // Force style recalc

      box.style.transform = 'translate(200px, 0)';
      assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 20, 0)');
      box.style.transform = 'translate(0, 200px)';
      assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 18, 20)');
    }, 'Interrupted transition should not jump back to pre-transition transform');
  </script>
</body>
</html>

chromium/third_party/blink/web_tests/transitions/interrupt-transform-transition.html