transition-and-animation-2.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <title>Transition/Animation Test #2</title>
  <style>
    #box {
        position: absolute;
        left: 0;
        top: 100px;
        height: 100px;
        width: 100px;
        background-color: blue;
        transition-property: transform;
        transition-duration: 10s;
        transition-timing-function: linear;
    }
    #box.running {
        animation-duration: 0.3s;
        animation-timing-function: linear;
        animation-name: anim;
    }
    @keyframes anim {
        from { transform: translate(0, 100px); }
        to   { transform: translate(400px, 100px); }
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    'use strict';
    async_test(t => {

      t.step(() => {
        box.offsetTop; // force style recalc

        // Start animation
        box.classList.add('running');
        // No transition - we jump to the animation's initial frame.
        assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 0, 100)');

        // This would trigger a transition if no animation was in progress.
        box.style.transform = 'translate(400px, 0)';

        // We remain at the animation's initial frame.
        assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 0, 100)');
      });

      box.addEventListener('animationend', t.step_func_done(() => {
        // No transition - the inline style takes immediate effect.
        assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 400, 0)');
      }));
    }, 'Inline style applies when animation completes');
  </script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/transition-and-animation-2.html
