events-with-short-duration-and-delay.html

<!DOCTYPE html>
<title>Test events when the animation has a short duration and is delayed</title>
<style>
#box {
  position: relative;
  left: 100px;
  top: 10px;
  height: 100px;
  width: 100px;
  animation-duration: 0.001s;
  animation-delay: 0.001s;
  animation-name: anim;
  background-color: #999;
  animation-iteration-count: 2;
}
@keyframes anim {
  from { left: 200px; }
  to   { left: 300px; }
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
async_test(t => {
  window.addEventListener("load", t.step_func(() => {
    var animationStarted = false;
    document.addEventListener('animationstart', t.step_func(() => {
      animationStarted = true;
    }));
    document.addEventListener('animationend', t.step_func_done(() => {
      assert_true(animationStarted);
    }));

    // Animation begins once we append the DOM node to the document.
    var boxNode = document.createElement('div');
    boxNode.id = 'box';
    document.body.appendChild(boxNode);
  }));
}, "Test events when the animation has a short duration and is delayed");
</script>

chromium/third_party/blink/web_tests/animations/events/events-with-short-duration-and-delay.html