Bug 1104435 part 5 - Factor out common animation test methods into testcommon.js; r=heycam

This patch moves commonly used addDiv and waitForFrame test methods to
a separate testcommon.js support file.

It also takes advantage of the updates to testharness.js from bug 1104433 to
rework addDiv such that it automatically removes the created div at the end of
the test.

dom/animation/test/css-animations/test_animation-effect-name.html

@@ -2,6 +2,7 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
 <div id="log"></div>
 <style>
 @keyframes xyz {
@@ -11,35 +12,26 @@
 <script>
 'use strict';
 
-function addDiv() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
-  return div;
-}
-
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'xyz 100s';
   assert_equals(div.getAnimationPlayers()[0].source.effect.name, 'xyz',
                 'Animation effect name matches keyframes rule name');
-  div.remove();
 }, 'Effect name makes keyframe rule');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'x\\yz 100s';
   assert_equals(div.getAnimationPlayers()[0].source.effect.name, 'xyz',
                 'Escaped animation effect name matches keyframes rule name');
-  div.remove();
 }, 'Escaped animation name');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'x\\79 z 100s';
   assert_equals(div.getAnimationPlayers()[0].source.effect.name, 'xyz',
                 'Hex-escaped animation effect name matches keyframes rule'
                 + ' name');
-  div.remove();
 }, 'Animation name with hex-escape');
 
 </script>

dom/animation/test/css-animations/test_animation-pausing.html

@@ -2,6 +2,7 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
 <div id="log"></div>
 <style>
 @keyframes anim { 
@@ -12,24 +13,12 @@
 <script>
 'use strict';
 
-function addDiv() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
-  return div;
-}
-
-function waitForFrame() {
-  return new Promise(function(resolve, reject) {
-    window.requestAnimationFrame(resolve);
-  });
-}
-
 function getMarginLeft(cs) {
   return parseFloat(cs.marginLeft);
 }
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s';
 
@@ -53,13 +42,12 @@ async_test(function(t) {
       assert_equals(getMarginLeft(cs), previousAnimVal,
                     'margin-left does not increase after calling pause()');
     });
-    div.remove();
     t.done();
   });
 }, 'pause() a running animation');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s paused';
 
@@ -78,13 +66,12 @@ async_test(function(t) {
       assert_equals(getMarginLeft(cs), 0,
                     'Paused value of margin-left is zero');
     });
-    div.remove();
     t.done();
   });
 }, 'pause() overrides animation-play-state');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s paused';
 
@@ -100,13 +87,12 @@ async_test(function(t) {
       assert_true(getMarginLeft(cs) > 0,
                   'Playing value of margin-left is greater than zero');
     });
-    div.remove();
     t.done();
   });
 }, 'play() overrides animation-play-state');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s paused';
 
@@ -137,13 +123,12 @@ async_test(function(t) {
                     'Animated value of margin-left does not change when'
                     + ' paused by style');
     });
-    div.remove();
     t.done();
   });
 }, 'play() is overridden by later setting "animation-play-state: paused"');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s';
 
@@ -165,13 +150,12 @@ async_test(function(t) {
       assert_true(getMarginLeft(cs) > previousAnimVal,
                   'Playing value of margin-left is increasing');
     });
-    div.remove();
     t.done();
   });
 }, 'play() flushes pending changes to animation-play-state first');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s paused';
 
@@ -200,7 +184,6 @@ async_test(function(t) {
       assert_equals(getMarginLeft(cs), previousAnimVal,
                     'Paused value of margin-left does not change');
     });
-    div.remove();
     t.done();
   });
 }, 'pause() applies pending changes to animation-play-state first');

dom/animation/test/css-animations/test_animation-player-playstate.html

@@ -2,6 +2,7 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
 <div id="log"></div>
 <style>
 @keyframes anim { }
@@ -9,14 +10,8 @@
 <script>
 'use strict';
 
-function addDiv() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
-  return div;
-}
-
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s';
 
@@ -24,8 +19,8 @@ test(function() {
   assert_equals(player.playState, 'running');
 }, 'Player returns correct playState when running');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s paused';
 
@@ -33,8 +28,8 @@ test(function() {
   assert_equals(player.playState, 'paused');
 }, 'Player returns correct playState when paused');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s';
 
@@ -43,8 +38,8 @@ test(function() {
   assert_equals(player.playState, 'paused');
 }, 'Player.playState updates when paused by script');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s paused';
 

dom/animation/test/css-animations/test_animation-target.html

@@ -2,6 +2,7 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
 <div id="log"></div>
 <style>
 @keyframes anim { }
@@ -9,19 +10,12 @@
 <script>
 'use strict';
 
-function addDiv() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
-  return div;
-}
-
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'anim 100s';
   var players = div.getAnimationPlayers();
   assert_equals(players[0].source.target, div,
     'Animation.target is the animatable div');
-  div.remove();
 }, 'Returned CSS animations have the correct Animation.target');
 
 </script>

dom/animation/test/css-animations/test_animations-dynamic-changes.html

@@ -2,6 +2,7 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
 <div id="log"></div>
 <style>
 @keyframes anim1 {
@@ -12,14 +13,8 @@
 <script>
 'use strict';
 
-function addDiv() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
-  return div;
-}
-
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   div.style.animation = 'anim1 100s';
 
   var originalPlayer = div.getAnimationPlayers()[0];
@@ -41,13 +36,12 @@ async_test(function(t) {
     assert_not_equals(player.currentTime, originalCurrentTime,
                       'AnimationPlayer.currentTime has updated in next'
                       + ' requestAnimationFrame callback');
-    div.remove();
     t.done();
   }));
 }, 'AnimationPlayers preserve their startTime when changed');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'anim1 100s, anim1 100s';
 
   // Store original state
@@ -65,7 +59,7 @@ test(function() {
 }, 'Updated AnimationPlayers maintain their order in the list');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   div.style.animation = 'anim1 200s, anim1 100s';
 
   // Store original state
@@ -89,13 +83,12 @@ async_test(function(t) {
                   'Old players have the same start time');
     assert_true(players[0].startTime > players[1].startTime,
                 'New player has later start time');
-    div.remove();
     t.done();
   }));
 }, 'Only the startTimes of existing animations are preserved');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   div.style.animation = 'anim1 100s, anim1 100s';
   var secondPlayer = div.getAnimationPlayers()[1];
 
@@ -109,14 +102,13 @@ async_test(function(t) {
                   'Remaining player is the second one in the list');
     assert_true(players[0].startTime < players[0].timeline.currentTime,
                 'Remaining player preserves startTime');
-    div.remove();
     t.done();
   }));
 }, 'Animations are removed from the start of the list while preserving'
    + ' the state of existing players');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   div.style.animation = 'anim1 100s';
   var firstAddedPlayer = div.getAnimationPlayers()[0];
 
@@ -141,7 +133,6 @@ async_test(function(t) {
                   'Interleaved player starts later than existing players');
       assert_true(players[0].startTime > players[2].startTime,
                   'Original players retain their start time');
-      div.remove();
       t.done();
     }));
   }));

dom/animation/test/css-animations/test_element-get-animation-players.html

@@ -2,6 +2,7 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
 <div id="log"></div>
 <style>
 @keyframes anim1 {
@@ -18,22 +19,15 @@
 <script>
 'use strict';
 
-function addDiv() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
-  return div;
-}
-
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   assert_equals(div.getAnimationPlayers().length, 0,
     'getAnimationPlayers returns an empty sequence for an element'
     + ' with no animations');
-  div.remove();
 }, 'getAnimationPlayers for non-animated content');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
 
   // Add an animation
   div.style.animation = 'anim1 100s';
@@ -57,24 +51,22 @@ async_test(function(t) {
     assert_true(players[0].startTime < players[1].startTime,
       'Additional players for CSS animations start after the original'
       + ' animation and appear later in the list');
-    div.remove();
     t.done();
   }));
 }, 'getAnimationPlayers for CSS Animations');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
 
   // Add an animation that targets multiple properties
   div.style.animation = 'multiPropAnim 100s';
   assert_equals(div.getAnimationPlayers().length, 1,
     'getAnimationPlayers returns only one player for a CSS Animation'
     + ' that targets multiple properties');
-  div.remove();
 }, 'getAnimationPlayers for multi-property animations');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
 
   // Add an animation
   div.style.backgroundColor = 'red';
@@ -93,20 +85,18 @@ async_test(function(t) {
     assert_true(players[0].startTime > players[1].startTime,
       'players for transitions appear before animations even if they '
       + ' start later');
-    div.remove();
     t.done();
   }));
 }, 'getAnimationPlayers for both CSS Animations and Transitions at once');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
 
   // Set up event listener
   div.addEventListener('animationend', t.step_func(function() {
     assert_equals(div.getAnimationPlayers().length, 0,
       'getAnimationPlayers does not return players for finished '
       + ' (and non-forwards-filling) CSS Animations');
-    div.remove();
     t.done();
   }));
 
@@ -115,14 +105,13 @@ async_test(function(t) {
 }, 'getAnimationPlayers for CSS Animations that have finished');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
 
   // Set up event listener
   div.addEventListener('animationend', t.step_func(function() {
     assert_equals(div.getAnimationPlayers().length, 1,
       'getAnimationPlayers returns players for CSS Animations that have'
       + ' finished but are filling forwards');
-    div.remove();
     t.done();
   }));
 
@@ -131,8 +120,8 @@ async_test(function(t) {
 }, 'getAnimationPlayers for CSS Animations that have finished but are'
    + ' forwards filling');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'none 100s';
 
   var players = div.getAnimationPlayers();
@@ -145,12 +134,10 @@ test(function() {
   assert_equals(players.length, 1,
     'getAnimationPlayers returns players only for those CSS Animations whose'
     + ' animation-name is not none');
-
-  div.remove();
 }, 'getAnimationPlayers for CSS Animations with animation-name: none');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'missing 100s';
   var players = div.getAnimationPlayers();
   assert_equals(players.length, 0,
@@ -162,12 +149,10 @@ test(function() {
   assert_equals(players.length, 1,
     'getAnimationPlayers returns players only for those CSS Animations whose'
     + ' animation-name is found');
-
-  div.remove();
 }, 'getAnimationPlayers for CSS Animations with animation-name: missing');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   div.style.animation = 'anim1 100s, notyet 100s';
   var players = div.getAnimationPlayers();
   assert_equals(players.length, 1,
@@ -184,32 +169,29 @@ async_test(function(t) {
     assert_true(players[0].startTime < players[1].startTime,
       'Newly added player has a later start time');
     document.styleSheets[0].deleteRule(0);
-    div.remove();
     t.done();
   }));
 }, 'getAnimationPlayers for CSS Animations where the @keyframes rule is added'
    + ' later');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'anim1 100s, anim1 100s';
   assert_equals(div.getAnimationPlayers().length, 2,
     'getAnimationPlayers returns one player for each CSS animation-name'
     + ' even if the names are duplicated');
-  div.remove();
 }, 'getAnimationPlayers for CSS Animations with duplicated animation-name');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'empty 100s';
   assert_equals(div.getAnimationPlayers().length, 1,
     'getAnimationPlayers returns players for CSS animations with an'
     + ' empty keyframes rule');
-  div.remove();
 }, 'getAnimationPlayers for CSS Animations with empty keyframes rule');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'anim1 100s 100s';
   var players = div.getAnimationPlayers();
   assert_equals(players.length, 1,
@@ -218,11 +200,10 @@ test(function() {
   assert_true(players[0].startTime <= document.timeline.currentTime,
     'For CSS Animations in delay phase, the start time of the player is'
     + ' not in the future');
-  div.remove();
 }, 'getAnimationPlayers for CSS animations in delay phase');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'anim1 0s 100s';
   assert_equals(div.getAnimationPlayers().length, 1,
     'getAnimationPlayers returns animations for CSS animations whose'
@@ -230,8 +211,8 @@ test(function() {
   div.remove();
 }, 'getAnimationPlayers for zero-duration CSS Animations');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
   div.style.animation = 'anim1 100s';
   var originalPlayer = div.getAnimationPlayers()[0];
 
@@ -252,8 +233,6 @@ test(function() {
   assert_equals(originalPlayer, extendedPlayer,
                 'getAnimationPlayers returns the same objects even when their'
                 + ' duration changes');
-
-  div.remove();
 }, 'getAnimationPlayers returns objects with the same identity');
 
 </script>

dom/animation/test/css-transitions/test_animation-effect-name.html

@@ -2,13 +2,13 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 
-test(function() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
+test(function(t) {
+  var div = addDiv(t);
 
   // Add a transition
   div.style.left = '0px';
@@ -18,7 +18,6 @@ test(function() {
 
   assert_equals(div.getAnimationPlayers()[0].source.effect.name, '',
                 'Animation effects for transitions have an empty name');
-  div.remove();
 }, 'Effect name for transitions');
 
 </script>

dom/animation/test/css-transitions/test_animation-pausing.html

@@ -2,28 +2,17 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 
-function addDiv() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
-  return div;
-}
-
-function waitForFrame() {
-  return new Promise(function(resolve, reject) {
-    window.requestAnimationFrame(resolve);
-  });
-}
-
 function getMarginLeft(cs) {
   return parseFloat(cs.marginLeft);
 }
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
   var cs = window.getComputedStyle(div);
 
   div.style.marginLeft = '0px';
@@ -58,7 +47,6 @@ async_test(function(t) {
       assert_true(getMarginLeft(cs) > previousAnimVal,
                   'margin-left increases after calling play()');
     });
-    div.remove();
     t.done();
   });
 }, 'pause() and play() a transition');

dom/animation/test/css-transitions/test_animation-target.html

@@ -2,13 +2,13 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 
-test(function() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
+test(function(t) {
+  var div = addDiv(t);
 
   div.style.left = '0px';
   window.getComputedStyle(div).transitionProperty;
@@ -18,7 +18,6 @@ test(function() {
   var players = div.getAnimationPlayers();
   assert_equals(players[0].source.target, div,
     'Animation.target is the animatable div');
-  div.remove();
 }, 'Returned CSS transitions have the correct Animation.target');
 
 </script>

dom/animation/test/css-transitions/test_element-get-animation-players.html

@@ -2,18 +2,13 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 
-function addDiv() {
-  var div = document.createElement('div');
-  document.body.appendChild(div);
-  return div;
-}
-
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
 
   // Add a couple of transitions
   div.style.left = '0px';
@@ -42,19 +37,17 @@ async_test(function(t) {
     assert_true(players[1].startTime < players[2].startTime,
       'Player for additional CSS transition starts after the original'
       + ' transitions and appears later in the list');
-    div.remove();
     t.done();
   }));
 }, 'getAnimationPlayers for CSS Transitions');
 
 async_test(function(t) {
-  var div = addDiv();
+  var div = addDiv(t);
 
   // Set up event listener
   div.addEventListener('transitionend', t.step_func(function() {
     assert_equals(div.getAnimationPlayers().length, 0,
       'getAnimationPlayers does not return finished CSS Transitions');
-    div.remove();
     t.done();
   }));
 
@@ -67,8 +60,8 @@ async_test(function(t) {
   window.getComputedStyle(div).left;
 }, 'getAnimationPlayers for CSS Transitions that have finished');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
 
   // Try to transition non-animatable property animation-duration
   div.style.animationDuration = '10s';
@@ -80,11 +73,10 @@ test(function() {
   assert_equals(div.getAnimationPlayers().length, 0,
     'getAnimationPlayers returns an empty sequence for a transition'
     + ' of a non-animatable property');
-  div.remove();
 }, 'getAnimationPlayers for transition on non-animatable property');
 
-test(function() {
-  var div = addDiv();
+test(function(t) {
+  var div = addDiv(t);
 
   div.style.setProperty('-vendor-unsupported', '0px', '');
   window.getComputedStyle(div).transitionProperty;
@@ -94,7 +86,6 @@ test(function() {
   assert_equals(div.getAnimationPlayers().length, 0,
     'getAnimationPlayers returns an empty sequence for a transition'
     + ' of an unsupported property');
-  div.remove();
 }, 'getAnimationPlayers for transition on unsupported property');
 
 </script>

dom/animation/test/mochitest.ini

@@ -1,3 +1,7 @@
+[DEFAULT]
+support-files =
+  testcommon.js
+
 [animation-timeline/test_animation-timeline.html]
 skip-if = buildapp == 'mulet'
 [css-animations/test_animations-dynamic-changes.html]

dom/animation/test/testcommon.js

@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * 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.
+ */
+function addDiv(t) {
+  var div = document.createElement('div');
+  document.body.appendChild(div);
+  if (t && typeof t.add_cleanup === 'function') {
+    t.add_cleanup(function() { div.remove(); });
+  }
+  return div;
+}
+
+/**
+ * Promise wrapper for requestAnimationFrame.
+ */
+function waitForFrame() {
+  return new Promise(function(resolve, reject) {
+    window.requestAnimationFrame(resolve);
+  });
+}