Bug 1273876 - Use 'transitionstart' event to detect the target transition has been started instead of using setTimeout. r=birtles, a=test-only
authorHiroyuki Ikezoe <hikezoe@mozilla.com>
Tue, 29 Jan 2019 09:20:44 +0000
changeset 515630 767ca8e22c4d1b9169f43c4f282495fd53a23dde
parent 515629 aea1f9d170ef4f6085c0d6065f5f3b5d63218136
child 515631 42b45239eb53c9632b6a6896286481e83cd63791
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles, test-only
bugs1273876
milestone66.0
Bug 1273876 - Use 'transitionstart' event to detect the target transition has been started instead of using setTimeout. r=birtles, a=test-only And stop the transitions inside the event callbacks. Also in this commit, `did_stop` flag was split into two dedicated flags for `five' and `six` elements respectively to avoid success accidentally. And flip the flag usage, e.g. true if the transition finished at the same time of the transitionstart event. MozReview-Commit-ID: DttQ2nLVYWU Depends on D17911 Differential Revision: https://phabricator.services.mozilla.com/D17912
layout/style/test/test_transitions_events.html
--- a/layout/style/test/test_transitions_events.html
+++ b/layout/style/test/test_transitions_events.html
@@ -69,17 +69,18 @@ var got_one_root = false;
 var got_one_target = false;
 var got_two_target = false;
 var got_three_top = false;
 var got_three_right = false;
 var got_three_bottom = false;
 var got_three_left = false;
 var got_four_root = false;
 var got_body = false;
-var did_stops = false;
+var did_finish_five = false;
+var did_finish_six = false;
 var got_before = false;
 var got_after = false;
 
 document.documentElement.addEventListener("transitionend",
   function(event) {
     if (event.target == $("one")) {
       ok(!got_one_root, "transitionend on one on root");
       is(event.propertyName, "border-right-color",
@@ -119,20 +120,21 @@ document.documentElement.addEventListene
         ok(!got_after, "transitionend on #seven::after");
         got_after = true;
         is(event.pseudoElement, "::after");
       }
       is(event.propertyName, "color");
       is(event.isTrusted, true);
       finished_test();
     } else {
-      if (!did_stops &&
-          (event.target == $("five") || event.target == $("six"))) {
+      if ((event.target == $("five") && did_finish_five) ||
+          (event.target == $("six") && did_finish_six)) {
         todo(false,
-             "timeout to stop transitions firing later than it should be");
+             "it seems that transitionstart and transitionend had been " +
+             "processed in the same frame");
         return;
       }
       ok(false,
          "unexpected event on " + event.target.nodeName +
          " element with id '" + event.target.id + "' " +
          "elapsedTime=" + event.elapsedTime +
          " propertyName='" + event.propertyName + "'");
     }
@@ -229,27 +231,34 @@ started_test(); // #four (listener on ro
 // We cancel the transition on six by changing 'transition-duration' and
 // then changing the value, so we should get no event.
 $("six").style.color = "lime";
 
 started_test(); // #seven::before (listener on root)
 started_test(); // #seven::after (listener on root)
 $("seven").setAttribute("foo", "bar");
 
-setTimeout(function() {
-             if (cs("five").color != "rgb(0, 255, 0)" &&
-                 cs("six").color != "rgb(0, 255, 0)") {
-               // The transition hasn't finished already.
-               did_stops = true;
-             }
-             $("five").style.transitionProperty = "margin-left";
-             $("six").style.transitionDuration = "0s";
-             $("six").style.transitionDelay = "0s";
-             $("six").style.color = "blue";
-           }, 100);
+$("five").addEventListener("transitionstart", function() {
+  if (cs("five").color == "rgb(0, 255, 0)") {
+    // The transition has finished already.
+    did_finish_five = true;
+  }
+  $("five").style.transitionProperty = "margin-left";
+}, false);
+
+$("six").addEventListener("transitionstart", function() {
+  if (cs("six").color == "rgb(0, 255, 0)") {
+    // The transition has finished already.
+    did_finish_six = true;
+  }
+  $("six").style.transitionDuration = "0s";
+  $("six").style.transitionDelay = "0s";
+  $("six").style.color = "blue";
+}, false);
+
 function poll_start_reversal() {
   if (cs("four").color != "rgb(0, 0, 255)") {
     // The forward transition has started.
     $("four").style.color = "blue";
   } else {
     // The forward transition has not started yet.
     setTimeout(poll_start_reversal, 20);
   }