From 58054bc030093c42882fd8125725aee3c53a77e9 Mon Sep 17 00:00:00 2001
From: Brian Birtles <birtles@gmail.com>
Date: Thu, 16 Aug 2018 14:41:01 +0900
Subject: [PATCH] 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.

--HG--
extra : rebase_source : bd4fdb9368d55b120c839330dbd90a0a89464370
---
 .../test_animation-cancel.html                |  60 +++++-----
 .../test_animation-computed-timing.html       |  59 ++++++----
 .../test_animation-currenttime.html           | 104 ++++++------------
 .../test_animation-finished.html              |  10 +-
 .../test_animation-pausing.html               |  10 +-
 .../css-transitions/test_animation-ready.html |  20 ++--
 .../test_animation-starttime.html             |  79 ++++++-------
 ...test_csstransition-transitionproperty.html |   2 +-
 .../test_document-get-animations.html         |  10 +-
 .../css-transitions/test_effect-target.html   |   6 +-
 .../test_element-get-animations.html          |  22 ++--
 .../css-transitions/test_event-dispatch.html  |   4 +-
 .../test_keyframeeffect-getkeyframes.html     |  14 +--
 .../test_pseudoElement-get-animations.html    |   2 +-
 .../css-transitions/test_setting-effect.html  |  16 +--
 15 files changed, 190 insertions(+), 228 deletions(-)

diff --git a/dom/animation/test/css-transitions/test_animation-cancel.html b/dom/animation/test/css-transitions/test_animation-cancel.html
index 9a872154cd89..6787174fead1 100644
--- a/dom/animation/test/css-transitions/test_animation-cancel.html
+++ b/dom/animation/test/css-transitions/test_animation-cancel.html
@@ -8,7 +8,7 @@
 <script>
 'use strict';
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
@@ -16,7 +16,7 @@ promise_test(function(t) {
   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();
@@ -25,7 +25,7 @@ promise_test(function(t) {
   });
 }, '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);
 
@@ -33,7 +33,7 @@ promise_test(function(t) {
   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');
@@ -41,13 +41,13 @@ promise_test(function(t) {
     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);
 
@@ -55,7 +55,7 @@ promise_test(function(t) {
   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',
@@ -64,13 +64,13 @@ promise_test(function(t) {
     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);
 
@@ -94,7 +94,7 @@ test(function(t) {
 }, '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);
 
@@ -102,17 +102,17 @@ promise_test(function(t) {
   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);
@@ -124,17 +124,17 @@ promise_test(function(t) {
   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);
 
@@ -142,20 +142,20 @@ promise_test(function(t) {
   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);
 
@@ -163,18 +163,18 @@ promise_test(function(t) {
   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);
 
@@ -182,18 +182,18 @@ promise_test(function(t) {
   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);
 
@@ -201,19 +201,19 @@ promise_test(function(t) {
   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);
 
@@ -221,12 +221,12 @@ promise_test(function(t) {
   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');
diff --git a/dom/animation/test/css-transitions/test_animation-computed-timing.html b/dom/animation/test/css-transitions/test_animation-computed-timing.html
index 200179ba3a98..d7146c6ad1df 100644
--- a/dom/animation/test/css-transitions/test_animation-computed-timing.html
+++ b/dom/animation/test/css-transitions/test_animation-computed-timing.html
@@ -19,7 +19,8 @@
 // --------------------
 // delay
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
@@ -31,7 +32,7 @@ test(function(t) {
                 '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);
@@ -42,7 +43,7 @@ test(function(t) {
                 '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);
@@ -57,7 +58,8 @@ test(function(t) {
 // --------------------
 // endDelay
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
@@ -72,7 +74,8 @@ test(function(t) {
 // --------------------
 // fill
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
@@ -87,7 +90,8 @@ test(function(t) {
 // --------------------
 // iterationStart
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
@@ -102,7 +106,8 @@ test(function(t) {
 // --------------------
 // iterations
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
@@ -117,7 +122,8 @@ test(function(t) {
 // --------------------
 // duration
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
@@ -132,7 +138,8 @@ test(function(t) {
 // --------------------
 // direction
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
@@ -147,7 +154,8 @@ test(function(t) {
 // --------------------
 // easing
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
@@ -163,7 +171,8 @@ test(function(t) {
 // 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);
@@ -180,7 +189,8 @@ test(function(t) {
 // 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);
@@ -195,7 +205,8 @@ test(function(t) {
 // --------------------
 // localTime
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 100s';
   flushComputedStyle(div);
@@ -206,7 +217,7 @@ test(function(t) {
                 '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);
@@ -218,7 +229,7 @@ test(function(t) {
                 '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);
@@ -227,11 +238,11 @@ async_test(function(t) {
   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');
   }));
@@ -241,7 +252,8 @@ async_test(function(t) {
 // --------------------
 // progress
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10.5s';
   flushComputedStyle(div);
@@ -252,7 +264,7 @@ test(function(t) {
                 '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);
@@ -263,7 +275,7 @@ test(function(t) {
                 '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);
@@ -279,7 +291,8 @@ test(function(t) {
 // --------------------
 // currentIteration
 // --------------------
-test(function(t) {
+
+test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
@@ -290,7 +303,7 @@ test(function(t) {
                 '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);
@@ -301,7 +314,7 @@ test(function(t) {
                 '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);
diff --git a/dom/animation/test/css-transitions/test_animation-currenttime.html b/dom/animation/test/css-transitions/test_animation-currenttime.html
index c44b608c171d..ac7e6762e9d7 100644
--- a/dom/animation/test/css-transitions/test_animation-currenttime.html
+++ b/dom/animation/test/css-transitions/test_animation-currenttime.html
@@ -36,24 +36,15 @@ const ANIM_DUR_MS = 1000000; // 1000s
  * 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:
@@ -74,29 +65,8 @@ const END_POSITION = 200;
 //
 //   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,
@@ -113,11 +83,10 @@ function checkStateOnReadyPromiseResolved(animation)
   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',
@@ -129,10 +98,9 @@ function checkStateAtActiveIntervalStartTime(animation)
   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;
@@ -140,11 +108,10 @@ function checkStateAtFiftyPctOfActiveInterval(animation)
   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',
@@ -156,10 +123,9 @@ function checkStateAtActiveIntervalEndTime(animation)
   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
@@ -168,9 +134,7 @@ test(function(t)
   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
@@ -187,7 +151,7 @@ test(function(t)
    'currentTime');
 
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, 'transitionend');
 
@@ -196,7 +160,7 @@ async_test(function(t) {
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  animation.ready.then(t.step_func(() => {
     checkStateOnReadyPromiseResolved(animation);
 
     animation.currentTime = currentTimeForStartOfActiveInterval();
@@ -207,17 +171,17 @@ async_test(function(t) {
 
     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');
 
@@ -231,7 +195,7 @@ test(function(t) {
   // 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);
 
@@ -245,7 +209,7 @@ test(function(t) {
     // 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);
@@ -253,14 +217,14 @@ test(function(t) {
 }, '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;
@@ -270,15 +234,15 @@ async_test(function(t) {
     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
@@ -286,20 +250,20 @@ async_test(function(t) {
   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');
diff --git a/dom/animation/test/css-transitions/test_animation-finished.html b/dom/animation/test/css-transitions/test_animation-finished.html
index 64c6c3fd9acb..6920a8a64620 100644
--- a/dom/animation/test/css-transitions/test_animation-finished.html
+++ b/dom/animation/test/css-transitions/test_animation-finished.html
@@ -20,7 +20,7 @@
 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
@@ -29,7 +29,7 @@ async_test(function(t) {
 
   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 ' +
@@ -38,17 +38,17 @@ async_test(function(t) {
   }));
 }, '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.
diff --git a/dom/animation/test/css-transitions/test_animation-pausing.html b/dom/animation/test/css-transitions/test_animation-pausing.html
index 1e3518a9e16f..fe6a06f3f7c7 100644
--- a/dom/animation/test/css-transitions/test_animation-pausing.html
+++ b/dom/animation/test/css-transitions/test_animation-pausing.html
@@ -8,7 +8,7 @@
 <script>
 'use strict';
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t);
   var cs = getComputedStyle(div);
 
@@ -22,23 +22,23 @@ async_test(function(t) {
   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()');
diff --git a/dom/animation/test/css-transitions/test_animation-ready.html b/dom/animation/test/css-transitions/test_animation-ready.html
index d60ddef26fc3..01caec45ddb5 100644
--- a/dom/animation/test/css-transitions/test_animation-ready.html
+++ b/dom/animation/test/css-transitions/test_animation-ready.html
@@ -8,7 +8,7 @@
 <script>
 'use strict';
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t);
   div.style.transform = 'translate(0px)';
   getComputedStyle(div).transform;
@@ -19,7 +19,7 @@ async_test(function(t) {
   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();
@@ -30,7 +30,7 @@ async_test(function(t) {
 }, '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
@@ -44,14 +44,14 @@ async_test(function(t) {
   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();
   }));
 
@@ -62,7 +62,7 @@ async_test(function(t) {
 }, '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
@@ -76,14 +76,14 @@ async_test(function(t) {
   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();
   }));
 
diff --git a/dom/animation/test/css-transitions/test_animation-starttime.html b/dom/animation/test/css-transitions/test_animation-starttime.html
index 8285db9fe569..84ecb86d6146 100644
--- a/dom/animation/test/css-transitions/test_animation-starttime.html
+++ b/dom/animation/test/css-transitions/test_animation-starttime.html
@@ -36,24 +36,15 @@ const ANIM_DUR_MS = 1000000; // 1000s
  * 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:
@@ -77,8 +68,7 @@ const END_POSITION = 200;
 // 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');
@@ -92,11 +82,10 @@ function checkStateOnReadyPromiseResolved(animation)
   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',
@@ -108,10 +97,9 @@ function checkStateAtActiveIntervalStartTime(animation)
   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;
@@ -119,11 +107,10 @@ function checkStateAtFiftyPctOfActiveInterval(animation)
   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',
@@ -135,10 +122,9 @@ function checkStateAtActiveIntervalEndTime(animation)
   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
@@ -148,8 +134,7 @@ test(function(t)
 }, '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
@@ -163,7 +148,7 @@ test(function(t)
    'startTime');
 
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, 'transitionend');
 
@@ -172,7 +157,7 @@ async_test(function(t) {
 
   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);
@@ -184,17 +169,17 @@ async_test(function(t) {
 
     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');
 
@@ -222,14 +207,14 @@ test(function(t) {
   // 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);
@@ -239,13 +224,13 @@ async_test(function(t) {
 
   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();
@@ -253,7 +238,7 @@ async_test(function(t) {
 }, 'Setting startTime to null');
 
 
-async_test(function(t) {
+async_test(t => {
   var div = addDiv(t, {'class': 'animated-div'});
 
   flushComputedStyle(div);
@@ -261,7 +246,7 @@ async_test(function(t) {
 
   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,
@@ -269,14 +254,14 @@ async_test(function(t) {
 
     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');
diff --git a/dom/animation/test/css-transitions/test_csstransition-transitionproperty.html b/dom/animation/test/css-transitions/test_csstransition-transitionproperty.html
index 15622e24d7a3..e23a80024d73 100644
--- a/dom/animation/test/css-transitions/test_csstransition-transitionproperty.html
+++ b/dom/animation/test/css-transitions/test_csstransition-transitionproperty.html
@@ -8,7 +8,7 @@
 <script>
 'use strict';
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
 
   // Add a transition
diff --git a/dom/animation/test/css-transitions/test_document-get-animations.html b/dom/animation/test/css-transitions/test_document-get-animations.html
index cbfb6a2b4e61..3352721a6aa9 100644
--- a/dom/animation/test/css-transitions/test_document-get-animations.html
+++ b/dom/animation/test/css-transitions/test_document-get-animations.html
@@ -8,13 +8,13 @@
 <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
@@ -34,7 +34,7 @@ test(function(t) {
                 '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; ' +
@@ -77,14 +77,14 @@ test(function(t) {
 }, '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();
diff --git a/dom/animation/test/css-transitions/test_effect-target.html b/dom/animation/test/css-transitions/test_effect-target.html
index f48ac30ee8a9..e2534670a9b8 100644
--- a/dom/animation/test/css-transitions/test_effect-target.html
+++ b/dom/animation/test/css-transitions/test_effect-target.html
@@ -8,7 +8,7 @@
 <script>
 'use strict';
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
 
   div.style.left = '0px';
@@ -21,7 +21,7 @@ test(function(t) {
     '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;' });
@@ -36,7 +36,7 @@ test(function(t) {
                 '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' });
diff --git a/dom/animation/test/css-transitions/test_element-get-animations.html b/dom/animation/test/css-transitions/test_element-get-animations.html
index e327d725eb45..30fde25bd0f1 100644
--- a/dom/animation/test/css-transitions/test_element-get-animations.html
+++ b/dom/animation/test/css-transitions/test_element-get-animations.html
@@ -8,7 +8,7 @@
 <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.
@@ -25,7 +25,7 @@ async_test(function(t) {
   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');
@@ -33,13 +33,13 @@ async_test(function(t) {
       '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');
@@ -47,7 +47,7 @@ async_test(function(t) {
   }));
 }, 'getAnimations for CSS Transitions');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, { style: 'left: 0px; transition: all 100s' });
 
   flushComputedStyle(div);
@@ -57,11 +57,11 @@ test(function(t) {
                       '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();
@@ -76,7 +76,7 @@ async_test(function(t) {
   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
@@ -91,7 +91,7 @@ test(function(t) {
     + ' 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', '');
@@ -104,7 +104,7 @@ test(function(t) {
     + ' 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
@@ -127,7 +127,7 @@ test(function(t) {
   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;
diff --git a/dom/animation/test/css-transitions/test_event-dispatch.html b/dom/animation/test/css-transitions/test_event-dispatch.html
index ad90c6e2aabb..a352e5ef5714 100644
--- a/dom/animation/test/css-transitions/test_event-dispatch.html
+++ b/dom/animation/test/css-transitions/test_event-dispatch.html
@@ -39,7 +39,7 @@ TransitionEventHandler.prototype.clear = () => {
   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
@@ -55,7 +55,7 @@ function setupTransition(t, transitionStyle) {
   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.
diff --git a/dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html b/dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html
index 6a3936d8d2e7..42f02d890523 100644
--- a/dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html
+++ b/dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html
@@ -13,20 +13,20 @@
 <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';
@@ -51,7 +51,7 @@ test(function(t) {
 }, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
    + ' transition');
 
-test(function(t) {
+test(t => {
   var div = addDiv(t);
 
   div.style.left = '0px';
@@ -76,7 +76,7 @@ test(function(t) {
 }, '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;
diff --git a/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html b/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
index c952b7e66533..6b781f7fca93 100644
--- a/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
+++ b/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
@@ -22,7 +22,7 @@
 <script>
 'use strict';
 
-test(function(t) {
+test(t => {
   var div = addDiv(t, { class: 'init' });
   flushComputedStyle(div);
   div.classList.add('change');
diff --git a/dom/animation/test/css-transitions/test_setting-effect.html b/dom/animation/test/css-transitions/test_setting-effect.html
index 7590fa36b154..701b40823c57 100644
--- a/dom/animation/test/css-transitions/test_setting-effect.html
+++ b/dom/animation/test/css-transitions/test_setting-effect.html
@@ -8,7 +8,7 @@
 <script>
 'use strict';
 
-promise_test(function(t) {
+promise_test(t => {
   var div = addDiv(t);
   var watcher = new EventWatcher(t, div, [ 'transitionend',
                                            'transitioncancel' ]);
@@ -19,7 +19,7 @@ promise_test(function(t) {
   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');
@@ -29,7 +29,7 @@ promise_test(function(t) {
   });
 }, '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' ]);
@@ -40,7 +40,7 @@ promise_test(function(t) {
   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'] },
@@ -52,7 +52,7 @@ promise_test(function(t) {
   });
 }, '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' ]);
@@ -64,7 +64,7 @@ promise_test(function(t) {
   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'] },
@@ -73,7 +73,7 @@ promise_test(function(t) {
   });
 }, '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' ]);
@@ -93,7 +93,7 @@ promise_test(function(t) {
   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');