play-state-initially-paused.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <style type="text/css">
    .target {
      position: relative;
      height: 100px;
      width: 100px;
      background-color: red;
      left: 0px;
      margin-bottom: 10px;
      animation: test 5s linear forwards;
      animation-play-state: paused;
    }
    .running {
      animation-play-state: running;
    }
    #animation1 {
      animation-delay: -4.7s;
    }
    #animation2 {
      animation-delay: 0s;
    }
    #animation3 {
      animation-delay: 0.1s;
    }
    @keyframes test {
        from { left: 100px; }
        to   { left: 600px; }
    }
  </style>
</head>
<body>
  <div class="target" id="animation1"></div>
  <div class="target" id="animation2"></div>
  <div class="target" id="animation3"></div>
  <script>
    'use strict';

    var t = async_test('An animation which is initially paused produces the correct output when first created, and can be unpaused.');

    requestAnimationFrame(t.step_func(() => {
      assert_equals(getComputedStyle(animation1).left, '570px');
      assert_equals(getComputedStyle(animation2).left, '100px');
      assert_equals(getComputedStyle(animation3).left, '0px');

      animation1.addEventListener('animationend', t.step_func_done(finished));

      var targets = document.getElementsByClassName('target');
      for (var i = 0; i < targets.length; ++i) {
        targets[i].classList.add('running');
      }

      assert_equals(getComputedStyle(animation1).left, '570px');
      assert_equals(getComputedStyle(animation2).left, '100px');
      assert_equals(getComputedStyle(animation3).left, '0px');
    }));

    function finished() {
      var left1 = parseFloat(getComputedStyle(animation1).left);
      var left2 = parseFloat(getComputedStyle(animation2).left);
      var left3 = parseFloat(getComputedStyle(animation3).left);
      assert_equals(left1, 600);
      assert_greater_than(left1, left2);
      assert_greater_than(left2, left3);
      assert_greater_than_equal(left3, 120);
    }
  </script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/play-state-initially-paused.html
