transition-and-animation-3.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 #3</title>
  <style>
    #box {
        position: absolute;
        height: 100px;
        width: 100px;
        left: 0px;
        background-color: blue;
    }
    #box.animating {
        animation: move 0.1s linear;
        left: 100px;
        transition: left 10s linear;
    }
    #box.animating.moved {
        left: 200px;
    }
    @keyframes move {
        from { left: 500px; }
        to   { left: 501px; }
    }
  </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('animating');
        // No transition - we jump to the animation's initial frame.
        assert_equals(getComputedStyle(box).left, '500px');

        // This would trigger a transition if no animation was in progress.
        box.classList.add('moved');

        // We remain at the animation's initial frame.
        assert_equals(getComputedStyle(box).left, '500px');
      });

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