Bug 1256503 - Part 1: Use MS_PER_SEC instead of human-misreadable digits in animation tests. r?dholbert draft
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Fri, 01 Apr 2016 06:03:21 +0900
changeset 346342 7a946ff96441d04d80217d7ffc61f9d4cc403dcd
parent 346302 bccb11375f2af838cda714d42fd8cef78f5c7bf1
child 346343 a07d30c5352ba0b3454d81ae08d474865db28b7a
push id14351
push userhiikezoe@mozilla-japan.org
push dateThu, 31 Mar 2016 21:52:16 +0000
reviewersdholbert
bugs1256503
milestone48.0a1
Bug 1256503 - Part 1: Use MS_PER_SEC instead of human-misreadable digits in animation tests. r?dholbert MozReview-Commit-ID: CtMF84ExBLa
dom/animation/test/chrome/test_animate_xrays.html
dom/animation/test/chrome/test_animation_observers.html
dom/animation/test/chrome/test_animation_performance_warning.html
dom/animation/test/chrome/test_animation_properties.html
dom/animation/test/chrome/test_restyles.html
dom/animation/test/chrome/test_running_on_compositor.html
dom/animation/test/testcommon.js
--- a/dom/animation/test/chrome/test_animate_xrays.html
+++ b/dom/animation/test/chrome/test_animate_xrays.html
@@ -14,17 +14,17 @@
 <script>
 'use strict';
 
 var win = document.getElementById('iframe').contentWindow;
 
 async_test(function(t) {
   window.addEventListener('load', t.step_func(function() {
     var target = win.document.getElementById('target');
-    var anim = target.animate({ opacity: [ 0, 1 ] }, 2000);
+    var anim = target.animate({ opacity: [ 0, 1 ] }, 2 * MS_PER_SEC);
     // In the x-ray case, the frames object will be given an opaque wrapper
     // so it won't be possible to fetch any frames from it.
     assert_equals(anim.effect.getFrames().length, 0);
     t.done();
   }));
 }, 'Calling animate() across x-rays');
 
 </script>
--- a/dom/animation/test/chrome/test_animation_observers.html
+++ b/dom/animation/test/chrome/test_animation_observers.html
@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Test chrome-only MutationObserver animation notifications</title>
 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+<script src="../testcommon.js"></script>
 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
 <style>
 @keyframes anim {
   to { transform: translate(100px); }
 }
 #target {
   width: 100px;
   height: 100px;
@@ -323,17 +324,17 @@ function assert_records(expected, desc) 
     // be delivered.
     yield await_frame();
     assert_records([{ added: [firstAnimation], changed: [], removed: [] }],
                    "records after transition start");
 
     // Wait for the Animation to be playing, then seek well into
     // the transition.
     yield firstAnimation.ready;
-    firstAnimation.currentTime = 50000;
+    firstAnimation.currentTime = 50 * MS_PER_SEC;
 
     // Reverse the transition by setting the background-color back to its
     // original value.
     e.style.backgroundColor = "yellow";
 
     // The reversal should cause the creation of a new Animation.
     animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after transition reversal");
@@ -383,17 +384,17 @@ function assert_records(expected, desc) 
                    "records after transition starts");
 
     // Wait for the Animations to get going.
     yield animations[0].ready;
     is(animations.filter(p => p.playState == "running").length, 3,
        "number of running Animations");
 
     // Seek well into each animation.
-    animations.forEach(p => p.currentTime = 50000);
+    animations.forEach(p => p.currentTime = 50 * MS_PER_SEC);
 
     // Prepare the set of expected change MutationRecords, one for each
     // animation that was seeked.
     var seekRecords = animations.map(
       p => ({ added: [], changed: [p], removed: [] })
     );
 
     // Cancel one of the transitions by setting transition-property.
@@ -506,17 +507,17 @@ function assert_records(expected, desc) 
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
     yield await_frame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     // Advance the animation by a second.
-    animations[0].currentTime += 1000;
+    animations[0].currentTime += 1 * MS_PER_SEC;
 
     // Cancel the animation by setting animation-duration to a value less
     // than a second.
     e.style.animationDuration = "0.1s";
 
     // Wait for the change MutationRecord from seeking the Animation to
     // be delivered, followed by a further MutationRecord for the Animation
     // removal.
@@ -612,17 +613,17 @@ function assert_records(expected, desc) 
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
     yield await_frame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     // Advance the animation until we are past the first iteration.
-    animations[0].currentTime += 1000;
+    animations[0].currentTime += 1 * MS_PER_SEC;
 
     // The only MutationRecord at this point should be the change from
     // seeking the Animation.
     yield await_frame();
     assert_records([{ added: [], changed: animations, removed: [] }],
                    "records after seeking animations");
 
     // Cancel the animation by setting animation-iteration-count.
@@ -719,18 +720,18 @@ function assert_records(expected, desc) 
       e.style = "";
     });
   });
 
   // Test that updating a property on the Animation object dispatches a changed
   // notification.
   [
     { prop: "playbackRate", val: 0.5 },
-    { prop: "startTime",    val: 50000 },
-    { prop: "currentTime",  val: 50000 },
+    { prop: "startTime",    val: 50 * MS_PER_SEC },
+    { prop: "currentTime",  val: 50 * MS_PER_SEC },
   ].forEach(function(aChangeTest) {
     addAsyncAnimTest(`single_animation_api_change_${aChangeTest.prop}`,
                      aOptions, function*() {
       // Start a long animation
       //
       // We use a forwards fill mode so that even if the change we make causes
       // the animation to become finished, it will still be "relevant" so we
       // won't mark it as removed.
@@ -882,17 +883,17 @@ function assert_records(expected, desc) 
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
     yield await_frame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Seek to the middle and set playbackRate to zero.
-    animations[0].currentTime = 50000;
+    animations[0].currentTime = 50 * MS_PER_SEC;
     animations[0].playbackRate = 0;
 
     // Wait for the MutationRecords, one for each change, to be delivered.
     yield await_frame();
     assert_records([{ added: [], changed: animations, removed: [] },
                     { added: [], changed: animations, removed: [] }],
                     "records after seeking and setting playbackRate");
 
@@ -1519,37 +1520,37 @@ addAsyncAnimTest("tree_ordering", { obse
   childA.remove();
   childB.remove();
   extraStyle.remove();
 });
 
 [ div, pseudoTarget ].forEach(function(target) {
   addAsyncAnimTest("change_duration_and_currenttime",
                    { observe: div, subtree: true }, function*() {
-    var anim = target.animate({ opacity: [ 0, 1 ] }, 100000);
+    var anim = target.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
 
     yield await_frame();
     assert_records([{ added: [anim], changed: [], removed: [] }],
                    "records after animation is added");
 
-    anim.effect.timing.duration = 10000;
+    anim.effect.timing.duration = 10 * MS_PER_SEC;
     yield await_frame();
     assert_records([{ added: [], changed: [anim], removed: [] }],
                    "records after duration is changed");
 
-    anim.effect.timing.duration = 10000;
+    anim.effect.timing.duration = 10 * MS_PER_SEC;
     yield await_frame();
     assert_records([], "records after assigning same value");
 
-    anim.currentTime = 50000;
+    anim.currentTime = 50 * MS_PER_SEC;
     yield await_frame();
     assert_records([{ added: [], changed: [], removed: [anim] }],
                    "records after animation end");
 
-    anim.effect.timing.duration = 100000;
+    anim.effect.timing.duration = 100 * MS_PER_SEC;
     yield await_frame();
     assert_records([{ added: [anim], changed: [], removed: [] }],
                    "records after animation restarted");
 
     anim.effect.timing.duration = "auto";
     yield await_frame();
     assert_records([{ added: [], changed: [], removed: [anim] }],
                    "records after duration set \"auto\"");
@@ -1560,37 +1561,37 @@ addAsyncAnimTest("tree_ordering", { obse
 
     anim.cancel();
     yield await_frame();
   });
 });
 
 addAsyncAnimTest("change_enddelay_and_currenttime",
                  { observe: div, subtree: true }, function*() {
-  var anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 100000 });
+  var anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 100 * MS_PER_SEC });
 
   yield await_frame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
-  anim.effect.timing.endDelay = 10000;
+  anim.effect.timing.endDelay = 10 * MS_PER_SEC;
   yield await_frame();
   assert_records([{ added: [], changed: [anim], removed: [] }],
                  "records after endDelay is changed");
 
-  anim.effect.timing.endDelay = 10000;
+  anim.effect.timing.endDelay = 10 * MS_PER_SEC;
   yield await_frame();
   assert_records([], "records after assigning same value");
 
-  anim.currentTime = 109000;
+  anim.currentTime = 109 * MS_PER_SEC;
   yield await_frame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after currentTime during endDelay");
 
-  anim.effect.timing.endDelay = -110000;
+  anim.effect.timing.endDelay = -110 * MS_PER_SEC;
   yield await_frame();
   assert_records([], "records after assigning negative value");
 
   anim.cancel();
   yield await_frame();
 });
 
 addAsyncAnimTest("change_enddelay_and_currenttime",
@@ -1598,17 +1599,17 @@ addAsyncAnimTest("change_enddelay_and_cu
   var anim = div.animate({ opacity: [ 0, 1 ] },
                          { duration: 100, endDelay: -100 });
   yield await_frame();
   assert_records([], "records after animation is added");
 });
 
 addAsyncAnimTest("change_iterations",
                  { observe: div, subtree: true }, function*() {
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
+  var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
 
   yield await_frame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect.timing.iterations = 2;
   yield await_frame();
   assert_records([{ added: [], changed: [anim], removed: [] }],
@@ -1631,18 +1632,20 @@ addAsyncAnimTest("change_iterations",
   anim.cancel();
   yield await_frame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation end");
 });
 
 addAsyncAnimTest("exclude_animations_targeting_pseudo_elements",
                  { observe: div, subtree: false }, function*() {
-  var anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 100000 });
-  var pAnim = pseudoTarget.animate({ opacity: [ 0, 1 ] }, { duration: 100000 });
+  var anim = div.animate({ opacity: [ 0, 1 ] },
+                         { duration: 100 * MS_PER_SEC });
+  var pAnim = pseudoTarget.animate({ opacity: [ 0, 1 ] },
+                                   { duration: 100 * MS_PER_SEC });
 
   yield await_frame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.finish();
   pAnim.finish();
   yield await_frame();
--- a/dom/animation/test/chrome/test_animation_performance_warning.html
+++ b/dom/animation/test/chrome/test_animation_performance_warning.html
@@ -211,17 +211,17 @@ var gAnimationsTests = [
       }
     ]
   },
 ];
 
 gAnimationsTests.forEach(function(subtest) {
   promise_test(function(t) {
     var div = addDiv(t, { class: 'compositable' });
-    var animation = div.animate(subtest.frames, 100000);
+    var animation = div.animate(subtest.frames, 100 * MS_PER_SEC);
     return animation.ready.then(function() {
       assert_animation_property_state_equals(
         animation.effect.getProperties(),
         subtest.expected);
     });
   }, subtest.desc);
 });
 
@@ -497,29 +497,29 @@ function start() {
   var bundleService = SpecialPowers.Cc['@mozilla.org/intl/stringbundle;1']
     .getService(SpecialPowers.Ci.nsIStringBundleService);
   gStringBundle = bundleService
     .createBundle("chrome://global/locale/layout_errors.properties");
 
   gAnimationsTests.forEach(function(subtest) {
     promise_test(function(t) {
       var div = addDiv(t, { class: 'compositable' });
-      var animation = div.animate(subtest.frames, 100000);
+      var animation = div.animate(subtest.frames, 100 * MS_PER_SEC);
       return animation.ready.then(function() {
         assert_animation_property_state_equals(
           animation.effect.getProperties(),
           subtest.expected);
       });
     }, subtest.desc);
   });
 
   gPerformanceWarningTests.forEach(function(subtest) {
     promise_test(function(t) {
       var div = addDiv(t, { class: 'compositable' });
-      var animation = div.animate(subtest.frames, 100000);
+      var animation = div.animate(subtest.frames, 100 * MS_PER_SEC);
       return animation.ready.then(function() {
         assert_property_state_on_compositor(
           animation.effect.getProperties(),
           subtest.expected);
         div.style = subtest.style;
         return waitForFrame();
       }).then(function() {
         assert_animation_property_state_equals(
@@ -534,17 +534,17 @@ function start() {
       });
     }, subtest.desc);
   });
 
   gMultipleAsyncAnimationsTests.forEach(function(subtest) {
     promise_test(function(t) {
       var div = addDiv(t, { class: 'compositable' });
       var animations = subtest.animations.map(function(anim) {
-        var animation = div.animate(anim.frames, 100000);
+        var animation = div.animate(anim.frames, 100 * MS_PER_SEC);
 
         // Bind expected values to animation object.
         animation.expected = anim.expected;
         return animation;
       });
       return waitForAllAnimations(animations).then(function() {
         animations.forEach(function(anim) {
           assert_property_state_on_compositor(
@@ -570,17 +570,17 @@ function start() {
       });
     }, 'Multiple animations: ' + subtest.desc);
   });
 
   gMultipleAsyncAnimationsWithGeometricKeyframeTests.forEach(function(subtest) {
     promise_test(function(t) {
       var div = addDiv(t, { class: 'compositable' });
       var animations = subtest.animations.map(function(anim) {
-        var animation = div.animate(anim.frames, 100000);
+        var animation = div.animate(anim.frames, 100 * MS_PER_SEC);
 
         // Bind expected values to animation object.
         animation.expected = anim.expected;
         return animation;
       });
       return waitForAllAnimations(animations).then(function() {
         animations.forEach(function(anim) {
           assert_animation_property_state_equals(
@@ -590,34 +590,35 @@ function start() {
       });
     }, 'Multiple animations with geometric property: ' + subtest.desc);
   });
 
   gMultipleAsyncAnimationsWithGeometricAnimationTests.forEach(function(subtest) {
     promise_test(function(t) {
       var div = addDiv(t, { class: 'compositable' });
       var animations = subtest.animations.map(function(anim) {
-        var animation = div.animate(anim.frames, 100000);
+        var animation = div.animate(anim.frames, 100 * MS_PER_SEC);
 
         // Bind expected values to animation object.
         animation.expected = anim.expected;
         return animation;
       });
 
       var widthAnimation;
 
       return waitForAllAnimations(animations).then(function() {
         animations.forEach(function(anim) {
           assert_property_state_on_compositor(
             anim.effect.getProperties(),
             anim.expected);
         });
       }).then(function() {
         // Append 'width' animation on the same element.
-        widthAnimation = div.animate({ width: ['100px', '200px'] }, 100000);
+        widthAnimation = div.animate({ width: ['100px', '200px'] },
+                                     100 * MS_PER_SEC);
         return waitForFrame();
       }).then(function() {
         // Now transform animations are not running on compositor because of
         // the 'width' animation.
         animations.forEach(function(anim) {
           assert_animation_property_state_equals(
             anim.effect.getProperties(),
             anim.expected);
@@ -634,17 +635,17 @@ function start() {
         });
       });
     }, 'Multiple async animations and geometric animation: ' + subtest.desc);
   });
 
   promise_test(function(t) {
     var div = addDiv(t, { class: 'compositable' });
     var animation = div.animate(
-      { transform: ['translate(0px)', 'translate(100px)'] }, 100000);
+      { transform: ['translate(0px)', 'translate(100px)'] }, 100 * MS_PER_SEC);
     return animation.ready.then(function() {
       assert_animation_property_state_equals(
         animation.effect.getProperties(),
         [ { property: 'transform', runningOnCompositor: true } ]);
       div.style = 'width: 10000px; height: 10000px';
       return waitForFrame();
     }).then(function() {
       // viewport depends on test environment.
@@ -679,17 +680,17 @@ function start() {
     rect.setAttribute('fill', 'red');
     svg.appendChild(rect);
     document.body.appendChild(svg);
     t.add_cleanup(function() {
       svg.remove();
     });
 
     var animation = svg.animate(
-      { transform: ['translate(0px)', 'translate(100px)'] }, 100000);
+      { transform: ['translate(0px)', 'translate(100px)'] }, 100 * MS_PER_SEC);
     return animation.ready.then(function() {
       assert_animation_property_state_equals(
         animation.effect.getProperties(),
         [ { property: 'transform', runningOnCompositor: true } ]);
       svg.setAttribute('transform', 'translate(10, 20)');
       return waitForFrame();
     }).then(function() {
       assert_animation_property_state_equals(
@@ -707,17 +708,17 @@ function start() {
         [ { property: 'transform', runningOnCompositor: true } ]);
     });
   }, 'transform of nsIFrame with SVG transform');
 
   promise_test(function(t) {
     var div = addDiv(t, { class: 'compositable',
                           style: 'animation: fade 100s' });
     var cssAnimation = div.getAnimations()[0];
-    var scriptAnimation = div.animate({ opacity: [ 1, 0 ] }, 100000);
+    var scriptAnimation = div.animate({ opacity: [ 1, 0 ] }, 100 * MS_PER_SEC);
     return scriptAnimation.ready.then(function() {
       assert_animation_property_state_equals(
         cssAnimation.effect.getProperties(),
         [ { property: 'opacity', runningOnCompositor: false } ]);
       assert_animation_property_state_equals(
         scriptAnimation.effect.getProperties(),
         [ { property: 'opacity', runningOnCompositor: true } ]);
     });
--- a/dom/animation/test/chrome/test_animation_properties.html
+++ b/dom/animation/test/chrome/test_animation_properties.html
@@ -488,16 +488,16 @@ var gTests = [
                   values: [ value(0, '100px', 'replace', 'linear'),
                             value(1, '200px', 'replace') ] } ]
   }
 ];
 
 gTests.forEach(function(subtest) {
   test(function(t) {
     var div = addDiv(t);
-    var animation = div.animate(subtest.frames, 1000);
+    var animation = div.animate(subtest.frames, 1 * MS_PER_SEC);
     assert_properties_equal(animation.effect.getProperties(),
                             subtest.expected);
   }, subtest.desc);
 });
 
 </script>
 </body>
--- a/dom/animation/test/chrome/test_restyles.html
+++ b/dom/animation/test/chrome/test_restyles.html
@@ -332,40 +332,40 @@ waitForAllPaints(function() {
   });
 
   add_task_if_omta_enabled(function* only_one_restyling_when_current_time_is_set_to_middle_of_duration() {
     var div = addDiv(null, { style: 'animation: opacity 100s' });
     var animation = div.getAnimations()[0];
 
     yield animation.ready;
 
-    animation.currentTime = 50000; // 50s
+    animation.currentTime = 50 * MS_PER_SEC;
 
     var markers = yield observeStyling(5);
     is(markers.length, 1,
        'Bug 1235478: Animations running on the compositor should only once ' +
        'update style when currentTime is set to middle of duration time');
     yield ensureElementRemoval(div);
   });
 
   add_task_if_omta_enabled(function* change_duration_and_currenttime() {
     var div = addDiv(null);
-    var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); //100s
+    var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
 
     yield animation.ready;
     ok(animation.isRunningOnCompositor);
 
     // Set currentTime to a time longer than duration.
-    animation.currentTime = 500000; // 500s
+    animation.currentTime = 500 * MS_PER_SEC;
 
     // Now the animation immediately get back from compositor.
     ok(!animation.isRunningOnCompositor);
 
     // Extend the duration.
-    animation.effect.timing.duration = 800000; // 800s
+    animation.effect.timing.duration = 800 * MS_PER_SEC;
     var markers = yield observeStyling(5);
     is(markers.length, 1,
        'Animations running on the compositor should update style ' +
        'when timing.duration is made longer than the current time');
 
     yield ensureElementRemoval(div);
   });
 
--- a/dom/animation/test/chrome/test_running_on_compositor.html
+++ b/dom/animation/test/chrome/test_running_on_compositor.html
@@ -123,17 +123,17 @@ promise_test(function(t) {
   }));
 }, 'isRunningOnCompositor is false when the animation.finish() is called');
 
 promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
 
   return animation.ready.then(t.step_func(function() {
-    animation.currentTime = 100000; // 100s
+    animation.currentTime = 100 * MS_PER_SEC;
     assert_equals(animation.isRunningOnCompositor, false,
        'Animation reports that it is NOT running on the compositor'
        + ' immediately after manually seeking the animation to the end');
     // Check that we don't set the flag back again on the next tick.
     return waitForFrame();
   })).then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, false,
        'Animation reports that it is NOT running on the compositor'
@@ -282,113 +282,113 @@ promise_test(function(t) {
        + 'property is overridden in the CSS cascade, the animation should '
        + 'still report that it is running on the compositor');
   }));
 }, 'isRunningOnCompositor is true when a property that would otherwise block ' +
    'running on the compositor is overridden in the CSS cascade');
 
 promise_test(function(t) {
   var div = addDiv(t);
-  var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); // 100s
+  var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
 
   return animation.ready.then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, omtaEnabled,
       'Animation reports that it is running on the compositor');
 
-    animation.currentTime = 50000; // 50s
-    animation.effect.timing.duration = 10000; // 10s
+    animation.currentTime = 50 * MS_PER_SEC;
+    animation.effect.timing.duration = 10 * MS_PER_SEC;
 
     assert_equals(animation.isRunningOnCompositor, false,
        'Animation reports that it is NOT running on the compositor'
        + ' when the animation is set a shorter duration than current time');
   }));
 }, 'animation is immediately removed from compositor' +
    'when timing.duration is made shorter than the current time');
 
 promise_test(function(t) {
   var div = addDiv(t);
-  var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); // 100s
+  var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
 
   return animation.ready.then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, omtaEnabled,
       'Animation reports that it is running on the compositor');
 
-    animation.currentTime = 500000; // 500s
+    animation.currentTime = 500 * MS_PER_SEC;
 
     assert_equals(animation.isRunningOnCompositor, false,
       'Animation reports that it is NOT running on the compositor'
       + ' when finished');
 
-    animation.effect.timing.duration = 1000000; // 1000s
+    animation.effect.timing.duration = 1000 * MS_PER_SEC;
     return waitForFrame();
   })).then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, omtaEnabled,
       'Animation reports that it is running on the compositor'
       + ' when restarted');
   }));
 }, 'animation is added to compositor' +
    ' when timing.duration is made longer than the current time');
 
 promise_test(function(t) {
   var div = addDiv(t);
-  var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); // 100s
+  var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
 
   return animation.ready.then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, omtaEnabled,
       'Animation reports that it is running on the compositor');
 
-    animation.effect.timing.endDelay = 100000; // 100s
+    animation.effect.timing.endDelay = 100 * MS_PER_SEC;
 
     assert_equals(animation.isRunningOnCompositor, omtaEnabled,
       'Animation reports that it is running on the compositor'
       + ' when endDelay is changed');
 
-    animation.currentTime = 110000; // 110s
+    animation.currentTime = 110 * MS_PER_SEC;
     return waitForFrame();
   })).then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, false,
       'Animation reports that it is NOT running on the compositor'
       + ' when currentTime is during endDelay');
   }));
 }, 'animation is removed from compositor' +
    ' when current time is made longer than the duration even during endDelay');
 
 promise_test(function(t) {
   var div = addDiv(t);
-  var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); // 100s
+  var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
 
   return animation.ready.then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, omtaEnabled,
       'Animation reports that it is running on the compositor');
 
-    animation.effect.timing.endDelay = -200000; // -200s
+    animation.effect.timing.endDelay = -200 * MS_PER_SEC;
     return waitForFrame();
   })).then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, false,
       'Animation reports that it is NOT running on the compositor'
       + ' when endTime is negative value');
   }));
 }, 'animation is removed from compositor' +
    ' when endTime is negative value');
 
 promise_test(function(t) {
   var div = addDiv(t);
-  var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); // 100s
+  var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
 
   return animation.ready.then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, omtaEnabled,
       'Animation reports that it is running on the compositor');
 
-    animation.effect.timing.endDelay = -50000; // 50s
+    animation.effect.timing.endDelay = -50 * MS_PER_SEC;
     return waitForFrame();
   })).then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, omtaEnabled,
       'Animation reports that it is running on the compositor'
       + ' when endTime is positive and endDelay is negative');
-    animation.currentTime = 60000; // 60s
+    animation.currentTime = 60 * MS_PER_SEC;
     return waitForFrame();
   })).then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, false,
       'Animation reports that it is NOT running on the compositor'
       + ' when currentTime is after endTime');
   }));
 }, 'animation is NOT running on compositor' +
    ' when endTime is positive and endDelay is negative');
--- a/dom/animation/test/testcommon.js
+++ b/dom/animation/test/testcommon.js
@@ -1,12 +1,26 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 /**
+ * Use this variable if you specify duration or some other properties
+ * for script animation.
+ * E.g., div.animate({ opacity: [0, 1] }, 100 * MS_PER_SEC);
+ *
+ * NOTE: Creating animations with short duration may cause intermittent
+ * failures in asynchronous test. For example, the short duration animation
+ * might be finished when animation.ready has been fulfilled because of slow
+ * platforms or busyness of the main thread.
+ * Setting short duration to cancel its animation does not matter but
+ * if you don't want to cancel the animation, consider using longer duration.
+ */
+const MS_PER_SEC = 1000;
+
+/**
  * Appends a div to the document body.
  *
  * @param t  The testharness.js Test object. If provided, this will be used
  *           to register a cleanup callback to remove the div when the test
  *           finishes.
  *
  * @param attrs  A dictionary object with attribute names and values to set on
  *               the div.