Bug 1467344 - Use arrow functions in dom/animation/test/css-transitions/; r=hiro
authorBrian Birtles <birtles@gmail.com>
Thu, 16 Aug 2018 14:41:01 +0900
changeset 487349 a8ae57ad9f1595a88c75ef0b3c41760c94e1fc27
parent 487348 f0b7d002a6d545b4aa3390ffa80a00d23faff0e8
child 487350 8d053037352a55cb0ff3f6900e43679901c23d6d
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1467344
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1467344 - Use arrow functions in dom/animation/test/css-transitions/; r=hiro This patch also drops the checkStateOnSettingCurrentTimeToZero function since it is no longer used.
dom/animation/test/css-transitions/test_animation-cancel.html
dom/animation/test/css-transitions/test_animation-computed-timing.html
dom/animation/test/css-transitions/test_animation-currenttime.html
dom/animation/test/css-transitions/test_animation-finished.html
dom/animation/test/css-transitions/test_animation-pausing.html
dom/animation/test/css-transitions/test_animation-ready.html
dom/animation/test/css-transitions/test_animation-starttime.html
dom/animation/test/css-transitions/test_csstransition-transitionproperty.html
dom/animation/test/css-transitions/test_document-get-animations.html
dom/animation/test/css-transitions/test_effect-target.html
dom/animation/test/css-transitions/test_element-get-animations.html
dom/animation/test/css-transitions/test_event-dispatch.html
dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html
dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
dom/animation/test/css-transitions/test_setting-effect.html
--- a/dom/animation/test/css-transitions/test_animation-cancel.html
+++ b/dom/animation/test/css-transitions/test_animation-cancel.html
@@ -3,79 +3,79 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(waitForFrame).then(function() {
+  return transition.ready.then(waitForFrame).then(() => {
     assert_not_equals(getComputedStyle(div).marginLeft, '1000px',
                       'transform style is animated before cancelling');
     transition.cancel();
     assert_equals(getComputedStyle(div).marginLeft, div.style.marginLeft,
                   'transform style is no longer animated after cancelling');
   });
 }, 'Animated style is cleared after cancelling a running CSS transition');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     transition.cancel();
     assert_equals(getComputedStyle(div).marginLeft, '1000px',
                   'margin-left style is not animated after cancelling');
     transition.play();
     assert_equals(getComputedStyle(div).marginLeft, '0px',
                   'margin-left style is animated after re-starting transition');
     return transition.ready;
-  }).then(function() {
+  }).then(() => {
     assert_equals(transition.playState, 'running',
                   'Transition succeeds in running after being re-started');
   });
 }, 'After canceling a transition, it can still be re-used');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     transition.finish();
     transition.cancel();
     assert_equals(getComputedStyle(div).marginLeft, '1000px',
                   'margin-left style is not animated after cancelling');
     transition.play();
     assert_equals(getComputedStyle(div).marginLeft, '0px',
                   'margin-left style is animated after re-starting transition');
     return transition.ready;
-  }).then(function() {
+  }).then(() => {
     assert_equals(transition.playState, 'running',
                   'Transition succeeds in running after being re-started');
   });
 }, 'After cancelling a finished transition, it can still be re-used');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   var transition = div.getAnimations()[0];
   transition.cancel();
@@ -89,147 +89,147 @@ test(function(t) {
   assert_equals(getComputedStyle(div).marginLeft, '1000px',
                 'margin-left style is still not animated after updating'
                 + ' transition-duration');
   assert_equals(transition.playState, 'idle',
                 'Transition is still idle after updating transition-duration');
 }, 'After cancelling a transition, updating transition properties doesn\'t make'
    + ' it live again');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     assert_equals(transition.playState, 'running');
     div.style.display = 'none';
     return waitForFrame();
-  }).then(function() {
+  }).then(() => {
     assert_equals(transition.playState, 'idle');
     assert_equals(getComputedStyle(div).marginLeft, '1000px');
   });
 }, 'Setting display:none on an element cancels its transitions');
 
-promise_test(function(t) {
+promise_test(t => {
   var parentDiv = addDiv(t);
   var childDiv = document.createElement('div');
   parentDiv.appendChild(childDiv);
   childDiv.setAttribute('style', 'margin-left: 0px');
 
   flushComputedStyle(childDiv);
 
   childDiv.style.transition = 'margin-left 100s';
   childDiv.style.marginLeft = '1000px';
 
   var transition = childDiv.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     assert_equals(transition.playState, 'running');
     parentDiv.style.display = 'none';
     return waitForFrame();
-  }).then(function() {
+  }).then(() => {
     assert_equals(transition.playState, 'idle');
     assert_equals(getComputedStyle(childDiv).marginLeft, '1000px');
   });
 }, 'Setting display:none cancels transitions on a child element');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     assert_equals(transition.playState, 'running');
     // Set an unrecognized property value
     div.style.transitionProperty = 'none';
     flushComputedStyle(div);
     return waitForFrame();
-  }).then(function() {
+  }).then(() => {
     assert_equals(transition.playState, 'idle');
     assert_equals(getComputedStyle(div).marginLeft, '1000px');
   });
 }, 'Removing a property from transition-property cancels transitions on that '+
    'property');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     assert_equals(transition.playState, 'running');
     div.style.transition = 'margin-top 10s -10s'; // combined duration is zero
     flushComputedStyle(div);
     return waitForFrame();
-  }).then(function() {
+  }).then(() => {
     assert_equals(transition.playState, 'idle');
     assert_equals(getComputedStyle(div).marginLeft, '1000px');
   });
 }, 'Setting zero combined duration');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     assert_equals(transition.playState, 'running');
     div.style.marginLeft = '2000px';
     flushComputedStyle(div);
     return waitForFrame();
-  }).then(function() {
+  }).then(() => {
     assert_equals(transition.playState, 'idle');
   });
 }, 'Changing style to another interpolable value cancels the original ' +
    'transition');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     assert_equals(transition.playState, 'running');
     div.style.marginLeft = 'auto';
     flushComputedStyle(div);
     return waitForFrame();
-  }).then(function() {
+  }).then(() => {
     assert_equals(div.getAnimations().length, 0,
                   'There should be no transitions');
     assert_equals(transition.playState, 'idle');
   });
 }, 'An after-change style value can\'t be interpolated');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     assert_equals(transition.playState, 'running');
     div.style.marginLeft = '0px';
     flushComputedStyle(div);
     return waitForFrame();
-  }).then(function() {
+  }).then(() => {
     assert_equals(transition.playState, 'idle');
   });
 }, 'Reversing a running transition cancels the original transition');
 
 </script>
 </body>
--- a/dom/animation/test/css-transitions/test_animation-computed-timing.html
+++ b/dom/animation/test/css-transitions/test_animation-computed-timing.html
@@ -14,299 +14,312 @@
 <div id="log"></div>
 <script>
 
 'use strict';
 
 // --------------------
 // delay
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().delay, 0,
                 'Initial value of delay');
 }, 'delay of a new tranisition');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().delay, 10000,
                 'Initial value of delay');
 }, 'Positive delay of a new transition');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s -5s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().delay, -5000,
                 'Initial value of delay');
 }, 'Negative delay of a new transition');
 
 
 // --------------------
 // endDelay
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().endDelay, 0,
                 'Initial value of endDelay');
 }, 'endDelay of a new transition');
 
 
 // --------------------
 // fill
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().fill, 'backwards',
                 'Fill backwards');
 }, 'fill of a new transition');
 
 
 // --------------------
 // iterationStart
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().iterationStart, 0,
                 'Initial value of iterationStart');
 }, 'iterationStart of a new transition');
 
 
 // --------------------
 // iterations
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().iterations, 1,
                 'Initial value of iterations');
 }, 'iterations of a new transition');
 
 
 // --------------------
 // duration
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().duration, 10000,
                 'Initial value of duration');
 }, 'duration of a new transition');
 
 
 // --------------------
 // direction
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().direction, 'normal',
                 'Initial value of direction');
 }, 'direction of a new transition');
 
 
 // --------------------
 // easing
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().easing, 'linear',
                 'Initial value of easing');
 }, 'easing of a new transition');
 
 
 // ------------------------------
 // endTime
 // = max(start delay + active duration + end delay, 0)
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 100s -5s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   var answer = 100000 - 5000; // ms
   assert_equals(effect.getComputedTiming().endTime, answer,
                 'Initial value of endTime');
 }, 'endTime of a new transition');
 
 
 // --------------------
 // activeDuration
 // = iteration duration * iteration count(==1)
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 100s -5s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().activeDuration, 100000,
                 'Initial value of activeDuration');
 }, 'activeDuration of a new transition');
 
 
 // --------------------
 // localTime
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 100s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().localTime, 0,
                 'Initial value of localTime');
 }, 'localTime of a new transition');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 100s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var anim = div.getAnimations()[0];
   anim.currentTime = 5000;
   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
                 'current localTime after setting currentTime');
 }, 'localTime is always equal to currentTime');
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 100s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var anim = div.getAnimations()[0];
   anim.playbackRate = 2; // 2 times faster
 
-  anim.ready.then(t.step_func(function() {
+  anim.ready.then(t.step_func(() => {
     assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
                   'localTime is equal to currentTime');
     return waitForFrame();
-  })).then(t.step_func_done(function() {
+  })).then(t.step_func_done(() => {
     assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
                   'localTime is equal to currentTime');
   }));
 }, 'localTime reflects playbackRate immediately');
 
 
 // --------------------
 // progress
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10.5s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().progress, 0.0,
                 'Initial value of progress');
 }, 'progress of a new transition');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10.5s 2s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().progress, 0.0,
                 'Initial value of progress');
 }, 'progress of a new transition with positive delay in before phase');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10.5s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var anim = div.getAnimations()[0];
   anim.finish()
   assert_equals(anim.effect.getComputedTiming().progress, null,
                 'finished progress');
 }, 'progress of a finished transition');
 
 
 // --------------------
 // currentIteration
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().currentIteration, 0,
                 'Initial value of currentIteration');
 }, 'currentIteration of a new transition');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s 2s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().currentIteration, 0,
                 'Initial value of currentIteration');
 }, 'currentIteration of a new transition with positive delay in before phase');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
   var anim = div.getAnimations()[0];
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, null,
--- a/dom/animation/test/css-transitions/test_animation-currenttime.html
+++ b/dom/animation/test/css-transitions/test_animation-currenttime.html
@@ -31,34 +31,25 @@
 const ANIM_DELAY_MS = 1000000; // 1000s
 const ANIM_DUR_MS = 1000000; // 1000s
 
 /**
  * These helpers get the value that the currentTime needs to be set to, to put
  * an animation that uses the above ANIM_DELAY_MS and ANIM_DUR_MS values into
  * the middle of various phases or points through the active duration.
  */
-function currentTimeForBeforePhase() {
-  return ANIM_DELAY_MS / 2;
-}
-function currentTimeForActivePhase() {
-  return ANIM_DELAY_MS + ANIM_DUR_MS / 2;
-}
-function currentTimeForAfterPhase() {
-  return ANIM_DELAY_MS + ANIM_DUR_MS + ANIM_DELAY_MS / 2;
-}
-function currentTimeForStartOfActiveInterval() {
+const currentTimeForStartOfActiveInterval = () => {
   return ANIM_DELAY_MS;
-}
-function currentTimeForFiftyPercentThroughActiveInterval() {
+};
+const currentTimeForFiftyPercentThroughActiveInterval = () => {
   return ANIM_DELAY_MS + ANIM_DUR_MS * 0.5;
-}
-function currentTimeForEndOfActiveInterval() {
+};
+const currentTimeForEndOfActiveInterval = () => {
   return ANIM_DELAY_MS + ANIM_DUR_MS;
-}
+};
 
 
 // Expected computed 'margin-left' values at points during the active interval:
 // When we assert_between_inclusive using these values we could in theory cause
 // intermittent failure due to very long delays between paints, but since the
 // active duration is 1000s long, a delay would need to be around 100s to cause
 // that. If that's happening then there are likely other issues that should be
 // fixed, so a failure to make us look into that seems like a good thing.
@@ -69,241 +60,214 @@ const END_POSITION = 200;
 
 
 // The terms used for the naming of the following helper functions refer to
 // terms used in the Web Animations specification for specific phases of an
 // animation. The terms can be found here:
 //
 //   http://drafts.csswg.org/web-animations/#animation-effect-phases-and-states
 
-// Called when currentTime is set to zero (the beginning of the start delay).
-function checkStateOnSettingCurrentTimeToZero(animation)
-{
-  // We don't test animation.currentTime since our caller just set it.
-
-  assert_equals(animation.playState, 'running',
-    'Animation.playState should be "running" at the start of ' +
-    'the start delay');
-
-  assert_equals(animation.effect.target.style.animationPlayState, 'running',
-    'Animation.effect.target.style.animationPlayState should be ' +
-    '"running" at the start of the start delay');
-
-  var div = animation.effect.target;
-  var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
-  assert_equals(marginLeft, UNANIMATED_POSITION,
-                'the computed value of margin-left should be unaffected ' +
-                'at the beginning of the start delay');
-}
-
 // Called when the ready Promise's callbacks should happen
-function checkStateOnReadyPromiseResolved(animation)
-{
+const checkStateOnReadyPromiseResolved = animation => {
   // the 0.0001 here is for rounding error
   assert_less_than_equal(animation.currentTime,
     animation.timeline.currentTime - animation.startTime + 0.0001,
     'Animation.currentTime should be less than the local time ' +
     'equivalent of the timeline\'s currentTime on the first paint tick ' +
     'after animation creation');
 
   assert_equals(animation.playState, 'running',
     'Animation.playState should be "running" on the first paint ' +
     'tick after animation creation');
 
   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, INITIAL_POSITION,
                 'the computed value of margin-left should be unaffected ' +
                 'by an animation with a delay on ready Promise resolve');
-}
+};
 
 // Called when currentTime is set to the time the active interval starts.
-function checkStateAtActiveIntervalStartTime(animation)
-{
+const checkStateAtActiveIntervalStartTime = animation => {
   // We don't test animation.currentTime since our caller just set it.
 
   assert_equals(animation.playState, 'running',
     'Animation.playState should be "running" at the start of ' +
     'the active interval');
 
   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION,
     'the computed value of margin-left should be close to the value at the ' +
     'beginning of the animation');
-}
+};
 
-function checkStateAtFiftyPctOfActiveInterval(animation)
-{
+const checkStateAtFiftyPctOfActiveInterval = animation => {
   // We don't test animation.currentTime since our caller just set it.
 
   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, FIFTY_PCT_POSITION,
     'the computed value of margin-left should be half way through the ' +
     'animation at the midpoint of the active interval');
-}
+};
 
 // Called when currentTime is set to the time the active interval ends.
-function checkStateAtActiveIntervalEndTime(animation)
-{
+const checkStateAtActiveIntervalEndTime = animation => {
   // We don't test animation.currentTime since our caller just set it.
 
   assert_equals(animation.playState, 'finished',
     'Animation.playState should be "finished" at the end of ' +
     'the active interval');
 
   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, END_POSITION,
     'the computed value of margin-left should be the final transitioned-to ' +
     'value at the end of the active duration');
-}
+};
 
-test(function(t)
-{
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
   assert_equals(animation.currentTime, 0, 'currentTime should be zero');
 }, 'currentTime of a newly created transition is zero');
 
-
-test(function(t)
-{
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
 
   // So that animation is running instead of paused when we set currentTime:
   animation.startTime = animation.timeline.currentTime;
 
   animation.currentTime = 10;
   assert_equals(animation.currentTime, 10,
     'Check setting of currentTime actually works');
 }, 'Sanity test to check round-tripping assigning to new animation\'s ' +
    'currentTime');
 
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, 'transitionend');
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     checkStateOnReadyPromiseResolved(animation);
 
     animation.currentTime = currentTimeForStartOfActiveInterval();
     checkStateAtActiveIntervalStartTime(animation);
 
     animation.currentTime = currentTimeForFiftyPercentThroughActiveInterval();
     checkStateAtFiftyPctOfActiveInterval(animation);
 
     animation.currentTime = currentTimeForEndOfActiveInterval();
     return eventWatcher.wait_for('transitionend');
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     checkStateAtActiveIntervalEndTime(animation);
-  })).catch(t.step_func(function(reason) {
+  })).catch(t.step_func(reason => {
     assert_unreached(reason);
-  })).then(function() {
+  })).then(() => {
     t.done();
   });
 }, 'Skipping forward through transition');
 
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, 'transitionend');
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
 
   // Unlike in the case of CSS animations, we cannot skip to the end and skip
   // backwards since when we reach the end the transition effect is removed and
   // changes to the Animation object no longer affect the element. For
   // this reason we only skip forwards as far as the 50% through point.
 
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     animation.currentTime = currentTimeForFiftyPercentThroughActiveInterval();
     checkStateAtFiftyPctOfActiveInterval(animation);
 
     animation.currentTime = currentTimeForStartOfActiveInterval();
 
     // Despite going backwards from being in the active interval to being
     // before it, we now expect a 'transitionend' event because the transition
     // should go from being active to inactive.
     //
     // Calling checkStateAtActiveIntervalStartTime will check computed style,
     // causing computed style to be updated and the 'transitionend' event to
     // be dispatched synchronously. We need to call wait_for first
     // otherwise eventWatcher will assert that the event was unexpected.
-    eventWatcher.wait_for('transitionend').then(function() {
+    eventWatcher.wait_for('transitionend').then(() => {
       t.done();
     });
     checkStateAtActiveIntervalStartTime(animation);
   }));
 }, 'Skipping backwards through transition');
 
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     var exception;
     try {
       animation.currentTime = null;
     } catch (e) {
       exception = e;
     }
     assert_equals(exception.name, 'TypeError',
       'Expect TypeError exception on trying to set ' +
       'Animation.currentTime to null');
-  })).catch(t.step_func(function(reason) {
+  })).catch(t.step_func(reason => {
     assert_unreached(reason);
-  })).then(function() {
+  })).then(() => {
     t.done();
   });
 }, 'Setting currentTime to null');
 
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
   var pauseTime;
 
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     assert_not_equals(animation.currentTime, null,
       'Animation.currentTime not null on ready Promise resolve');
     animation.pause();
     return animation.ready;
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     pauseTime = animation.currentTime;
     return waitForFrame();
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     assert_equals(animation.currentTime, pauseTime,
       'Animation.currentTime is unchanged after pausing');
-  })).catch(t.step_func(function(reason) {
+  })).catch(t.step_func(reason => {
     assert_unreached(reason);
-  })).then(function() {
+  })).then(() => {
     t.done();
   });
 }, 'Animation.currentTime after pausing');
 
     </script>
   </body>
 </html>
--- a/dom/animation/test/css-transitions/test_animation-finished.html
+++ b/dom/animation/test/css-transitions/test_animation-finished.html
@@ -15,45 +15,45 @@
 <div id="log"></div>
 <script>
 
 'use strict';
 
 const ANIM_DELAY_MS = 1000000; // 1000s
 const ANIM_DUR_MS = 1000000; // 1000s
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
 
   animation.finish();
 
-  animation.finished.then(t.step_func(function() {
+  animation.finished.then(t.step_func(() => {
     animation.play();
     assert_equals(animation.currentTime, 0,
                   'Replaying a finished transition should reset its ' +
                   'currentTime');
     t.done();
   }));
 }, 'Test restarting a finished transition');
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(function() {
+  animation.ready.then(() => {
     animation.playbackRate = -1;
     return animation.finished;
-  }).then(t.step_func(function() {
+  }).then(t.step_func(() => {
     animation.play();
     // FIXME: once animation.effect.computedTiming.endTime is available (bug
     // 1108055) we should use that here.
     assert_equals(animation.currentTime, ANIM_DELAY_MS + ANIM_DUR_MS,
                   'Replaying a finished reversed transition should reset ' +
                   'its currentTime to the end of the effect');
     t.done();
   }));
--- a/dom/animation/test/css-transitions/test_animation-pausing.html
+++ b/dom/animation/test/css-transitions/test_animation-pausing.html
@@ -3,47 +3,47 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t);
   var cs = getComputedStyle(div);
 
   div.style.marginLeft = '0px';
   cs.marginLeft; // Flush style to set up transition start point
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '10000px';
   cs.marginLeft;
 
   var animation = div.getAnimations()[0];
   var previousProgress = animation.effect.getComputedTiming().progress;
   assert_equals(previousProgress, 0, 'Initial value of progress is zero');
 
-  animation.ready.then(waitForNextFrame).then(t.step_func(function() {
+  animation.ready.then(waitForNextFrame).then(t.step_func(() => {
     assert_greater_than(animation.effect.getComputedTiming().progress,
                         previousProgress,
                         'Iteration progress is initially increasing');
     animation.pause();
     return animation.ready;
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     previousProgress = animation.effect.getComputedTiming().progress;
     return waitForNextFrame();
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     assert_equals(animation.effect.getComputedTiming().progress,
                   previousProgress,
                   'Iteration progress does not increase after calling pause()');
     previousProgress = animation.effect.getComputedTiming().progress;
     animation.play();
     return animation.ready.then(waitForNextFrame);
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     assert_greater_than(animation.effect.getComputedTiming().progress,
                         previousProgress,
                         'Iteration progress increases after calling play()');
     t.done();
   }));
 }, 'pause() and play() a transition');
 
 </script>
--- a/dom/animation/test/css-transitions/test_animation-ready.html
+++ b/dom/animation/test/css-transitions/test_animation-ready.html
@@ -3,92 +3,92 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t);
   div.style.transform = 'translate(0px)';
   getComputedStyle(div).transform;
   div.style.transition = 'transform 100s';
   div.style.transform = 'translate(10px)';
   getComputedStyle(div).transform;
 
   var animation = div.getAnimations()[0];
   var originalReadyPromise = animation.ready;
 
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     assert_equals(animation.ready, originalReadyPromise,
                   'Ready promise is the same object when playing completes');
     animation.pause();
     assert_not_equals(animation.ready, originalReadyPromise,
                       'Ready promise object identity differs when pausing');
     t.done();
   }));
 }, 'A new ready promise is created each time play() is called'
    + ' the animation property');
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t);
 
   // Set up pending transition
   div.style.transform = 'translate(0px)';
   getComputedStyle(div).transform;
   div.style.transition = 'transform 100s';
   div.style.transform = 'translate(10px)';
   getComputedStyle(div).transform;
 
   var animation = div.getAnimations()[0];
   assert_true(animation.pending, 'Animation is initially pending');
 
   // Set up listeners on ready promise
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     assert_unreached('ready promise was fulfilled');
-  })).catch(t.step_func(function(err) {
+  })).catch(t.step_func(err => {
     assert_equals(err.name, 'AbortError',
                   'ready promise is rejected with AbortError');
     assert_equals(animation.playState, 'idle',
                   'Animation is idle after transition was cancelled');
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     t.done();
   }));
 
   // Now remove transform from transition-property and flush styles
   div.style.transitionProperty = 'none';
   getComputedStyle(div).transitionProperty;
 
 }, 'ready promise is rejected when a transition is cancelled by updating'
    + ' transition-property');
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t);
 
   // Set up pending transition
   div.style.marginLeft = '0px';
   getComputedStyle(div).marginLeft;
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '100px';
   getComputedStyle(div).marginLeft;
 
   var animation = div.getAnimations()[0];
   assert_true(animation.pending, 'Animation is initially pending');
 
   // Set up listeners on ready promise
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     assert_unreached('ready promise was fulfilled');
-  })).catch(t.step_func(function(err) {
+  })).catch(t.step_func(err => {
     assert_equals(err.name, 'AbortError',
                   'ready promise is rejected with AbortError');
     assert_equals(animation.playState, 'idle',
                   'Animation is idle after transition was cancelled');
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     t.done();
   }));
 
   // Now update the transition to animate to something not-interpolable
   div.style.marginLeft = 'auto';
   getComputedStyle(div).marginLeft;
 
 }, 'ready promise is rejected when a transition is cancelled by changing'
--- a/dom/animation/test/css-transitions/test_animation-starttime.html
+++ b/dom/animation/test/css-transitions/test_animation-starttime.html
@@ -31,34 +31,25 @@
 const ANIM_DELAY_MS = 1000000; // 1000s
 const ANIM_DUR_MS = 1000000; // 1000s
 
 /**
  * These helpers get the value that the startTime needs to be set to, to put an
  * animation that uses the above ANIM_DELAY_MS and ANIM_DUR_MS values into the
  * middle of various phases or points through the active duration.
  */
-function startTimeForBeforePhase(timeline) {
-  return timeline.currentTime - ANIM_DELAY_MS / 2;
-}
-function startTimeForActivePhase(timeline) {
-  return timeline.currentTime - ANIM_DELAY_MS - ANIM_DUR_MS / 2;
-}
-function startTimeForAfterPhase(timeline) {
-  return timeline.currentTime - ANIM_DELAY_MS - ANIM_DUR_MS - ANIM_DELAY_MS / 2;
-}
-function startTimeForStartOfActiveInterval(timeline) {
+const startTimeForStartOfActiveInterval = timeline => {
   return timeline.currentTime - ANIM_DELAY_MS;
-}
-function startTimeForFiftyPercentThroughActiveInterval(timeline) {
+};
+const startTimeForFiftyPercentThroughActiveInterval = timeline => {
   return timeline.currentTime - ANIM_DELAY_MS - ANIM_DUR_MS * 0.5;
-}
-function startTimeForEndOfActiveInterval(timeline) {
+};
+const startTimeForEndOfActiveInterval = timeline => {
   return timeline.currentTime - ANIM_DELAY_MS - ANIM_DUR_MS;
-}
+};
 
 
 // Expected computed 'margin-left' values at points during the active interval:
 // When we assert_between_inclusive using these values we could in theory cause
 // intermittent failure due to very long delays between paints, but since the
 // active duration is 1000s long, a delay would need to be around 100s to cause
 // that. If that's happening then there are likely other issues that should be
 // fixed, so a failure to make us look into that seems like a good thing.
@@ -72,134 +63,128 @@ const END_POSITION = 200;
 // animation. The terms can be found here:
 //
 //   https://drafts.csswg.org/web-animations/#animation-effect-phases-and-states
 //
 // Note the distinction between the "animation start time" which occurs before
 // the start delay and the start of the active interval which occurs after it.
 
 // Called when the ready Promise's callbacks should happen
-function checkStateOnReadyPromiseResolved(animation)
-{
+const checkStateOnReadyPromiseResolved = animation => {
   assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
     'Animation.startTime should be less than the timeline\'s ' +
     'currentTime on the first paint tick after animation creation');
 
   assert_equals(animation.playState, 'running',
     'Animation.playState should be "running" on the first paint ' +
     'tick after animation creation');
 
   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, INITIAL_POSITION,
                 'the computed value of margin-left should be unaffected ' +
                 'by an animation with a delay on ready Promise resolve');
-}
+};
 
 // Called when startTime is set to the time the active interval starts.
-function checkStateAtActiveIntervalStartTime(animation)
-{
+const checkStateAtActiveIntervalStartTime = animation => {
   // We don't test animation.startTime since our caller just set it.
 
   assert_equals(animation.playState, 'running',
     'Animation.playState should be "running" at the start of ' +
     'the active interval');
 
   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION,
     'the computed value of margin-left should be close to the value at the ' +
     'beginning of the animation');
-}
+};
 
-function checkStateAtFiftyPctOfActiveInterval(animation)
-{
+const checkStateAtFiftyPctOfActiveInterval = animation => {
   // We don't test animation.startTime since our caller just set it.
 
   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, FIFTY_PCT_POSITION,
     'the computed value of margin-left should be half way through the ' +
     'animation at the midpoint of the active interval');
-}
+};
 
 // Called when startTime is set to the time the active interval ends.
-function checkStateAtActiveIntervalEndTime(animation)
-{
+const checkStateAtActiveIntervalEndTime = animation => {
   // We don't test animation.startTime since our caller just set it.
 
   assert_equals(animation.playState, 'finished',
     'Animation.playState should be "finished" at the end of ' +
     'the active interval');
 
   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, END_POSITION,
     'the computed value of margin-left should be the final transitioned-to ' +
     'value at the end of the active duration');
-}
+};
 
-test(function(t)
-{
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'startTime of a newly created transition is unresolved');
 
 
-test(function(t)
-{
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
   var currentTime = animation.timeline.currentTime;
   animation.startTime = currentTime;
   assert_times_equal(animation.startTime, currentTime,
     'Check setting of startTime actually works');
 }, 'Sanity test to check round-tripping assigning to new animation\'s ' +
    'startTime');
 
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, 'transitionend');
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     checkStateOnReadyPromiseResolved(animation);
 
     animation.startTime = startTimeForStartOfActiveInterval(animation.timeline);
     checkStateAtActiveIntervalStartTime(animation);
 
     animation.startTime =
       startTimeForFiftyPercentThroughActiveInterval(animation.timeline);
     checkStateAtFiftyPctOfActiveInterval(animation);
 
     animation.startTime = startTimeForEndOfActiveInterval(animation.timeline);
     return eventWatcher.wait_for('transitionend');
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     checkStateAtActiveIntervalEndTime(animation);
-  })).catch(t.step_func(function(reason) {
+  })).catch(t.step_func(reason => {
     assert_unreached(reason);
-  })).then(function() {
+  })).then(() => {
     t.done();
   });
 }, 'Skipping forward through animation');
 
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, 'transitionend');
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
 
@@ -217,70 +202,70 @@ test(function(t) {
   // Despite going backwards from being in the active interval to being before
   // it, we now expect an 'animationend' event because the animation should go
   // from being active to inactive.
   //
   // Calling checkStateAtActiveIntervalStartTime will check computed style,
   // causing computed style to be updated and the 'transitionend' event to
   // be dispatched synchronously. We need to call waitForEvent first
   // otherwise eventWatcher will assert that the event was unexpected.
-  eventWatcher.wait_for('transitionend').then(function() {
+  eventWatcher.wait_for('transitionend').then(() => {
     t.done();
   });
   checkStateAtActiveIntervalStartTime(animation);
 }, 'Skipping backwards through transition');
 
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
 
   var storedCurrentTime;
 
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     storedCurrentTime = animation.currentTime;
     animation.startTime = null;
     return animation.ready;
-  })).catch(t.step_func(function(reason) {
+  })).catch(t.step_func(reason => {
     assert_unreached(reason);
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     assert_equals(animation.currentTime, storedCurrentTime,
       'Test that hold time is correct');
     t.done();
   }));
 }, 'Setting startTime to null');
 
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     var savedStartTime = animation.startTime;
 
     assert_not_equals(animation.startTime, null,
       'Animation.startTime not null on ready Promise resolve');
 
     animation.pause();
     return animation.ready;
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     assert_equals(animation.startTime, null,
       'Animation.startTime is null after paused');
     assert_equals(animation.playState, 'paused',
       'Animation.playState is "paused" after pause() call');
-  })).catch(t.step_func(function(reason) {
+  })).catch(t.step_func(reason => {
     assert_unreached(reason);
-  })).then(function() {
+  })).then(() => {
     t.done();
   });
 }, 'Animation.startTime after paused');
 
     </script>
   </body>
 </html>
--- a/dom/animation/test/css-transitions/test_csstransition-transitionproperty.html
+++ b/dom/animation/test/css-transitions/test_csstransition-transitionproperty.html
@@ -3,17 +3,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
 
   // Add a transition
   div.style.left = '0px';
   getComputedStyle(div).transitionProperty;
   div.style.transition = 'all 100s';
   div.style.left = '100px';
 
--- a/dom/animation/test/css-transitions/test_document-get-animations.html
+++ b/dom/animation/test/css-transitions/test_document-get-animations.html
@@ -3,23 +3,23 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-test(function(t) {
+test(t => {
   assert_equals(document.getAnimations().length, 0,
     'getAnimations returns an empty sequence for a document'
     + ' with no animations');
 }, 'getAnimations for non-animated content');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
 
   // Add a couple of transitions
   div.style.left = '0px';
   div.style.top = '0px';
   getComputedStyle(div).transitionProperty;
 
   div.style.transition = 'all 100s';
@@ -29,17 +29,17 @@ test(function(t) {
                 'getAnimations returns two running CSS Transitions');
 
   // Remove both
   div.style.transitionProperty = 'none';
   assert_equals(document.getAnimations().length, 0,
                 'getAnimations returns no running CSS Transitions');
 }, 'getAnimations for CSS Transitions');
 
-test(function(t) {
+test(t => {
   addStyle(t, { '.init::after': 'content: ""; width: 0px; ' +
                                 'transition: all 100s;',
                 '.init::before': 'content: ""; width: 0px; ' +
                                  'transition: all 10s;',
                 '.change::after': 'width: 100px;',
                 '.change::before': 'width: 100px;' });
   // create two divs with these arrangement:
   //       parent
@@ -72,24 +72,24 @@ test(function(t) {
                 'The animation targeting the ::before element comes second');
   assert_equals(anims[2].effect.target.type, '::after',
                 'The animation targeting the ::after element comes third');
   assert_equals(anims[3].effect.target, child,
                 'The animation targeting the child element comes last');
 }, 'CSS Transitions targetting (pseudo-)elements should have correct order ' +
    'after sorting');
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
   flushComputedStyle(div);
 
   div.style.left = '100px';
   var animations = div.getAnimations();
   assert_equals(animations.length, 1, 'Got transition');
-  animations[0].finished.then(t.step_func(function() {
+  animations[0].finished.then(t.step_func(() => {
     assert_equals(document.getAnimations().length, 0,
                   'No animations returned');
     t.done();
   }));
 }, 'Transitions are not returned after they have finished');
 
 </script>
 </body>
--- a/dom/animation/test/css-transitions/test_effect-target.html
+++ b/dom/animation/test/css-transitions/test_effect-target.html
@@ -3,45 +3,45 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
 
   div.style.left = '0px';
   getComputedStyle(div).transitionProperty;
   div.style.transition = 'left 100s';
   div.style.left = '100px';
 
   var animation = div.getAnimations()[0];
   assert_equals(animation.effect.target, div,
     'Animation.target is the animatable div');
 }, 'Returned CSS transitions have the correct Animation.target');
 
-test(function(t) {
+test(t => {
   addStyle(t, { '.init::after': 'content: ""; width: 0px; height: 0px; ' +
                                 'transition: all 10s;',
                 '.change::after': 'width: 100px; height: 100px;' });
   var div = addDiv(t, { class: 'init' });
   flushComputedStyle(div);
   div.classList.add('change');
 
   var anims = document.getAnimations();
   assert_equals(anims.length, 2,
                 'Got transitions running on ::after pseudo element');
   assert_equals(anims[0].effect.target, anims[1].effect.target,
                 'Both transitions return the same target object');
 }, 'effect.target should return the same CSSPseudoElement object each time');
 
-test(function(t) {
+test(t => {
   addStyle(t, { '.init::after': 'content: ""; width: 0px; transition: all 10s;',
                 '.change::after': 'width: 100px;' });
   var div = addDiv(t, { class: 'init' });
   flushComputedStyle(div);
   div.classList.add('change');
   var pseudoTarget = document.getAnimations()[0].effect.target;
   var effect = new KeyframeEffect(pseudoTarget,
                                   { background: ["blue", "red"] },
--- a/dom/animation/test/css-transitions/test_element-get-animations.html
+++ b/dom/animation/test/css-transitions/test_element-get-animations.html
@@ -3,113 +3,113 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t);
 
   // FIXME: This test does too many things. It should be split up.
 
   // Add a couple of transitions
   div.style.left = '0px';
   div.style.top = '0px';
   getComputedStyle(div).transitionProperty;
 
   div.style.transition = 'all 100s';
   div.style.left = '100px';
   div.style.top = '100px';
 
   var animations = div.getAnimations();
   assert_equals(animations.length, 2,
     'getAnimations() returns one Animation per transitioning property');
-  waitForAllAnimations(animations).then(t.step_func(function() {
+  waitForAllAnimations(animations).then(t.step_func(() => {
     var startTime = animations[0].startTime;
     assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
                 'CSS transitions have sensible start times');
     assert_equals(animations[0].startTime, animations[1].startTime,
       'CSS transitions started together have the same start time');
     // Wait a moment then add a third transition
     return waitForFrame();
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     div.style.backgroundColor = 'green';
     animations = div.getAnimations();
     assert_equals(animations.length, 3,
       'getAnimations returns Animations for all running CSS Transitions');
     return waitForAllAnimations(animations);
-  })).then(t.step_func(function() {
+  })).then(t.step_func(() => {
     assert_less_than(animations[1].startTime, animations[2].startTime,
       'Animation for additional CSS transition starts after the original'
       + ' transitions and appears later in the list');
     t.done();
   }));
 }, 'getAnimations for CSS Transitions');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, { style: 'left: 0px; transition: all 100s' });
 
   flushComputedStyle(div);
   div.style.left = '100px';
 
   assert_class_string(div.getAnimations()[0], 'CSSTransition',
                       'Interface of returned animation is CSSTransition');
 }, 'getAnimations returns CSSTransition objects for CSS Transitions');
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t);
 
   // Set up event listener
-  div.addEventListener('transitionend', t.step_func(function() {
+  div.addEventListener('transitionend', t.step_func(() => {
     assert_equals(div.getAnimations().length, 0,
       'getAnimations does not return finished CSS Transitions');
     t.done();
   }));
 
   // Add a very short transition
   div.style.left = '0px';
   getComputedStyle(div).left;
 
   div.style.transition = 'all 0.01s';
   div.style.left = '100px';
   getComputedStyle(div).left;
 }, 'getAnimations for CSS Transitions that have finished');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
 
   // Try to transition non-animatable property animation-duration
   div.style.animationDuration = '10s';
   getComputedStyle(div).animationDuration;
 
   div.style.transition = 'all 100s';
   div.style.animationDuration = '100s';
 
   assert_equals(div.getAnimations().length, 0,
     'getAnimations returns an empty sequence for a transition'
     + ' of a non-animatable property');
 }, 'getAnimations for transition on non-animatable property');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
 
   div.style.setProperty('-vendor-unsupported', '0px', '');
   getComputedStyle(div).transitionProperty;
   div.style.transition = 'all 100s';
   div.style.setProperty('-vendor-unsupported', '100px', '');
 
   assert_equals(div.getAnimations().length, 0,
     'getAnimations returns an empty sequence for a transition'
     + ' of an unsupported property');
 }, 'getAnimations for transition on unsupported property');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, { style: 'transform: translate(0px); ' +
                                'opacity: 0; ' +
                                'border-width: 0px; ' + // Shorthand
                                'border-style: solid' });
   getComputedStyle(div).transform;
 
   div.style.transition = 'all 100s';
   div.style.transform = 'translate(100px)';
@@ -122,17 +122,17 @@ test(function(t) {
   assert_equals(animations[0].transitionProperty, 'border-bottom-width');
   assert_equals(animations[1].transitionProperty, 'border-left-width');
   assert_equals(animations[2].transitionProperty, 'border-right-width');
   assert_equals(animations[3].transitionProperty, 'border-top-width');
   assert_equals(animations[4].transitionProperty, 'opacity');
   assert_equals(animations[5].transitionProperty, 'transform');
 }, 'getAnimations sorts simultaneous transitions by name');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, { style: 'transform: translate(0px); ' +
                                'opacity: 0' });
   getComputedStyle(div).transform;
 
   div.style.transition = 'all 100s';
   div.style.transform = 'translate(100px)';
   assert_equals(div.getAnimations().length, 1,
                 'Initially there is only one (transform) transition');
--- a/dom/animation/test/css-transitions/test_event-dispatch.html
+++ b/dom/animation/test/css-transitions/test_event-dispatch.html
@@ -34,33 +34,33 @@ function TransitionEventHandler(target) 
 
 TransitionEventHandler.prototype.clear = () => {
   this.transitionrun    = undefined;
   this.transitionstart  = undefined;
   this.transitionend    = undefined;
   this.transitioncancel = undefined;
 };
 
-function setupTransition(t, transitionStyle) {
+const setupTransition = (t, transitionStyle) => {
   const div = addDiv(t, { style: 'transition: ' + transitionStyle });
   // Note that this TransitionEventHandler should be created before EventWatcher
   // to capture all events in the handler prior to the EventWatcher since
   // testharness.js proceeds when the EventWatcher received watching events.
   const handler = new TransitionEventHandler(div);
   const watcher = new EventWatcher(t, div, [ 'transitionrun',
                                            'transitionstart',
                                            'transitionend',
                                            'transitioncancel' ]);
   flushComputedStyle(div);
 
   div.style.marginLeft = '100px';
   const transition = div.getAnimations()[0];
 
   return { transition, watcher, div, handler };
-}
+};
 
 // On the next frame (i.e. when events are queued), whether or not the
 // transition is still pending depends on the implementation.
 promise_test(t => {
   const { transition, watcher } =
     setupTransition(t, 'margin-left 100s 100s');
   return watcher.wait_for('transitionrun').then(evt => {
     assert_equals(evt.elapsedTime, 0.0);
--- a/dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html
+++ b/dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html
@@ -8,30 +8,30 @@
   --var-100px: 100px;
 }
 </style>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-function getKeyframes(e) {
+const getKeyframes = e => {
   return e.getAnimations()[0].effect.getKeyframes();
-}
+};
 
-function assert_frames_equal(a, b, name) {
+const assert_frames_equal = (a, b, name) => {
   assert_equals(Object.keys(a).sort().toString(),
                 Object.keys(b).sort().toString(),
                 "properties on " + name);
   for (var p in a) {
     assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
   }
-}
+};
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
 
   div.style.left = '0px';
   getComputedStyle(div).transitionProperty;
   div.style.transition = 'left 100s';
   div.style.left = '100px';
 
   var frames = getKeyframes(div);
@@ -46,17 +46,17 @@ test(function(t) {
   ];
 
   for (var i = 0; i < frames.length; i++) {
     assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
   }
 }, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
    + ' transition');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
 
   div.style.left = '0px';
   getComputedStyle(div).transitionProperty;
   div.style.transition = 'left 100s steps(2,end)';
   div.style.left = '100px';
 
   var frames = getKeyframes(div);
@@ -71,17 +71,17 @@ test(function(t) {
   ];
 
   for (var i = 0; i < frames.length; i++) {
     assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
   }
 }, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
    + ' transition with a non-default easing function');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
   div.style.left = '0px';
   getComputedStyle(div).transitionProperty;
   div.style.transition = 'left 100s';
   div.style.left = 'var(--var-100px)';
 
   var frames = getKeyframes(div);
 
--- a/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
+++ b/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
@@ -17,17 +17,17 @@
   opacity: 1;
 }
 </style>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, { class: 'init' });
   flushComputedStyle(div);
   div.classList.add('change');
 
   // Sanity checks
   assert_equals(document.getAnimations().length, 3,
                 'Got expected number of animations on document');
   var pseudoTarget = document.getAnimations()[0].effect.target;
--- a/dom/animation/test/css-transitions/test_setting-effect.html
+++ b/dom/animation/test/css-transitions/test_setting-effect.html
@@ -3,82 +3,82 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src='../testcommon.js'></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t);
   var watcher = new EventWatcher(t, div, [ 'transitionend',
                                            'transitioncancel' ]);
   div.style.left = '0px';
 
   div.style.transition = 'left 100s';
   flushComputedStyle(div);
   div.style.left = '100px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     transition.currentTime = 50 * MS_PER_SEC;
     transition.effect = null;
     assert_equals(transition.transitionProperty, 'left');
     assert_equals(transition.playState, 'finished');
     assert_equals(getComputedStyle(div).left, '100px');
     return watcher.wait_for('transitionend');
   });
 }, 'Test for removing a transition effect');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t);
   var watcher = new EventWatcher(t, div, [ 'transitionend',
                                            'transitioncancel' ]);
   div.style.left = '0px';
 
   div.style.transition = 'left 100s';
   flushComputedStyle(div);
   div.style.left = '100px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     transition.currentTime = 50 * MS_PER_SEC;
     transition.effect = new KeyframeEffect(div,
                                            { marginLeft: [ '0px' , '100px'] },
                                            100 * MS_PER_SEC);
     assert_equals(transition.transitionProperty, 'left');
     assert_equals(transition.playState, 'running');
     assert_equals(getComputedStyle(div).left, '100px');
     assert_equals(getComputedStyle(div).marginLeft, '50px');
   });
 }, 'Test for replacing the transition effect by a new keyframe effect');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t);
   var watcher = new EventWatcher(t, div, [ 'transitionend',
                                            'transitioncancel' ]);
   div.style.left = '0px';
   div.style.width = '0px';
 
   div.style.transition = 'left 100s';
   flushComputedStyle(div);
   div.style.left = '100px';
 
   var transition = div.getAnimations()[0];
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     transition.currentTime = 50 * MS_PER_SEC;
     transition.effect = new KeyframeEffect(div,
                                            { marginLeft: [ '0px' , '100px'] },
                                            20 * MS_PER_SEC);
     assert_equals(transition.playState, 'finished');
   });
 }, 'Test for setting a new keyframe effect with a shorter duration');
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t);
   var watcher = new EventWatcher(t, div, [ 'transitionend',
                                            'transitioncancel' ]);
   div.style.left = '0px';
   div.style.width = '0px';
 
   div.style.transition = 'left 100s';
   flushComputedStyle(div);
@@ -88,15 +88,15 @@ promise_test(function(t) {
   assert_true(transition.pending);
 
   transition.effect = new KeyframeEffect(div,
                                          { marginLeft: [ '0px' , '100px'] },
                                          100 * MS_PER_SEC);
   assert_equals(transition.transitionProperty, 'left');
   assert_true(transition.pending);
 
-  return transition.ready.then(function() {
+  return transition.ready.then(() => {
     assert_false(transition.pending);
   });
 }, 'Test for setting a new keyframe effect to a pending transition');
 
 </script>
 </body>