<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <title>Transition/Animation Test #1</title>
  <style>
    #box {
        position: absolute;
        left: 0;
        top: 100px;
        height: 100px;
        width: 100px;
        background-color: blue;
        transition-property: transform;
        transition-duration: 10s;
    }
    #box.running {
        animation-duration: 0.2s;
        animation-timing-function: linear;
        animation-name: anim;
    }
    @keyframes anim {
        from { transform: translateX(200px); }
        to   { transform: translateX(300px); }
    }
  </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, 200, 0)');
      });

      box.addEventListener('animationend', t.step_func_done(() => {
        // No transition - the inline style takes immediate effect.
        assert_equals(getComputedStyle(box).transform, 'none');
      }));
    }, 'Inline style applies when animation completes');
  </script>
</body>
</html>