Disable transitionstart and transitionrun events on Aurora 52. r=birtles, r=baku, a=jcristau
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Tue, 10 Jan 2017 14:30:08 +0900
changeset 353468 091c74eb5714ac9e211e76c8809e4c3e2b8b98b2
parent 353467 9e93163b43f8dd2b7a2a7191dac910ae1259c0e8
child 353469 fd5c16ef7c97fa39d1ef1840abd2c9304df580f2
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-esr52@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles, baku, jcristau
milestone52.0a2
Disable transitionstart and transitionrun events on Aurora 52. r=birtles, r=baku, a=jcristau MozReview-Commit-ID: 5jWjlNYzez7
dom/animation/test/mochitest.ini
dom/webidl/EventHandler.webidl
layout/style/nsTransitionManager.cpp
layout/style/test/test_animations_event_handler_attribute.html
layout/style/test/test_animations_event_order.html
--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -23,17 +23,16 @@ support-files =
   css-animations/file_pseudoElement-get-animations.html
   css-transitions/file_animation-cancel.html
   css-transitions/file_animation-computed-timing.html
   css-transitions/file_animation-currenttime.html
   css-transitions/file_animation-finished.html
   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
   css-transitions/file_element-get-animations.html
   css-transitions/file_keyframeeffect-getkeyframes.html
   css-transitions/file_pseudoElement-get-animations.html
   css-transitions/file_setting-effect.html
   document-timeline/file_document-timeline.html
@@ -77,17 +76,16 @@ support-files =
 [css-animations/test_pseudoElement-get-animations.html]
 [css-transitions/test_animation-cancel.html]
 [css-transitions/test_animation-computed-timing.html]
 [css-transitions/test_animation-currenttime.html]
 [css-transitions/test_animation-finished.html]
 [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]
 [css-transitions/test_element-get-animations.html]
 [css-transitions/test_keyframeeffect-getkeyframes.html]
 [css-transitions/test_pseudoElement-get-animations.html]
 [css-transitions/test_setting-effect.html]
 [document-timeline/test_document-timeline.html]
--- a/dom/webidl/EventHandler.webidl
+++ b/dom/webidl/EventHandler.webidl
@@ -127,18 +127,20 @@ interface GlobalEventHandlers {
            [Pref="pointer-lock-api.prefixed.enabled"]
            attribute EventHandler onmozpointerlockerror;
 
            // CSS-Animation and CSS-Transition handlers.
            attribute EventHandler onanimationend;
            attribute EventHandler onanimationiteration;
            attribute EventHandler onanimationstart;
            attribute EventHandler ontransitionend;
-           attribute EventHandler ontransitionrun;
-           attribute EventHandler ontransitionstart;
+           // We will ship transitionrun and transitionstart events
+           // on Firefox 53. (For detail, see bug 1324985)
+//           attribute EventHandler ontransitionrun;
+//           attribute EventHandler ontransitionstart;
 
            // CSS-Animation and CSS-Transition legacy handlers.
            // This handler isn't standard.
            attribute EventHandler onwebkitanimationend;
            attribute EventHandler onwebkitanimationiteration;
            attribute EventHandler onwebkitanimationstart;
            attribute EventHandler onwebkittransitionend;
 };
--- a/layout/style/nsTransitionManager.cpp
+++ b/layout/style/nsTransitionManager.cpp
@@ -206,68 +206,42 @@ CSSTransition::QueueEvents()
     std::max(std::min((EffectEnd() - mEffect->SpecifiedTiming().mDelay),
                       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);
 
   TransitionPhase currentPhase;
   if (mPendingState != PendingState::NotPending &&
       (mPreviousTransitionPhase == TransitionPhase::Idle ||
        mPreviousTransitionPhase == TransitionPhase::Pending))
   {
     currentPhase = TransitionPhase::Pending;
   } else {
     currentPhase = static_cast<TransitionPhase>(computedTiming.mPhase);
   }
 
   AutoTArray<TransitionEventParams, 3> events;
   switch (mPreviousTransitionPhase) {
     case TransitionPhase::Idle:
-      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 });
+      if (currentPhase == TransitionPhase::After) {
         events.AppendElement(TransitionEventParams{ eTransitionEnd,
                                                    intervalEndTime,
                                                    endTimeStamp });
       }
       break;
 
     case TransitionPhase::Pending:
     case TransitionPhase::Before:
-      if (currentPhase == TransitionPhase::Active) {
-        events.AppendElement(TransitionEventParams{ eTransitionStart,
-                                                   intervalStartTime,
-                                                   startTimeStamp });
-      } else if (currentPhase == TransitionPhase::After) {
-        events.AppendElement(TransitionEventParams{ eTransitionStart,
-                                                   intervalStartTime,
-                                                   startTimeStamp });
+      if (currentPhase == TransitionPhase::After) {
         events.AppendElement(TransitionEventParams{ eTransitionEnd,
                                                    intervalEndTime,
                                                    endTimeStamp });
       }
       break;
 
     case TransitionPhase::Active:
       if (currentPhase == TransitionPhase::After) {
@@ -277,24 +251,17 @@ CSSTransition::QueueEvents()
       } else if (currentPhase == TransitionPhase::Before) {
         events.AppendElement(TransitionEventParams{ eTransitionEnd,
                                                    intervalStartTime,
                                                    startTimeStamp });
       }
       break;
 
     case TransitionPhase::After:
-      if (currentPhase == TransitionPhase::Active) {
-        events.AppendElement(TransitionEventParams{ eTransitionStart,
-                                                   intervalEndTime,
-                                                   startTimeStamp });
-      } else if (currentPhase == TransitionPhase::Before) {
-        events.AppendElement(TransitionEventParams{ eTransitionStart,
-                                                   intervalEndTime,
-                                                   startTimeStamp });
+      if (currentPhase == TransitionPhase::Before) {
         events.AppendElement(TransitionEventParams{ eTransitionEnd,
                                                    intervalStartTime,
                                                    endTimeStamp });
       }
       break;
   }
   mPreviousTransitionPhase = currentPhase;
 
--- a/layout/style/test/test_animations_event_handler_attribute.html
+++ b/layout/style/test/test_animations_event_handler_attribute.html
@@ -85,32 +85,24 @@ checkReceivedEvents("animationiteration"
 
 advance_clock(200);
 checkReceivedEvents("animationend", targets);
 
 targets.forEach(div => { div.remove(); });
 
 // 2. Test CSS Transition event handlers.
 
-var targets = createAndRegisterTargets([ 'ontransitionrun',
-                                         'ontransitionstart',
-                                         'ontransitionend' ]);
+var targets = createAndRegisterTargets([ 'ontransitionend' ]);
 targets.forEach(div => {
-  div.style.transition = 'margin-left 100ms 200ms';
+  div.style.transition = 'margin-left 100ms';
   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);
 
 targets.forEach(div => { div.remove(); });
 
 // 3. Test prefixed CSS Animation event handlers.
 
 var targets = createAndRegisterTargets([ 'onwebkitanimationstart',
--- a/layout/style/test/test_animations_event_order.html
+++ b/layout/style/test/test_animations_event_order.html
@@ -41,18 +41,16 @@ advance_clock(0);
 // Common test scaffolding
 
 var gEventsReceived = [];
 var gDisplay = document.getElementById('display');
 
 [ 'animationstart',
   'animationiteration',
   'animationend',
-  'transitionrun',
-  'transitionstart',
   'transitionend' ]
   .forEach(event =>
              gDisplay.addEventListener(event,
                                        event => gEventsReceived.push(event),
                                        false));
 
 function checkEventOrder(...args) {
   // Argument format:
@@ -319,23 +317,19 @@ divs.forEach((div, i) => {
 
 getComputedStyle(divs[0]).marginLeft;
 divs.forEach(div => div.style.marginLeft = '100px');
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionrun' ],
-                [ divs[0], 'transitionstart' ],
-                [ divs[1], 'transitionrun' ],
-                [ divs[1], 'transitionstart' ],
-                [ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionend' ],
                 [ divs[1], 'transitionend' ],
-                'Simultaneous transitionrun/start/end on siblings');
+                'Simultaneous transitionend on siblings');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 // 4b. Test sorting transitions by document position (children)
 
 divs = [ document.createElement('div'),
          document.createElement('div'),
@@ -361,26 +355,20 @@ divs.forEach((div, i) => {
 
 getComputedStyle(divs[0]).marginLeft;
 divs.forEach(div => div.style.marginLeft = '100px');
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionrun' ],
-                [ divs[0], 'transitionstart' ],
-                [ divs[2], 'transitionrun' ],
-                [ divs[2], 'transitionstart' ],
-                [ divs[1], 'transitionrun' ],
-                [ divs[1], 'transitionstart' ],
-                [ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionend' ],
                 [ divs[2], 'transitionend' ],
                 [ divs[1], 'transitionend' ],
-                'Simultaneous transitionrun/start/end on children');
+                'Simultaneous transitionend on children');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 // 4c. Test sorting transitions by document position (pseudos)
 
 divs = [ document.createElement('div'),
          document.createElement('div') ];
@@ -415,29 +403,21 @@ sheet.insertRule('#div0::after, #div0::b
 
 getComputedStyle(divs[0]).marginLeft;
 divs.forEach(div => div.classList.add('active'));
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-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' ],
+checkEventOrder([ divs[0], 'transitionend' ],
                 [ divs[0], '::before', 'transitionend' ],
                 [ divs[0], '::after', 'transitionend' ],
                 [ divs[1], 'transitionend' ],
-                'Simultaneous transitionrun/start/end on pseudo-elements');
+                'Simultaneous transitionend on pseudo-elements');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 sheet = undefined;
 extraStyle.remove();
 extraStyle = undefined;
 
@@ -456,23 +436,19 @@ divs[1].style.transition = 'margin-left 
 
 getComputedStyle(divs[0]).marginLeft;
 divs.forEach(div => div.style.marginLeft = '100px');
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionrun' ],
-                [ divs[0], 'transitionstart' ],
-                [ divs[1], 'transitionrun' ],
-                [ divs[1], 'transitionstart' ],
-                [ divs[1], 'transitionend' ],
+checkEventOrder([ divs[1], 'transitionend' ],
                 [ divs[0], 'transitionend' ],
-                'Sorting of transitionrun/start/end events by time');
+                'Sorting of transitionend events by time');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 // 4e. Test sorting transitions by time (with delay)
 
 divs = [ document.createElement('div'),
          document.createElement('div') ];
@@ -487,23 +463,19 @@ divs[1].style.transition = 'margin-left 
 
 getComputedStyle(divs[0]).marginLeft;
 divs.forEach(div => div.style.marginLeft = '100px');
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(10 * 1000);
 
-checkEventOrder([ divs[0], 'transitionrun' ],
-                [ divs[1], 'transitionrun' ],
-                [ divs[1], 'transitionstart' ],
-                [ divs[0], 'transitionstart' ],
-                [ divs[1], 'transitionend' ],
+checkEventOrder([ divs[1], 'transitionend' ],
                 [ divs[0], 'transitionend' ],
-                'Sorting of transitionrun/start/end events by time' +
+                'Sorting of transitionend events by time' +
                 '(including delay)');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 // 4f. Test sorting transitions by transition-property
 
 div = document.createElement('div');
@@ -515,24 +487,19 @@ div.style.transition = 'all 5s';
 getComputedStyle(div).marginLeft;
 div.style.opacity = '1';
 div.style.marginLeft = '100px';
 getComputedStyle(div).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ 'margin-left', 'transitionrun' ],
-                [ 'margin-left', 'transitionstart' ],
-                [ 'opacity', 'transitionrun' ],
-                [ 'opacity', 'transitionstart' ],
-                [ 'margin-left', 'transitionend' ],
+checkEventOrder([ 'margin-left', 'transitionend' ],
                 [ 'opacity', 'transitionend' ],
-                'Sorting of transitionrun/start/end events by ' +
-                'transition-property')
+                'Sorting of transitionend events by transition-property')
 
 div.remove();
 div = undefined;
 
 // 4g. Test document position beats transition-property
 
 divs = [ document.createElement('div'),
          document.createElement('div') ];
@@ -547,21 +514,17 @@ divs.forEach((div, i) => {
 getComputedStyle(divs[0]).marginLeft;
 divs[0].style.opacity = '1';
 divs[1].style.marginLeft = '100px';
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionrun' ],
-                [ divs[0], 'transitionstart' ],
-                [ divs[1], 'transitionrun' ],
-                [ divs[1], 'transitionstart' ],
-                [ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionend' ],
                 [ divs[1], 'transitionend' ],
                 'Transition events are sorted by document position first, ' +
                 'before transition-property');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 // 4h. Test time beats transition-property
@@ -575,21 +538,17 @@ div.style.transition = 'margin-left 10s,
 getComputedStyle(div).marginLeft;
 div.style.opacity = '1';
 div.style.marginLeft = '100px';
 getComputedStyle(div).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ 'margin-left', 'transitionrun' ],
-                [ 'margin-left', 'transitionstart' ],
-                [ 'opacity', 'transitionrun' ],
-                [ 'opacity', 'transitionstart' ],
-                [ 'opacity', 'transitionend' ],
+checkEventOrder([ 'opacity', 'transitionend' ],
                 [ 'margin-left', 'transitionend' ],
                 'Transition events are sorted by time first, before ' +
                 'transition-property');
 
 div.remove();
 div = undefined;
 
 // 4i. Test sorting transitions by document position (negative delay)
@@ -607,23 +566,19 @@ divs[1].style.transition = 'margin-left 
 
 getComputedStyle(divs[0]).marginLeft;
 divs.forEach(div => div.style.marginLeft = '100px');
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(15 * 1000);
 
-checkEventOrder([ divs[0], 'transitionrun' ],
-                [ divs[1], 'transitionrun' ],
-                [ divs[1], 'transitionstart' ],
-                [ divs[0], 'transitionstart' ],
-                [ divs[1], 'transitionend' ],
+checkEventOrder([ divs[1], 'transitionend' ],
                 [ divs[0], 'transitionend' ],
-                'Simultaneous transitionrun/start/end on siblings');
+                'Simultaneous transitionend on siblings');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
 
 </script>
 </body>