animation-events-prefixed-01.html | Explore in Territory

<!DOCTYPE html>
<title>Tests that prefixed animation events are correctly fired.</title>
<style>
  #box {
    position: relative;
    left: 100px;
    top: 10px;
    height: 100px;
    width: 100px;
    background-color: #999;
  }

  .animate {
    animation-duration: 0.3s;
    animation-name: anim;
  }

  @keyframes anim {
      from { left: 200px; }
      to   { left: 300px; }
  }
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
var startEventReceived = false;
var endEventReceived = false;

document.addEventListener('webkitAnimationStart', () => {
  startEventReceived = true;
});

document.addEventListener('webkitAnimationEnd', () => {
  endEventReceived = true;
  document.getElementById('box').className = '';
  // Launch again the animation to catch the animation iteration events this time.
  requestAnimationFrame(function () {
    document.getElementById('box').style.webkitAnimationIterationCount = "infinite";
    document.getElementById('box').className = 'animate';
  });
});

async_test(t => {
  window.addEventListener("load", t.step_func(() => {
    // Animation begins once we append the DOM node to the document.
    var boxNode = document.createElement('div');
    boxNode.id = 'box';
    boxNode.className = 'animate';
    document.body.appendChild(boxNode);

    document.addEventListener('webkitAnimationIteration', t.step_func_done(() => {
      assert_true(startEventReceived);
      assert_true(endEventReceived);
    }));
  }));
}, "Tests that prefixed animation events are correctly fired");
</script>
chromium/third_party/blink/web_tests/animations/prefixed/animation-events-prefixed-01.html
