<!DOCTYPE html>
<meta charset="utf-8">
<title>Invoke legacy event listener</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  @keyframes test {
    0% { color: red; }
    100% { color: green; }
  }
</style>
<div id="log"></div>
<script>
function runLegacyEventTest(type, legacyType, ctor, setup) {
  function createTestElem(t) {
    var elem = document.createElement('div');
    document.body.appendChild(elem);
    t.add_cleanup(function() {
      document.body.removeChild(elem);
    });
    return elem;
  }

  async_test(function(t) {
    var elem = createTestElem(t);
    var gotEvent = false;
    elem.addEventListener(legacyType,
      t.unreached_func("listener of " + legacyType + " should not be invoked"));
    elem.addEventListener(type, t.step_func(function() {
      assert_false(gotEvent, "unexpected " + type + " event");
      gotEvent = true;
      t.step_timeout(function() { t.done(); }, 100);
    }));
    setup(elem);
  }, "Listener of " + type);

  async_test(function(t) {
    var elem = createTestElem(t);
    var count = 0;
    elem.addEventListener(legacyType, t.step_func(function() {
      ++count;
      if (count > 1) {
        assert_unreached("listener of " + legacyType + " should not be invoked again");
        return;
      }
      elem.dispatchEvent(new window[ctor](type));
      t.done();
    }));
    setup(elem);
  }, "Legacy listener of " + type);
}

function setupTransition(elem) {
  getComputedStyle(elem).color;
  elem.style.color = 'green';
  elem.style.transition = 'color 30ms';
}

function setupAnimation(elem) {
  elem.style.animation = 'test 30ms';
}

runLegacyEventTest('transitionend', 'webkitTransitionEnd', "TransitionEvent", setupTransition);
runLegacyEventTest('animationend', 'webkitAnimationEnd', "AnimationEvent", setupAnimation);
runLegacyEventTest('animationstart', 'webkitAnimationStart', "AnimationEvent", setupAnimation);
</script>