<!DOCTYPE html>
<title>Tests that unprefixed animation events are correctly fired when using html event listeners (only unprefixed should be 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;
var prefixedEventReceived = 0;

function recordPrefixedEvent() {
  prefixedEventReceived++;
}

function recordAnimationStart() {
  startEventReceived = true;
}

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

async_test(t => {
  window.addEventListener("load", t.step_func(() => {
    const box = document.getElementById('box');
    box.addEventListener("animationiteration", t.step_func_done(() => {
      assert_true(startEventReceived);
      assert_true(endEventReceived);
      assert_equals(prefixedEventReceived, 0);
    }));
  }));
}, "Tests that unprefixed animation events are correctly fired when using html event listeners (only unprefixed should be fired)");
</script>
<div id="box" onwebkitanimationstart="recordPrefixedEvent();" onwebkitanimationend="recordPrefixedEvent();" onwebkitanimationiteration="recordPrefixedEvent();" onanimationstart="recordAnimationStart();" onanimationend="recordAnimationEnd();" class="animate"></div>