Bug 1467344 - Replace var with const/let in dom/animation/test/css-transitions/; r=hiro
authorBrian Birtles <birtles@gmail.com>
Thu, 16 Aug 2018 14:41:02 +0900
changeset 487351 5097e03c335b588d7d3a3e369dd4f3785ea908a5
parent 487350 8d053037352a55cb0ff3f6900e43679901c23d6d
child 487352 9427f6cff88ff691b812846f819c6e93e1ef1aea
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 - Replace var with const/let in dom/animation/test/css-transitions/; r=hiro
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_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
@@ -4,64 +4,64 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 promise_test(async t => {
-  var div = addDiv(t, { style: 'margin-left: 0px' });
+  const div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
-  var transition = div.getAnimations()[0];
+  const transition = div.getAnimations()[0];
   await transition.ready;
   await waitForFrame();
 
   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(async t => {
-  var div = addDiv(t, { style: 'margin-left: 0px' });
+  const div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
-  var transition = div.getAnimations()[0];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   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');
 
   await transition.ready;
 
   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(async t => {
-  var div = addDiv(t, { style: 'margin-left: 0px' });
+  const div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
-  var transition = div.getAnimations()[0];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   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',
@@ -69,23 +69,23 @@ promise_test(async t => {
 
   await transition.ready;
 
   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(t => {
-  var div = addDiv(t, { style: 'margin-left: 0px' });
+  const div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
-  var transition = div.getAnimations()[0];
+  const transition = div.getAnimations()[0];
   transition.cancel();
   assert_equals(getComputedStyle(div).marginLeft, '1000px',
                 'margin-left style is not animated after cancelling');
 
   // Trigger a change to a transition property and check that this
   // doesn't cause the animation to become live again
   div.style.transitionDuration = '200s';
   flushComputedStyle(div);
@@ -93,143 +93,143 @@ test(t => {
                 '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(async t => {
-  var div = addDiv(t, { style: 'margin-left: 0px' });
+  const div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
-  var transition = div.getAnimations()[0];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   div.style.display = 'none';
 
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
   assert_equals(getComputedStyle(div).marginLeft, '1000px');
 }, 'Setting display:none on an element cancels its transitions');
 
 promise_test(async t => {
-  var parentDiv = addDiv(t);
-  var childDiv = document.createElement('div');
+  const parentDiv = addDiv(t);
+  const 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];
+  const transition = childDiv.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   parentDiv.style.display = 'none';
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
   assert_equals(getComputedStyle(childDiv).marginLeft, '1000px');
 }, 'Setting display:none cancels transitions on a child element');
 
 promise_test(async t => {
-  var div = addDiv(t, { style: 'margin-left: 0px' });
+  const div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
-  var transition = div.getAnimations()[0];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   // Set an unrecognized property value
   div.style.transitionProperty = 'none';
   flushComputedStyle(div);
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
   assert_equals(getComputedStyle(div).marginLeft, '1000px');
 }, 'Removing a property from transition-property cancels transitions on that '+
    'property');
 
 promise_test(async t => {
-  var div = addDiv(t, { style: 'margin-left: 0px' });
+  const div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
-  var transition = div.getAnimations()[0];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   div.style.transition = 'margin-top 10s -10s'; // combined duration is zero
   flushComputedStyle(div);
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
   assert_equals(getComputedStyle(div).marginLeft, '1000px');
 }, 'Setting zero combined duration');
 
 promise_test(async t => {
-  var div = addDiv(t, { style: 'margin-left: 0px' });
+  const div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
-  var transition = div.getAnimations()[0];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   div.style.marginLeft = '2000px';
   flushComputedStyle(div);
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
 }, 'Changing style to another interpolable value cancels the original ' +
    'transition');
 
 promise_test(async t => {
-  var div = addDiv(t, { style: 'margin-left: 0px' });
+  const div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
-  var transition = div.getAnimations()[0];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   div.style.marginLeft = 'auto';
   flushComputedStyle(div);
   await waitForFrame();
 
   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(async t => {
-  var div = addDiv(t, { style: 'margin-left: 0px' });
+  const div = addDiv(t, { style: 'margin-left: 0px' });
   flushComputedStyle(div);
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
-  var transition = div.getAnimations()[0];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   div.style.marginLeft = '0px';
   flushComputedStyle(div);
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
--- a/dom/animation/test/css-transitions/test_animation-computed-timing.html
+++ b/dom/animation/test/css-transitions/test_animation-computed-timing.html
@@ -16,231 +16,230 @@
 
 'use strict';
 
 // --------------------
 // delay
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-
-  var effect = div.getAnimations()[0].effect;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().delay, 0,
                 'Initial value of delay');
 }, 'delay of a new tranisition');
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const 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;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().delay, 10000,
                 'Initial value of delay');
 }, 'Positive delay of a new transition');
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const 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;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().delay, -5000,
                 'Initial value of delay');
 }, 'Negative delay of a new transition');
 
 
 // --------------------
 // endDelay
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var effect = div.getAnimations()[0].effect;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().endDelay, 0,
                 'Initial value of endDelay');
 }, 'endDelay of a new transition');
 
 
 // --------------------
 // fill
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var effect = div.getAnimations()[0].effect;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().fill, 'backwards',
                 'Fill backwards');
 }, 'fill of a new transition');
 
 
 // --------------------
 // iterationStart
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var effect = div.getAnimations()[0].effect;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().iterationStart, 0,
                 'Initial value of iterationStart');
 }, 'iterationStart of a new transition');
 
 
 // --------------------
 // iterations
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var effect = div.getAnimations()[0].effect;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().iterations, 1,
                 'Initial value of iterations');
 }, 'iterations of a new transition');
 
 
 // --------------------
 // duration
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var effect = div.getAnimations()[0].effect;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().duration, 10000,
                 'Initial value of duration');
 }, 'duration of a new transition');
 
 
 // --------------------
 // direction
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var effect = div.getAnimations()[0].effect;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().direction, 'normal',
                 'Initial value of direction');
 }, 'direction of a new transition');
 
 
 // --------------------
 // easing
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var effect = div.getAnimations()[0].effect;
+  const 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(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const 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
+  const effect = div.getAnimations()[0].effect;
+  const 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(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const 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;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().activeDuration, 100000,
                 'Initial value of activeDuration');
 }, 'activeDuration of a new transition');
 
 
 // --------------------
 // localTime
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 100s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var effect = div.getAnimations()[0].effect;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().localTime, 0,
                 'Initial value of localTime');
 }, 'localTime of a new transition');
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 100s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var anim = div.getAnimations()[0];
+  const 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');
 
 promise_test(async t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 100s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var anim = div.getAnimations()[0];
+  const anim = div.getAnimations()[0];
   anim.playbackRate = 2; // 2 times faster
 
   await anim.ready;
 
   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
                 'localTime is equal to currentTime');
   await waitForFrame();
 
@@ -249,82 +248,82 @@ promise_test(async t => {
 }, 'localTime reflects playbackRate immediately');
 
 
 // --------------------
 // progress
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const 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;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().progress, 0.0,
                 'Initial value of progress');
 }, 'progress of a new transition');
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const 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;
+  const 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(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10.5s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var anim = div.getAnimations()[0];
+  const anim = div.getAnimations()[0];
   anim.finish()
   assert_equals(anim.effect.getComputedTiming().progress, null,
                 'finished progress');
 }, 'progress of a finished transition');
 
 
 // --------------------
 // currentIteration
 // --------------------
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var effect = div.getAnimations()[0].effect;
+  const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().currentIteration, 0,
                 'Initial value of currentIteration');
 }, 'currentIteration of a new transition');
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const 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;
+  const 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(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   div.style.transition = 'margin-left 10s';
   flushComputedStyle(div);
   div.style.marginLeft = '10px';
 
-  var anim = div.getAnimations()[0];
+  const anim = div.getAnimations()[0];
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, null,
                 'finished currentIteration');
 }, 'currentIteration of a finished transition');
 
 </script>
 </body>
--- a/dom/animation/test/css-transitions/test_animation-currenttime.html
+++ b/dom/animation/test/css-transitions/test_animation-currenttime.html
@@ -73,96 +73,96 @@ const checkStateOnReadyPromiseResolved =
     '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);
+  const div = animation.effect.target;
+  const 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.
 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);
+  const div = animation.effect.target;
+  const 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');
 };
 
 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);
+  const div = animation.effect.target;
+  const 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.
 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);
+  const div = animation.effect.target;
+  const 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(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const animation = div.getAnimations()[0];
   assert_equals(animation.currentTime, 0, 'currentTime should be zero');
 }, 'currentTime of a newly created transition is zero');
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const 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');
 
 promise_test(async t => {
-  var div = addDiv(t, {'class': 'animated-div'});
-  var eventWatcher = new EventWatcher(t, div, 'transitionend');
+  const div = addDiv(t, {'class': 'animated-div'});
+  const eventWatcher = new EventWatcher(t, div, 'transitionend');
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const animation = div.getAnimations()[0];
   await animation.ready;
 
   checkStateOnReadyPromiseResolved(animation);
 
   animation.currentTime = currentTimeForStartOfActiveInterval();
   checkStateAtActiveIntervalStartTime(animation);
 
   animation.currentTime = currentTimeForFiftyPercentThroughActiveInterval();
@@ -170,23 +170,23 @@ promise_test(async t => {
 
   animation.currentTime = currentTimeForEndOfActiveInterval();
   await eventWatcher.wait_for('transitionend');
 
   checkStateAtActiveIntervalEndTime(animation);
 }, 'Skipping forward through transition');
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
-  var eventWatcher = new EventWatcher(t, div, 'transitionend');
+  const div = addDiv(t, {'class': 'animated-div'});
+  const eventWatcher = new EventWatcher(t, div, 'transitionend');
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const 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(() => {
     animation.currentTime = currentTimeForFiftyPercentThroughActiveInterval();
@@ -205,48 +205,48 @@ test(t => {
     eventWatcher.wait_for('transitionend').then(() => {
       t.done();
     });
     checkStateAtActiveIntervalStartTime(animation);
   }));
 }, 'Skipping backwards through transition');
 
 promise_test(async t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const animation = div.getAnimations()[0];
 
   await animation.ready;
 
   assert_throws(
     new TypeError(),
     () => {
       animation.currentTime = null
     },
     'Expect TypeError exception on trying to set Animation.currentTime to null'
   );
 }, 'Setting currentTime to null');
 
 promise_test(async t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const animation = div.getAnimations()[0];
 
   await animation.ready;
 
   assert_not_equals(animation.currentTime, null,
     'Animation.currentTime not null on ready Promise resolve');
   animation.pause();
   await animation.ready;
 
-  var pauseTime = animation.currentTime;
+  const pauseTime = animation.currentTime;
   await waitForFrame();
 
   assert_equals(animation.currentTime, pauseTime,
     'Animation.currentTime is unchanged after pausing');
 }, '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
@@ -16,37 +16,37 @@
 <script>
 
 'use strict';
 
 const ANIM_DELAY_MS = 1000000; // 1000s
 const ANIM_DUR_MS = 1000000; // 1000s
 
 promise_test(async t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const animation = div.getAnimations()[0];
 
   animation.finish();
   await animation.finished;
 
   animation.play();
   assert_equals(animation.currentTime, 0,
                 'Replaying a finished transition should reset its ' +
                 'currentTime');
 }, 'Test restarting a finished transition');
 
 promise_test(async t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const animation = div.getAnimations()[0];
   await animation.ready;
 
   animation.playbackRate = -1;
   await animation.finished;
 
   animation.play();
   // FIXME: once animation.effect.computedTiming.endTime is available (bug
   // 1108055) we should use that here.
--- a/dom/animation/test/css-transitions/test_animation-pausing.html
+++ b/dom/animation/test/css-transitions/test_animation-pausing.html
@@ -4,27 +4,27 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 promise_test(async t => {
-  var div = addDiv(t);
-  var cs = getComputedStyle(div);
+  const div = addDiv(t);
+  const 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;
+  const animation = div.getAnimations()[0];
+  let previousProgress = animation.effect.getComputedTiming().progress;
   assert_equals(previousProgress, 0, 'Initial value of progress is zero');
 
   await animation.ready;
   await waitForNextFrame();
 
   assert_greater_than(animation.effect.getComputedTiming().progress,
                       previousProgress,
                       'Iteration progress is initially increasing');
--- a/dom/animation/test/css-transitions/test_animation-ready.html
+++ b/dom/animation/test/css-transitions/test_animation-ready.html
@@ -4,47 +4,47 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 promise_test(async t => {
-  var div = addDiv(t);
+  const 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;
+  const animation = div.getAnimations()[0];
+  const originalReadyPromise = animation.ready;
 
   await animation.ready;
 
   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');
 }, 'A new ready promise is created each time play() is called'
    + ' the animation property');
 
 promise_test(async t => {
-  var div = addDiv(t);
+  const 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];
+  const animation = div.getAnimations()[0];
   assert_true(animation.pending, 'Animation is initially pending');
   const readyPromise = animation.ready;
 
   // Now remove transform from transition-property and flush styles
   div.style.transitionProperty = 'none';
   getComputedStyle(div).transitionProperty;
 
   try {
@@ -55,26 +55,26 @@ promise_test(async t => {
                   'ready promise is rejected with AbortError');
     assert_equals(animation.playState, 'idle',
                   'Animation is idle after transition was cancelled');
   }
 }, 'ready promise is rejected when a transition is cancelled by updating'
    + ' transition-property');
 
 promise_test(async t => {
-  var div = addDiv(t);
+  const 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];
+  const animation = div.getAnimations()[0];
   assert_true(animation.pending, 'Animation is initially pending');
   const readyPromise = animation.ready;
 
   // Update the transition to animate to something not-interpolable
   div.style.marginLeft = 'auto';
   getComputedStyle(div).marginLeft;
 
   try {
--- a/dom/animation/test/css-transitions/test_animation-starttime.html
+++ b/dom/animation/test/css-transitions/test_animation-starttime.html
@@ -72,93 +72,93 @@ const checkStateOnReadyPromiseResolved =
   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);
+  const div = animation.effect.target;
+  const 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.
 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);
+  const div = animation.effect.target;
+  const 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');
 };
 
 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);
+  const div = animation.effect.target;
+  const 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.
 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);
+  const div = animation.effect.target;
+  const 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(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const animation = div.getAnimations()[0];
   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'startTime of a newly created transition is unresolved');
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
-  var currentTime = animation.timeline.currentTime;
+  const animation = div.getAnimations()[0];
+  const 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');
 
 promise_test(async t => {
-  var div = addDiv(t, {'class': 'animated-div'});
-  var eventWatcher = new EventWatcher(t, div, 'transitionend');
+  const div = addDiv(t, {'class': 'animated-div'});
+  const eventWatcher = new EventWatcher(t, div, 'transitionend');
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const animation = div.getAnimations()[0];
   await animation.ready;
 
   checkStateOnReadyPromiseResolved(animation);
 
   animation.startTime = startTimeForStartOfActiveInterval(animation.timeline);
   checkStateAtActiveIntervalStartTime(animation);
 
   animation.startTime =
@@ -167,23 +167,23 @@ promise_test(async t => {
 
   animation.startTime = startTimeForEndOfActiveInterval(animation.timeline);
   await eventWatcher.wait_for('transitionend');
 
   checkStateAtActiveIntervalEndTime(animation);
 }, 'Skipping forward through animation');
 
 test(t => {
-  var div = addDiv(t, {'class': 'animated-div'});
-  var eventWatcher = new EventWatcher(t, div, 'transitionend');
+  const div = addDiv(t, {'class': 'animated-div'});
+  const eventWatcher = new EventWatcher(t, div, 'transitionend');
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const 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 90% through point.
 
   animation.startTime =
     startTimeForFiftyPercentThroughActiveInterval(animation.timeline);
@@ -201,43 +201,43 @@ test(t => {
   // otherwise eventWatcher will assert that the event was unexpected.
   eventWatcher.wait_for('transitionend').then(() => {
     t.done();
   });
   checkStateAtActiveIntervalStartTime(animation);
 }, 'Skipping backwards through transition');
 
 promise_test(async t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const animation = div.getAnimations()[0];
 
   await animation.ready;
 
-  var storedCurrentTime = animation.currentTime;
+  const storedCurrentTime = animation.currentTime;
   animation.startTime = null;
   await animation.ready;
 
   assert_equals(animation.currentTime, storedCurrentTime,
     'Test that hold time is correct');
 }, 'Setting startTime to null');
 
 promise_test(async t => {
-  var div = addDiv(t, {'class': 'animated-div'});
+  const div = addDiv(t, {'class': 'animated-div'});
 
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition
 
-  var animation = div.getAnimations()[0];
+  const animation = div.getAnimations()[0];
   await animation.ready;
 
-  var savedStartTime = animation.startTime;
+  const savedStartTime = animation.startTime;
 
   assert_not_equals(animation.startTime, null,
     'Animation.startTime not null on ready Promise resolve');
 
   animation.pause();
   await animation.ready;
 
   assert_equals(animation.startTime, null,
--- a/dom/animation/test/css-transitions/test_csstransition-transitionproperty.html
+++ b/dom/animation/test/css-transitions/test_csstransition-transitionproperty.html
@@ -4,17 +4,17 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var div = addDiv(t);
+  const div = addDiv(t);
 
   // Add a transition
   div.style.left = '0px';
   getComputedStyle(div).transitionProperty;
   div.style.transition = 'all 100s';
   div.style.left = '100px';
 
   assert_equals(div.getAnimations()[0].transitionProperty, 'left',
--- a/dom/animation/test/css-transitions/test_document-get-animations.html
+++ b/dom/animation/test/css-transitions/test_document-get-animations.html
@@ -10,17 +10,17 @@
 
 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(t => {
-  var div = addDiv(t);
+  const div = addDiv(t);
 
   // 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';
@@ -42,52 +42,52 @@ test(t => {
                 '.change::after': 'width: 100px;',
                 '.change::before': 'width: 100px;' });
   // create two divs with these arrangement:
   //       parent
   //     ::before,
   //     ::after
   //        |
   //       child
-  var parent = addDiv(t);
-  var child = addDiv(t);
+  const parent = addDiv(t);
+  const child = addDiv(t);
   parent.appendChild(child);
 
   parent.style.left = '0px';
   parent.style.transition = 'left 10s';
   parent.classList.add('init');
   child.style.left = '0px';
   child.style.transition = 'left 10s';
   flushComputedStyle(parent);
 
   parent.style.left = '100px';
   parent.classList.add('change');
   child.style.left = '100px';
 
-  var anims = document.getAnimations();
+  const anims = document.getAnimations();
   assert_equals(anims.length, 4,
                 'CSS transition on both pseudo-elements and elements ' +
                 'are returned');
   assert_equals(anims[0].effect.target, parent,
                 'The animation targeting the parent element comes first');
   assert_equals(anims[1].effect.target.type, '::before',
                 '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');
 
 promise_test(async t => {
-  var div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
+  const div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
   flushComputedStyle(div);
 
   div.style.left = '100px';
-  var animations = div.getAnimations();
+  const animations = div.getAnimations();
   assert_equals(animations.length, 1, 'Got transition');
   await animations[0].finished;
 
   assert_equals(document.getAnimations().length, 0,
                 'No animations returned');
 }, 'Transitions are not returned after they have finished');
 
 </script>
--- a/dom/animation/test/css-transitions/test_effect-target.html
+++ b/dom/animation/test/css-transitions/test_effect-target.html
@@ -4,57 +4,57 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var div = addDiv(t);
+  const div = addDiv(t);
 
   div.style.left = '0px';
   getComputedStyle(div).transitionProperty;
   div.style.transition = 'left 100s';
   div.style.left = '100px';
 
-  var animation = div.getAnimations()[0];
+  const 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(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' });
+  const div = addDiv(t, { class: 'init' });
   flushComputedStyle(div);
   div.classList.add('change');
 
-  var anims = document.getAnimations();
+  const 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(t => {
   addStyle(t, { '.init::after': 'content: ""; width: 0px; transition: all 10s;',
                 '.change::after': 'width: 100px;' });
-  var div = addDiv(t, { class: 'init' });
+  const 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"] },
-                                  3000);
-  var newAnim = new Animation(effect, document.timeline);
+  const pseudoTarget = document.getAnimations()[0].effect.target;
+  const effect = new KeyframeEffect(pseudoTarget,
+                                    { background: ["blue", "red"] },
+                                    3000);
+  const newAnim = new Animation(effect, document.timeline);
   newAnim.play();
 
-  var anims = document.getAnimations();
+  const anims = document.getAnimations();
   assert_equals(anims.length, 2,
                 'Got animations running on ::after pseudo element');
   assert_not_equals(anims[0], newAnim,
                     'The scriped-generated animation appears last');
   assert_equals(newAnim.effect.target, pseudoTarget,
                 'The effect.target of the scripted-generated animation is ' +
                 'the same as the one from the argument of ' +
                 'KeyframeEffect constructor');
--- a/dom/animation/test/css-transitions/test_element-get-animations.html
+++ b/dom/animation/test/css-transitions/test_element-get-animations.html
@@ -4,35 +4,35 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 promise_test(async t => {
-  var div = addDiv(t);
+  const 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();
+  let animations = div.getAnimations();
   assert_equals(animations.length, 2,
     'getAnimations() returns one Animation per transitioning property');
   await waitForAllAnimations(animations);
 
-  var startTime = animations[0].startTime;
+  const 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
   await waitForFrame();
 
@@ -43,27 +43,27 @@ promise_test(async t => {
   await waitForAllAnimations(animations);
 
   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');
 }, 'getAnimations for CSS Transitions');
 
 test(t => {
-  var div = addDiv(t, { style: 'left: 0px; transition: all 100s' });
+  const 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(t => {
-  var div = addDiv(t);
+  const div = addDiv(t);
 
   // Set up event listener
   div.addEventListener('transitionend', t.step_func(() => {
     assert_equals(div.getAnimations().length, 0,
       'getAnimations does not return finished CSS Transitions');
     t.done();
   }));
 
@@ -72,78 +72,78 @@ async_test(t => {
   getComputedStyle(div).left;
 
   div.style.transition = 'all 0.01s';
   div.style.left = '100px';
   getComputedStyle(div).left;
 }, 'getAnimations for CSS Transitions that have finished');
 
 test(t => {
-  var div = addDiv(t);
+  const 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(t => {
-  var div = addDiv(t);
+  const 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(t => {
-  var div = addDiv(t, { style: 'transform: translate(0px); ' +
-                               'opacity: 0; ' +
-                               'border-width: 0px; ' + // Shorthand
-                               'border-style: solid' });
+  const 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)';
   div.style.opacity = '1';
   div.style.borderWidth = '1px';
 
-  var animations = div.getAnimations();
+  const animations = div.getAnimations();
   assert_equals(animations.length, 6,
                 'Generated expected number of transitions');
   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(t => {
-  var div = addDiv(t, { style: 'transform: translate(0px); ' +
-                               'opacity: 0' });
+  const 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');
   div.style.opacity = '1';
   assert_equals(div.getAnimations().length, 2,
                 'Then a second (opacity) transition is added');
 
-  var animations = div.getAnimations();
+  const animations = div.getAnimations();
   assert_equals(animations[0].transitionProperty, 'transform');
   assert_equals(animations[1].transitionProperty, 'opacity');
 }, 'getAnimations sorts transitions by when they were generated');
 
 </script>
 </body>
--- a/dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html
+++ b/dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html
@@ -16,88 +16,88 @@
 const getKeyframes = e => {
   return e.getAnimations()[0].effect.getKeyframes();
 };
 
 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) {
+  for (const p in a) {
     assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
   }
 };
 
 test(t => {
-  var div = addDiv(t);
+  const div = addDiv(t);
 
   div.style.left = '0px';
   getComputedStyle(div).transitionProperty;
   div.style.transition = 'left 100s';
   div.style.left = '100px';
 
-  var frames = getKeyframes(div);
+  const frames = getKeyframes(div);
 
   assert_equals(frames.length, 2, "number of frames");
 
-  var expected = [
+  const expected = [
     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
       left: "0px" },
     { offset: 1, computedOffset: 1, easing: "linear", composite: "auto",
       left: "100px" },
   ];
 
-  for (var i = 0; i < frames.length; i++) {
+  for (let 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(t => {
-  var div = addDiv(t);
+  const 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);
+  const frames = getKeyframes(div);
 
   assert_equals(frames.length, 2, "number of frames");
 
-  var expected = [
+  const expected = [
     { offset: 0, computedOffset: 0, easing: "steps(2)", composite: "auto",
       left: "0px" },
     { offset: 1, computedOffset: 1, easing: "linear", composite: "auto",
       left: "100px" },
   ];
 
-  for (var i = 0; i < frames.length; i++) {
+  for (let 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(t => {
-  var div = addDiv(t);
+  const 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);
+  const frames = getKeyframes(div);
 
   // CSS transition endpoints are based on the computed value so we
   // shouldn't see the variable reference
-  var expected = [
+  const expected = [
     { offset: 0, computedOffset: 0, easing: 'ease', composite: 'auto',
       left: '0px' },
     { offset: 1, computedOffset: 1, easing: 'linear', composite: 'auto',
       left: '100px' },
   ];
-  for (var i = 0; i < frames.length; i++) {
+  for (let i = 0; i < frames.length; i++) {
     assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
   }
 }, 'KeyframeEffect.getKeyframes() returns expected frames for a'
    + ' transition with a CSS variable endpoint');
 
 </script>
 </body>
--- a/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
+++ b/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
@@ -18,29 +18,29 @@
 }
 </style>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var div = addDiv(t, { class: 'init' });
+  const 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;
+  const pseudoTarget = document.getAnimations()[0].effect.target;
   assert_class_string(pseudoTarget, 'CSSPseudoElement',
                       'Got pseudo-element target');
 
   // Check animations returned from the pseudo element are in correct order
-  var anims = pseudoTarget.getAnimations();
+  const anims = pseudoTarget.getAnimations();
   assert_equals(anims.length, 3,
                 'Got expected number of animations on pseudo-element');
   assert_equals(anims[0].transitionProperty, 'height');
   assert_equals(anims[1].transitionProperty, 'opacity');
   assert_equals(anims[2].transitionProperty, 'width');
 }, 'getAnimations sorts simultaneous transitions by name');
 
 </script>
--- a/dom/animation/test/css-transitions/test_setting-effect.html
+++ b/dom/animation/test/css-transitions/test_setting-effect.html
@@ -4,93 +4,93 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src='../testcommon.js'></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 promise_test(async t => {
-  var div = addDiv(t);
-  var watcher = new EventWatcher(t, div, [ 'transitionend',
-                                           'transitioncancel' ]);
+  const div = addDiv(t);
+  const 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];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   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');
 
   await watcher.wait_for('transitionend');
 }, 'Test for removing a transition effect');
 
 promise_test(async t => {
-  var div = addDiv(t);
-  var watcher = new EventWatcher(t, div, [ 'transitionend',
-                                           'transitioncancel' ]);
+  const div = addDiv(t);
+  const 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];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   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(async t => {
-  var div = addDiv(t);
-  var watcher = new EventWatcher(t, div, [ 'transitionend',
-                                           'transitioncancel' ]);
+  const div = addDiv(t);
+  const 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];
+  const transition = div.getAnimations()[0];
   await transition.ready;
 
   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(async t => {
-  var div = addDiv(t);
-  var watcher = new EventWatcher(t, div, [ 'transitionend',
-                                           'transitioncancel' ]);
+  const div = addDiv(t);
+  const 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];
+  const transition = div.getAnimations()[0];
   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);