Bug 1235723 - Use longer duration to avoid finishing animations at some point. r?pbrosset draft
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Mon, 22 Feb 2016 16:34:04 +0900
changeset 332800 0835e274992616ec2887fecfc0a342600f61f1e5
parent 332767 af6356a3e8c56036b74ba097395356d9c6e6c5a3
child 514617 77b95e3a7b8c0f8dd80a7d3048209e7327dc841c
push id11241
push userhiikezoe@mozilla-japan.org
push dateMon, 22 Feb 2016 07:34:30 +0000
reviewerspbrosset
bugs1235723
milestone47.0a1
Bug 1235723 - Use longer duration to avoid finishing animations at some point. r?pbrosset MozReview-Commit-ID: 22IjzWqcgNs
devtools/server/tests/browser/animation.html
devtools/server/tests/browser/browser_animation_getMultipleStates.js
devtools/server/tests/browser/browser_animation_getStateAfterFinished.js
devtools/server/tests/browser/browser_animation_playerState.js
--- a/devtools/server/tests/browser/animation.html
+++ b/devtools/server/tests/browser/animation.html
@@ -12,39 +12,39 @@
   .simple-animation {
     display: inline-block;
 
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: red;
 
-    animation: move 2s infinite;
+    animation: move 200s infinite;
   }
 
   .multiple-animations {
     display: inline-block;
 
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: #eee;
 
-    animation: move 2s infinite, glow 1s 5;
+    animation: move 200s infinite, glow 100s 5;
   }
 
   .transition {
     display: inline-block;
 
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: #f06;
 
-    transition: width 5s;
+    transition: width 500s;
   }
   .transition.get-round {
     width: 200px;
   }
 
   .long-animation {
     display: inline-block;
 
@@ -59,39 +59,39 @@
   .short-animation {
     display: inline-block;
 
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: purple;
 
-    animation: move 1s;
+    animation: move 100s;
   }
 
   .delayed-animation {
     display: inline-block;
 
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: rebeccapurple;
 
-    animation: move 2s 5s infinite;
+    animation: move 200s 5s infinite;
   }
 
   .delayed-transition {
     display: inline-block;
 
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: black;
 
-    transition: width 5s 3s;
+    transition: width 500s 3s;
   }
   .delayed-transition.get-round {
     width: 200px;
   }
 
   .delayed-multiple-animations {
     display: inline-block;
 
@@ -106,17 +106,17 @@
   .multiple-animations-2 {
     display: inline-block;
 
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: blue;
 
-    animation: move .5s, glow 1s 2s infinite, grow 3s 1s 100;
+    animation: move .5s, glow 100s 2s infinite, grow 300s 1s 100;
   }
 
   .all-transitions {
     position: absolute;
     top: 0;
     right: 0;
     width: 50px;
     height: 50px;
--- a/devtools/server/tests/browser/browser_animation_getMultipleStates.js
+++ b/devtools/server/tests/browser/browser_animation_getMultipleStates.js
@@ -16,27 +16,27 @@ add_task(function*() {
   yield closeDebuggerClient(client);
   gBrowser.removeCurrentTab();
 });
 
 function* playerHasAnInitialState(walker, animations) {
   let state = yield getAnimationStateForNode(walker, animations,
     ".delayed-multiple-animations", 0);
 
-  ok(state.duration, 500,
+  ok(state.duration, 50000,
      "The duration of the first animation is correct");
   ok(state.iterationCount, 10,
      "The iterationCount of the first animation is correct");
   ok(state.delay, 1000,
      "The delay of the first animation is correct");
 
   state = yield getAnimationStateForNode(walker, animations,
     ".delayed-multiple-animations", 1);
 
-  ok(state.duration, 1000,
+  ok(state.duration, 100000,
      "The duration of the secon animation is correct");
   ok(state.iterationCount, 30,
      "The iterationCount of the secon animation is correct");
   ok(state.delay, 750,
      "The delay of the secon animation is correct");
 }
 
 function* getAnimationStateForNode(walker, animations, selector, playerIndex) {
--- a/devtools/server/tests/browser/browser_animation_getStateAfterFinished.js
+++ b/devtools/server/tests/browser/browser_animation_getStateAfterFinished.js
@@ -31,24 +31,24 @@ add_task(function*() {
     yield new Promise(resolve => setTimeout(resolve, 1000));
 
     info("And get the list again");
     players = yield animations.getAnimationPlayersForNode(node);
   }
 
   is(players.length, 2, "2 animations remain on the node");
 
-  is(players[0].state.duration, 1000,
+  is(players[0].state.duration, 100000,
      "The duration of the first animation is correct");
   is(players[0].state.delay, 2000,
      "The delay of the first animation is correct");
   is(players[0].state.iterationCount, null,
      "The iterationCount of the first animation is correct");
 
-  is(players[1].state.duration, 3000,
+  is(players[1].state.duration, 300000,
      "The duration of the second animation is correct");
   is(players[1].state.delay, 1000,
      "The delay of the second animation is correct");
   is(players[1].state.iterationCount, 100,
      "The iterationCount of the second animation is correct");
 
   yield closeDebuggerClient(client);
   gBrowser.removeCurrentTab();
--- a/devtools/server/tests/browser/browser_animation_playerState.js
+++ b/devtools/server/tests/browser/browser_animation_playerState.js
@@ -39,41 +39,41 @@ function* playerHasAnInitialState(walker
 }
 
 function* playerStateIsCorrect(walker, animations) {
   info("Checking the state of the simple animation");
 
   let state = yield getAnimationStateForNode(walker, animations,
                                              ".simple-animation", 0);
   is(state.name, "move", "Name is correct");
-  is(state.duration, 2000, "Duration is correct");
+  is(state.duration, 200000, "Duration is correct");
   // null = infinite count
   is(state.iterationCount, null, "Iteration count is correct");
   is(state.playState, "running", "PlayState is correct");
   is(state.playbackRate, 1, "PlaybackRate is correct");
   is(state.type, "cssanimation", "Type is correct");
 
   info("Checking the state of the transition");
 
   state = yield getAnimationStateForNode(walker, animations, ".transition", 0);
   is(state.name, "width", "Transition name matches transition property");
-  is(state.duration, 5000, "Transition duration is correct");
+  is(state.duration, 500000, "Transition duration is correct");
   // transitions run only once
   is(state.iterationCount, 1, "Transition iteration count is correct");
   is(state.playState, "running", "Transition playState is correct");
   is(state.playbackRate, 1, "Transition playbackRate is correct");
   is(state.type, "csstransition", "Transition type is correct");
 
   info("Checking the state of one of multiple animations on a node");
 
   // Checking the 2nd player
   state = yield getAnimationStateForNode(walker, animations,
                                          ".multiple-animations", 1);
   is(state.name, "glow", "The 2nd animation's name is correct");
-  is(state.duration, 1000, "The 2nd animation's duration is correct");
+  is(state.duration, 100000, "The 2nd animation's duration is correct");
   is(state.iterationCount, 5, "The 2nd animation's iteration count is correct");
   is(state.playState, "running", "The 2nd animation's playState is correct");
   is(state.playbackRate, 1, "The 2nd animation's playbackRate is correct");
 
   info("Checking the state of an animation with delay");
 
   state = yield getAnimationStateForNode(walker, animations,
                                          ".delayed-animation", 0);