Revert - Bug 1324985: Disable firing the transitionrun and transitionstart on Aurora 52

Issue mcp-graveyard/UXP#55

5 files changed, 111 insertions, 25 deletions

diff --git a/dom/animation/test/mochitest.ini b/dom/animation/test/mochitest.ini
index feb424518d..c694e4d25a 100644
--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -28,6 +28,7 @@ support-files =
   css-transitions/file_animation-pausing.html
   css-transitions/file_animation-ready.html
   css-transitions/file_animation-starttime.html
+  css-transitions/file_csstransition-events.html
   css-transitions/file_csstransition-transitionproperty.html
   css-transitions/file_document-get-animations.html
   css-transitions/file_effect-target.html
@@ -81,6 +82,7 @@ support-files =
 [css-transitions/test_animation-pausing.html]
 [css-transitions/test_animation-ready.html]
 [css-transitions/test_animation-starttime.html]
+[css-transitions/test_csstransition-events.html]
 [css-transitions/test_csstransition-transitionproperty.html]
 [css-transitions/test_document-get-animations.html]
 [css-transitions/test_effect-target.html]
diff --git a/dom/webidl/EventHandler.webidl b/dom/webidl/EventHandler.webidl
index c76dfe211f..6691ca224c 100644
--- a/dom/webidl/EventHandler.webidl
+++ b/dom/webidl/EventHandler.webidl
@@ -133,10 +133,8 @@ interface GlobalEventHandlers {
            attribute EventHandler onanimationstart;
            attribute EventHandler ontransitioncancel;
            attribute EventHandler ontransitionend;
-           // We will ship transitionrun and transitionstart events
-           // on Firefox 53. (For detail, see bug 1324985)
-//           attribute EventHandler ontransitionrun;
-//           attribute EventHandler ontransitionstart;
+           attribute EventHandler ontransitionrun;
+           attribute EventHandler ontransitionstart;
 
            // CSS-Animation and CSS-Transition legacy handlers.
            // This handler isn't standard.
diff --git a/layout/style/nsTransitionManager.cpp b/layout/style/nsTransitionManager.cpp
index 4a1a5b7adf..d40e26a82e 100644
--- a/layout/style/nsTransitionManager.cpp
+++ b/layout/style/nsTransitionManager.cpp
@@ -211,6 +211,7 @@ CSSTransition::QueueEvents()
   // perhaps even with different timelines.
   // The zero timestamp is for transitionrun events where we ignore the delay
   // for the purpose of ordering events.
+  TimeStamp zeroTimeStamp  = AnimationTimeToTimeStamp(zeroDuration);
   TimeStamp startTimeStamp = ElapsedTimeToTimeStamp(intervalStartTime);
   TimeStamp endTimeStamp   = ElapsedTimeToTimeStamp(intervalEndTime);
 
@@ -227,7 +228,25 @@ CSSTransition::QueueEvents()
   AutoTArray<TransitionEventParams, 3> events;
   switch (mPreviousTransitionPhase) {
     case TransitionPhase::Idle:
-      if (currentPhase == TransitionPhase::After) {
+      if (currentPhase == TransitionPhase::Pending ||
+          currentPhase == TransitionPhase::Before) {
+        events.AppendElement(TransitionEventParams{ eTransitionRun,
+                                                   intervalStartTime,
+                                                   zeroTimeStamp });
+      } else if (currentPhase == TransitionPhase::Active) {
+        events.AppendElement(TransitionEventParams{ eTransitionRun,
+                                                   intervalStartTime,
+                                                   zeroTimeStamp });
+        events.AppendElement(TransitionEventParams{ eTransitionStart,
+                                                   intervalStartTime,
+                                                   startTimeStamp });
+      } else if (currentPhase == TransitionPhase::After) {
+        events.AppendElement(TransitionEventParams{ eTransitionRun,
+                                                   intervalStartTime,
+                                                   zeroTimeStamp });
+        events.AppendElement(TransitionEventParams{ eTransitionStart,
+                                                   intervalStartTime,
+                                                   startTimeStamp });
         events.AppendElement(TransitionEventParams{ eTransitionEnd,
                                                    intervalEndTime,
                                                    endTimeStamp });
@@ -236,7 +255,14 @@ CSSTransition::QueueEvents()
 
     case TransitionPhase::Pending:
     case TransitionPhase::Before:
-      if (currentPhase == TransitionPhase::After) {
+      if (currentPhase == TransitionPhase::Active) {
+        events.AppendElement(TransitionEventParams{ eTransitionStart,
+                                                   intervalStartTime,
+                                                   startTimeStamp });
+      } else if (currentPhase == TransitionPhase::After) {
+        events.AppendElement(TransitionEventParams{ eTransitionStart,
+                                                   intervalStartTime,
+                                                   startTimeStamp });
         events.AppendElement(TransitionEventParams{ eTransitionEnd,
                                                    intervalEndTime,
                                                    endTimeStamp });
@@ -256,7 +282,14 @@ CSSTransition::QueueEvents()
       break;
 
     case TransitionPhase::After:
-      if (currentPhase == TransitionPhase::Before) {
+      if (currentPhase == TransitionPhase::Active) {
+        events.AppendElement(TransitionEventParams{ eTransitionStart,
+                                                   intervalEndTime,
+                                                   startTimeStamp });
+      } else if (currentPhase == TransitionPhase::Before) {
+        events.AppendElement(TransitionEventParams{ eTransitionStart,
+                                                   intervalEndTime,
+                                                   startTimeStamp });
         events.AppendElement(TransitionEventParams{ eTransitionEnd,
                                                    intervalStartTime,
                                                    endTimeStamp });
diff --git a/layout/style/test/test_animations_event_handler_attribute.html b/layout/style/test/test_animations_event_handler_attribute.html
index e5def2b347..23a749daa8 100644
--- a/layout/style/test/test_animations_event_handler_attribute.html
+++ b/layout/style/test/test_animations_event_handler_attribute.html
@@ -90,14 +90,22 @@ targets.forEach(div => { div.remove(); });
 
 // 2. Test CSS Transition event handlers.
 
-var targets = createAndRegisterTargets([ 'ontransitionend' ]);
+var targets = createAndRegisterTargets([ 'ontransitionrun',
+                                         'ontransitionstart',
+                                         'ontransitionend' ]);
 targets.forEach(div => {
-  div.style.transition = 'margin-left 100ms';
+  div.style.transition = 'margin-left 100ms 200ms';
   getComputedStyle(div).marginLeft; // flush
   div.style.marginLeft = "200px";
   getComputedStyle(div).marginLeft; // flush
 });
 
+advance_clock(0);
+checkReceivedEvents("transitionrun", targets);
+
+advance_clock(200);
+checkReceivedEvents("transitionstart", targets);
+
 advance_clock(100);
 checkReceivedEvents("transitionend", targets);
 
diff --git a/layout/style/test/test_animations_event_order.html b/layout/style/test/test_animations_event_order.html
index 5af7639cc3..f948bf0a5b 100644
--- a/layout/style/test/test_animations_event_order.html
+++ b/layout/style/test/test_animations_event_order.html
@@ -46,6 +46,8 @@ var gDisplay = document.getElementById('display');
 [ 'animationstart',
   'animationiteration',
   'animationend',
+  'transitionrun',
+  'transitionstart',
   'transitionend' ]
   .forEach(event =>
              gDisplay.addEventListener(event,
@@ -322,9 +324,13 @@ getComputedStyle(divs[0]).marginLeft;
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
                 [ divs[1], 'transitionend' ],
-                'Simultaneous transitionend on siblings');
+                'Simultaneous transitionrun/start/end on siblings');
 
 divs.forEach(div => div.remove());
 divs = [];
@@ -360,10 +366,16 @@ getComputedStyle(divs[0]).marginLeft;
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[2], 'transitionrun' ],
+                [ divs[2], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
                 [ divs[2], 'transitionend' ],
                 [ divs[1], 'transitionend' ],
-                'Simultaneous transitionend on children');
+                'Simultaneous transitionrun/start/end on children');
 
 divs.forEach(div => div.remove());
 divs = [];
@@ -408,11 +420,19 @@ getComputedStyle(divs[0]).marginLeft;
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[0], '::before', 'transitionrun' ],
+                [ divs[0], '::before', 'transitionstart' ],
+                [ divs[0], '::after', 'transitionrun' ],
+                [ divs[0], '::after', 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
                 [ divs[0], '::before', 'transitionend' ],
                 [ divs[0], '::after', 'transitionend' ],
                 [ divs[1], 'transitionend' ],
-                'Simultaneous transitionend on pseudo-elements');
+                'Simultaneous transitionrun/start/end on pseudo-elements');
 
 divs.forEach(div => div.remove());
 divs = [];
@@ -441,9 +461,13 @@ getComputedStyle(divs[0]).marginLeft;
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[1], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[1], 'transitionend' ],
                 [ divs[0], 'transitionend' ],
-                'Sorting of transitionend events by time');
+                'Sorting of transitionrun/start/end events by time');
 
 divs.forEach(div => div.remove());
 divs = [];
@@ -468,9 +492,13 @@ getComputedStyle(divs[0]).marginLeft;
 advance_clock(0);
 advance_clock(10 * 1000);
 
-checkEventOrder([ divs[1], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionend' ],
                 [ divs[0], 'transitionend' ],
-                'Sorting of transitionend events by time' +
+                'Sorting of transitionrun/start/end events by time' +
                 '(including delay)');
 
 divs.forEach(div => div.remove());
@@ -492,9 +520,14 @@ getComputedStyle(div).marginLeft;
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ 'margin-left', 'transitionend' ],
+checkEventOrder([ 'margin-left', 'transitionrun' ],
+                [ 'margin-left', 'transitionstart' ],
+                [ 'opacity', 'transitionrun' ],
+                [ 'opacity', 'transitionstart' ],
+                [ 'margin-left', 'transitionend' ],
                 [ 'opacity', 'transitionend' ],
-                'Sorting of transitionend events by transition-property')
+                'Sorting of transitionrun/start/end events by ' +
+                'transition-property')
 
 div.remove();
 div = undefined;
@@ -519,7 +552,11 @@ getComputedStyle(divs[0]).marginLeft;
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
                 [ divs[1], 'transitionend' ],
                 'Transition events are sorted by document position first, ' +
                 'before transition-property');
@@ -543,7 +580,11 @@ getComputedStyle(div).marginLeft;
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ 'opacity', 'transitionend' ],
+checkEventOrder([ 'margin-left', 'transitionrun' ],
+                [ 'margin-left', 'transitionstart' ],
+                [ 'opacity', 'transitionrun' ],
+                [ 'opacity', 'transitionstart' ],
+                [ 'opacity', 'transitionend' ],
                 [ 'margin-left', 'transitionend' ],
                 'Transition events are sorted by time first, before ' +
                 'transition-property');
@@ -571,9 +612,13 @@ getComputedStyle(divs[0]).marginLeft;
 advance_clock(0);
 advance_clock(15 * 1000);
 
-checkEventOrder([ divs[1], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionend' ],
                 [ divs[0], 'transitionend' ],
-                'Simultaneous transitionend on siblings');
+                'Simultaneous transitionrun/start/end on siblings');
 
 divs.forEach(div => div.remove());
 divs = [];