negative-delay-events.html | Explore in Territory

<!DOCTYPE html>
<style type="text/css">
.box {
  position: relative;
  height: 25px;
  width: 25px;
  background-color: blue;
  margin: 10px;
}
.animation {
  animation-duration: 0.1s;
  animation-name: animation;
}
#animation1 {
  animation-delay: 0.05s;
}
#animation2 {
  animation-delay: -0.05s;
}
#animation3 {
  animation-delay: -0.15s;
}
@keyframes animation {
  from { left: 0; }
  to   { left: 500px; }
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script type="text/javascript">
async_test(t => {
  var count = 0;
  document.addEventListener('animationstart', t.step_func((event) => {
      // Elapsed time caps at the animation duration.
      var pass = event.elapsedTime === [0, 0.05, 0.1][count++];
      assert_true(pass, event.target.id + ': Start event: elapsedTime=' + event.elapsedTime);
  }));

  document.addEventListener('animationend', t.step_func((event) => {
      var pass = event.elapsedTime === 0.1;
      assert_true(pass, event.target.id + ': End event: elapsedTime=' + event.elapsedTime);
      switch (count) {
      case 1:
          document.getElementById('animation2').classList.add('animation');
          break;
      case 2:
          document.getElementById('animation3').classList.add('animation');
          break;
      case 3:
          t.done();
      }
  }));
}, "Tests animation events with a negative delay");
</script>
<div id="animation1" class="box animation"></div>
<div id="animation2" class="box"></div>
<div id="animation3" class="box"></div>
chromium/third_party/blink/web_tests/animations/events/negative-delay-events.html
