<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
.start {
    animation: anim 1ms;
}

@keyframes anim {
    0% {
        transform: translate3d(0, 0, 1px);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
</style>
<body>x
<script>
'use strict';
async_test(function(t) {

  requestAnimationFrame(function() {
    document.body.classList.add('start');

    // Force a style resolve, to ensure the animation is created.
    document.body.offsetTop;

    var animation = document.body.getAnimations()[0];
    requestAnimationFrame(function() {
      if (animation.playState === 'pending') {
        var passed = false;
        document.body.addEventListener('animationstart', function() {
          passed = true;
        });
        document.body.addEventListener('animationend', function() {
          t.step(function() {
            assert_true(passed);
            t.done();
          });
        });
      } else {
        // The animation is no longer pending.

        // We missed the opportunity to add a start event listener
        // before the animation started. This test might flakily
        // pass even if the implementation is incorrect.
        t.done();
      }
    });
  });
});
</script>