Spec sending prefixed animation and transition events

[miketaylr]

cf. https://bugzilla.mozilla.org/show_bug.cgi?id=1236979 and https://bugzilla.mozilla.org/show_bug.cgi?id=1236930.

A popular mapping library, Leaflet.js, when it tests for transitionEnd event prefixes prefers webkitTransitionEnd because some Android browsers had unprefixed CSS transition but not an unprefixed transitionEnd event. 😭

It seems in order to be compatible with this content—for UAs that do alias -webkit-transition— they need to also send webkitTransitionEnd events. Boo.

See Leaflet/Leaflet#1182 and associated commit.

[miketaylr]

See also https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/EventTarget.cpp&sq=package:chromium&l=290&dr=C&rcl=1452688339

[miketaylr]

https://bugzilla.mozilla.org/show_bug.cgi?id=1236979 landed in Firefox Nightly today (and fixes the issuses we found).

[miketaylr]

+// Webkit-prefixed versions of Transition & Animation events, for web compat:
+NON_IDL_EVENT(webkitTransitionEnd,
+              eWebkitTransitionEnd,
+              EventNameType_None,
+              eTransitionEventClass)
+NON_IDL_EVENT(webkitAnimationEnd,
+              eWebkitAnimationEnd,
+              EventNameType_None,
+              eAnimationEventClass)
+NON_IDL_EVENT(webkitAnimationIteration,
+              eWebkitAnimationIteration,
+              EventNameType_None,
+              eAnimationEventClass)
+NON_IDL_EVENT(webkitAnimationStart,
+              eWebkitAnimationStart,
+              EventNameType_None,
+              eAnimationEventClass)

[miketaylr]

Rather than send these prefixed events all the time, do this iff there are listeners for those prefixed events and a standard event hasn't been fired on that element already.

• If any 'transitionend' listeners exist on a node, invoke them.
• Otherwise, if any 'webkitTransitionEnd' listeners exist on this node, invoke them.

[annevk]

How does that work with respect to bubbling and capturing?

[miketaylr]

See https://bugzilla.mozilla.org/show_bug.cgi?id=1236979#c38 -- I should test that this works for capturing too. (Unless @dholbert already did)

[annevk]

Oh wow that behavior seems fairly magical. How would you specify that without changing the event dispatch algorithm somehow? @smaug----?

[miketaylr]

🎩 Magic. ✨

[smaug----]

You need to change event dispatch algorithm. What Gecko has now should be the same what Chrome has for webkit prefixed events:
https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/EventTarget.cpp&sq=package:chromium&l=351&dr=C&rcl=1452688339

Yes, we are actually changing the event type while calling prefixed listeners. Absolutely horrible, but that is that blink and webkit folks have decided to do, and doesn't make sense to have different setup for these prefixed events in Gecko.

See also https://bugs.webkit.org/show_bug.cgi?id=115656

[miketaylr]

Edge has also implemented this -- based on https://bug1236979.bmoattachments.org/attachment.cgi?id=8707180.

edit: IE11 too, it seems.

[annevk]

Okay, so it seems like we should add this to the DOM Standard directly then @miketaylr. No need to hide the ugly.

[miketaylr]

@annevk SGTM.

[miketaylr]

Closing here in favor of whatwg/dom#156.