custom-events.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/animations/custom-events.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Custom events with the names "end" and "endEvent" and their effects on various types of event listeners</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<svg height="0">

  <rect width="100" height="100" fill="blue">

    <animate attributeName="x" begin="0s" from="0" to="100"

             id="targetWithAttributeHandlers"

             onend="gOnEndHandlerCallCount++"

             onendEvent="gNonexistentOnEndEventHandlerCallCount++"/>

    <animate attributeName="y" begin="0s" from="0" to="100"

             id="targetWithIDLListeners"/>

    <animate attributeName="width" begin="0s" from="100" to="120"

             id="targetWithRegularListeners"/>

  </rect>

</svg>

<script>

  // This test checks how various types of event handlers / listeners react to custom

  // events with the names "end" and "endEvent".

  // The SVG spec does not define an event called "end" - the animation event is called "endEvent".

  // The SVG spec does not define an IDL property called "onendEvent", only one called "onend".

  // The SVG spec does not define an attribute called "onendEvent", only one called "onend".

  // Incremented in the "onend" attribute event handler.

  gOnEndHandlerCallCount = 0;

  // "onendEvent" is an invalid attribute name so this should never be incremented.

  gNonexistentOnEndEventHandlerCallCount = 0;

  // Incremented in the "onend" IDL property event listener.

  gOnEndListenerCallCount = 0;

  // "onendEvent" is an unrecognized property name so this should never be incremented.

  gNonexistentOnEndEventListenerCallCount = 0;

  // Incremented in the "endEvent" event listener.

  gEndEventListenerCallCount = 0;

  // Incremented in the "end" event listener. This should only happen for manually-created events with the name "end".

  gEndListenerCallCount = 0;

  let targetWithAttributeHandlers = document.getElementById("targetWithAttributeHandlers");

  let targetWithIDLListeners = document.getElementById("targetWithIDLListeners");

  targetWithIDLListeners.onend = () => { gOnEndListenerCallCount++; };

  targetWithIDLListeners.onendEvent = () => { gNonexistentOnEndEventListenerCallCount++; };

  let targetWithRegularListeners = document.getElementById("targetWithRegularListeners");

  targetWithRegularListeners.addEventListener("endEvent", () => { gEndEventListenerCallCount++; });

  targetWithRegularListeners.addEventListener("end", () => { gEndListenerCallCount++; });

  test(t => {

    targetWithAttributeHandlers.dispatchEvent(new Event("end"));

    assert_equals(gOnEndHandlerCallCount, 0);

    assert_equals(gNonexistentOnEndEventHandlerCallCount, 0);

    targetWithIDLListeners.dispatchEvent(new Event("end"));

    assert_equals(gOnEndListenerCallCount, 0);

    assert_equals(gNonexistentOnEndEventListenerCallCount, 0);

    targetWithRegularListeners.dispatchEvent(new Event("end"));

    assert_equals(gEndEventListenerCallCount, 0);

    assert_equals(gEndListenerCallCount, 1);

  }, "custom events with the name 'end' should only call the event listener for the event 'end' and no attribute handlers or IDL listeners");

  test(t => {

    gOnEndHandlerCallCount = 0;

    gNonexistentOnEndEventHandlerCallCount = 0;

    gOnEndListenerCallCount = 0;

    gNonexistentOnEndEventListenerCallCount = 0;

    gEndEventListenerCallCount = 0;

    gEndListenerCallCount = 0;

    targetWithAttributeHandlers.dispatchEvent(new Event("endEvent"));

    assert_equals(gOnEndHandlerCallCount, 1);

    assert_equals(gNonexistentOnEndEventHandlerCallCount, 0);

    targetWithIDLListeners.dispatchEvent(new Event("endEvent"));

    assert_equals(gOnEndListenerCallCount, 1);

    assert_equals(gNonexistentOnEndEventListenerCallCount, 0);

    targetWithRegularListeners.dispatchEvent(new Event("endEvent"));

    assert_equals(gEndEventListenerCallCount, 1);

    assert_equals(gEndListenerCallCount, 0);

  }, "custom events with the name 'endEvent' should call 'onend' attribute handlers and IDL property listeners, and 'endEvent' listeners");

</script>