start-transform-transition.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <style>
    .box {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: blue;
      transform: translate(0, 0);
      transition-delay: -1s;
      transition-duration: 3s;
      transition-property: transform;
      transition-timing-function: linear;
    }

    .moved {
      transform: translateX(300px);
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="box" class="box"></div>
  </div>
  <script>
    'use strict';
    async_test(t => {
      box.offsetTop; // Force style recalc
      setTimeout(t.step_func_done(() => {
        box.className = 'moved box';
        assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 100, 0)');
      }), 0);
    }, 'Box should start transition from style change on timer');
  </script>
</body>
</html>

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