--- a/dom/animation/test/css-transitions/file_event-dispatch.html
+++ b/dom/animation/test/css-transitions/file_event-dispatch.html
@@ -459,16 +459,18 @@ promise_test(function(t) {
     setupTransition(t, 'margin-left 100s');
 
   return watcher.wait_for([ 'transitionrun',
                             'transitionstart' ]).then(function(evt) {
     transition.effect = null;
     return watcher.wait_for('transitionend');
   }).then(function(evt) {
     transition.cancel();
-    return watcher.wait_for('transitioncancel');
+
+    // Then wait a couple of frames and check that no event was dispatched
+    return waitForAnimationFrames(2);
   });
 }, 'Cancel the transition after clearing the target effect');
 
 done();
 </script>
 </body>
 </html>

--- a/layout/style/nsTransitionManager.cpp
+++ b/layout/style/nsTransitionManager.cpp
@@ -197,18 +197,16 @@ CSSTransition::QueueEvents(StickyTimeDur
   const StickyTimeDuration zeroDuration = StickyTimeDuration();
 
   TransitionPhase currentPhase;
   StickyTimeDuration intervalStartTime;
   StickyTimeDuration intervalEndTime;
 
   if (!mEffect) {
     currentPhase      = GetTransitionPhaseWithoutEffect();
-    intervalStartTime = zeroDuration;
-    intervalEndTime   = zeroDuration;
   } else {
     ComputedTiming computedTiming = mEffect->GetComputedTiming();
 
     currentPhase = static_cast<TransitionPhase>(computedTiming.mPhase);
     intervalStartTime =
       std::max(std::min(StickyTimeDuration(-mEffect->SpecifiedTiming().mDelay),
                         computedTiming.mActiveDuration), zeroDuration);
     intervalEndTime =
@@ -216,31 +214,32 @@ CSSTransition::QueueEvents(StickyTimeDur
                         computedTiming.mActiveDuration), zeroDuration);
   }
 
   // TimeStamps to use for ordering the events when they are dispatched. We
   // use a TimeStamp so we can compare events produced by different elements,
   // 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);
+  TimeStamp zeroTimeStamp  = AnimationTimeToTimeStamp(zeroDuration);
+  TimeStamp startTimeStamp = ElapsedTimeToTimeStamp(intervalStartTime);
+  TimeStamp endTimeStamp   = ElapsedTimeToTimeStamp(intervalEndTime);
 
   if (mPendingState != PendingState::NotPending &&
       (mPreviousTransitionPhase == TransitionPhase::Idle ||
        mPreviousTransitionPhase == TransitionPhase::Pending))
   {
     currentPhase = TransitionPhase::Pending;
   }
 
   AutoTArray<TransitionEventParams, 3> events;
 
-  // Handle cancel events firts
-  if (mPreviousTransitionPhase != TransitionPhase::Idle &&
+  // Handle cancel events first
+  if ((mPreviousTransitionPhase != TransitionPhase::Idle &&
+       mPreviousTransitionPhase != TransitionPhase::After) &&
       currentPhase == TransitionPhase::Idle) {
     TimeStamp activeTimeStamp = ElapsedTimeToTimeStamp(aActiveTime);
     events.AppendElement(TransitionEventParams{ eTransitionCancel,
                                                 aActiveTime,
                                                 activeTimeStamp });
   }
 
   // All other events