| <!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> |
