<!DOCTYPE html>
<style type="text/css">
  .target {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: red;
    margin-bottom: 10px;
  }
  .animated {
    animation: test 1s linear;
    animation: test 1s linear;
  }
  #negative-delay {
    animation-delay: -500ms;
    animation-delay: -500ms;
  }
  #zero-delay {
    animation-delay: 0ms;
    animation-delay: 0ms;
  }
  #positive-delay {
    animation-delay: 500ms;
    animation-delay: 500ms;
  }
  @keyframes test {
    from { left: 100px; }
    to   { left: 300px; }
  }
  @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 => {
  var immediate = true;
  window.addEventListener("load", t.step_func(() => {
    requestAnimationFrame(t.step_func(() => {
      ['negative-delay', 'zero-delay', 'positive-delay'].forEach((id) => {
        var target = document.getElementById(id);
        target.addEventListener('animationstart', onStartEventFired);
        target.classList.add('animated');
      });
      requestAnimationFrame(t.step_func(() => {
        immediate = false;
      }));
    }));

    function log(message) {
      var div = document.createElement('div');
      div.textContent = message;
      document.body.appendChild(div);
    }

    function onStartEventFired(e) {
      var id = e.target.id;
      var pass = immediate || id == 'positive-delay';
      log((pass ? 'PASS' : 'FAIL') + ': ' + id + ': Start event ' + (immediate ? 'fired' : 'did not fire') + ' immediately');
      assert_true(pass, 'Start event should be fired');
      if (id === 'positive-delay') {
        t.done();
      }
    }
  }));
}, "Tests that the start event is fired at the correct time with different start delays");
</script>
<div class="target" id="negative-delay"></div>
<div class="target" id="zero-delay"></div>
<div class="target" id="positive-delay"></div>