play-state-initially-paused-start-event.html

<!DOCTYPE html>
<style type="text/css">
  .target {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: red;
    margin-bottom: 10px;
  }
  .animated {
    animation: test 10ms linear forwards;
    animation-play-state: paused;
  }
  .running {
    animation-play-state: running;
  }
  #animation1 {
    animation-delay: -10ms;
  }
  #animation2 {
    animation-delay: 0ms;
  }
  #animation3 {
    animation-delay: 10ms;
  }
  @keyframes test {
      from { left: 100px; }
      to   { left: 300px; }
  }
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script type="text/javascript">
async_test(t => {
  function startNextAnimation(currentId) {
    // Running animations serially avoids flakiness due to overlap.
    if (currentId === 'animation1') {
      start(document.getElementById('animation2'), true);
    } else if (currentId === 'animation2') {
      start(document.getElementById('animation3'), false);
    } else if (currentId === 'animation3') {
      t.done();
    }
  }

  var isRunning;
  function run(element) {
    element.classList.add('running');
    isRunning = true;
  }

  function start(target, expectImmediateStartEvent) {
    isRunning = false;
    target.addEventListener('animationstart', t.step_func((e) => {
      var id = e.target.id;

      if (expectImmediateStartEvent) {
        assert_false(isRunning, 'Start event should be fired without setting play state to running');
      } else {
        assert_true(isRunning, 'Start event should be fired after play state was set to running');
      }
      startNextAnimation(id);
    }));
    target.classList.add('animated');
    if (!expectImmediateStartEvent) {
      t.step_timeout(run.bind(null, target), 100);
    }
  }

  window.addEventListener("load", t.step_func(() => {
    start(document.getElementById('animation1'), true);
  }));
}, "Tests that an animation which is initially paused fires its start event as soon as its delay expires, not when it transitions to the running state");
</script>
<div class="target" id="animation1"></div>
<div class="target" id="animation2"></div>
<div class="target" id="animation3"></div>
chromium/third_party/blink/web_tests/animations/events/play-state-initially-paused-start-event.html
