Bug 1415448 - Replace var with const/let in web-platform-tests/web-animations; r=hiro
authorBrian Birtles <birtles@gmail.com>
Thu, 16 Nov 2017 12:37:54 +0900
changeset 392113 31f60780e3c0abe34540c10f85fba07ccc3f5b7a
parent 392112 ff031af585d872a0f47186e022d4b49eec20e22f
child 392114 b0811e58e9322569f276ec8b4e5f8716f53f0158
push id32910
push userrgurzau@mozilla.com
push dateThu, 16 Nov 2017 10:02:59 +0000
treeherdermozilla-central@9941e68b5a53 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1415448
milestone59.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 1415448 - Replace var with const/let in web-platform-tests/web-animations; r=hiro Because 'const' is longer than 'var', in quite a number of places this patch also updates the indentation of subsequent lines. Also, in a number of cases this means the line now needs to be wrapped. In general I've used 'prettier' to do the line wrapping which means that the line wrapping style differs a little from the existing code (which is already quite inconsistent). Hopefully in the future we can use prettier on all files to make this more consistent. Also, in some cases, to avoid further line wrapping, this patch uses shorthand property names (specifically replacing 'composite: composite' with just 'composite'). This appears to be supported in all browsers like to implement Web Animations (Firefox 33+, Chrome 47+, Edge, Safari 9+). MozReview-Commit-ID: 2xEaeZSYjlc
testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property.html
testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property.html
testing/web-platform/tests/web-animations/animation-model/animation-types/discrete.html
testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property.html
testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
testing/web-platform/tests/web-animations/animation-model/animation-types/visibility.html
testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html
testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context.html
testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html
testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
testing/web-platform/tests/web-animations/interfaces/Animatable/getAnimations.html
testing/web-platform/tests/web-animations/interfaces/Animation/cancel.html
testing/web-platform/tests/web-animations/interfaces/Animation/constructor.html
testing/web-platform/tests/web-animations/interfaces/Animation/effect.html
testing/web-platform/tests/web-animations/interfaces/Animation/finish.html
testing/web-platform/tests/web-animations/interfaces/Animation/finished.html
testing/web-platform/tests/web-animations/interfaces/Animation/id.html
testing/web-platform/tests/web-animations/interfaces/Animation/oncancel.html
testing/web-platform/tests/web-animations/interfaces/Animation/onfinish.html
testing/web-platform/tests/web-animations/interfaces/Animation/pause.html
testing/web-platform/tests/web-animations/interfaces/Animation/play.html
testing/web-platform/tests/web-animations/interfaces/Animation/playState.html
testing/web-platform/tests/web-animations/interfaces/Animation/playbackRate.html
testing/web-platform/tests/web-animations/interfaces/Animation/ready.html
testing/web-platform/tests/web-animations/interfaces/Animation/startTime.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/delay.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/duration.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/endDelay.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/fill.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterationStart.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
testing/web-platform/tests/web-animations/interfaces/Document/getAnimations.html
testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/constructor.html
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/composite.html
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/target.html
testing/web-platform/tests/web-animations/resources/easing-tests.js
testing/web-platform/tests/web-animations/testcommon.js
testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html
testing/web-platform/tests/web-animations/timing-model/animation-effects/current-iteration.html
testing/web-platform/tests/web-animations/timing-model/animation-effects/local-time.html
testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html
testing/web-platform/tests/web-animations/timing-model/animations/canceling-an-animation.html
testing/web-platform/tests/web-animations/timing-model/animations/current-time.html
testing/web-platform/tests/web-animations/timing-model/animations/playing-an-animation.html
testing/web-platform/tests/web-animations/timing-model/animations/reversing-an-animation.html
testing/web-platform/tests/web-animations/timing-model/animations/set-the-animation-start-time.html
testing/web-platform/tests/web-animations/timing-model/animations/set-the-target-effect-of-an-animation.html
testing/web-platform/tests/web-animations/timing-model/animations/set-the-timeline-of-an-animation.html
testing/web-platform/tests/web-animations/timing-model/animations/updating-the-finished-state.html
testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property.html
@@ -12,26 +12,26 @@ html {
   font-size: 10px;
 }
 </style>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-for (var property in gCSSProperties) {
+for (const property in gCSSProperties) {
   if (!isSupported(property)) {
     continue;
   }
 
-  var animationTypes = gCSSProperties[property].types;
-  var setupFunction = gCSSProperties[property].setup;
+  const animationTypes = gCSSProperties[property].types;
+  const setupFunction = gCSSProperties[property].setup;
   animationTypes.forEach(animationType => {
-    var typeObject;
-    var animationTypeString;
+    let typeObject;
+    let animationTypeString;
     if (typeof animationType === 'string') {
       typeObject = types[animationType];
       animationTypeString = animationType;
     } else if (typeof animationType === 'object' &&
                animationType.type && typeof animationType.type === 'string') {
       typeObject = types[animationType.type];
       animationTypeString = animationType.type;
     }
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property.html
@@ -12,26 +12,26 @@ html {
   font-size: 10px;
 }
 </style>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-for (var property in gCSSProperties) {
+for (const property in gCSSProperties) {
   if (!isSupported(property)) {
     continue;
   }
 
-  var animationTypes = gCSSProperties[property].types;
-  var setupFunction = gCSSProperties[property].setup;
+  const animationTypes = gCSSProperties[property].types;
+  const setupFunction = gCSSProperties[property].setup;
   animationTypes.forEach(animationType => {
-    var typeObject;
-    var animationTypeString;
+    let typeObject;
+    let animationTypeString;
     if (typeof animationType === 'string') {
       typeObject = types[animationType];
       animationTypeString = animationType;
     } else if (typeof animationType === 'object' &&
                animationType.type && typeof animationType.type === 'string') {
       typeObject = types[animationType.type];
       animationTypeString = animationType.type;
     }
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/discrete.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/discrete.html
@@ -6,20 +6,20 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
 
-  var anim = div.animate({ fontStyle: [ 'normal', 'italic' ] },
-                         { duration: 1000, fill: 'forwards' });
+  const anim = div.animate({ fontStyle: [ 'normal', 'italic' ] },
+                           { duration: 1000, fill: 'forwards' });
 
   assert_equals(getComputedStyle(div).fontStyle, 'normal',
                 'Animation produces \'from\' value at start of interval');
   anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1;
   assert_equals(getComputedStyle(div).fontStyle, 'normal',
                 'Animation produces \'from\' value just before the middle of'
                 + ' the interval');
   anim.currentTime++;
@@ -27,21 +27,21 @@ test(t => {
                 'Animation produces \'to\' value at exact middle of'
                 + ' the interval');
   anim.finish();
   assert_equals(getComputedStyle(div).fontStyle, 'italic',
                 'Animation produces \'to\' value during forwards fill');
 }, 'Test animating discrete values');
 
 test(t => {
-  var div = createDiv(t);
-  var originalHeight = getComputedStyle(div).height;
+  const div = createDiv(t);
+  const originalHeight = getComputedStyle(div).height;
 
-  var anim = div.animate({ height: [ 'auto', '200px' ] },
-                         { duration: 1000, fill: 'forwards' });
+  const anim = div.animate({ height: [ 'auto', '200px' ] },
+                           { duration: 1000, fill: 'forwards' });
 
   assert_equals(getComputedStyle(div).height, originalHeight,
                 'Animation produces \'from\' value at start of interval');
   anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1;
   assert_equals(getComputedStyle(div).height, originalHeight,
                 'Animation produces \'from\' value just before the middle of'
                 + ' the interval');
   anim.currentTime++;
@@ -49,24 +49,24 @@ test(t => {
                 'Animation produces \'to\' value at exact middle of'
                 + ' the interval');
   anim.finish();
   assert_equals(getComputedStyle(div).height, '200px',
                 'Animation produces \'to\' value during forwards fill');
 }, 'Test discrete animation is used when interpolation fails');
 
 test(t => {
-  var div = createDiv(t);
-  var originalHeight = getComputedStyle(div).height;
+  const div = createDiv(t);
+  const originalHeight = getComputedStyle(div).height;
 
-  var anim = div.animate({ height: [ 'auto',
-                                     '200px',
-                                     '300px',
-                                     'auto',
-                                     '400px' ] },
+  const anim = div.animate({ height: [ 'auto',
+                                       '200px',
+                                       '300px',
+                                       'auto',
+                                       '400px' ] },
                          { duration: 1000, fill: 'forwards' });
 
   // There are five values, so there are four pairs to try to interpolate.
   // We test at the middle of each pair.
   assert_equals(getComputedStyle(div).height, originalHeight,
                 'Animation produces \'from\' value at start of interval');
   anim.currentTime = 125;
   assert_equals(getComputedStyle(div).height, '200px',
@@ -79,48 +79,48 @@ test(t => {
                 'Third non-interpolable pair uses discrete interpolation');
   anim.currentTime += 250;
   assert_equals(getComputedStyle(div).height, '400px',
                 'Fourth non-interpolable pair uses discrete interpolation');
 }, 'Test discrete animation is used only for pairs of values that cannot'
    + ' be interpolated');
 
 test(t => {
-  var div = createDiv(t);
-  var originalHeight = getComputedStyle(div).height;
+  const div = createDiv(t);
+  const originalHeight = getComputedStyle(div).height;
 
   // Easing: http://cubic-bezier.com/#.68,0,1,.01
   // With this curve, we don't reach the 50% point until about 95% of
   // the time has expired.
-  var anim = div.animate({ fontStyle: [ 'normal', 'italic' ] },
-                         { duration: 1000, fill: 'forwards',
-                           easing: 'cubic-bezier(0.68,0,1,0.01)' });
+  const anim = div.animate({ fontStyle: [ 'normal', 'italic' ] },
+                           { duration: 1000, fill: 'forwards',
+                             easing: 'cubic-bezier(0.68,0,1,0.01)' });
 
   assert_equals(getComputedStyle(div).fontStyle, 'normal',
                 'Animation produces \'from\' value at start of interval');
   anim.currentTime = 940;
   assert_equals(getComputedStyle(div).fontStyle, 'normal',
                 'Animation produces \'from\' value at 94% of the iteration'
                 + ' time');
   anim.currentTime = 960;
   assert_equals(getComputedStyle(div).fontStyle, 'italic',
                 'Animation produces \'to\' value at 96% of the iteration'
                 + ' time');
 }, 'Test the 50% switch point for discrete animation is based on the'
    + ' effect easing');
 
 test(t => {
-  var div = createDiv(t);
-  var originalHeight = getComputedStyle(div).height;
+  const div = createDiv(t);
+  const originalHeight = getComputedStyle(div).height;
 
   // Easing: http://cubic-bezier.com/#.68,0,1,.01
   // With this curve, we don't reach the 50% point until about 95% of
   // the time has expired.
-  var anim = div.animate([ { fontStyle: 'normal',
-                             easing: 'cubic-bezier(0.68,0,1,0.01)' },
+  const anim = div.animate([ { fontStyle: 'normal',
+                               easing: 'cubic-bezier(0.68,0,1,0.01)' },
                            { fontStyle: 'italic' } ],
                          { duration: 1000, fill: 'forwards' });
 
   assert_equals(getComputedStyle(div).fontStyle, 'normal',
                 'Animation produces \'from\' value at start of interval');
   anim.currentTime = 940;
   assert_equals(getComputedStyle(div).fontStyle, 'normal',
                 'Animation produces \'from\' value at 94% of the iteration'
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property.html
@@ -12,26 +12,26 @@ html {
   font-size: 10px;
 }
 </style>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-for (var property in gCSSProperties) {
+for (const property in gCSSProperties) {
   if (!isSupported(property)) {
     continue;
   }
 
-  var animationTypes = gCSSProperties[property].types;
-  var setupFunction = gCSSProperties[property].setup;
+  const animationTypes = gCSSProperties[property].types;
+  const setupFunction = gCSSProperties[property].setup;
   animationTypes.forEach(animationType => {
-    var typeObject;
-    var animationTypeString;
+    let typeObject;
+    let animationTypeString;
     if (typeof animationType === 'string') {
       typeObject = types[animationType];
       animationTypeString = animationType;
     } else if (typeof animationType === 'object' &&
                animationType.type && typeof animationType.type === 'string') {
       typeObject = types[animationType.type];
       animationTypeString = animationType.type;
     }
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -1,11 +1,11 @@
 'use strict';
 
-var gCSSProperties = {
+const gCSSProperties = {
   'align-content': {
     // https://drafts.csswg.org/css-align/#propdef-align-content
     types: [
       { type: 'discrete' , options: [ [ 'flex-start', 'flex-end' ] ] }
     ]
   },
   'align-items': {
     // https://drafts.csswg.org/css-align/#propdef-align-items
@@ -141,17 +141,17 @@ var gCSSProperties = {
     types: [
       { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
     ]
   },
   'border-bottom-width': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-width
     types: [ 'length' ],
     setup: t => {
-      var element = createElement(t);
+      const element = createElement(t);
       element.style.borderBottomStyle = 'solid';
       return element;
     }
   },
   'border-collapse': {
     // https://drafts.csswg.org/css-tables/#propdef-border-collapse
     types: [
       { type: 'discrete', options: [ [ 'collapse', 'separate' ] ] }
@@ -228,17 +228,17 @@ var gCSSProperties = {
     types: [
       { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
     ]
   },
   'border-left-width': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-left-width
     types: [ 'length' ],
     setup: t => {
-      var element = createElement(t);
+      const element = createElement(t);
       element.style.borderLeftStyle = 'solid';
       return element;
     }
   },
   'border-right-color': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-right-color
     types: [ 'color' ]
   },
@@ -247,17 +247,17 @@ var gCSSProperties = {
     types: [
       { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
     ]
   },
   'border-right-width': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-right-width
     types: [ 'length' ],
     setup: t => {
-      var element = createElement(t);
+      const element = createElement(t);
       element.style.borderRightStyle = 'solid';
       return element;
     }
   },
   'border-spacing': {
     // https://drafts.csswg.org/css-tables/#propdef-border-spacing
     types: [ 'lengthPair' ]
   },
@@ -280,17 +280,17 @@ var gCSSProperties = {
     types: [
       { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
     ]
   },
   'border-top-width': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-top-width
     types: [ 'length' ],
     setup: t => {
-      var element = createElement(t);
+      const element = createElement(t);
       element.style.borderTopStyle = 'solid';
       return element;
     }
   },
   'bottom': {
     // https://drafts.csswg.org/css-position/#propdef-bottom
     types: [
     ]
@@ -397,17 +397,17 @@ var gCSSProperties = {
     types: [
       { type: 'discrete', options: [ [ 'none', 'dotted' ] ] }
     ]
   },
   'column-rule-width': {
     // https://drafts.csswg.org/css-multicol/#propdef-column-rule-width
     types: [ 'length' ],
     setup: t => {
-      var element = createElement(t);
+      const element = createElement(t);
       element.style.columnRuleStyle = 'solid';
       return element;
     }
   },
   'column-width': {
     // https://drafts.csswg.org/css-multicol/#propdef-column-width
     types: [ 'length',
       { type: 'discrete', options: [ [ 'auto', '1px' ] ] }
@@ -1039,17 +1039,17 @@ var gCSSProperties = {
     types: [
       { type: 'discrete', options: [ [ 'none', 'dotted' ] ] }
     ]
   },
   'outline-width': {
     // https://drafts.csswg.org/css-ui-3/#propdef-outline-width
     types: [ 'length' ],
     setup: t => {
-      var element = createElement(t);
+      const element = createElement(t);
       element.style.outlineStyle = 'solid';
       return element;
     }
   },
   'overflow': {
     // https://drafts.csswg.org/css-overflow/#propdef-overflow
     types: [
     ]
@@ -1363,17 +1363,17 @@ var gCSSProperties = {
     types: [
       { type: 'discrete', options: [ [ 'optimizeSpeed', 'optimizeLegibility' ] ] }
     ]
   },
   'text-shadow': {
     // https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow
     types: [ 'textShadowList' ],
     setup: t => {
-      var element = createElement(t);
+      const element = createElement(t);
       element.style.color = 'green';
       return element;
     }
   },
   'text-transform': {
     // https://drafts.csswg.org/css-text-3/#propdef-text-transform
     types: [
       { type: 'discrete', options: [ [ 'capitalize', 'uppercase' ] ] }
@@ -1509,44 +1509,44 @@ function testAnimationSamplesWithAnyOrde
 
     assert_array_equals(computedValues, expectedValues,
                         `The computed values should be ${expectedValues}` +
                         ` at ${testSample.time}ms`);
   });
 }
 
 function testAnimationSampleMatrices(animation, idlName, testSamples) {
-  var target = animation.effect.target;
+  const target = animation.effect.target;
   testSamples.forEach(function(testSample) {
     animation.currentTime = testSample.time;
-    var actual = getComputedStyle(target)[idlName];
-    var expected = createMatrixFromArray(testSample.expected);
+    const actual = getComputedStyle(target)[idlName];
+    const expected = createMatrixFromArray(testSample.expected);
     assert_matrix_equals(actual, expected,
                          'The value should be ' + expected +
                          ' at ' + testSample.time + 'ms but got ' + actual);
   });
 }
 
 function createTestElement(t, setup) {
   return setup ? setup(t) : createElement(t);
 }
 
 function isSupported(property) {
-  var testKeyframe = new TestKeyframe(propertyToIDL(property));
+  const testKeyframe = new TestKeyframe(propertyToIDL(property));
   try {
     // Since TestKeyframe returns 'undefined' for |property|,
     // the KeyframeEffect constructor will throw
     // if the string 'undefined' is not a valid value for the property.
     new KeyframeEffect(null, testKeyframe);
   } catch(e) {}
   return testKeyframe.propAccessCount !== 0;
 }
 
 function TestKeyframe(testProp) {
-  var _propAccessCount = 0;
+  let _propAccessCount = 0;
 
   Object.defineProperty(this, testProp, {
     get: function() { _propAccessCount++; },
     enumerable: true
   });
 
   Object.defineProperty(this, 'propAccessCount', {
     get: function() { return _propAccessCount; }
@@ -1558,17 +1558,17 @@ function propertyToIDL(property) {
   if (property === 'float') {
     return 'cssFloat';
   }
   return property.replace(/-[a-z]/gi,
                           function (str) {
                             return str.substr(1).toUpperCase(); });
 }
 function calcFromPercentage(idlName, percentageValue) {
-  var examElem = document.createElement('div');
+  const examElem = document.createElement('div');
   document.body.appendChild(examElem);
   examElem.style[idlName] = percentageValue;
 
-  var calcValue = getComputedStyle(examElem)[idlName];
+  const calcValue = getComputedStyle(examElem)[idlName];
   document.body.removeChild(examElem);
 
   return calcValue;
 }
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -1,79 +1,92 @@
 const discreteType = {
   testInterpolation: (property, setup, options) => {
     options.forEach(keyframes => {
-      var [ from, to ] = keyframes;
+      const [ from, to ] = keyframes;
       test(t => {
-        var idlName = propertyToIDL(property);
-        var target = createTestElement(t, setup);
-        var animation = target.animate({ [idlName]: [from, to] },
-                                       { duration: 1000, fill: 'both' });
+        const idlName = propertyToIDL(property);
+        const target = createTestElement(t, setup);
+        const animation = target.animate({ [idlName]: [from, to] },
+                                         { duration: 1000, fill: 'both' });
         testAnimationSamples(animation, idlName,
                              [{ time: 0,    expected: from.toLowerCase() },
                               { time: 499,  expected: from.toLowerCase() },
                               { time: 500,  expected: to.toLowerCase() },
                               { time: 1000, expected: to.toLowerCase() }]);
       }, property + ' uses discrete animation when animating between "'
          + from + '" and "' + to + '" with linear easing');
 
       test(t => {
         // Easing: http://cubic-bezier.com/#.68,0,1,.01
         // With this curve, we don't reach the 50% point until about 95% of
         // the time has expired.
-        var idlName = propertyToIDL(property);
-        var keyframes = {};
-        var target = createTestElement(t, setup);
-        var animation = target.animate({ [idlName]: [from, to] },
-                                       { duration: 1000, fill: 'both',
-                                         easing: 'cubic-bezier(0.68,0,1,0.01)' });
+        const idlName = propertyToIDL(property);
+        const keyframes = {};
+        const target = createTestElement(t, setup);
+        const animation = target.animate(
+          { [idlName]: [from, to] },
+          {
+            duration: 1000,
+            fill: 'both',
+            easing: 'cubic-bezier(0.68,0,1,0.01)',
+          }
+        );
         testAnimationSamples(animation, idlName,
                              [{ time: 0,    expected: from.toLowerCase() },
                               { time: 940,  expected: from.toLowerCase() },
                               { time: 960,  expected: to.toLowerCase() }]);
       }, property + ' uses discrete animation when animating between "'
          + from + '" and "' + to + '" with effect easing');
 
       test(t => {
         // Easing: http://cubic-bezier.com/#.68,0,1,.01
         // With this curve, we don't reach the 50% point until about 95% of
         // the time has expired.
-        var idlName = propertyToIDL(property);
-        var target = createTestElement(t, setup);
-        var animation = target.animate({ [idlName]: [from, to],
-                                         easing: 'cubic-bezier(0.68,0,1,0.01)' },
-                                       { duration: 1000, fill: 'both' });
+        const idlName = propertyToIDL(property);
+        const target = createTestElement(t, setup);
+        const animation = target.animate(
+          {
+            [idlName]: [from, to],
+            easing: 'cubic-bezier(0.68,0,1,0.01)',
+          },
+          { duration: 1000, fill: 'both' }
+        );
         testAnimationSamples(animation, idlName,
                              [{ time: 0,    expected: from.toLowerCase() },
                               { time: 940,  expected: from.toLowerCase() },
                               { time: 960,  expected: to.toLowerCase() }]);
       }, property + ' uses discrete animation when animating between "'
          + from + '" and "' + to + '" with keyframe easing');
     });
   },
 
   testAdditionOrAccumulation: (property, setup, options, composite) => {
     options.forEach(keyframes => {
-      var [ from, to ] = keyframes;
+      const [ from, to ] = keyframes;
       test(t => {
-        var idlName = propertyToIDL(property);
-        var target = createTestElement(t, setup);
+        const idlName = propertyToIDL(property);
+        const target = createTestElement(t, setup);
         target.animate({ [idlName]: [from, from] }, 1000);
-        var animation = target.animate({ [idlName]: [to, to] },
-                                       { duration: 1000, composite: composite });
+        const animation = target.animate(
+          { [idlName]: [to, to] },
+          { duration: 1000, composite }
+        );
         testAnimationSamples(animation, idlName,
                              [{ time: 0, expected: to.toLowerCase() }]);
       }, property + ': "' + to + '" onto "' + from + '"');
 
       test(t => {
-        var idlName = propertyToIDL(property);
-        var target = createTestElement(t, setup);
+        const idlName = propertyToIDL(property);
+        const target = createTestElement(t, setup);
         target.animate({ [idlName]: [to, to] }, 1000);
-        var animation = target.animate({ [idlName]: [from, from] },
-                                       { duration: 1000, composite: composite });
+        const animation = target.animate(
+          { [idlName]: [from, from] },
+          { duration: 1000, composite }
+        );
         testAnimationSamples(animation, idlName,
                              [{ time: 0, expected: from.toLowerCase() }]);
       }, property + ': "' + from + '" onto "' + to + '"');
     });
   },
 
   testAddition: function(property, setup, options) {
     this.testAdditionOrAccumulation(property, setup, options, 'add');
@@ -82,164 +95,188 @@ const discreteType = {
   testAccumulation: function(property, setup, options) {
     this.testAdditionOrAccumulation(property, setup, options, 'accumulate');
   },
 };
 
 const lengthType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['10px', '50px'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['10px', '50px'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: '30px' }]);
     }, property + ' supports animating as a length');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['1rem', '5rem'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['1rem', '5rem'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: '30px' }]);
     }, property + ' supports animating as a length of rem');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '10px';
-      var animation = target.animate({ [idlName]: ['10px', '50px'] },
-                                     { duration: 1000, composite: composite});
+      const animation = target.animate(
+        { [idlName]: ['10px', '50px'] },
+        { duration: 1000, composite }
+      );
       testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]);
     }, property + ': length');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '1rem';
-      var animation = target.animate({ [idlName]: ['1rem', '5rem'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate(
+        { [idlName]: ['1rem', '5rem'] },
+        { duration: 1000, composite }
+      );
       testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]);
     }, property + ': length of rem');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
 
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 };
 
 const lengthPairType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['10px 10px', '50px 50px'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        { [idlName]: ['10px 10px', '50px 50px'] },
+        { duration: 1000, fill: 'both' }
+      );
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: '30px 30px' }]);
     }, property + ' supports animating as a length pair');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['1rem 1rem', '5rem 5rem'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        { [idlName]: ['1rem 1rem', '5rem 5rem'] },
+        { duration: 1000, fill: 'both' }
+      );
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: '30px 30px' }]);
     }, property + ' supports animating as a length pair of rem');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '10px 10px';
-      var animation = target.animate({ [idlName]: ['10px 10px', '50px 50px'] },
-                                     { duration: 1000, composite: composite });
-      testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px 20px' }]);
+      const animation = target.animate(
+        { [idlName]: ['10px 10px', '50px 50px'] },
+        { duration: 1000, composite }
+      );
+      testAnimationSamples(
+        animation,
+        idlName,
+        [{ time: 0, expected: '20px 20px' }]
+      );
     }, property + ': length pair');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '1rem 1rem';
-      var animation = target.animate({ [idlName]: ['1rem 1rem', '5rem 5rem'] },
-                                     { duration: 1000, composite: composite });
-      testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px 20px' }]);
+      const animation = target.animate(
+        { [idlName]: ['1rem 1rem', '5rem 5rem'] },
+        { duration: 1000, composite }
+      );
+      testAnimationSamples(
+        animation,
+        idlName,
+        [{ time: 0, expected: '20px 20px' }]
+      );
     }, property + ': length pair of rem');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
 
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 };
 
 const percentageType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['10%', '50%'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['10%', '50%'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: '30%' }]);
     }, property + ' supports animating as a percentage');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '60%';
-      var animation = target.animate({ [idlName]: ['70%', '100%'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate(
+        { [idlName]: ['70%', '100%'] },
+        { duration: 1000, composite }
+      );
       testAnimationSamples(animation, idlName, [{ time: 0, expected: '130%' }]);
     }, property + ': percentage');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
 
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 };
 
 const integerType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: [-2, 2] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: [-2, 2] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: '0' }]);
     }, property + ' supports animating as an integer');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = -1;
-      var animation = target.animate({ [idlName]: [-2, 2] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate(
+        { [idlName]: [-2, 2] },
+        { duration: 1000, composite }
+      );
       testAnimationSamples(animation, idlName,
                            [{ time: 0,    expected: '-3' }]);
     }, property + ': integer');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
@@ -247,32 +284,34 @@ const integerType = {
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 };
 
 const positiveIntegerType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: [1, 3] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: [1, 3] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [ { time: 500,  expected: '2' } ]);
     }, property + ' supports animating as a positive integer');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 1;
-      var animation = target.animate({ [idlName]: [2, 5] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate(
+        { [idlName]: [2, 5] },
+        { duration: 1000, composite }
+      );
       testAnimationSamples(animation, idlName,
                            [{ time: 0,    expected: '3' }]);
     }, property + ': positive integer');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
@@ -283,143 +322,145 @@ const positiveIntegerType = {
 };
 
 const lengthPercentageOrCalcType = {
   testInterpolation: (property, setup) => {
     lengthType.testInterpolation(property, setup);
     percentageType.testInterpolation(property, setup);
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['10px', '20%'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['10px', '20%'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: 'calc(5px + 10%)' }]);
     }, property + ' supports animating as combination units "px" and "%"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['10%', '2em'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['10%', '2em'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: 'calc(10px + 5%)' }]);
     }, property + ' supports animating as combination units "%" and "em"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['1em', '2rem'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['1em', '2rem'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: '15px' }]);
     }, property + ' supports animating as combination units "em" and "rem"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['10px', 'calc(1em + 20%)'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        { [idlName]: ['10px', 'calc(1em + 20%)'] },
+        { duration: 1000, fill: 'both' }
+      );
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: 'calc(10px + 10%)' }]);
     }, property + ' supports animating as combination units "px" and "calc"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate(
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
         { [idlName]: ['calc(10px + 10%)', 'calc(1em + 1rem + 20%)'] },
         { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,
                               expected: 'calc(15px + 15%)' }]);
     }, property + ' supports animating as a calc');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     lengthType.testAddition(property, setup);
     percentageType.testAddition(property, setup);
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '10px';
-      var animation = target.animate({ [idlName]: ['10%', '50%'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: ['10%', '50%'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0, expected: 'calc(10px + 10%)' }]);
     }, property + ': units "%" onto "px"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '10%';
-      var animation = target.animate({ [idlName]: ['10px', '50px'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: ['10px', '50px'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0, expected: 'calc(10px + 10%)' }]);
     }, property + ': units "px" onto "%"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '10%';
-      var animation = target.animate({ [idlName]: ['2rem', '5rem'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: ['2rem', '5rem'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0, expected: 'calc(20px + 10%)' }]);
     }, property + ': units "rem" onto "%"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '2rem';
-      var animation = target.animate({ [idlName]: ['10%', '50%'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: ['10%', '50%'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0, expected: 'calc(20px + 10%)' }]);
     }, property + ': units "%" onto "rem"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '2em';
-      var animation = target.animate({ [idlName]: ['2rem', '5rem'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: ['2rem', '5rem'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName, [{ time: 0, expected: '40px' }]);
     }, property + ': units "rem" onto "em"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '2rem';
-      var animation = target.animate({ [idlName]: ['2em', '5em'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: ['2em', '5em'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName, [{ time: 0, expected: '40px' }]);
     }, property + ': units "em" onto "rem"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '10px';
-      var animation = target.animate({ [idlName]: ['calc(2em + 20%)',
+      const animation = target.animate({ [idlName]: ['calc(2em + 20%)',
                                                    'calc(5rem + 50%)'] },
-                                     { duration: 1000, composite: composite });
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0, expected: 'calc(30px + 20%)' }]);
     }, property + ': units "calc" onto "px"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'calc(10px + 10%)';
-      var animation = target.animate({ [idlName]: ['calc(20px + 20%)',
+      const animation = target.animate({ [idlName]: ['calc(20px + 20%)',
                                                    'calc(2em + 3rem + 40%)'] },
-                                     { duration: 1000, composite: composite });
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0, expected: 'calc(30px + 30%)' }]);
     }, property + ': calc');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
@@ -427,32 +468,32 @@ const lengthPercentageOrCalcType = {
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 };
 
 const positiveNumberType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: [1.1, 1.5] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: [1.1, 1.5] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: '1.3' }]);
     }, property + ' supports animating as a positive number');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 1.1;
-      var animation = target.animate({ [idlName]: [1.1, 1.5] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: [1.1, 1.5] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName, [{ time: 0, expected: '2.2' }]);
     }, property + ': positive number');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
 
@@ -460,100 +501,100 @@ const positiveNumberType = {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 };
 
 // Test using float values in the range [0, 1]
 const opacityType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: [0.3, 0.8] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: [0.3, 0.8] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: '0.55' }]);
     }, property + ' supports animating as a [0, 1] number');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 0.3;
-      var animation = target.animate({ [idlName]: [0.3, 0.8] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: [0.3, 0.8] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName, [{ time: 0, expected: '0.6' }]);
     }, property + ': [0, 1] number');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 0.8;
-      var animation = target.animate({ [idlName]: [0.3, 0.8] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: [0.3, 0.8] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName, [{ time: 0, expected: '1' }]);
     }, property + ': [0, 1] number (clamped)');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
 
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 };
 
 const visibilityType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['visible', 'hidden'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['visible', 'hidden'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 0,    expected: 'visible' },
                             { time: 999,  expected: 'visible' },
                             { time: 1000, expected: 'hidden' }]);
     }, property + ' uses visibility animation when animating '
        + 'from "visible" to "hidden"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['hidden', 'visible'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['hidden', 'visible'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 0,    expected: 'hidden' },
                             { time: 1,    expected: 'visible' },
                             { time: 1000, expected: 'visible' }]);
     }, property + ' uses visibility animation when animating '
      + 'from "hidden" to "visible"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['hidden', 'collapse'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['hidden', 'collapse'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 0,    expected: 'hidden' },
                             { time: 499,  expected: 'hidden' },
                             { time: 500,  expected: 'collapse' },
                             { time: 1000, expected: 'collapse' }]);
     }, property + ' uses visibility animation when animating '
      + 'from "hidden" to "collapse"');
 
     test(t => {
       // Easing: http://cubic-bezier.com/#.68,-.55,.26,1.55
       // With this curve, the value is less than 0 till about 34%
       // also more than 1 since about 63%
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: ['visible', 'hidden'] },
                        { duration: 1000, fill: 'both',
                          easing: 'cubic-bezier(0.68, -0.55, 0.26, 1.55)' });
       testAnimationSamples(animation, idlName,
                            [{ time: 0,    expected: 'visible' },
                             { time: 1,    expected: 'visible' },
                             { time: 330,  expected: 'visible' },
                             { time: 340,  expected: 'visible' },
@@ -561,34 +602,34 @@ const visibilityType = {
                             { time: 630,  expected: 'hidden' },
                             { time: 1000, expected: 'hidden' }]);
     }, property + ' uses visibility animation when animating '
      + 'from "visible" to "hidden" with easeInOutBack easing');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'visible';
-      var animation = target.animate({ [idlName]: ['visible', 'hidden'] },
-                                     { duration: 1000, fill: 'both',
-                                       composite: composite });
+      const animation = target.animate({ [idlName]: ['visible', 'hidden'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0,    expected: 'visible' },
                             { time: 1000, expected: 'visible' }]);
     }, property + ': onto "visible"');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'hidden';
-      var animation = target.animate({ [idlName]: ['hidden', 'visible'] },
-                                     { duration: 1000, fill: 'both',
-                                       composite: composite });
+      const animation = target.animate({ [idlName]: ['hidden', 'visible'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0,    expected: 'hidden' },
                             { time: 1000, expected: 'visible' }]);
     }, property + ': onto "hidden"');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
@@ -597,142 +638,158 @@ const visibilityType = {
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 };
 
 const colorType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['rgb(255, 0, 0)',
-                                                   'rgb(0, 0, 255)'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['rgb(255, 0, 0)',
+                                                     'rgb(0, 0, 255)'] },
+                                       1000);
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: 'rgb(128, 0, 128)' }]);
     }, property + ' supports animating as color of rgb()');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },
+                                       1000);
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: 'rgb(128, 0, 128)' }]);
     }, property + ' supports animating as color of #RGB');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['hsl(0,   100%, 50%)',
-                                                   'hsl(240, 100%, 50%)'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['hsl(0,   100%, 50%)',
+                                                     'hsl(240, 100%, 50%)'] },
+                                       1000);
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: 'rgb(128, 0, 128)' }]);
     }, property + ' supports animating as color of hsl()');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['#ff000066', '#0000ffcc'] },
-                                     1000);
-                                             // R: 255 * (0.4 * 0.5) / 0.6 = 85
-                                             // G: 255 * (0.8 * 0.5) / 0.6 = 170
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        { [idlName]: ['#ff000066', '#0000ffcc'] },
+        1000
+      );
+      // R: 255 * (0.4 * 0.5) / 0.6 = 85
+      // B: 255 * (0.8 * 0.5) / 0.6 = 170
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: 'rgba(85, 0, 170, 0.6)' }]);
     }, property + ' supports animating as color of #RGBa');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4)',
-                                                   'rgba(0, 0, 255, 0.8)'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: ['rgba(255, 0, 0, 0.4)', 'rgba(0, 0, 255, 0.8)'],
+        },
+        1000
+      );
       testAnimationSamples(animation, idlName,      // Same as above.
                            [{ time: 500,  expected: 'rgba(85, 0, 170, 0.6)' }]);
     }, property + ' supports animating as color of rgba()');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['hsla(0,   100%, 50%, 0.4)',
-                                                   'hsla(240, 100%, 50%, 0.8)'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: ['hsla(0,   100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8)'],
+        },
+        1000
+      );
       testAnimationSamples(animation, idlName,      // Same as above.
                            [{ time: 500,  expected: 'rgba(85, 0, 170, 0.6)' }]);
     }, property + ' supports animating as color of hsla()');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(128, 128, 128)';
-      var animation = target.animate({ [idlName]: ['rgb(255, 0, 0)',
-                                                   'rgb(0, 0, 255)'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate(
+        {
+          [idlName]: ['rgb(255, 0, 0)', 'rgb(0, 0, 255)'],
+        },
+        { duration: 1000, composite }
+      );
       testAnimationSamples(animation, idlName,
                            [{ time: 0,   expected: 'rgb(255, 128, 128)' },
                             // The value at 50% is interpolated
                             // from 'rgb(128+255, 128, 128)'
                             // to   'rgb(128,     128, 128+255)'.
                             { time: 500, expected: 'rgb(255, 128, 255)' }]);
     }, property + ' supports animating as color of rgb() with overflowed ' +
        'from and to values');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(128, 128, 128)';
-      var animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0,  expected: 'rgb(255, 128, 128)' }]);
     }, property + ' supports animating as color of #RGB');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(128, 128, 128)';
-      var animation = target.animate({ [idlName]: ['hsl(0,   100%, 50%)',
-                                                   'hsl(240, 100%, 50%)'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: ['hsl(0,   100%, 50%)',
+                                                     'hsl(240, 100%, 50%)'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0,  expected: 'rgb(255, 128, 128)' }]);
     }, property + ' supports animating as color of hsl()');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(128, 128, 128)';
-      var animation = target.animate({ [idlName]: ['#ff000066', '#0000ffcc'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate(
+        { [idlName]: ['#ff000066', '#0000ffcc'] },
+        { duration: 1000, composite }
+      );
       testAnimationSamples(animation, idlName,
                            [{ time: 0,  expected: 'rgb(230, 128, 128)' }]);
     }, property + ' supports animating as color of #RGBa');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(128, 128, 128)';
-      var animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4)',
-                                                   'rgba(0, 0, 255, 0.8)'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4)',
+                                                     'rgba(0, 0, 255, 0.8)'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,      // Same as above.
                            [{ time: 0,  expected: 'rgb(230, 128, 128)' }]);
     }, property + ' supports animating as color of rgba()');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(128, 128, 128)';
-      var animation = target.animate({ [idlName]: ['hsla(0,   100%, 50%, 0.4)',
-                                                   'hsla(240, 100%, 50%, 0.8)'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate(
+        {
+          [idlName]: ['hsla(0,   100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8)'],
+        },
+        { duration: 1000, composite }
+      );
       testAnimationSamples(animation, idlName,      // Same as above.
                            [{ time: 0,  expected: 'rgb(230, 128, 128)' }]);
     }, property + ' supports animating as color of hsla()');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
@@ -740,291 +797,313 @@ const colorType = {
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 };
 
 const transformListType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['translate(200px, -200px)',
-                                                   'translate(400px, 400px)'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: ['translate(200px, -200px)', 'translate(400px, 400px)'],
+        },
+        1000
+      );
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500,  expected: [ 1, 0, 0, 1, 300, 100 ] }]);
     }, property + ': translate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['rotate(45deg)',
-                                                   'rotate(135deg)'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: ['rotate(45deg)', 'rotate(135deg)'],
+        },
+        1000
+      );
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500,  expected: [ Math.cos(Math.PI / 2),
                                    Math.sin(Math.PI / 2),
                                   -Math.sin(Math.PI / 2),
                                    Math.cos(Math.PI / 2),
                                    0, 0] }]);
     }, property + ': rotate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['scale(3)', 'scale(5)'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['scale(3)', 'scale(5)'] },
+                                       1000);
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500,  expected: [ 4, 0, 0, 4, 0, 0 ] }]);
     }, property + ': scale');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['skew(30deg, 60deg)',
-                                                   'skew(60deg, 30deg)'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['skew(30deg, 60deg)',
+                                                     'skew(60deg, 30deg)'] },
+                                       1000);
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500,  expected: [ 1, Math.tan(Math.PI / 4),
                                    Math.tan(Math.PI / 4), 1,
                                    0, 0] }]);
     }, property + ': skew');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: ['translateX(100px) rotate(45deg)',
                                      'translateX(200px) rotate(135deg)'] },
                        1000);
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500,  expected: [ Math.cos(Math.PI / 2),
                                    Math.sin(Math.PI / 2),
                                   -Math.sin(Math.PI / 2),
                                    Math.cos(Math.PI / 2),
                                    150, 0 ] }]);
     }, property + ': rotate and translate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: ['rotate(45deg) translateX(100px)',
                                      'rotate(135deg) translateX(200px)'] },
                        1000);
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500, expected: [ Math.cos(Math.PI / 2),
                                   Math.sin(Math.PI / 2),
                                  -Math.sin(Math.PI / 2),
                                   Math.cos(Math.PI / 2),
                                   150 * Math.cos(Math.PI / 2),
                                   150 * Math.sin(Math.PI / 2) ] }]);
     }, property + ': translate and rotate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =                // matrix(0, 1, -1, 0, 0, 100)
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =              // matrix(0, 1, -1, 0, 0, 100)
         target.animate({ [idlName]: ['rotate(90deg) translateX(100px)',
                                      // matrix(-1, 0, 0, -1, 200, 0)
                                      'translateX(200px) rotate(180deg)'] },
                        1000);
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4),
                                   Math.sin(Math.PI * 3 / 4),
                                  -Math.sin(Math.PI * 3 / 4),
                                   Math.cos(Math.PI * 3 / 4),
                                   100, 50 ] }]);
     }, property + ': mismatch order of translate and rotate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =                 // Same matrices as above.
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =               // Same matrices as above.
         target.animate({ [idlName]: [ 'matrix(0, 1, -1, 0, 0, 100)',
                                       'matrix(-1, 0, 0, -1, 200, 0)' ] },
                        1000);
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4),
                                   Math.sin(Math.PI * 3 / 4),
                                  -Math.sin(Math.PI * 3 / 4),
                                   Math.cos(Math.PI * 3 / 4),
                                   100, 50 ] }]);
     }, property + ': matrix');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, 0deg)',
                                       'rotate3d(1, 1, 0, 90deg)'] },
                        1000);
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI / 4) }]);
     }, property + ': rotate3d');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       // To calculate expected matrices easily, generate input matrices from
       // rotate3d.
-      var from = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);
-      var to = rotate3dToMatrix3d(1, 1, 0, Math.PI * 3 / 4);
-      var animation =
-        target.animate({ [idlName]: [ from, to ] }, 1000);
+      const from = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);
+      const to = rotate3dToMatrix3d(1, 1, 0, Math.PI * 3 / 4);
+      const animation = target.animate({ [idlName]: [ from, to ] }, 1000);
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI * 2 / 4) }]);
     }, property + ': matrix3d');
 
     // This test aims for forcing the two mismatched transforms to be
     // decomposed into matrix3d before interpolation. Therefore, we not only
     // test the interpolation, but also test the 3D matrix decomposition.
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
-        target.animate({ [idlName]: ['scale(0.3)',
-                                     // scale(0.5) translateZ(1px)
-                                     'matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1)'] },
-                       1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: [
+            'scale(0.3)',
+            // scale(0.5) translateZ(1px)
+            'matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1)',
+          ],
+        },
+        1000
+      );
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 500,  expected: [ 0.4, 0,   0,   0,
                                    0,   0.4, 0,   0,
                                    0,   0,   1,   0,
                                    0,   0,   0.5, 1] }]);
     }, property + ': mismatched 3D transforms');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: ['rotateY(60deg)', 'none' ] }, 1000);
 
       testAnimationSampleMatrices(animation, idlName,
                    // rotateY(30deg) == rotate3D(0, 1, 0, 30deg)
         [{ time: 500, expected: rotate3dToMatrix(0, 1, 0, Math.PI / 6) }]);
     }, property + ': rotateY');
 
     // Following tests aim for test the fallback discrete interpolation behavior
     // for non-invertible matrices. The non-invertible matrix that we use is the
     // singular matrix, matrix(1, 1, 0, 0, 0, 100).
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',
                                      'matrix( 1, 1, 0,  0, 0, 100)'] },
                        { duration: 1000, fill: 'both' });
 
       testAnimationSampleMatrices(animation, idlName,
         [ { time: 0,    expected: [ -1, 0, 0, -1, 200,   0 ] },
           { time: 499,  expected: [ -1, 0, 0, -1, 200,   0 ] },
           { time: 500,  expected: [  1, 1, 0,  0,   0, 100 ] },
           { time: 1000, expected: [  1, 1, 0,  0,   0, 100 ] }]);
     }, property + ': non-invertible matrices');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =                // matrix(0, -1, 1, 0, 250, 0)
-        target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
-                                     // matrix(-1, -1, 0, 0, 100, 100)
-                                     'translate(100px) matrix( 1, 1, 0,  0, 0, 100) rotate(180deg)'] },
-                       { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: [
+            // matrix(0, -1, 1, 0, 250, 0)
+            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
+            // matrix(-1, -1, 0, 0, 100, 100)
+            'translate(100px) matrix( 1, 1, 0,  0, 0, 100) rotate(180deg)',
+          ],
+        },
+        { duration: 1000, fill: 'both' }
+      );
 
       testAnimationSampleMatrices(animation, idlName,
         [ { time: 0,    expected: [  0, -1, 1, 0, 250,   0 ] },
           { time: 499,  expected: [  0, -1, 1, 0, 250,   0 ] },
           { time: 500,  expected: [ -1, -1, 0, 0, 100, 100 ] },
           { time: 1000, expected: [ -1, -1, 0, 0, 100, 100 ] }]);
     }, property + ': non-invertible matrices in matched transform lists');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =                // matrix(-2, 0, 0, -2, 250, 0)
-        target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
-                                     // matrix(1, 1, 1, 1, 100, 100)
-                                     'translate(100px) matrix( 1, 1, 0,  0, 0, 100) skew(45deg)'] },
-                       { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: [
+            // matrix(-2, 0, 0, -2, 250, 0)
+            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
+            // matrix(1, 1, 1, 1, 100, 100)
+            'translate(100px) matrix( 1, 1, 0,  0, 0, 100) skew(45deg)',
+          ],
+        },
+        { duration: 1000, fill: 'both' }
+      );
 
       testAnimationSampleMatrices(animation, idlName,
         [ { time: 0,    expected: [ -2, 0, 0, -2, 250,   0 ] },
           { time: 499,  expected: [ -2, 0, 0, -2, 250,   0 ] },
           { time: 500,  expected: [  1, 1, 1,  1, 100, 100 ] },
           { time: 1000, expected: [  1, 1, 1,  1, 100, 100 ] }]);
     }, property + ': non-invertible matrices in mismatched transform lists');
   },
 
   testAddition: function(property, setup) {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'translateX(100px)';
-      var animation = target.animate({ [idlName]: ['translateX(-200px)',
-                                                   'translateX(500px)'] },
-                                     { duration: 1000, fill: 'both',
-                                       composite: 'add' });
+      const animation = target.animate({ [idlName]: ['translateX(-200px)',
+                                                     'translateX(500px)'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite: 'add' });
       testAnimationSampleMatrices(animation, idlName,
         [ { time: 0,    expected: [ 1, 0, 0, 1, -100, 0 ] },
           { time: 1000, expected: [ 1, 0, 0, 1,  600, 0 ] }]);
     }, property + ': translate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rotate(45deg)';
-      var animation = target.animate({ [idlName]: ['rotate(-90deg)',
-                                                   'rotate(90deg)'] },
-                                     { duration: 1000, fill: 'both',
-                                       composite: 'add' });
+      const animation = target.animate({ [idlName]: ['rotate(-90deg)',
+                                                     'rotate(90deg)'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite: 'add' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: [ Math.cos(-Math.PI / 4),
                                    Math.sin(-Math.PI / 4),
                                   -Math.sin(-Math.PI / 4),
                                    Math.cos(-Math.PI / 4),
                                    0, 0] },
          { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),
                                    Math.sin(Math.PI * 3 / 4),
                                   -Math.sin(Math.PI * 3 / 4),
                                    Math.cos(Math.PI * 3 / 4),
                                    0, 0] }]);
     }, property + ': rotate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'scale(2)';
-      var animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },
-                                     { duration: 1000, fill: 'both',
-                                       composite: 'add' });
+      const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite: 'add' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: [ -6, 0, 0, -6, 0, 0 ] }, // scale(-3) scale(2)
          { time: 1000, expected: [ 10, 0, 0, 10, 0, 0 ] }]); // scale(5) scale(2)
     }, property + ': scale');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
                               // matrix(1, tan(10deg), tan(10deg), 1)
       target.style[idlName] = 'skew(10deg, 10deg)';
-      var animation =                // matrix(1, tan(20deg), tan(-30deg), 1)
+      const animation =              // matrix(1, tan(20deg), tan(-30deg), 1)
         target.animate({ [idlName]: ['skew(-30deg, 20deg)',
                                      // matrix(1, tan(-30deg), tan(20deg), 1)
                                      'skew(20deg, -30deg)'] },
                        { duration: 1000, fill: 'both', composite: 'add' });
 
       // matrix at 0%.
       // [ 1          tan(10deg) ] [ 1          tan(-30deg) ]
       // [ tan(10deg)          1 ] [ tan(20deg)           1 ] =
@@ -1048,161 +1127,161 @@ const transformListType = {
          { time: 1000, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),
                                    Math.tan(Math.PI/18) + Math.tan(-Math.PI/6),
                                    Math.tan(Math.PI/9) + Math.tan(Math.PI/18),
                                    1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9),
                                    0, 0] }]);
     }, property + ': skew');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
                                // matrix(1, 0, 0, 1, 100, 0)
       target.style[idlName] = 'translateX(100px)';
-      var animation =                // matrix(0, 1, -1, 0, 0, 0)
+      const animation =              // matrix(0, 1, -1, 0, 0, 0)
         target.animate({ [idlName]: ['rotate(90deg)',
                                      // matrix(-1, 0, 0, -1, 0, 0)
                                      'rotate(180deg)'] },
                        { duration: 1000, fill: 'both', composite: 'add' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: [  0, 1, -1,  0, 100, 0 ] },
          { time: 1000, expected: [ -1, 0,  0, -1, 100, 0 ] }]);
     }, property + ': rotate on translate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
                                // matrix(0, 1, -1, 0, 0, 0)
       target.style[idlName] = 'rotate(90deg)';
-      var animation =                // matrix(1, 0, 0, 1, 100, 0)
+      const animation =              // matrix(1, 0, 0, 1, 100, 0)
         target.animate({ [idlName]: ['translateX(100px)',
                                      // matrix(1, 0, 0, 1, 200, 0)
                                      'translateX(200px)'] },
                        { duration: 1000, fill: 'both', composite: 'add' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: [ 0, 1, -1, 0, 0, 100 ] },
          { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);
     }, property + ': translate on rotate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';
-      var animation =                 // Same matrices as above.
+      const animation =               // Same matrices as above.
         target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',
                                       'matrix(1, 0, 0, 1, 200, 0)' ] },
                        { duration: 1000, fill: 'both', composite: 'add' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: [ 0, 1, -1, 0, 0, 100 ] },
          { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);
     }, property + ': matrix');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';
-      var animation =
+      const animation =
         target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',
                                       'rotate3d(1, 1, 0, 90deg)'] },
                        { duration: 1000, fill: 'both', composite: 'add' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: rotate3dToMatrix(1, 1, 0,    -Math.PI / 4) },
          { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);
     }, property + ': rotate3d');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       // To calculate expected matrices easily, generate input matrices from
       // rotate3d.
       target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);
-      var from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);
-      var to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);
-      var animation =
+      const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);
+      const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);
+      const animation =
         target.animate({ [idlName]: [ from, to ] },
                        { duration: 1000, fill: 'both', composite: 'add' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: rotate3dToMatrix(1, 1, 0,    -Math.PI / 4) },
          { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);
     }, property + ': matrix3d');
 
     // Following tests aim for test the addition behavior for non-invertible
     // matrices. Note that the addition for non-invertible matrices should be
     // the same, just like addition for invertible matrices. With these tests,
     // we can assure that addition never behaves as discrete. The non-invertible
     // matrix that we use is the singular matrix, matrix(1, 1, 0, 0, 0, 100).
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'translateX(50px)';
-      var animation =
+      const animation =
         target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',
                                      'matrix( 1, 1, 0,  0, 0, 100)'] },
                        { duration: 1000, fill: 'both', composite: 'add' });
 
       testAnimationSampleMatrices(animation, idlName,
         [ { time: 0,    expected: [ -1, 0, 0, -1, 250,   0 ] },
           { time: 1000, expected: [  1, 1, 0,  0,  50, 100 ] }]);
     }, property + ': non-invertible matrices');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'translateX(50px)';
-      var animation =                // matrix(0, -1, 1, 0, 200, 0)
+      const animation =              // matrix(0, -1, 1, 0, 200, 0)
         target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
                                      // matrix(-1, -1, 0, 0, 0, 100)
                                      'matrix( 1, 1, 0,  0, 0, 100) rotate(180deg)'] },
                        { duration: 1000, fill: 'both', composite: 'add' });
 
       testAnimationSampleMatrices(animation, idlName,
         [ { time: 0,    expected: [  0, -1, 1, 0, 250,   0 ] },
           { time: 1000, expected: [ -1, -1, 0, 0,  50, 100 ] }]);
     }, property + ': non-invertible matrices in matched transform lists');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'translateX(50px)';
-      var animation =                // matrix(-2, 0, 0, -2, 200, 0)
+      const animation =                // matrix(-2, 0, 0, -2, 200, 0)
         target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) scale(2)',
                                      // matrix(1, 1, 1, 1, 0, 100)
                                      'matrix( 1, 1, 0,  0, 0, 100) skew(45deg)'] },
                        { duration: 1000, fill: 'both', composite: 'add' });
 
       testAnimationSampleMatrices(animation, idlName,
         [ { time: 0,    expected: [ -2, 0, 0, -2, 250,   0 ] },
           { time: 1000, expected: [  1, 1, 1,  1,  50, 100 ] }]);
     }, property + ': non-invertible matrices in mismatched transform lists');
   },
 
   testAccumulation: function(property, setup) {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'translateX(100px)';
-      var animation = target.animate({ [idlName]: ['translateX(-200px)',
+      const animation = target.animate({ [idlName]: ['translateX(-200px)',
                                                    'translateX(500px)'] },
                                      { duration: 1000, fill: 'both',
                                        composite: 'accumulate' });
       testAnimationSampleMatrices(animation, idlName,
         [ { time: 0,    expected: [ 1, 0, 0, 1, -100, 0 ] },
           { time: 1000, expected: [ 1, 0, 0, 1,  600, 0 ] }]);
     }, property + ': translate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rotate(45deg)';
-      var animation = target.animate({ [idlName]: ['rotate(-90deg)',
+      const animation = target.animate({ [idlName]: ['rotate(-90deg)',
                                                    'rotate(90deg)'] },
                                      { duration: 1000, fill: 'both',
                                        composite: 'accumulate' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: [ Math.cos(-Math.PI / 4),
                                    Math.sin(-Math.PI / 4),
                                   -Math.sin(-Math.PI / 4),
@@ -1211,713 +1290,795 @@ const transformListType = {
          { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),
                                    Math.sin(Math.PI * 3 / 4),
                                   -Math.sin(Math.PI * 3 / 4),
                                    Math.cos(Math.PI * 3 / 4),
                                    0, 0] }]);
     }, property + ': rotate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'scale(2)';
-      var animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },
+      const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },
                                      { duration: 1000, fill: 'both',
                                        composite: 'accumulate' });
 
       testAnimationSampleMatrices(animation, idlName,
                                   // scale((2 - 1) + (-3 - 1) + 1)
         [{ time: 0,    expected: [ -2, 0, 0, -2, 0, 0 ] },
                                   // scale((2 - 1) + (5 - 1) + 1)
          { time: 1000, expected: [  6, 0, 0,  6, 0, 0 ] }]);
     }, property + ': scale');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
                               // matrix(1, tan(10deg), tan(10deg), 1)
       target.style[idlName] = 'skew(10deg, 10deg)';
-      var animation =                // matrix(1, tan(20deg), tan(-30deg), 1)
+      const animation =                // matrix(1, tan(20deg), tan(-30deg), 1)
         target.animate({ [idlName]: ['skew(-30deg, 20deg)',
                                      // matrix(1, tan(-30deg), tan(20deg), 1)
                                      'skew(20deg, -30deg)'] },
                        { duration: 1000, fill: 'both', composite: 'accumulate' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: [ 1, Math.tan(Math.PI/6),
                                    Math.tan(-Math.PI/9), 1,
                                    0, 0] },
          { time: 1000, expected: [ 1, Math.tan(-Math.PI/9),
                                    Math.tan(Math.PI/6), 1,
                                    0, 0] }]);
     }, property + ': skew');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
                                // matrix(1, 0, 0, 1, 100, 0)
       target.style[idlName] = 'translateX(100px)';
-      var animation =                // matrix(0, 1, -1, 0, 0, 0)
+      const animation =                // matrix(0, 1, -1, 0, 0, 0)
         target.animate({ [idlName]: ['rotate(90deg)',
                                      // matrix(-1, 0, 0, -1, 0, 0)
                                      'rotate(180deg)'] },
                        { duration: 1000, fill: 'both', composite: 'accumulate' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: [  0, 1, -1,  0, 100, 0 ] },
          { time: 1000, expected: [ -1, 0,  0, -1, 100, 0 ] }]);
     }, property + ': rotate on translate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
                                // matrix(0, 1, -1, 0, 0, 0)
       target.style[idlName] = 'rotate(90deg)';
-      var animation =                // matrix(1, 0, 0, 1, 100, 0)
+      const animation =                // matrix(1, 0, 0, 1, 100, 0)
         target.animate({ [idlName]: ['translateX(100px)',
                                      // matrix(1, 0, 0, 1, 200, 0)
                                      'translateX(200px)'] },
                        { duration: 1000, fill: 'both', composite: 'accumulate' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: [ 0, 1, -1, 0, 100, 0 ] },
          { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);
     }, property + ': translate on rotate');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';
-      var animation =                 // Same matrices as above.
+      const animation =                 // Same matrices as above.
         target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',
                                       'matrix(1, 0, 0, 1, 200, 0)' ] },
                        { duration: 1000, fill: 'both', composite: 'accumulate' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: [ 0, 1, -1, 0, 100, 0 ] },
          { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);
     }, property + ': matrix');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';
-      var animation =
+      const animation =
         target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',
                                       'rotate3d(1, 1, 0, 90deg)'] },
                        { duration: 1000, fill: 'both', composite: 'accumulate' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: rotate3dToMatrix(1, 1, 0,    -Math.PI / 4) },
          { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);
     }, property + ': rotate3d');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       // To calculate expected matrices easily, generate input matrices from
       // rotate3d.
       target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);
-      var from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);
-      var to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);
-      var animation =
+      const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);
+      const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);
+      const animation =
         target.animate({ [idlName]: [ from, to ] },
                        { duration: 1000, fill: 'both', composite: 'accumulate' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: rotate3dToMatrix(1, 1, 0,    -Math.PI / 4) },
          { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);
     }, property + ': matrix3d');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var matrixArray = [ 1, 0, 0, 0,
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const matrixArray = [ 1, 0, 0, 0,
                           0, 1, 0, 0,
                           0, 0, 1, 0,
                           0, 0, 1, 1 ];
 
       target.style[idlName] = createMatrixFromArray(matrixArray);
-      var animation =
+      const animation =
         target.animate({ [idlName]: [ 'none', 'none' ] },
                        { duration: 1000, fill: 'both', composite: 'accumulate' });
 
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: matrixArray },
          { time: 1000, expected: matrixArray }]);
     }, property + ': none');
 
     // Following tests aim for test the fallback discrete accumulation behavior
     // for non-invertible matrices. The non-invertible matrix that we use is the
     // singular matrix, matrix(1, 1, 0, 0, 0, 100).
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',
                                    'matrix(-1, 0, 0, -1, 200, 0)'] }, 1000);
-      var animation = target.animate({ [idlName]: ['matrix( 1, 1, 0, 0, 0, 100)',
-                                                   'matrix( 1, 1, 0, 0, 0, 100)'] },
-                                     { duration: 1000, composite: 'accumulate' });
-      testAnimationSampleMatrices(animation, idlName,
-                                  [{ time: 0, expected: [ 1, 1, 0, 0, 0, 100 ] }]);
+      const animation = target.animate(
+        {
+          [idlName]: [
+            'matrix( 1, 1, 0, 0, 0, 100)',
+            'matrix( 1, 1, 0, 0, 0, 100)',
+          ],
+        },
+        { duration: 1000, composite: 'accumulate' }
+      );
+      testAnimationSampleMatrices(animation, idlName, [
+        { time: 0, expected: [1, 1, 0, 0, 0, 100] },
+      ]);
     }, property + ': non-invertible matrices (non-invertible onto invertible)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.animate({ [idlName]: ['matrix( 1, 1, 0, 0, 0, 100)',
                                    'matrix( 1, 1, 0, 0, 0, 100)'] }, 1000);
-      var animation = target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',
-                                                   'matrix(-1, 0, 0, -1, 200, 0)'] },
-                                     { duration: 1000, composite: 'accumulate' });
-      testAnimationSampleMatrices(animation, idlName,
-                                  [{ time: 0, expected: [ -1, 0, 0, -1, 200, 0 ] }]);
+      const animation = target.animate(
+        {
+          [idlName]: [
+            'matrix(-1, 0, 0, -1, 200, 0)',
+            'matrix(-1, 0, 0, -1, 200, 0)',
+          ],
+        },
+        { duration: 1000, composite: 'accumulate' }
+      );
+      testAnimationSampleMatrices(animation, idlName, [
+        { time: 0, expected: [-1, 0, 0, -1, 200, 0] },
+      ]);
     }, property + ': non-invertible matrices (invertible onto non-invertible)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-                                   // matrix(0, -1, 1, 0, 250, 0)
-      target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
-                                   'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)'] }, 1000);
-      var animation =                // matrix(-1, -1, 0, 0, 100, 100)
-        target.animate({ [idlName]: ['translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',
-                                     'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)'] },
-                       { duration: 1000, composite: 'accumulate' });
-      testAnimationSampleMatrices(animation, idlName,
-                                  [{ time: 0, expected: [ -1, -1, 0, 0, 100, 100 ] }]);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      // matrix(0, -1, 1, 0, 250, 0)
+      target.animate(
+        {
+          [idlName]: [
+            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
+            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
+          ],
+        },
+        1000
+      );
+      // matrix(-1, -1, 0, 0, 100, 100)
+      const animation = target.animate(
+        {
+          [idlName]: [
+            'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',
+            'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',
+          ],
+        },
+        { duration: 1000, composite: 'accumulate' }
+      );
+      testAnimationSampleMatrices(animation, idlName, [
+        { time: 0, expected: [-1, -1, 0, 0, 100, 100] },
+      ]);
     }, property + ': non-invertible matrices in matched transform lists (non-invertible onto invertible)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-                                   // matrix(-1, -1, 0, 0, 100, 100)
-      target.animate({ [idlName]: ['translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)',
-                                   'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)'] }, 1000);
-      var animation =                // matrix(0, -1, 1, 0, 250, 0)
-        target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
-                                     'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)'] },
-                       { duration: 1000, composite: 'accumulate' });
-      testAnimationSampleMatrices(animation, idlName,
-                                  [{ time: 0, expected: [ 0, -1, 1, 0, 250, 0 ] }]);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      // matrix(-1, -1, 0, 0, 100, 100)
+      target.animate(
+        {
+          [idlName]: [
+            'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)',
+            'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)',
+          ],
+        },
+        1000
+      );
+      // matrix(0, -1, 1, 0, 250, 0)
+      const animation = target.animate(
+        {
+          [idlName]: [
+            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
+            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
+          ],
+        },
+        { duration: 1000, composite: 'accumulate' }
+      );
+      testAnimationSampleMatrices(animation, idlName, [
+        { time: 0, expected: [0, -1, 1, 0, 250, 0] },
+      ]);
     }, property + ': non-invertible matrices in matched transform lists (invertible onto non-invertible)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-                                   // matrix(-2, 0, 0, -2, 250, 0)
-      target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
-                                   'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)'] }, 1000);
-      var animation =                // matrix(1, 1, 1, 1, 100, 100)
-        target.animate({ [idlName]: ['translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',
-                                     'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)'] },
-                       { duration: 1000, composite: 'accumulate' });
-      testAnimationSampleMatrices(animation, idlName,
-                                  [{ time: 0, expected: [ 1, 1, 1, 1, 100, 100 ] }]);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      // matrix(-2, 0, 0, -2, 250, 0)
+      target.animate(
+        {
+          [idlName]: [
+            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
+            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
+          ],
+        },
+        1000
+      );
+      // matrix(1, 1, 1, 1, 100, 100)
+      const animation = target.animate(
+        {
+          [idlName]: [
+            'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',
+            'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',
+          ],
+        },
+        { duration: 1000, composite: 'accumulate' }
+      );
+      testAnimationSampleMatrices(animation, idlName, [
+        { time: 0, expected: [1, 1, 1, 1, 100, 100] },
+      ]);
     }, property + ': non-invertible matrices in mismatched transform lists' +
                   ' (non-invertible onto invertible)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-                                   // matrix(1, 1, 1, 1, 100, 100)
-      target.animate({ [idlName]: ['translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',
-                                   'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)'] }, 1000);
-      var animation =                // matrix(-2, 0, 0, -2, 250, 0)
-        target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
-                                     'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)'] },
-                       { duration: 1000, composite: 'accumulate' });
-      testAnimationSampleMatrices(animation, idlName,
-                                  [{ time: 0, expected: [ -2, 0, 0, -2, 250, 0 ] }]);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      // matrix(1, 1, 1, 1, 100, 100)
+      target.animate(
+        {
+          [idlName]: [
+            'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',
+            'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',
+          ],
+        },
+        1000
+      );
+      // matrix(-2, 0, 0, -2, 250, 0)
+      const animation = target.animate(
+        {
+          [idlName]: [
+            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
+            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
+          ],
+        },
+        { duration: 1000, composite: 'accumulate' }
+      );
+      testAnimationSampleMatrices(animation, idlName, [
+        { time: 0, expected: [-2, 0, 0, -2, 250, 0] },
+      ]);
     }, property + ': non-invertible matrices in mismatched transform lists' +
                   ' (invertible onto non-invertible)');
   },
 };
 
 const filterListType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]:
-                                       ['blur(10px)', 'blur(50px)'] },
-                                      1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]:
+                                         ['blur(10px)', 'blur(50px)'] },
+                                        1000);
 
       testAnimationSamples(animation, idlName,
         [{ time: 500,    expected: 'blur(30px)' }]);
     }, property + ': blur function' );
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['hue-rotate(0deg)',
-                                                   'hue-rotate(100deg)'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['hue-rotate(0deg)',
+                                                     'hue-rotate(100deg)'] },
+                                       1000);
 
       testAnimationSamples(animation, idlName,
         [{ time: 500,    expected: 'hue-rotate(50deg)' }]);
     }, property + ': hue-rotate function with same unit(deg)' );
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['hue-rotate(10deg)',
-                                                   'hue-rotate(100rad)'] },
-                                     1000);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['hue-rotate(10deg)',
+                                                     'hue-rotate(100rad)'] },
+                                       1000);
 
       // 10deg = 0.1745rad.
       testAnimationSamples(animation, idlName,
         [{ time: 500,    expected: 'hue-rotate(50.0873rad)' }]);
     }, property + ': hue-rotate function with different unit(deg -> rad)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate(
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
         { [idlName]:
           ['drop-shadow(10px 10px 10px rgba(255, 0, 0, 0.4))',
            'drop-shadow(50px 50px 50px rgba(0, 0, 255, 0.8))'] },
         1000);
 
       testAnimationSamples(
         animation, idlName,
         [{ time: 500,
             expected: 'drop-shadow(rgba(85, 0, 170, 0.6) 30px 30px 30px)' }]);
     }, property + ': drop-shadow function' );
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate(
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
         { [idlName]:
           ['brightness(0.1) contrast(0.1) grayscale(0.1) invert(0.1) ' +
            'opacity(0.1) saturate(0.1) sepia(0.1)',
            'brightness(0.5) contrast(0.5) grayscale(0.5) invert(0.5) ' +
            'opacity(0.5) saturate(0.5) sepia(0.5)'] },
         1000);
 
       testAnimationSamples(animation, idlName,
         [{ time: 500,
            expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +
            'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);
     }, property + ': percentage or numeric-specifiable functions' +
        '(number value)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate(
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
         { [idlName]:
           ['brightness(10%) contrast(10%) grayscale(10%) invert(10%) ' +
            'opacity(10%) saturate(10%) sepia(10%)',
            'brightness(50%) contrast(50%) grayscale(50%) invert(50%) ' +
            'opacity(50%) saturate(50%) sepia(50%)'] },
         1000);
 
       testAnimationSamples(animation, idlName,
         [{ time: 500,
            expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +
            'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);
     }, property + ': percentage or numeric-specifiable functions' +
        '(percentage value)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate(
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
         { [idlName]:
           // To make missing filter-function-lists, specified the grayscale.
           ['grayscale(0)',
            'grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)' ]},
         1000);
 
       testAnimationSamples(animation, idlName,
         [{ time: 500,
            expected: 'grayscale(0.5) brightness(0.5) contrast(0.5) ' +
                      'opacity(0.5) saturate(0.5)' }]);
     }, property + ': interpolate different length of filter-function-list ' +
        ' with function which lacuna value is 1');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate(
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
         { [idlName]:
           // To make missing filter-function-lists, specified the opacity.
           ['opoacity(1)',
            'opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)'] },
         1000);
 
       testAnimationSamples(animation, idlName,
         [{ time: 500,
            expected:
            'opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)' }]);
     }, property + ': interpolate different length of filter-function-list ' +
        ' with function which lacuna value is 0');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style.color = "rgba(255, 0, 0, 0.4)";
-      var animation = target.animate(
+      const animation = target.animate(
         { [idlName]:
           ['blur(0px)',
            'blur(10px) drop-shadow(10px 10px 10px rgba(0, 0, 255, 0.8))'] },
         1000);
 
       testAnimationSamples(animation, idlName,
         [{ time: 500,
            // The lacuna value of drop-shadow's color is taken from
            // the color property.
            expected: 'blur(5px) drop-shadow(rgba(85, 0, 170, 0.6) 5px 5px 5px' }]);
     }, property + ': interpolate different length of filter-function-list ' +
        'with drop-shadow function');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['none', 'blur(10px)'] },
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['none', 'blur(10px)'] },
                                      1000);
 
       testAnimationSamples(animation, idlName,
         [{ time: 500, expected: 'blur(5px)' }]);
     }, property + ': interpolate from none');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate(
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
         { [idlName]:
           ['blur(0px) url(\"#f1\")',
            'blur(10px) url(\"#f2\")']},
         1000);
       testAnimationSamples(animation, idlName,
         [{ time: 499, expected: 'blur(0px) url(\"#f1\")' },
          { time: 500, expected: 'blur(10px) url(\"#f2\")' }]);
     }, property + ': url function (interpoalte as discrete)');
   },
 
   testAddition: function(property, setup) {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'blur(10px)';
-      var animation = target.animate({ [idlName]: ['blur(20px)',
-                                                   'blur(50px)'] },
-                                     { duration: 1000, composite: 'add' });
+      const animation = target.animate({ [idlName]: ['blur(20px)',
+                                                     'blur(50px)'] },
+                                       { duration: 1000, composite: 'add' });
       testAnimationSamples(animation, idlName,
         [ { time: 0,    expected: 'blur(10px) blur(20px)' }]);
     }, property + ': blur on blur');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'blur(10px)';
-      var animation = target.animate({ [idlName]: ['brightness(80%)',
-                                                   'brightness(40%)'] },
-                                     { duration: 1000, composite: 'add' });
+      const animation = target.animate({ [idlName]: ['brightness(80%)',
+                                                     'brightness(40%)'] },
+                                       { duration: 1000, composite: 'add' });
       testAnimationSamples(animation, idlName,
         [ { time: 0,    expected: 'blur(10px) brightness(0.8)' }]);
     }, property + ': different filter functions');
   },
 
   testAccumulation: function(property, setup) {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'blur(10px) brightness(0.3)';
-      var animation = target.animate({ [idlName]: ['blur(20px) brightness(0.1)',
-                                                   'blur(20px) brightness(0.1)'] },
-                                     { duration: 1000, composite: 'accumulate' });
+      const animation = target.animate(
+        {
+          [idlName]: [
+            'blur(20px) brightness(0.1)',
+            'blur(20px) brightness(0.1)',
+          ],
+        },
+        { duration: 1000, composite: 'accumulate' }
+      );
       // brightness(0.1) onto brightness(0.3) means
       // brightness((0.1 - 1.0) + (0.3 - 1.0) + 1.0). The result of this formula
       // is brightness(-0.6) that means brightness(0.0).
       testAnimationSamples(animation, idlName,
         [ { time: 0,    expected: 'blur(30px) brightness(0)' }]);
     }, property + ': same ordered filter functions');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'blur(10px) brightness(1.3)';
-      var animation = target.animate({ [idlName]: ['brightness(1.2) blur(20px)',
-                                                   'brightness(1.2) blur(20px)'] },
-                                     { duration: 1000, composite: 'accumulate' });
+      const animation = target.animate(
+        {
+          [idlName]: [
+            'brightness(1.2) blur(20px)',
+            'brightness(1.2) blur(20px)',
+          ],
+        },
+        { duration: 1000, composite: 'accumulate' }
+      );
       // Mismatched ordered functions can't be accumulated.
       testAnimationSamples(animation, idlName,
         [ { time: 0,    expected: 'brightness(1.2) blur(20px)' }]);
     }, property + ': mismatched ordered filter functions');
   },
 };
 
 const textShadowListType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'none',
                                       'rgb(100, 100, 100) 10px 10px 10px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                                   // Premultiplied
         [{ time: 500,  expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
     }, property + ': from none to other');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px',
                                       'none' ] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                                   // Premultiplied
         [{ time: 500,  expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
     }, property + ': from other to none');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px',
                                       'rgb(100, 100, 100) 10px 10px 10px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
         [{ time: 500,  expected: 'rgb(50, 50, 50) 5px 5px 5px' }]);
     }, property + ': single shadow');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px, '
                                     + 'rgb(200, 200, 200) 20px 20px 20px',
                                       'rgb(100, 100, 100) 10px 10px 10px, '
                                     + 'rgb(100, 100, 100) 10px 10px 10px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
         [{ time: 500,  expected: 'rgb(50, 50, 50) 5px 5px 5px, '
                                + 'rgb(150, 150, 150) 15px 15px 15px' }]);
     }, property + ': shadow list');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px',
                                       'rgb(100, 100, 100) 10px 10px 10px, '
                                     + 'rgb(100, 100, 100) 10px 10px 10px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
         [{ time: 500,  expected: 'rgb(150, 150, 150) 15px 15px 15px, '
                                + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
     }, property + ': mismatched list length (from longer to shorter)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px, '
                                     + 'rgb(100, 100, 100) 10px 10px 10px',
                                       'rgb(200, 200, 200) 20px 20px 20px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
         [{ time: 500,  expected: 'rgb(150, 150, 150) 15px 15px 15px, '
                                + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
     }, property + ': mismatched list length (from shorter to longer)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style.color = 'rgb(0, 255, 0)';
-      var animation =
+      const animation =
         target.animate({ [idlName]: [ 'currentcolor 0px 0px 0px',
                                       'currentcolor 10px 10px 10px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
         [{ time: 500,  expected: 'rgb(0, 255, 0) 5px 5px 5px' }]);
     }, property + ': with currentcolor');
   },
 
   testAddition: function(property, setup) {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px';
-      var animation =
+      const animation =
         target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',
                                       'rgb(120, 120, 120) 10px 10px 10px'] },
                        { duration: 1000, composite: 'add' });
       testAnimationSamples(animation, idlName,
         [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px, ' +
                                'rgb(120, 120, 120) 10px 10px 10px' }]);
     }, property + ': shadow');
   },
 
   testAccumulation: function(property, setup) {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px';
-      var animation =
+      const animation =
         target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',
                                       'rgb(120, 120, 120) 10px 10px 10px'] },
                        { duration: 1000, composite: 'accumulate' });
       testAnimationSamples(animation, idlName,
         [ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px' }]);
     }, property + ': shadow');
   },
 };
 
 
 const boxShadowListType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'none',
                                       'rgb(100, 100, 100) 10px 10px 10px 0px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                                   // Premultiplied
         [{ time: 500,  expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
     }, property + ': from none to other');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px',
                                       'none' ] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                                   // Premultiplied
         [{ time: 500,  expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
     }, property + ': from other to none');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px',
                                       'rgb(100, 100, 100) 10px 10px 10px 0px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
         [{ time: 500,  expected: 'rgb(50, 50, 50) 5px 5px 5px 0px' }]);
     }, property + ': single shadow');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px, '
                                     + 'rgb(200, 200, 200) 20px 20px 20px 20px',
                                       'rgb(100, 100, 100) 10px 10px 10px 0px, '
                                     + 'rgb(100, 100, 100) 10px 10px 10px 0px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
         [{ time: 500,  expected: 'rgb(50, 50, 50) 5px 5px 5px 0px, '
                                + 'rgb(150, 150, 150) 15px 15px 15px 10px' }]);
     }, property + ': shadow list');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px 20px',
                                       'rgb(100, 100, 100) 10px 10px 10px 0px, '
                                     + 'rgb(100, 100, 100) 10px 10px 10px 0px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
         [{ time: 500,  expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '
                                + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
     }, property + ': mismatched list length (from shorter to longer)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px, '
                                     + 'rgb(100, 100, 100) 10px 10px 10px 0px',
                                       'rgb(200, 200, 200) 20px 20px 20px 20px']},
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
         [{ time: 500,  expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '
                                + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
     }, property + ': mismatched list length (from longer to shorter)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style.color = 'rgb(0, 255, 0)';
-      var animation =
+      const animation =
         target.animate({ [idlName]: [ 'currentcolor 0px 0px 0px 0px',
                                       'currentcolor 10px 10px 10px 10px'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
         [{ time: 500,  expected: 'rgb(0, 255, 0) 5px 5px 5px 5px' }]);
     }, property + ': with currentcolor');
   },
 
   testAddition: function(property, setup) {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px 0px';
-      var animation =
+      const animation =
         target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 0px',
                                       'rgb(120, 120, 120) 10px 10px 10px 0px'] },
                        { duration: 1000, composite: 'add' });
       testAnimationSamples(animation, idlName,
         [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px 0px, ' +
                                'rgb(120, 120, 120) 10px 10px 10px 0px' }]);
     }, property + ': shadow');
   },
 
   testAccumulation: function(property, setup) {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px 10px';
-      var animation =
+      const animation =
         target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 10px',
                                       'rgb(120, 120, 120) 10px 10px 10px 10px'] },
                        { duration: 1000, composite: 'accumulate' });
       testAnimationSamples(animation, idlName,
         [ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px 20px' }]);
     }, property + ': shadow');
   },
 };
 
 const positionType = {
   testInterpolation: (property, setup) => {
     lengthPairType.testInterpolation(property, setup);
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]: ['10% 10%', '50% 50%'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['10% 10%', '50% 50%'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(
         animation, idlName,
         [{ time: 500,  expected: calcFromPercentage(idlName, '30% 30%') }]);
     }, property + ' supports animating as a position of percent');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     lengthPairType.testAddition(property, setup);
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '60% 60%';
-      var animation = target.animate({ [idlName]: ['70% 70%', '100% 100%'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]: ['70% 70%', '100% 100%'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(
         animation, idlName,
         [{ time: 0, expected: calcFromPercentage(idlName, '130% 130%') }]);
     }, property + ': position of percentage');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
@@ -1926,37 +2087,37 @@ const positionType = {
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 };
 
 const rectType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]:
-                                         ['rect(10px, 10px, 10px, 10px)',
-                                          'rect(50px, 50px, 50px, 50px)'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]:
+                                           ['rect(10px, 10px, 10px, 10px)',
+                                            'rect(50px, 50px, 50px, 50px)'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(
           animation, idlName,
           [{ time: 500,  expected: 'rect(30px, 30px, 30px, 30px)' }]);
     }, property + ' supports animating as a rect');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'rect(100px, 100px, 100px, 100px)';
-      var animation = target.animate({ [idlName]:
-                                         ['rect(10px, 10px, 10px, 10px)',
-                                          'rect(10px, 10px, 10px, 10px)'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]:
+                                           ['rect(10px, 10px, 10px, 10px)',
+                                            'rect(10px, 10px, 10px, 10px)'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(
         animation, idlName,
         [{ time: 0, expected: 'rect(110px, 110px, 110px, 110px)' }]);
     }, property + ': rect');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
@@ -1969,54 +2130,54 @@ const rectType = {
 
 // stroke-dasharray: none | [ <length> | <percentage> | <number> ]*
 const dasharrayType = {
   testInterpolation: (property, setup) => {
     percentageType.testInterpolation(property, setup);
     positiveNumberType.testInterpolation(property, setup);
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]:
-                                         ['8, 16, 4',
-                                          '4, 8, 12, 16'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]:
+                                           ['8, 16, 4',
+                                            '4, 8, 12, 16'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(
           animation, idlName,
           [{ time: 500,  expected: '6, 12, 8, 12, 10, 6, 10, 16, 4, 8, 14, 10' }]);
     }, property + ' supports animating as a dasharray (mismatched length)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation = target.animate({ [idlName]:
-                                         ['2, 50%, 6, 10',
-                                          '6, 30%, 2, 2'] },
-                                     { duration: 1000, fill: 'both' });
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]:
+                                           ['2, 50%, 6, 10',
+                                            '6, 30%, 2, 2'] },
+                                       { duration: 1000, fill: 'both' });
       testAnimationSamples(
           animation, idlName,
           [{ time: 500,  expected: '4, 40%, 4, 6' }]);
     }, property + ' supports animating as a dasharray (mixed number and percentage)');
 
   },
 
   // Note that stroke-dasharray is neither additive nor cumulative, so we should
   // write this additive test case that animating value replaces underlying
   // values.
   // See https://www.w3.org/TR/SVG2/painting.html#StrokeDashing.
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = '6, 30%, 2px';
-      var animation = target.animate({ [idlName]:
-                                         ['1, 2, 3, 4, 5',
-                                          '6, 7, 8, 9, 10'] },
-                                     { duration: 1000, composite: composite });
+      const animation = target.animate({ [idlName]:
+                                           ['1, 2, 3, 4, 5',
+                                            '6, 7, 8, 9, 10'] },
+                                       { duration: 1000, composite });
       testAnimationSamples(
           animation, idlName,
           [{ time: 0, expected: '1, 2, 3, 4, 5' }]);
     }, property + ': dasharray');
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
@@ -2025,45 +2186,45 @@ const dasharrayType = {
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 }
 
 const fontStretchType = {
   testInterpolation: (property, setup) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: ['ultra-condensed', 'extra-condensed'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 499,  expected: 'ultra-condensed' },
                             { time: 500,  expected: 'extra-condensed' }]);
     }, property + ' supports animating as a font-stretch (adjacent values)');
 
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
-      var animation =
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
         target.animate({ [idlName]: ['ultra-condensed', 'condensed'] },
                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,  expected: 'extra-condensed' }]);
     }, property + ' supports animating as a font-stretch (between value)');
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
-      var idlName = propertyToIDL(property);
-      var target = createTestElement(t, setup);
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
       target.style[idlName] = 'condensed';
-      var animation =
+      const animation =
         target.animate({ [idlName]: ['expanded', 'ultra-expanded'] },
-                       { duration: 1000, composite: composite });
+                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 0, expected: 'normal' },
                             { time: 250, expected: 'semi-expanded' }]);
     }, property + ' uses font-stretch behavior for composite type ' + composite);
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
@@ -2118,17 +2279,17 @@ const fontVariationSettingsType = {
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     test(t => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       target.style[idlName] = '"wght" 1';
       const animation =
         target.animate({ [idlName]: ['"wght" 1.1', '"wght" 1.5'] },
-                       { duration: 1000, composite: composite });
+                       { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
                            [{ time: 250,  expected: '"wght" 2.2' },
                             { time: 750,  expected: '"wght" 2.4' } ]);
     }, `${property} with composite type ${composite}`);
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/visibility.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/visibility.html
@@ -9,39 +9,39 @@
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <div id="target"></div>
 <script>
 'use strict';
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ visibility: ['hidden','visible'] },
-                         { duration: 100 * MS_PER_SEC, fill: 'both' });
+  const div = createDiv(t);
+  const anim = div.animate({ visibility: ['hidden','visible'] },
+                           { duration: 100 * MS_PER_SEC, fill: 'both' });
 
   anim.currentTime = 0;
   assert_equals(getComputedStyle(div).visibility, 'hidden',
                 'Visibility when progress = 0');
 
   anim.currentTime = 10 * MS_PER_SEC + 1;
   assert_equals(getComputedStyle(div).visibility, 'visible',
                 'Visibility when progress > 0 due to linear easing');
 
   anim.finish();
   assert_equals(getComputedStyle(div).visibility, 'visible',
                 'Visibility when progress = 1');
 
 }, 'Visibility clamping behavior');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ visibility: ['hidden', 'visible'] },
-                         { duration: 100 * MS_PER_SEC, fill: 'both',
-                           easing: 'cubic-bezier(0.25, -0.6, 0, 0.5)' });
+  const div = createDiv(t);
+  const anim = div.animate({ visibility: ['hidden', 'visible'] },
+                           { duration: 100 * MS_PER_SEC, fill: 'both',
+                             easing: 'cubic-bezier(0.25, -0.6, 0, 0.5)' });
 
   anim.currentTime = 0;
   assert_equals(getComputedStyle(div).visibility, 'hidden',
                 'Visibility when progress = 0');
 
   // Timing function is below zero. So we expected visibility is hidden.
   anim.currentTime = 10 * MS_PER_SEC + 1;
   assert_equals(getComputedStyle(div).visibility, 'hidden',
--- a/testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html
+++ b/testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html
@@ -6,75 +6,75 @@
 <script src=/resources/testharnessreport.js></script>
 <script src="../../testcommon.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 
 [ 'accumulate', 'add' ].forEach(composite => {
   test(t => {
-    var div = createDiv(t);
+    const div = createDiv(t);
     div.style.marginLeft = '10px';
-    var anim =
+    const anim =
       div.animate({ marginLeft: ['0px', '10px'], composite }, 100);
 
     anim.currentTime = 50;
     assert_equals(getComputedStyle(div).marginLeft, '15px',
       'Animated margin-left style at 50%');
   }, composite + ' onto the base value');
 
   test(t => {
-    var div = createDiv(t);
-    var anims = [];
+    const div = createDiv(t);
+    const anims = [];
     anims.push(div.animate({ marginLeft: ['10px', '20px'],
                              composite: 'replace' },
                            100));
     anims.push(div.animate({ marginLeft: ['0px', '10px'],
                              composite },
                            100));
 
     anims.forEach(anim => {
       anim.currentTime = 50;
     });
 
     assert_equals(getComputedStyle(div).marginLeft, '20px',
       'Animated style at 50%');
   }, composite + ' onto an underlying animation value');
 
   test(t => {
-    var div = createDiv(t);
+    const div = createDiv(t);
     div.style.marginLeft = '10px';
-    var anim =
+    const anim =
       div.animate([{ marginLeft: '10px', composite },
                    { marginLeft: '30px', composite: 'replace' }],
                   100);
 
     anim.currentTime = 50;
     assert_equals(getComputedStyle(div).marginLeft, '25px',
       'Animated style at 50%');
   }, 'Composite when mixing ' + composite + ' and replace');
 
   test(t => {
-    var div = createDiv(t);
+    const div = createDiv(t);
     div.style.marginLeft = '10px';
-    var anim =
+    const anim =
       div.animate([{ marginLeft: '10px', composite: 'replace' },
                    { marginLeft: '20px' }],
                   { duration: 100 , composite });
 
     anim.currentTime = 50;
     assert_equals(getComputedStyle(div).marginLeft, '20px',
       'Animated style at 50%');
   }, composite + ' specified on a keyframe overrides the composite mode of ' +
      'the effect');
 
   test(t => {
-    var div = createDiv(t);
+    const div = createDiv(t);
     div.style.marginLeft = '10px';
-    var anim =
+    const anim =
       div.animate([{ marginLeft: '10px', composite: 'replace' },
                    { marginLeft: '20px' }],
                   100);
 
     anim.effect.composite = composite;
     anim.currentTime = 50;                       // (10 + (10 + 20)) * 0.5
     assert_equals(getComputedStyle(div).marginLeft, '20px',
       'Animated style at 50%');
--- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context.html
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context.html
@@ -5,96 +5,96 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   div.style.fontSize = '10px';
-  var animation = div.animate([ { marginLeft: '10em' },
-                                { marginLeft: '20em' } ], 1000);
+  const animation = div.animate([ { marginLeft: '10em' },
+                                  { marginLeft: '20em' } ], 1000);
   animation.currentTime = 500;
   assert_equals(getComputedStyle(div).marginLeft, '150px',
                 'Effect value before updating font-size');
   div.style.fontSize = '20px';
   assert_equals(getComputedStyle(div).marginLeft, '300px',
                 'Effect value after updating font-size');
 }, 'Effect values reflect changes to font-size on element');
 
 test(t => {
-  var parentDiv = createDiv(t);
-  var div = createDiv(t);
+  const parentDiv = createDiv(t);
+  const div = createDiv(t);
   parentDiv.appendChild(div);
   parentDiv.style.fontSize = '10px';
 
-  var animation = div.animate([ { marginLeft: '10em' },
-                                { marginLeft: '20em' } ], 1000);
+  const animation = div.animate([ { marginLeft: '10em' },
+                                  { marginLeft: '20em' } ], 1000);
   animation.currentTime = 500;
   assert_equals(getComputedStyle(div).marginLeft, '150px',
                 'Effect value before updating font-size on parent element');
   parentDiv.style.fontSize = '20px';
   assert_equals(getComputedStyle(div).marginLeft, '300px',
                 'Effect value after updating font-size on parent element');
 }, 'Effect values reflect changes to font-size on parent element');
 
 promise_test(t => {
-  var parentDiv = createDiv(t);
-  var div = createDiv(t);
+  const parentDiv = createDiv(t);
+  const div = createDiv(t);
   parentDiv.appendChild(div);
   parentDiv.style.fontSize = '10px';
-  var animation = div.animate([ { marginLeft: '10em' },
-                                { marginLeft: '20em' } ], 1000);
+  const animation = div.animate([ { marginLeft: '10em' },
+                                  { marginLeft: '20em' } ], 1000);
 
   animation.pause();
   animation.currentTime = 500;
   parentDiv.style.fontSize = '20px';
 
   return animation.ready.then(() => {
     assert_equals(getComputedStyle(div).marginLeft, '300px',
                   'Effect value after updating font-size on parent element');
   });
 }, 'Effect values reflect changes to font-size when computed style is not'
    + ' immediately flushed');
 
 promise_test(t => {
-  var divWith10pxFontSize = createDiv(t);
+  const divWith10pxFontSize = createDiv(t);
   divWith10pxFontSize.style.fontSize = '10px';
-  var divWith20pxFontSize = createDiv(t);
+  const divWith20pxFontSize = createDiv(t);
   divWith20pxFontSize.style.fontSize = '20px';
 
-  var div = createDiv(t);
+  const div = createDiv(t);
   div.remove(); // Detach
-  var animation = div.animate([ { marginLeft: '10em' },
-                                { marginLeft: '20em' } ], 1000);
+  const animation = div.animate([ { marginLeft: '10em' },
+                                  { marginLeft: '20em' } ], 1000);
   animation.pause();
 
   return animation.ready.then(() => {
     animation.currentTime = 500;
 
     divWith10pxFontSize.appendChild(div);
     assert_equals(getComputedStyle(div).marginLeft, '150px',
                   'Effect value after attaching to font-size:10px parent');
     divWith20pxFontSize.appendChild(div);
     assert_equals(getComputedStyle(div).marginLeft, '300px',
                   'Effect value after attaching to font-size:20px parent');
   });
 }, 'Effect values reflect changes to font-size from reparenting');
 
 test(t => {
-  var divA = createDiv(t);
+  const divA = createDiv(t);
   divA.style.fontSize = '10px';
 
-  var divB = createDiv(t);
+  const divB = createDiv(t);
   divB.style.fontSize = '20px';
 
-  var animation = divA.animate([ { marginLeft: '10em' },
-                                 { marginLeft: '20em' } ], 1000);
+  const animation = divA.animate([ { marginLeft: '10em' },
+                                   { marginLeft: '20em' } ], 1000);
   animation.currentTime = 500;
   assert_equals(getComputedStyle(divA).marginLeft, '150px',
                 'Effect value before updating target element');
 
   animation.effect.target = divB;
   assert_equals(getComputedStyle(divB).marginLeft, '300px',
                 'Effect value after updating target element');
 }, 'Effect values reflect changes to target element');
--- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html
@@ -7,25 +7,25 @@
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <div id="target"></div>
 <script>
 'use strict';
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate([ { offset: 0, opacity: 0 },
-                           { offset: 0, opacity: 0.1 },
-                           { offset: 0, opacity: 0.2 },
-                           { offset: 1, opacity: 0.8 },
-                           { offset: 1, opacity: 0.9 },
-                           { offset: 1, opacity: 1 } ],
-                         { duration: 1000,
-                           easing: 'cubic-bezier(0.5, -0.5, 0.5, 1.5)' });
+  const div = createDiv(t);
+  const anim = div.animate([ { offset: 0, opacity: 0 },
+                             { offset: 0, opacity: 0.1 },
+                             { offset: 0, opacity: 0.2 },
+                             { offset: 1, opacity: 0.8 },
+                             { offset: 1, opacity: 0.9 },
+                             { offset: 1, opacity: 1 } ],
+                           { duration: 1000,
+                             easing: 'cubic-bezier(0.5, -0.5, 0.5, 1.5)' });
   assert_equals(getComputedStyle(div).opacity, '0.2',
                 'When progress is zero the last keyframe with offset 0 should'
                 + ' be used');
   // http://cubic-bezier.com/#.5,-0.5,.5,1.5
   // At t=0.15, the progress should be negative
   anim.currentTime = 150;
   assert_equals(getComputedStyle(div).opacity, '0',
                 'When progress is negative, the first keyframe with a 0 offset'
@@ -43,22 +43,22 @@ test(t => {
   anim.finish();
   assert_equals(getComputedStyle(div).opacity, '1',
                 'When progress is equal to 1.0, the last keyframe with a 1'
                 + ' offset should be used');
 }, 'Overlapping keyframes at 0 and 1 use the appropriate value when the'
    + ' progress is outside the range [0, 1]');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate([ { offset: 0, opacity: 0 },
-                           { offset: 0.5, opacity: 0.3 },
-                           { offset: 0.5, opacity: 0.5 },
-                           { offset: 0.5, opacity: 0.7 },
-                           { offset: 1, opacity: 1 } ], 1000);
+  const div = createDiv(t);
+  const anim = div.animate([ { offset: 0, opacity: 0 },
+                             { offset: 0.5, opacity: 0.3 },
+                             { offset: 0.5, opacity: 0.5 },
+                             { offset: 0.5, opacity: 0.7 },
+                             { offset: 1, opacity: 1 } ], 1000);
   anim.currentTime = 250;
   assert_equals(getComputedStyle(div).opacity, '0.15',
                 'Before the overlap point, the first keyframe from the'
                 + ' overlap point should be used as interval endpoint');
   anim.currentTime = 500;
   assert_equals(getComputedStyle(div).opacity, '0.7',
                 'At the overlap point, the last keyframe from the'
                 + ' overlap point should be used as interval startpoint');
--- a/testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
@@ -12,181 +12,181 @@
 <div id="log"></div>
 <iframe width="10" height="10" id="iframe"></iframe>
 <script>
 'use strict';
 
 // Tests on Element
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate(null);
+  const div = createDiv(t);
+  const anim = div.animate(null);
   assert_class_string(anim, 'Animation', 'Returned object is an Animation');
 }, 'Element.animate() creates an Animation object');
 
 test(t => {
-  var iframe = window.frames[0];
-  var div = createDiv(t, iframe.document);
-  var anim = Element.prototype.animate.call(div, null);
+  const iframe = window.frames[0];
+  const div = createDiv(t, iframe.document);
+  const anim = Element.prototype.animate.call(div, null);
   assert_equals(Object.getPrototypeOf(anim), iframe.Animation.prototype,
                 'The prototype of the created Animation is that defined on'
                 + ' the relevant global for the target element');
   assert_not_equals(Object.getPrototypeOf(anim), Animation.prototype,
                     'The prototype of the created Animation is NOT that of'
                     + ' the current global');
 }, 'Element.animate() creates an Animation object in the relevant realm of'
    + ' the target element');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = Element.prototype.animate.call(div, null);
+  const div = createDiv(t);
+  const anim = Element.prototype.animate.call(div, null);
   assert_class_string(anim.effect, 'KeyframeEffect',
                       'Returned Animation has a KeyframeEffect');
 }, 'Element.animate() creates an Animation object with a KeyframeEffect');
 
 test(t => {
-  var iframe = window.frames[0];
-  var div = createDiv(t, iframe.document);
-  var anim = Element.prototype.animate.call(div, null);
+  const iframe = window.frames[0];
+  const div = createDiv(t, iframe.document);
+  const anim = Element.prototype.animate.call(div, null);
   assert_equals(Object.getPrototypeOf(anim.effect),
                 iframe.KeyframeEffect.prototype,
                 'The prototype of the created KeyframeEffect is that defined on'
                 + ' the relevant global for the target element');
   assert_not_equals(Object.getPrototypeOf(anim.effect),
                     KeyframeEffect.prototype,
                     'The prototype of the created KeyframeEffect is NOT that of'
                     + ' the current global');
 }, 'Element.animate() creates an Animation object with a KeyframeEffect'
    + ' that is created in the relevant realm of the target element');
 
 test(t => {
-  var iframe = window.frames[0];
-  var div = createDiv(t, iframe.document);
-  var anim = div.animate(null);
+  const iframe = window.frames[0];
+  const div = createDiv(t, iframe.document);
+  const anim = div.animate(null);
   assert_equals(Object.getPrototypeOf(anim.effect.timing),
                 iframe.AnimationEffectTiming.prototype,
                 'The prototype of the created AnimationEffectTiming is that'
                 + ' defined on the relevant global for the target element');
   assert_not_equals(Object.getPrototypeOf(anim.effect.timing),
                     AnimationEffectTiming.prototype,
                     'The prototype of the created AnimationEffectTiming is NOT'
                     + ' that of the current global');
 }, 'Element.animate() creates an Animation object with a KeyframeEffect'
    + ' whose AnimationEffectTiming object is created in the relevant realm'
    + ' of the target element');
 
 gEmptyKeyframeListTests.forEach(subTest => {
   test(t => {
-    var div = createDiv(t);
-    var anim = div.animate(subTest, 2000);
+    const div = createDiv(t);
+    const anim = div.animate(subTest, 2000);
     assert_not_equals(anim, null);
   }, 'Element.animate() accepts empty keyframe lists ' +
      `(input: ${JSON.stringify(subTest)})`);
 });
 
 gKeyframesTests.forEach(subtest => {
   test(t => {
-    var div = createDiv(t);
-    var anim = div.animate(subtest.input, 2000);
+    const div = createDiv(t);
+    const anim = div.animate(subtest.input, 2000);
     assert_frame_lists_equal(anim.effect.getKeyframes(), subtest.output);
   }, 'Element.animate() accepts ' + subtest.desc);
 });
 
 gInvalidKeyframesTests.forEach(subtest => {
   test(t => {
-    var div = createDiv(t);
+    const div = createDiv(t);
     assert_throws(new TypeError, () => {
       div.animate(subtest.input, 2000);
     });
   }, 'Element.animate() does not accept ' + subtest.desc);
 });
 
 gInvalidEasings.forEach(invalidEasing => {
   test(t => {
-    var div = createDiv(t);
+    const div = createDiv(t);
     assert_throws(new TypeError, () => {
       div.animate({ easing: invalidEasing }, 2000);
     });
   }, `Element.animate() does not accept invalid easing: '${invalidEasing}'`);
 });
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_equals(anim.effect.timing.duration, 2000);
   // Also check that unspecified parameters receive their default values
   assert_equals(anim.effect.timing.fill, 'auto');
 }, 'Element.animate() accepts a double as an options argument');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { duration: Infinity, fill: 'forwards' });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { duration: Infinity, fill: 'forwards' });
   assert_equals(anim.effect.timing.duration, Infinity);
   assert_equals(anim.effect.timing.fill, 'forwards');
   // Also check that unspecified parameters receive their default values
   assert_equals(anim.effect.timing.direction, 'normal');
 }, 'Element.animate() accepts a KeyframeAnimationOptions argument');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] });
   assert_equals(anim.effect.timing.duration, 'auto');
 }, 'Element.animate() accepts an absent options argument');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_equals(anim.id, '');
 }, 'Element.animate() correctly sets the id attribute when no id is specified');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, { id: 'test' });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, { id: 'test' });
   assert_equals(anim.id, 'test');
 }, 'Element.animate() correctly sets the id attribute');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_equals(anim.timeline, document.timeline);
 }, 'Element.animate() correctly sets the Animation\'s timeline');
 
 async_test(t => {
-  var iframe = document.createElement('iframe');
+  const iframe = document.createElement('iframe');
   iframe.width = 10;
   iframe.height = 10;
 
   iframe.addEventListener('load', t.step_func(() => {
-    var div = createDiv(t, iframe.contentDocument);
-    var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+    const div = createDiv(t, iframe.contentDocument);
+    const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
     assert_equals(anim.timeline, iframe.contentDocument.timeline);
     iframe.remove();
     t.done();
   }));
 
   document.body.appendChild(iframe);
 }, 'Element.animate() correctly sets the Animation\'s timeline when ' +
    'triggered on an element in a different document');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_equals(anim.playState, 'pending');
 }, 'Element.animate() calls play on the Animation');
 
 // Tests on CSSPseudoElement
 
 test(t => {
-  var pseudoTarget = createPseudo(t, 'before');
-  var anim = pseudoTarget.animate(null);
+  const pseudoTarget = createPseudo(t, 'before');
+  const anim = pseudoTarget.animate(null);
   assert_class_string(anim, 'Animation', 'The returned object is an Animation');
 }, 'CSSPseudoElement.animate() creates an Animation object');
 
 test(t => {
-  var pseudoTarget = createPseudo(t, 'before');
-  var anim = pseudoTarget.animate(null);
+  const pseudoTarget = createPseudo(t, 'before');
+  const anim = pseudoTarget.animate(null);
   assert_equals(anim.effect.target, pseudoTarget,
                 'The returned Animation targets to the correct object');
 }, 'CSSPseudoElement.animate() creates an Animation object targeting ' +
    'to the correct CSSPseudoElement object');
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/interfaces/Animatable/getAnimations.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animatable/getAnimations.html
@@ -5,76 +5,76 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <script>
 'use strict';
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   assert_array_equals(div.getAnimations(), []);
 }, 'Returns an empty array for an element with no animations');
 
 test(t => {
-  var div = createDiv(t);
-  var animationA = div.animate(null, 100 * MS_PER_SEC);
-  var animationB = div.animate(null, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animationA = div.animate(null, 100 * MS_PER_SEC);
+  const animationB = div.animate(null, 100 * MS_PER_SEC);
   assert_array_equals(div.getAnimations(), [animationA, animationB]);
 }, 'Returns both animations for an element with two animations');
 
 test(t => {
-  var divA = createDiv(t);
-  var divB = createDiv(t);
-  var animationA = divA.animate(null, 100 * MS_PER_SEC);
-  var animationB = divB.animate(null, 100 * MS_PER_SEC);
+  const divA = createDiv(t);
+  const divB = createDiv(t);
+  const animationA = divA.animate(null, 100 * MS_PER_SEC);
+  const animationB = divB.animate(null, 100 * MS_PER_SEC);
   assert_array_equals(divA.getAnimations(), [animationA], 'divA');
   assert_array_equals(divB.getAnimations(), [animationB], 'divB');
 }, 'Returns only the animations specific to each sibling element');
 
 test(t => {
-  var divParent = createDiv(t);
-  var divChild = createDiv(t);
+  const divParent = createDiv(t);
+  const divChild = createDiv(t);
   divParent.appendChild(divChild);
-  var animationParent = divParent.animate(null, 100 * MS_PER_SEC);
-  var animationChild = divChild.animate(null, 100 * MS_PER_SEC);
+  const animationParent = divParent.animate(null, 100 * MS_PER_SEC);
+  const animationChild = divChild.animate(null, 100 * MS_PER_SEC);
   assert_array_equals(divParent.getAnimations(), [animationParent],
                       'divParent');
   assert_array_equals(divChild.getAnimations(), [animationChild], 'divChild');
 }, 'Returns only the animations specific to each parent/child element');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(null, 100 * MS_PER_SEC);
   animation.finish();
   assert_array_equals(div.getAnimations(), []);
 }, 'Does not return finished animations that do not fill forwards');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, {
+  const div = createDiv(t);
+  const animation = div.animate(null, {
     duration: 100 * MS_PER_SEC,
     fill: 'forwards',
   });
   animation.finish();
   assert_array_equals(div.getAnimations(), [animation]);
 }, 'Returns finished animations that fill forwards');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, {
+  const div = createDiv(t);
+  const animation = div.animate(null, {
     duration: 100 * MS_PER_SEC,
     delay: 100 * MS_PER_SEC,
   });
   assert_array_equals(div.getAnimations(), [animation]);
 }, 'Returns animations in their delay phase');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(null, 100 * MS_PER_SEC);
 
   animation.finish();
   assert_array_equals(div.getAnimations(), [],
                       'Animation should not be returned when it is finished');
 
   animation.effect.timing.duration += 100 * MS_PER_SEC;
   assert_array_equals(div.getAnimations(), [animation],
                       'Animation should be returned after extending the'
@@ -83,36 +83,36 @@ test(t => {
   animation.effect.timing.duration = 0;
   assert_array_equals(div.getAnimations(), [],
                       'Animation should not be returned after setting the'
                       + ' duration to zero');
 }, 'Returns animations based on dynamic changes to individual'
    + ' animations\' duration');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(null, 100 * MS_PER_SEC);
 
   animation.effect.timing.endDelay = -200 * MS_PER_SEC;
   assert_array_equals(div.getAnimations(), [],
                       'Animation should not be returned after setting a'
                       + ' negative end delay such that the end time is less'
                       + ' than the current time');
 
   animation.effect.timing.endDelay = 100 * MS_PER_SEC;
   assert_array_equals(div.getAnimations(), [animation],
                       'Animation should be returned after setting a positive'
                       + ' end delay such that the end time is more than the'
                       + ' current time');
 }, 'Returns animations based on dynamic changes to individual'
    + ' animations\' end delay');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(null, 100 * MS_PER_SEC);
 
   animation.finish();
   assert_array_equals(div.getAnimations(), [],
                       'Animation should not be returned when it is finished');
 
   animation.effect.timing.iterations = 10;
   assert_array_equals(div.getAnimations(), [animation],
                       'Animation should be returned after inreasing the'
@@ -126,21 +126,21 @@ test(t => {
   animation.effect.timing.iterations = Infinity;
   assert_array_equals(div.getAnimations(), [animation],
                       'Animation should be returned after inreasing the'
                       + ' number of iterations to infinity');
 }, 'Returns animations based on dynamic changes to individual'
    + ' animations\' iteration count');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null,
-                              { duration: 100 * MS_PER_SEC,
-                                delay: 50 * MS_PER_SEC,
-                                endDelay: -50 * MS_PER_SEC });
+  const div = createDiv(t);
+  const animation = div.animate(null,
+                                { duration: 100 * MS_PER_SEC,
+                                  delay: 50 * MS_PER_SEC,
+                                  endDelay: -50 * MS_PER_SEC });
 
   assert_array_equals(div.getAnimations(), [animation],
                       'Animation should be returned at during delay phase');
 
   animation.currentTime = 50 * MS_PER_SEC;
   assert_array_equals(div.getAnimations(), [animation],
                       'Animation should be returned after seeking to the start'
                       + ' of the active interval');
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/cancel.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/cancel.html
@@ -6,47 +6,49 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({transform: ['translate(100px)', 'translate(100px)']},
-                              100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(
+    { transform: ['translate(100px)', 'translate(100px)'] },
+    100 * MS_PER_SEC
+  );
   return animation.ready.then(() => {
     assert_not_equals(getComputedStyle(div).transform, 'none',
                       'transform style is animated before cancelling');
     animation.cancel();
     assert_equals(getComputedStyle(div).transform, 'none',
                   'transform style is no longer animated after cancelling');
   });
 }, 'Animated style is cleared after calling Animation.cancel()');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({marginLeft: ['100px', '200px']},
-                              100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({ marginLeft: ['100px', '200px'] },
+                                100 * MS_PER_SEC);
   animation.effect.timing.easing = 'linear';
   animation.cancel();
   assert_equals(getComputedStyle(div).marginLeft, '0px',
                 'margin-left style is not animated after cancelling');
 
   animation.currentTime = 50 * MS_PER_SEC;
   assert_equals(getComputedStyle(div).marginLeft, '150px',
                 'margin-left style is updated when cancelled animation is'
                 + ' seeked');
 }, 'After cancelling an animation, it can still be seeked');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({marginLeft:['100px', '200px']},
-                              100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({ marginLeft:['100px', '200px'] },
+                                100 * MS_PER_SEC);
   return animation.ready.then(() => {
     animation.cancel();
     assert_equals(getComputedStyle(div).marginLeft, '0px',
                   'margin-left style is not animated after cancelling');
     animation.play();
     assert_equals(getComputedStyle(div).marginLeft, '100px',
                   'margin-left style is animated after re-starting animation');
     return animation.ready;
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/constructor.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/constructor.html
@@ -6,27 +6,27 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <div id="target"></div>
 <script>
 "use strict";
 
-var gTarget = document.getElementById("target");
+const gTarget = document.getElementById("target");
 
 function createEffect() {
   return new KeyframeEffectReadOnly(gTarget, { opacity: [0, 1] });
 }
 
 function createNull() {
   return null;
 }
 
-var gTestArguments = [
+const gTestArguments = [
   {
     createEffect: createNull,
     timeline: null,
     expectedTimeline: null,
     expectedTimelineDescription: "null",
     description: "with null effect and null timeline"
   },
   {
@@ -61,52 +61,52 @@ var gTestArguments = [
     expectedTimeline: document.timeline,
     expectedTimelineDescription: "document.timeline",
     description: "with non-null effect and no timeline parameter"
   },
 ];
 
 gTestArguments.forEach(args => {
   test(t => {
-    var effect = args.createEffect();
-    var animation = new Animation(effect, args.timeline);
+    const effect = args.createEffect();
+    const animation = new Animation(effect, args.timeline);
 
     assert_not_equals(animation, null,
                       "An animation sohuld be created");
     assert_equals(animation.effect, effect,
                   "Animation returns the same effect passed to " +
                   "the Constructor");
     assert_equals(animation.timeline, args.expectedTimeline,
                   "Animation timeline should be " + args.expectedTimelineDescription);
     assert_equals(animation.playState, "idle",
                   "Animation.playState should be initially 'idle'");
   }, "Animation can be constructed " + args.description);
 });
 
 test(t => {
-  var effect = new KeyframeEffectReadOnly(null,
-                                          { left: ["10px", "20px"] },
-                                          { duration: 10000,
-                                            fill: "forwards" });
-  var anim = new Animation(effect, document.timeline);
+  const effect = new KeyframeEffectReadOnly(null,
+                                            { left: ["10px", "20px"] },
+                                            { duration: 10000,
+                                              fill: "forwards" });
+  const anim = new Animation(effect, document.timeline);
   anim.pause();
   assert_equals(effect.getComputedTiming().progress, 0.0);
   anim.currentTime += 5000;
   assert_equals(effect.getComputedTiming().progress, 0.5);
   anim.finish();
   assert_equals(effect.getComputedTiming().progress, 1.0);
 }, "Animation constructed by an effect with null target runs normally");
 
 async_test(t => {
-  var iframe = document.createElement('iframe');
+  const iframe = document.createElement('iframe');
 
   iframe.addEventListener('load', t.step_func(() => {
-    var div = createDiv(t, iframe.contentDocument);
-    var effect = new KeyframeEffectReadOnly(div, null, 10000);
-    var anim = new Animation(effect);
+    const div = createDiv(t, iframe.contentDocument);
+    const effect = new KeyframeEffectReadOnly(div, null, 10000);
+    const anim = new Animation(effect);
     assert_equals(anim.timeline, document.timeline);
     iframe.remove();
     t.done();
   }));
 
   document.body.appendChild(iframe);
 }, "Animation constructed with a keyframe that target element is in iframe");
 
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/effect.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/effect.html
@@ -6,29 +6,29 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 "use strict";
 
 test(t => {
-  var anim = new Animation();
+  const anim = new Animation();
   assert_equals(anim.effect, null, "initial effect is null");
 
-  var newEffect = new KeyframeEffectReadOnly(createDiv(t), null);
+  const newEffect = new KeyframeEffectReadOnly(createDiv(t), null);
   anim.effect = newEffect;
   assert_equals(anim.effect, newEffect, "new effect is set");
 }, "effect is set correctly.");
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({ left: ['100px', '100px'] },
-                              { fill: 'forwards' });
-  var effect = animation.effect;
+  const div = createDiv(t);
+  const animation = div.animate({ left: ['100px', '100px'] },
+                                { fill: 'forwards' });
+  const effect = animation.effect;
 
   assert_equals(getComputedStyle(div).left, '100px',
                 'animation is initially having an effect');
 
   animation.effect = null;
   assert_equals(getComputedStyle(div).left, 'auto',
                 'animation no longer has an effect');
 
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/finish.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/finish.html
@@ -5,111 +5,111 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
-var gKeyFrames = { 'marginLeft': ['100px', '200px'] };
+const gKeyFrames = { 'marginLeft': ['100px', '200px'] };
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   animation.playbackRate = 0;
 
   assert_throws({name: 'InvalidStateError'}, () => {
     animation.finish();
   });
 }, 'Test exceptions when finishing non-running animation');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames,
-                              {duration : 100 * MS_PER_SEC,
-                               iterations : Infinity});
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames,
+                                { duration : 100 * MS_PER_SEC,
+                                  iterations : Infinity });
 
   assert_throws({name: 'InvalidStateError'}, () => {
     animation.finish();
   });
 }, 'Test exceptions when finishing infinite animation');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   animation.finish();
 
   assert_equals(animation.currentTime, 100 * MS_PER_SEC,
                 'After finishing, the currentTime should be set to the end ' +
                 'of the active duration');
 }, 'Test finishing of animation');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
    // 1s past effect end
   animation.currentTime =
     animation.effect.getComputedTiming().endTime + 1 * MS_PER_SEC;
   animation.finish();
 
   assert_equals(animation.currentTime, 100 * MS_PER_SEC,
                 'After finishing, the currentTime should be set back to the ' +
                 'end of the active duration');
 }, 'Test finishing of animation with a current time past the effect end');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   animation.currentTime = 100 * MS_PER_SEC;
   return animation.finished.then(() => {
     animation.playbackRate = -1;
     animation.finish();
 
     assert_equals(animation.currentTime, 0,
                   'After finishing a reversed animation the currentTime ' +
                   'should be set to zero');
   });
 }, 'Test finishing of reversed animation');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   animation.currentTime = 100 * MS_PER_SEC;
   return animation.finished.then(() => {
     animation.playbackRate = -1;
     animation.currentTime = -1000;
     animation.finish();
 
     assert_equals(animation.currentTime, 0,
                   'After finishing a reversed animation the currentTime ' +
                   'should be set back to zero');
   });
 }, 'Test finishing of reversed animation with a current time less than zero');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   animation.pause();
   return animation.ready.then(() => {
     animation.finish();
 
     assert_equals(animation.playState, 'finished',
                   'The play state of a paused animation should become ' +
                   '"finished" after finish() is called');
     assert_times_equal(animation.startTime,
                        animation.timeline.currentTime - 100 * MS_PER_SEC,
                        'The start time of a paused animation should be set ' +
                        'after calling finish()');
   });
 }, 'Test finish() while paused');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   animation.pause();
   // Update playbackRate so we can test that the calculated startTime
   // respects it
   animation.playbackRate = 2;
   // While animation is still pause-pending call finish()
   animation.finish();
 
   assert_equals(animation.playState, 'finished',
@@ -117,33 +117,33 @@ test(t => {
                 '"finished" after finish() is called');
   assert_times_equal(animation.startTime,
                      animation.timeline.currentTime - 100 * MS_PER_SEC / 2,
                      'The start time of a pause-pending animation should ' +
                      'be set after calling finish()');
 }, 'Test finish() while pause-pending with positive playbackRate');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   animation.pause();
   animation.playbackRate = -2;
   animation.finish();
 
   assert_equals(animation.playState, 'finished',
                 'The play state of a pause-pending animation should become ' +
                 '"finished" after finish() is called');
   assert_equals(animation.startTime, animation.timeline.currentTime,
                 'The start time of a pause-pending animation should be ' +
                 'set after calling finish()');
 }, 'Test finish() while pause-pending with negative playbackRate');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   animation.playbackRate = 0.5;
   animation.finish();
 
   assert_equals(animation.playState, 'finished',
                 'The play state of a play-pending animation should become ' +
                 '"finished" after finish() is called');
   assert_times_equal(animation.startTime,
                      animation.timeline.currentTime - 100 * MS_PER_SEC / 0.5,
@@ -151,87 +151,87 @@ test(t => {
                      'be set after calling finish()');
 }, 'Test finish() while play-pending');
 
 // FIXME: Add a test for when we are play-pending without an active timeline.
 // - In that case even after calling finish() we should still be pending but
 //   the current time should be updated
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   return animation.ready.then(() => {
     animation.pause();
     animation.play();
     // We are now in the unusual situation of being play-pending whilst having
     // a resolved start time. Check that finish() still triggers a transition
     // to the finished state immediately.
     animation.finish();
 
     assert_equals(animation.playState, 'finished',
                   'After aborting a pause then calling finish() the play ' +
                   'state of an animation should become "finished" immediately');
   });
 }, 'Test finish() during aborted pause');
 
 promise_test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   div.style.marginLeft = '10px';
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   return animation.ready.then(() => {
     animation.finish();
-    var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
+    const marginLeft = parseFloat(getComputedStyle(div).marginLeft);
 
     assert_equals(marginLeft, 10,
                   'The computed style should be reset when finish() is ' +
                   'called');
   });
 }, 'Test resetting of computed style');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
-  var resolvedFinished = false;
+  const div = createDiv(t);
+  const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  let resolvedFinished = false;
   animation.finished.then(() => {
     resolvedFinished = true;
   });
 
   return animation.ready.then(() => {
     animation.finish();
   }).then(() => {
     assert_true(resolvedFinished,
       'Animation.finished should be resolved soon after ' +
       'Animation.finish()');
   });
 }, 'Test finish() resolves finished promise synchronously');
 
 promise_test(t => {
-  var effect = new KeyframeEffectReadOnly(null, gKeyFrames, 100 * MS_PER_SEC);
-  var animation = new Animation(effect, document.timeline);
-  var resolvedFinished = false;
+  const effect = new KeyframeEffectReadOnly(null, gKeyFrames, 100 * MS_PER_SEC);
+  const animation = new Animation(effect, document.timeline);
+  let resolvedFinished = false;
   animation.finished.then(() => {
     resolvedFinished = true;
   });
 
   return animation.ready.then(() => {
     animation.finish();
   }).then(() => {
     assert_true(resolvedFinished,
                 'Animation.finished should be resolved soon after ' +
                 'Animation.finish()');
   });
 }, 'Test finish() resolves finished promise synchronously with an animation ' +
    'without a target');
 
 promise_test(t => {
-  var effect = new KeyframeEffectReadOnly(null, gKeyFrames, 100 * MS_PER_SEC);
-  var animation = new Animation(effect, document.timeline);
+  const effect = new KeyframeEffectReadOnly(null, gKeyFrames, 100 * MS_PER_SEC);
+  const animation = new Animation(effect, document.timeline);
   animation.play();
 
-  var resolvedFinished = false;
+  let resolvedFinished = false;
   animation.finished.then(() => {
     resolvedFinished = true;
   });
 
   return animation.ready.then(() => {
     animation.currentTime = animation.effect.getComputedTiming().endTime - 1;
     return waitForAnimationFrames(2);
   }).then(() => {
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/finished.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/finished.html
@@ -6,19 +6,19 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 "use strict";
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var previousFinishedPromise = animation.finished;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  const previousFinishedPromise = animation.finished;
   return animation.ready.then(() => {
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise is the same object when playing starts');
     animation.pause();
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise does not change when pausing');
     animation.play();
     assert_equals(animation.finished, previousFinishedPromise,
@@ -29,19 +29,19 @@ promise_test(t => {
     return animation.finished;
   }).then(() => {
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise is the same object when playing completes');
   });
 }, 'Test pausing then playing does not change the finished promise');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var previousFinishedPromise = animation.finished;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  let previousFinishedPromise = animation.finished;
   animation.finish();
   return animation.finished.then(() => {
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise is the same object when playing completes');
     animation.play();
     assert_not_equals(animation.finished, previousFinishedPromise,
                   'Finished promise changes when replaying animation');
 
@@ -49,19 +49,19 @@ promise_test(t => {
     animation.play();
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise is the same after redundant play() call');
 
   });
 }, 'Test restarting a finished animation');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var previousFinishedPromise;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  let previousFinishedPromise;
   animation.finish();
   return animation.finished.then(() => {
     previousFinishedPromise = animation.finished;
     animation.playbackRate = -1;
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'Finished promise should be replaced when reversing a ' +
                       'finished promise');
     animation.currentTime = 0;
@@ -71,33 +71,33 @@ promise_test(t => {
     animation.play();
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'Finished promise is replaced after play() call on ' +
                       'finished, reversed animation');
   });
 }, 'Test restarting a reversed finished animation');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var previousFinishedPromise = animation.finished;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  const previousFinishedPromise = animation.finished;
   animation.finish();
   return animation.finished.then(() => {
     animation.currentTime = 100 * MS_PER_SEC + 1000;
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise is unchanged jumping past end of ' +
                   'finished animation');
   });
 }, 'Test redundant finishing of animation');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   // Setup callback to run if finished promise is resolved
-  var finishPromiseResolved = false;
+  let finishPromiseResolved = false;
   animation.finished.then(() => {
     finishPromiseResolved = true;
   });
   return animation.ready.then(() => {
     // Jump to mid-way in interval and pause
     animation.currentTime = 100 * MS_PER_SEC / 2;
     animation.pause();
     return animation.ready;
@@ -108,20 +108,20 @@ promise_test(t => {
     return waitForAnimationFrames(2);
   }).then(() => {
     assert_false(finishPromiseResolved,
                  'Finished promise should not resolve when paused');
   });
 }, 'Finished promise does not resolve when paused');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   // Setup callback to run if finished promise is resolved
-  var finishPromiseResolved = false;
+  let finishPromiseResolved = false;
   animation.finished.then(() => {
     finishPromiseResolved = true;
   });
   return animation.ready.then(() => {
     // Jump to mid-way in interval and pause
     animation.currentTime = 100 * MS_PER_SEC / 2;
     animation.pause();
     // Jump to the end
@@ -129,89 +129,89 @@ promise_test(t => {
     return waitForAnimationFrames(2);
   }).then(() => {
     assert_false(finishPromiseResolved,
                  'Finished promise should not resolve when pause-pending');
   });
 }, 'Finished promise does not resolve when pause-pending');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.finish();
   return animation.finished.then(resolvedAnimation => {
     assert_equals(resolvedAnimation, animation,
                   'Object identity of animation passed to Promise callback'
                   + ' matches the animation object owning the Promise');
   });
 }, 'The finished promise is fulfilled with its Animation');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var previousFinishedPromise = animation.finished;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  const previousFinishedPromise = animation.finished;
 
   // Set up listeners on finished promise
-  var retPromise = animation.finished.then(() => {
+  const retPromise = animation.finished.then(() => {
     assert_unreached('finished promise was fulfilled');
   }).catch(err => {
     assert_equals(err.name, 'AbortError',
                   'finished promise is rejected with AbortError');
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'Finished promise should change after the original is ' +
                       'rejected');
   });
 
   animation.cancel();
 
   return retPromise;
 }, 'finished promise is rejected when an animation is cancelled by calling ' +
    'cancel()');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var previousFinishedPromise = animation.finished;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  const previousFinishedPromise = animation.finished;
   animation.finish();
   return animation.finished.then(() => {
     animation.cancel();
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'A new finished promise should be created when'
                       + ' cancelling a finished animation');
   });
 }, 'cancelling an already-finished animation replaces the finished promise');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.cancel();
   // The spec says we still create a new finished promise and reject the old
   // one even if we're already idle. That behavior might change, but for now
   // test that we do that.
-  var retPromise = animation.finished.catch(err => {
+  const retPromise = animation.finished.catch(err => {
     assert_equals(err.name, 'AbortError',
                   'finished promise is rejected with AbortError');
   });
 
   // Redundant call to cancel();
-  var previousFinishedPromise = animation.finished;
+  const previousFinishedPromise = animation.finished;
   animation.cancel();
   assert_not_equals(animation.finished, previousFinishedPromise,
                     'A redundant call to cancel() should still generate a new'
                     + ' finished promise');
   return retPromise;
 }, 'cancelling an idle animation still replaces the finished promise');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   const HALF_DUR = 100 * MS_PER_SEC / 2;
   const QUARTER_DUR = 100 * MS_PER_SEC / 4;
-  var gotNextFrame = false;
-  var currentTimeBeforeShortening;
+  let gotNextFrame = false;
+  let currentTimeBeforeShortening;
   animation.currentTime = HALF_DUR;
   return animation.ready.then(() => {
     currentTimeBeforeShortening = animation.currentTime;
     animation.effect.timing.duration = QUARTER_DUR;
     // Below we use gotNextFrame to check that shortening of the animation
     // duration causes the finished promise to resolve, rather than it just
     // getting resolved on the next animation frame. This relies on the fact
     // that the promises are resolved as a micro-task before the next frame
@@ -221,199 +221,199 @@ promise_test(t => {
     });
 
     return animation.finished;
   }).then(() => {
     assert_false(gotNextFrame, 'shortening of the animation duration should ' +
                                'resolve the finished promise');
     assert_equals(animation.currentTime, currentTimeBeforeShortening,
                   'currentTime should be unchanged when duration shortened');
-    var previousFinishedPromise = animation.finished;
+    const previousFinishedPromise = animation.finished;
     animation.effect.timing.duration = 100 * MS_PER_SEC;
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'Finished promise should change after lengthening the ' +
                       'duration causes the animation to become active');
   });
 }, 'Test finished promise changes for animation duration changes');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var retPromise = animation.ready.then(() => {
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  const retPromise = animation.ready.then(() => {
     animation.playbackRate = 0;
     animation.currentTime = 100 * MS_PER_SEC + 1000;
     return waitForAnimationFrames(2);
   });
 
   animation.finished.then(t.step_func(() => {
     assert_unreached('finished promise should not resolve when playbackRate ' +
                      'is zero');
   }));
 
   return retPromise;
 }, 'Test finished promise changes when playbackRate == 0');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   return animation.ready.then(() => {
     animation.playbackRate = -1;
     return animation.finished;
   });
 }, 'Test finished promise resolves when reaching to the natural boundary.');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var previousFinishedPromise = animation.finished;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  const previousFinishedPromise = animation.finished;
   animation.finish();
   return animation.finished.then(() => {
     animation.currentTime = 0;
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'Finished promise should change once a prior ' +
                       'finished promise resolved and the animation ' +
                       'falls out finished state');
   });
 }, 'Test finished promise changes when a prior finished promise resolved ' +
    'and the animation falls out finished state');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var previousFinishedPromise = animation.finished;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  const previousFinishedPromise = animation.finished;
   animation.currentTime = 100 * MS_PER_SEC;
   animation.currentTime = 100 * MS_PER_SEC / 2;
   assert_equals(animation.finished, previousFinishedPromise,
                 'No new finished promise generated when finished state ' +
                 'is checked asynchronously');
 }, 'Test no new finished promise generated when finished state ' +
    'is checked asynchronously');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var previousFinishedPromise = animation.finished;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  const previousFinishedPromise = animation.finished;
   animation.finish();
   animation.currentTime = 100 * MS_PER_SEC / 2;
   assert_not_equals(animation.finished, previousFinishedPromise,
                     'New finished promise generated when finished state ' +
                     'is checked synchronously');
 }, 'Test new finished promise generated when finished state ' +
    'is checked synchronously');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var resolvedFinished = false;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  let resolvedFinished = false;
   animation.finished.then(() => {
     resolvedFinished = true;
   });
   return animation.ready.then(() => {
     animation.finish();
     animation.currentTime = 100 * MS_PER_SEC / 2;
   }).then(() => {
     assert_true(resolvedFinished,
       'Animation.finished should be resolved even if ' +
       'the finished state is changed soon');
   });
 
 }, 'Test synchronous finished promise resolved even if finished state ' +
    'is changed soon');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var resolvedFinished = false;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  let resolvedFinished = false;
   animation.finished.then(() => {
     resolvedFinished = true;
   });
 
   return animation.ready.then(() => {
     animation.currentTime = 100 * MS_PER_SEC;
     animation.finish();
   }).then(() => {
     assert_true(resolvedFinished,
       'Animation.finished should be resolved soon after finish() is ' +
       'called even if there are other asynchronous promises just before it');
   });
 }, 'Test synchronous finished promise resolved even if asynchronous ' +
    'finished promise happens just before synchronous promise');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.finished.then(t.step_func(() => {
     assert_unreached('Animation.finished should not be resolved');
   }));
 
   return animation.ready.then(() => {
     animation.currentTime = 100 * MS_PER_SEC;
     animation.currentTime = 100 * MS_PER_SEC / 2;
   });
 }, 'Test finished promise is not resolved when the animation ' +
    'falls out finished state immediately');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   return animation.ready.then(() => {
     animation.currentTime = 100 * MS_PER_SEC;
     animation.finished.then(t.step_func(() => {
       assert_unreached('Animation.finished should not be resolved');
     }));
     animation.currentTime = 0;
   });
 
 }, 'Test finished promise is not resolved once the animation ' +
    'falls out finished state even though the current finished ' +
    'promise is generated soon after animation state became finished');
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
-  var ready = false;
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  let ready = false;
   animation.ready.then(
     t.step_func(() => {
       ready = true;
     }),
     t.unreached_func('Ready promise must not be rejected')
   );
 
-  var testSuccess = animation.finished.then(
+  const testSuccess = animation.finished.then(
     t.step_func(() => {
       assert_true(ready, 'Ready promise has resolved');
     }),
     t.unreached_func('Finished promise must not be rejected')
   );
 
-  var timeout = waitForAnimationFrames(3).then(() => {
+  const timeout = waitForAnimationFrames(3).then(() => {
     return Promise.reject('Finished promise did not arrive in time');
   });
 
   animation.finish();
   return Promise.race([timeout, testSuccess]);
 }, 'Finished promise should be resolved after the ready promise is resolved');
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
-  var caught = false;
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  let caught = false;
   animation.ready.then(
     t.unreached_func('Ready promise must not be resolved'),
     t.step_func(() => {
       caught = true;
     })
   );
 
-  var testSuccess = animation.finished.then(
+  const testSuccess = animation.finished.then(
     t.unreached_func('Finished promise must not be resolved'),
     t.step_func(() => {
       assert_true(caught, 'Ready promise has been rejected');
     })
   );
 
-  var timeout = waitForAnimationFrames(3).then(() => {
+  const timeout = waitForAnimationFrames(3).then(() => {
     return Promise.reject('Finished promise was not rejected in time');
   });
 
   animation.cancel();
   return Promise.race([timeout, testSuccess]);
 }, 'Finished promise should be rejected after the ready promise is rejected');
 
 </script>
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/id.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/id.html
@@ -6,23 +6,23 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 "use strict";
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   assert_equals(animation.id, '', 'id for Animation is initially empty');
 }, 'Animation.id initial value');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.id = 'anim';
 
   assert_equals(animation.id, 'anim', 'animation.id reflects the value set');
 }, 'Animation.id setter');
 
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/oncancel.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/oncancel.html
@@ -6,19 +6,19 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 "use strict";
 
 async_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var finishedTimelineTime;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  let finishedTimelineTime;
   animation.finished.then().catch(() => {
     finishedTimelineTime = animation.timeline.currentTime;
   });
 
   animation.oncancel = t.step_func_done(event => {
     assert_equals(event.currentTime, null,
       'event.currentTime should be null');
     assert_equals(event.timelineTime, finishedTimelineTime,
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/onfinish.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/onfinish.html
@@ -6,19 +6,19 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 "use strict";
 
 async_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
-  var finishedTimelineTime;
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
+  let finishedTimelineTime;
   animation.finished.then(() => {
     finishedTimelineTime = animation.timeline.currentTime;
   });
 
   animation.onfinish = t.step_func_done(event => {
     assert_equals(event.currentTime, 0,
       'event.currentTime should be zero');
     assert_equals(event.timelineTime, finishedTimelineTime,
@@ -26,20 +26,20 @@ async_test(t => {
       'when finished promise is resolved');
   });
 
   animation.playbackRate = -1;
 }, 'onfinish event is fired when the currentTime < 0 and ' +
    'the playbackRate < 0');
 
 async_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
 
-  var finishedTimelineTime;
+  let finishedTimelineTime;
   animation.finished.then(() => {
     finishedTimelineTime = animation.timeline.currentTime;
   });
 
   animation.onfinish = t.step_func_done(event => {
     assert_equals(event.currentTime, 100 * MS_PER_SEC,
       'event.currentTime should be the effect end');
     assert_equals(event.timelineTime, finishedTimelineTime,
@@ -47,69 +47,69 @@ async_test(t => {
       'when finished promise is resolved');
   });
 
   animation.currentTime = 100 * MS_PER_SEC;
 }, 'onfinish event is fired when the currentTime > 0 and ' +
    'the playbackRate > 0');
 
 async_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
 
-  var finishedTimelineTime;
+  let finishedTimelineTime;
   animation.finished.then(() => {
     finishedTimelineTime = animation.timeline.currentTime;
   });
 
   animation.onfinish = t.step_func_done(event => {
     assert_equals(event.currentTime, 100 * MS_PER_SEC,
       'event.currentTime should be the effect end');
     assert_equals(event.timelineTime, finishedTimelineTime,
       'event.timelineTime should equal to the animation timeline ' +
       'when finished promise is resolved');
   });
 
   animation.finish();
 }, 'onfinish event is fired when animation.finish() is called');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
 
   animation.onfinish = event => {
     assert_unreached('onfinish event should not be fired');
   };
 
   animation.currentTime = 100 * MS_PER_SEC / 2;
   animation.pause();
 
   return animation.ready.then(() => {
     animation.currentTime = 100 * MS_PER_SEC;
     return waitForAnimationFrames(2);
   });
 }, 'onfinish event is not fired when paused');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.onfinish = event => {
     assert_unreached('onfinish event should not be fired');
   };
 
   return animation.ready.then(() => {
     animation.playbackRate = 0;
     animation.currentTime = 100 * MS_PER_SEC;
     return waitForAnimationFrames(2);
   });
 }, 'onfinish event is not fired when the playbackRate is zero');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.onfinish = event => {
     assert_unreached('onfinish event should not be fired');
   };
 
   return animation.ready.then(() => {
     animation.currentTime = 100 * MS_PER_SEC;
     animation.currentTime = 100 * MS_PER_SEC / 2;
     return waitForAnimationFrames(2);
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/pause.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/pause.html
@@ -6,37 +6,37 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 "use strict";
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 1000 * MS_PER_SEC);
-  var previousCurrentTime = animation.currentTime;
+  const div = createDiv(t);
+  const animation = div.animate({}, 1000 * MS_PER_SEC);
+  let previousCurrentTime = animation.currentTime;
 
   return animation.ready.then(waitForAnimationFrames(1)).then(() => {
     assert_true(animation.currentTime >= previousCurrentTime,
                 'currentTime is initially increasing');
     animation.pause();
     return animation.ready;
   }).then(() => {
     previousCurrentTime = animation.currentTime;
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_equals(animation.currentTime, previousCurrentTime,
                   'currentTime does not increase after calling pause()');
   });
 }, 'pause() a running animation');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 1000 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 1000 * MS_PER_SEC);
 
   // Go to idle state then pause
   animation.cancel();
   animation.pause();
 
   assert_equals(animation.currentTime, 0, 'currentTime is set to 0');
   assert_equals(animation.startTime, null, 'startTime is not set');
   assert_equals(animation.playState, 'pending', 'initially pause-pending');
@@ -46,48 +46,48 @@ promise_test(t => {
     assert_equals(animation.playState, 'paused',
                   'resolves to paused state asynchronously');
     assert_equals(animation.currentTime, 0,
                   'keeps the initially set currentTime');
   });
 }, 'pause() from idle');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 1000 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 1000 * MS_PER_SEC);
   animation.cancel();
   animation.playbackRate = -1;
   animation.pause();
 
   assert_equals(animation.currentTime, 1000 * MS_PER_SEC,
                 'currentTime is set to the effect end');
 
   return animation.ready.then(() => {
     assert_equals(animation.currentTime, 1000 * MS_PER_SEC,
                   'keeps the initially set currentTime');
   });
 }, 'pause() from idle with a negative playbackRate');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, {duration: 1000 * MS_PER_SEC,
+  const div = createDiv(t);
+  const animation = div.animate({}, {duration: 1000 * MS_PER_SEC,
                                    iterations: Infinity});
   animation.cancel();
   animation.playbackRate = -1;
 
   assert_throws('InvalidStateError',
                 () => { animation.pause(); },
                 'Expect InvalidStateError exception on calling pause() ' +
                 'from idle with a negative playbackRate and ' +
                 'infinite-duration animation');
 }, 'pause() from idle with a negative playbackRate and endless effect');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 1000 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 1000 * MS_PER_SEC);
   return animation.ready
     .then(animation => {
       animation.finish();
       animation.pause();
       return animation.ready;
     }).then(animation => {
       assert_equals(animation.currentTime, 1000 * MS_PER_SEC,
                     'currentTime after pausing finished animation');
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/play.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/play.html
@@ -6,20 +6,20 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({ transform: ['none', 'translate(10px)']},
-                              { duration : 100 * MS_PER_SEC,
-                                iterations : Infinity});
+  const div = createDiv(t);
+  const animation = div.animate({ transform: ['none', 'translate(10px)']},
+                                { duration: 100 * MS_PER_SEC,
+                                  iterations: Infinity });
   return animation.ready.then(() => {
     // Seek to a time outside the active range so that play() will have to
     // snap back to the start
     animation.currentTime = -5 * MS_PER_SEC;
     animation.playbackRate = -1;
 
     assert_throws('InvalidStateError',
                   () => { animation.play(); },
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/playState.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/playState.html
@@ -6,47 +6,47 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
 
   assert_equals(animation.playState, 'pending');
   return animation.ready.then(() => {
     assert_equals(animation.playState, 'running');
   });
 }, 'Animation.playState reports \'pending\'->\'running\' when initially ' +
    'played');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.pause();
 
   assert_equals(animation.playState, 'pending');
   return animation.ready.then(() => {
     assert_equals(animation.playState, 'paused');
   });
 }, 'Animation.playState reports \'pending\'->\'paused\' when pausing');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.cancel();
   assert_equals(animation.playState, 'idle');
 }, 'Animation.playState is \'idle\' when canceled.');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.cancel();
   animation.currentTime = 50 * MS_PER_SEC;
   assert_equals(animation.playState, 'paused',
                 'After seeking an idle animation, it is effectively paused');
 }, 'Animation.playState is \'paused\' after cancelling an animation, ' +
    'seeking it makes it paused');
 
 </script>
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/playbackRate.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/playbackRate.html
@@ -9,69 +9,69 @@
 <div id="log"></div>
 <script>
 "use strict";
 
 function assert_playbackrate(animation,
                              previousAnimationCurrentTime,
                              previousTimelineCurrentTime,
                              description) {
-  var accuracy = 0.001; /* accuracy of DOMHighResTimeStamp */
-  var animationCurrentTimeDifference =
+  const accuracy = 0.001; /* accuracy of DOMHighResTimeStamp */
+  const animationCurrentTimeDifference =
     animation.currentTime - previousAnimationCurrentTime;
-  var timelineCurrentTimeDifference =
+  const timelineCurrentTimeDifference =
     animation.timeline.currentTime - previousTimelineCurrentTime;
 
   assert_approx_equals(animationCurrentTimeDifference,
                        timelineCurrentTimeDifference * animation.playbackRate,
                        accuracy,
                        description);
 }
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(null, 100 * MS_PER_SEC);
   return animation.ready.then(() => {
     animation.currentTime = 7 * MS_PER_SEC; // ms
     animation.playbackRate = 0.5;
 
     assert_equals(animation.currentTime, 7 * MS_PER_SEC,
       'Reducing Animation.playbackRate should not change the currentTime ' +
       'of a playing animation');
     animation.playbackRate = 2;
     assert_equals(animation.currentTime, 7 * MS_PER_SEC,
       'Increasing Animation.playbackRate should not change the currentTime ' +
       'of a playing animation');
   });
 }, 'Test the initial effect of setting playbackRate on currentTime');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(null, 100 * MS_PER_SEC);
   animation.playbackRate = 2;
-  var previousTimelineCurrentTime;
-  var previousAnimationCurrentTime;
+  let previousTimelineCurrentTime;
+  let previousAnimationCurrentTime;
   return animation.ready.then(() => {
     previousAnimationCurrentTime = animation.currentTime;
     previousTimelineCurrentTime = animation.timeline.currentTime;
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_playbackrate(animation,
       previousAnimationCurrentTime,
       previousTimelineCurrentTime,
       'animation.currentTime should be 2 times faster than timeline.');
   });
 }, 'Test the effect of setting playbackRate on currentTime');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(null, 100 * MS_PER_SEC);
   animation.playbackRate = 2;
-  var previousTimelineCurrentTime;
-  var previousAnimationCurrentTime;
+  let previousTimelineCurrentTime;
+  let previousAnimationCurrentTime;
   return animation.ready.then(() => {
     previousAnimationCurrentTime = animation.currentTime;
     previousTimelineCurrentTime = animation.timeline.currentTime;
     animation.playbackRate = 1;
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_equals(animation.playbackRate, 1,
       'sanity check: animation.playbackRate is still 1.');
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/ready.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/ready.html
@@ -6,20 +6,20 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 "use strict";
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, 100 * MS_PER_SEC);
-  var originalReadyPromise = animation.ready;
-  var pauseReadyPromise;
+  const div = createDiv(t);
+  const animation = div.animate(null, 100 * MS_PER_SEC);
+  const originalReadyPromise = animation.ready;
+  let pauseReadyPromise;
 
   return animation.ready.then(() => {
     assert_equals(animation.ready, originalReadyPromise,
                   'Ready promise is the same object when playing completes');
     animation.pause();
     assert_not_equals(animation.ready, originalReadyPromise,
                       'A new ready promise is created when pausing');
     pauseReadyPromise = animation.ready;
@@ -29,31 +29,31 @@ promise_test(t => {
   }).then(() => {
     animation.play();
     assert_not_equals(animation.ready, pauseReadyPromise,
                       'A new ready promise is created when playing');
   });
 }, 'A new ready promise is created when play()/pause() is called');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(null, 100 * MS_PER_SEC);
 
   return animation.ready.then(() => {
-    var promiseBeforeCallingPlay = animation.ready;
+    const promiseBeforeCallingPlay = animation.ready;
     animation.play();
     assert_equals(animation.ready, promiseBeforeCallingPlay,
                   'Ready promise has same object identity after redundant call'
                   + ' to play()');
   });
 }, 'Redundant calls to play() do not generate new ready promise objects');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate(null, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate(null, 100 * MS_PER_SEC);
 
   return animation.ready.then(resolvedAnimation => {
     assert_equals(resolvedAnimation, animation,
                   'Object identity of Animation passed to Promise callback'
                   + ' matches the Animation object owning the Promise');
   });
 }, 'The ready promise is fulfilled with its Animation');
 
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/startTime.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/startTime.html
@@ -7,49 +7,49 @@ href="https://w3c.github.io/web-animatio
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var animation = new Animation(new KeyframeEffect(createDiv(t), null),
-                                document.timeline);
+  const animation = new Animation(new KeyframeEffect(createDiv(t), null),
+                                  document.timeline);
   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'startTime of a newly created (idle) animation is unresolved');
 
 test(t => {
-  var animation = new Animation(new KeyframeEffect(createDiv(t), null),
-                                document.timeline);
+  const animation = new Animation(new KeyframeEffect(createDiv(t), null),
+                                  document.timeline);
   animation.play();
   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'startTime of a play-pending animation is unresolved');
 
 test(t => {
-  var animation = new Animation(new KeyframeEffect(createDiv(t), null),
-                                document.timeline);
+  const animation = new Animation(new KeyframeEffect(createDiv(t), null),
+                                  document.timeline);
   animation.pause();
   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'startTime of a pause-pending animation is unresolved');
 
 test(t => {
-  var animation = createDiv(t).animate(null);
+  const animation = createDiv(t).animate(null);
   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'startTime of a play-pending animation created using Element.animate'
    + ' shortcut is unresolved');
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
   return animation.ready.then(() => {
     assert_greater_than(animation.startTime, 0, 'startTime when running');
   });
 }, 'startTime is resolved when running');
 
 test(t => {
-  var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
   animation.cancel();
   assert_equals(animation.startTime, null);
   assert_equals(animation.currentTime, null);
 }, 'startTime and currentTime are unresolved when animation is cancelled');
 
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/delay.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/delay.html
@@ -6,69 +6,69 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.timing.delay, 0);
 }, 'Has the default value 0');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 100);
   anim.effect.timing.delay = 100;
   assert_equals(anim.effect.timing.delay, 100, 'set delay 100');
   assert_equals(anim.effect.getComputedTiming().delay, 100,
                   'getComputedTiming() after set delay 100');
 }, 'Can be set to a positive number');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 100);
   anim.effect.timing.delay = -100;
   assert_equals(anim.effect.timing.delay, -100, 'set delay -100');
   assert_equals(anim.effect.getComputedTiming().delay, -100,
                 'getComputedTiming() after set delay -100');
 }, 'Can be set to a negative number');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 100);
   anim.effect.timing.delay = 100;
   assert_equals(anim.effect.getComputedTiming().progress, null);
   assert_equals(anim.effect.getComputedTiming().currentIteration, null);
 }, 'Can set a positive delay on an animation without a backwards fill to'
    + ' make it no longer active');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { fill: 'both',
-                           duration: 100 });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { fill: 'both',
+                             duration: 100 });
   anim.effect.timing.delay = -50;
   assert_equals(anim.effect.getComputedTiming().progress, 0.5);
 }, 'Can set a negative delay to seek into the active interval');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { fill: 'both',
-                           duration: 100 });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { fill: 'both',
+                             duration: 100 });
   anim.effect.timing.delay = -100;
   assert_equals(anim.effect.getComputedTiming().progress, 1);
   assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
 }, 'Can set a large negative delay to finishing an animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate(null);
+  const div = createDiv(t);
+  const anim = div.animate(null);
   for (let invalid of [NaN, Infinity]) {
     assert_throws({ name: 'TypeError' }, () => {
       anim.effect.timing.delay = invalid;
     }, 'setting ' + invalid);
     assert_throws({ name: 'TypeError' }, () => {
       div.animate({}, { delay: invalid });
     }, 'animate() with ' + invalid);
   }
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
@@ -6,98 +6,98 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.timing.direction, 'normal');
 }, 'Has the default value \'normal\'');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
 
-  var directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
+  const directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
   directions.forEach(direction => {
     anim.effect.timing.direction = direction;
     assert_equals(anim.effect.timing.direction, direction,
                   'set direction to ' + direction);
   });
 }, 'Can be set to each of the possible keywords');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate(null, { duration: 10000, direction: 'normal' });
+  const div = createDiv(t);
+  const anim = div.animate(null, { duration: 10000, direction: 'normal' });
   anim.currentTime = 7000;
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.7,
                      'progress before updating direction');
 
   anim.effect.timing.direction = 'reverse';
 
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.3,
                      'progress after updating direction');
 }, 'Can be changed from \'normal\' to \'reverse\' while in progress');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { duration: 10000,
-                           direction: 'normal' });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { duration: 10000,
+                             direction: 'normal' });
   assert_equals(anim.effect.getComputedTiming().progress, 0,
                 'progress before updating direction');
 
   anim.effect.timing.direction = 'reverse';
 
   assert_equals(anim.effect.getComputedTiming().progress, 1,
                 'progress after updating direction');
 }, 'Can be changed from \'normal\' to \'reverse\' while at start of active'
    + ' interval');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { fill: 'backwards',
-                           duration: 10000,
-                           delay: 10000,
-                           direction: 'normal' });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { fill: 'backwards',
+                             duration: 10000,
+                             delay: 10000,
+                             direction: 'normal' });
   assert_equals(anim.effect.getComputedTiming().progress, 0,
                 'progress before updating direction');
 
   anim.effect.timing.direction = 'reverse';
 
   assert_equals(anim.effect.getComputedTiming().progress, 1,
                 'progress after updating direction');
 }, 'Can be changed from \'normal\' to \'reverse\' while filling backwards');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { iterations: 2,
-                           duration: 10000,
-                           direction: 'normal' });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { iterations: 2,
+                             duration: 10000,
+                             direction: 'normal' });
   anim.currentTime = 17000;
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.7,
                      'progress before updating direction');
 
   anim.effect.timing.direction = 'alternate';
 
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.3,
                      'progress after updating direction');
 }, 'Can be changed from \'normal\' to \'alternate\' while in progress');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { iterations: 2,
-                           duration: 10000,
-                           direction: 'alternate' });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { iterations: 2,
+                             duration: 10000,
+                             direction: 'alternate' });
   anim.currentTime = 17000;
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.3,
                      'progress before updating direction');
 
   anim.effect.timing.direction = 'alternate-reverse';
 
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.7,
                      'progress after updating direction');
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/duration.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/duration.html
@@ -6,177 +6,177 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.timing.duration, 'auto');
 }, 'Has the default value \'auto\'');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   anim.effect.timing.duration = 123.45;
   assert_times_equal(anim.effect.timing.duration, 123.45,
                      'set duration 123.45');
   assert_times_equal(anim.effect.getComputedTiming().duration, 123.45,
                      'getComputedTiming() after set duration 123.45');
 }, 'Can be set to a double value');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   anim.effect.timing.duration = 'auto';
   assert_equals(anim.effect.timing.duration, 'auto', 'set duration \'auto\'');
   assert_equals(anim.effect.getComputedTiming().duration, 0,
                 'getComputedTiming() after set duration \'auto\'');
 }, 'Can be set to the string \'auto\'');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 'auto' });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 'auto' });
   assert_equals(anim.effect.timing.duration, 'auto', 'set duration \'auto\'');
   assert_equals(anim.effect.getComputedTiming().duration, 0,
                 'getComputedTiming() after set duration \'auto\'');
 }, 'Can be set to \'auto\' using a dictionary object');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   anim.effect.timing.duration = Infinity;
   assert_equals(anim.effect.timing.duration, Infinity, 'set duration Infinity');
   assert_equals(anim.effect.getComputedTiming().duration, Infinity,
                 'getComputedTiming() after set duration Infinity');
 }, 'Can be set to Infinity');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   assert_throws({ name: 'TypeError' }, () => {
     div.animate({ opacity: [ 0, 1 ] }, -1);
   });
 }, 'animate() throws when passed a negative number');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   assert_throws({ name: 'TypeError' }, () => {
     div.animate({ opacity: [ 0, 1 ] }, -Infinity);
   });
 }, 'animate() throws when passed negative Infinity');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   assert_throws({ name: 'TypeError' }, () => {
     div.animate({ opacity: [ 0, 1 ] }, NaN);
   });
 }, 'animate() throws when passed a NaN value');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   assert_throws({ name: 'TypeError' }, () => {
     div.animate({ opacity: [ 0, 1 ] }, { duration: -1 });
   });
 }, 'animate() throws when passed a negative number using a dictionary object');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   assert_throws({ name: 'TypeError' }, () => {
     div.animate({ opacity: [ 0, 1 ] }, { duration: -Infinity });
   });
 }, 'animate() throws when passed negative Infinity using a dictionary object');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   assert_throws({ name: 'TypeError' }, () => {
     div.animate({ opacity: [ 0, 1 ] }, { duration: NaN });
   });
 }, 'animate() throws when passed a NaN value using a dictionary object');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   assert_throws({ name: 'TypeError' }, () => {
     div.animate({ opacity: [ 0, 1 ] }, { duration: 'abc' });
   });
 }, 'animate() throws when passed a string other than \'auto\' using a'
    + ' dictionary object');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   assert_throws({ name: 'TypeError' }, () => {
     div.animate({ opacity: [ 0, 1 ] }, { duration: '100' });
   });
 }, 'animate() throws when passed a string containing a number using a'
    + ' dictionary object');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({ name: 'TypeError' }, () => {
     anim.effect.timing.duration = -1;
   });
 }, 'Throws when setting a negative number');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({ name: 'TypeError' }, () => {
     anim.effect.timing.duration = -Infinity;
   });
 }, 'Throws when setting negative infinity');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({ name: 'TypeError' }, () => {
     anim.effect.timing.duration = NaN;
   });
 }, 'Throws when setting a NaN value');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({ name: 'TypeError' }, () => {
     anim.effect.timing.duration = 'abc';
   });
 }, 'Throws when setting a string other than \'auto\'');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({ name: 'TypeError' }, () => {
     anim.effect.timing.duration = '100';
   });
 }, 'Throws when setting a string containing a number');
 
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   return anim.ready.then(() => {
-    var originalStartTime   = anim.startTime;
-    var originalCurrentTime = anim.currentTime;
+    const originalStartTime   = anim.startTime;
+    const originalCurrentTime = anim.currentTime;
     assert_equals(anim.effect.getComputedTiming().duration, 100 * MS_PER_SEC,
                   'Initial duration should be as set on KeyframeEffect');
 
     anim.effect.timing.duration = 200 * MS_PER_SEC;
     assert_equals(anim.effect.getComputedTiming().duration, 200 * MS_PER_SEC,
                   'Effect duration should have been updated');
     assert_times_equal(anim.startTime, originalStartTime,
                        'startTime should be unaffected by changing effect ' +
                        'duration');
     assert_times_equal(anim.currentTime, originalCurrentTime,
                        'currentTime should be unaffected by changing effect ' +
                        'duration');
   });
 }, 'Extending an effect\'s duration does not change the start or current time');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate(null, { duration: 100000, fill: 'both' });
+  const div = createDiv(t);
+  const anim = div.animate(null, { duration: 100000, fill: 'both' });
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().progress, 1,
                 'progress when animation is finished');
   anim.effect.timing.duration *= 2;
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.5,
                      'progress after doubling the duration');
   anim.effect.timing.duration = 0;
   assert_equals(anim.effect.getComputedTiming().progress, 1,
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
@@ -7,77 +7,77 @@
 <script src="../../testcommon.js"></script>
 <script src="../../resources/easing-tests.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.timing.easing, 'linear');
 }, 'Has the default value \'linear\'');
 
 function assert_progress(animation, currentTime, easingFunction) {
   animation.currentTime = currentTime;
-  var portion = currentTime / animation.effect.timing.duration;
+  const portion = currentTime / animation.effect.timing.duration;
   assert_approx_equals(animation.effect.getComputedTiming().progress,
                        easingFunction(portion),
                        0.01,
                        'The progress of the animation should be approximately ' +
                        easingFunction(portion) + ' at ' + currentTime + 'ms');
 }
 
 gEasingTests.forEach(options => {
   test(t => {
-    var target = createDiv(t);
-    var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
-                              { duration: 1000 * MS_PER_SEC,
-                                fill: 'forwards' });
+    const target = createDiv(t);
+    const anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
+                                { duration: 1000 * MS_PER_SEC,
+                                  fill: 'forwards' });
     anim.effect.timing.easing = options.easing;
     assert_equals(anim.effect.timing.easing,
                   options.serialization || options.easing);
 
-    var easing = options.easingFunction;
+    const easing = options.easingFunction;
     assert_progress(anim, 0, easing);
     assert_progress(anim, 250 * MS_PER_SEC, easing);
     assert_progress(anim, 500 * MS_PER_SEC, easing);
     assert_progress(anim, 750 * MS_PER_SEC, easing);
     assert_progress(anim, 1000 * MS_PER_SEC, easing);
   }, options.desc);
 });
 
 gInvalidEasings.forEach(invalidEasing => {
   test(t => {
-    var div = createDiv(t);
-    var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
+    const div = createDiv(t);
+    const anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
     assert_throws({ name: 'TypeError' },
                   () => {
                     anim.effect.timing.easing = invalidEasing;
                   });
   }, 'Throws on invalid easing: \'' + invalidEasing + '\'');
 });
 
 gRoundtripEasings.forEach(easing => {
   test(t => {
     const anim = createDiv(t).animate(null);
     anim.effect.timing.easing = easing;
     assert_equals(anim.effect.timing.easing, easing);
   }, `Canonical easing '${easing}' is returned as set`);
 });
 
 test(t => {
-  var delay = 1000 * MS_PER_SEC;
+  const delay = 1000 * MS_PER_SEC;
 
-  var target = createDiv(t);
-  var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
-                            { duration: 1000 * MS_PER_SEC,
-                              fill: 'both',
-                              delay: delay,
-                              easing: 'steps(2, start)' });
+  const target = createDiv(t);
+  const anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
+                              { duration: 1000 * MS_PER_SEC,
+                                fill: 'both',
+                                delay: delay,
+                                easing: 'steps(2, start)' });
 
   anim.effect.timing.easing = 'steps(2, end)';
   assert_equals(anim.effect.getComputedTiming().progress, 0,
                 'easing replace to steps(2, end) at before phase');
 
   anim.currentTime = delay + 750 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.5,
                 'change currentTime to active phase');
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/endDelay.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/endDelay.html
@@ -6,76 +6,76 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.timing.endDelay, 0);
 }, 'Has the default value 0');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   anim.effect.timing.endDelay = 123.45;
   assert_times_equal(anim.effect.timing.endDelay, 123.45,
                      'set endDelay 123.45');
   assert_times_equal(anim.effect.getComputedTiming().endDelay, 123.45,
                      'getComputedTiming() after set endDelay 123.45');
 }, 'Can be set to a positive number');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   anim.effect.timing.endDelay = -1000;
   assert_equals(anim.effect.timing.endDelay, -1000, 'set endDelay -1000');
   assert_equals(anim.effect.getComputedTiming().endDelay, -1000,
                 'getComputedTiming() after set endDelay -1000');
 }, 'Can be set to a negative number');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({name: "TypeError"}, () => {
     anim.effect.timing.endDelay = Infinity;
   }, 'we can not assign Infinity to timing.endDelay');
 }, 'Throws when setting infinity');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({name: "TypeError"}, () => {
     anim.effect.timing.endDelay = -Infinity;
   }, 'we can not assign negative Infinity to timing.endDelay');
 }, 'Throws when setting negative infinity');
 
 async_test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { duration: 100000, endDelay: 50000 });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { duration: 100000, endDelay: 50000 });
   anim.onfinish = t.step_func(event => {
     assert_unreached('finish event should not be fired');
   });
 
   anim.ready.then(() => {
     anim.currentTime = 100000;
     return waitForAnimationFrames(2);
   }).then(t.step_func(() => {
     t.done();
   }));
 }, 'finish event is not fired at the end of the active interval when the'
    + ' endDelay has not expired');
 
 async_test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { duration: 100000, endDelay: 30000 });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { duration: 100000, endDelay: 30000 });
   anim.ready.then(() => {
     anim.currentTime = 110000; // during endDelay
     anim.onfinish = t.step_func(event => {
       assert_unreached('onfinish event should not be fired during endDelay');
     });
     return waitForAnimationFrames(2);
   }).then(t.step_func(() => {
     anim.onfinish = t.step_func(event => {
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/fill.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/fill.html
@@ -6,24 +6,24 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.timing.fill, 'auto');
 }, 'Has the default value \'auto\'');
 
 ["none", "forwards", "backwards", "both", ].forEach(fill => {
   test(t => {
-    var div = createDiv(t);
-    var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
+    const div = createDiv(t);
+    const anim = div.animate({ opacity: [ 0, 1 ] }, 100);
     anim.effect.timing.fill = fill;
     assert_equals(anim.effect.timing.fill, fill, 'set fill ' + fill);
     assert_equals(anim.effect.getComputedTiming().fill, fill,
                   'getComputedTiming() after set fill ' + fill);
   }, 'Can set fill to ' + fill);
 });
 
 </script>
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterationStart.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterationStart.html
@@ -6,63 +6,63 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.timing.iterationStart, 0);
 }, 'Has the default value 0');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { iterationStart: 0.2,
-                           iterations: 1,
-                           fill: 'both',
-                           duration: 100,
-                           delay: 1 });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { iterationStart: 0.2,
+                             iterations: 1,
+                             fill: 'both',
+                             duration: 100,
+                             delay: 1 });
   anim.effect.timing.iterationStart = 2.5;
   assert_equals(anim.effect.getComputedTiming().progress, 0.5);
   assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
 }, 'Changing the value updates computed timing when backwards-filling');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { iterationStart: 0.2,
-                           iterations: 1,
-                           fill: 'both',
-                           duration: 100,
-                           delay: 0 });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { iterationStart: 0.2,
+                             iterations: 1,
+                             fill: 'both',
+                             duration: 100,
+                             delay: 0 });
   anim.effect.timing.iterationStart = 2.5;
   assert_equals(anim.effect.getComputedTiming().progress, 0.5);
   assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
 }, 'Changing the value updates computed timing during the active phase');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] },
-                         { iterationStart: 0.2,
-                           iterations: 1,
-                           fill: 'both',
-                           duration: 100,
-                           delay: 0 });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] },
+                           { iterationStart: 0.2,
+                             iterations: 1,
+                             fill: 'both',
+                             duration: 100,
+                             delay: 0 });
   anim.finish();
   anim.effect.timing.iterationStart = 2.5;
   assert_equals(anim.effect.getComputedTiming().progress, 0.5);
   assert_equals(anim.effect.getComputedTiming().currentIteration, 3);
 }, 'Changing the value updates computed timing when forwards-filling');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate(null);
+  const div = createDiv(t);
+  const anim = div.animate(null);
   for (let invalid of [-1, NaN, Infinity]) {
     assert_throws({ name: 'TypeError' }, () => {
       anim.effect.timing.iterationStart = invalid;
     }, 'setting ' + invalid);
     assert_throws({ name: 'TypeError' }, () => {
       div.animate({}, { iterationStart: invalid });
     }, 'animate() with ' + invalid);
   }
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
@@ -6,65 +6,65 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.timing.iterations, 1);
 }, 'Has the default value 1');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   anim.effect.timing.iterations = 2;
   assert_equals(anim.effect.timing.iterations, 2, 'set duration 2');
   assert_equals(anim.effect.getComputedTiming().iterations, 2,
                        'getComputedTiming() after set iterations 2');
 }, 'Can be set to a double value');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   anim.effect.timing.iterations = Infinity;
   assert_equals(anim.effect.timing.iterations, Infinity, 'set duration Infinity');
   assert_equals(anim.effect.getComputedTiming().iterations, Infinity,
                        'getComputedTiming() after set iterations Infinity');
 }, 'Can be set to infinity');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({ name: 'TypeError' }, () => {
     anim.effect.timing.iterations = -1;
   });
 }, 'Throws when setting a negative number');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({ name: 'TypeError' }, () => {
     anim.effect.timing.iterations = -Infinity;
   });
 }, 'Throws when setting negative infinity');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
   assert_throws({ name: 'TypeError' }, () => {
     anim.effect.timing.iterations = NaN;
   });
 }, 'Throws when setting a NaN value');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate(null, { duration: 100000, fill: 'both' });
+  const div = createDiv(t);
+  const anim = div.animate(null, { duration: 100000, fill: 'both' });
 
   anim.finish();
 
   assert_equals(anim.effect.getComputedTiming().progress, 1,
                 'progress when animation is finished');
   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
                 'current iteration when animation is finished');
 
--- a/testing/web-platform/tests/web-animations/interfaces/Document/getAnimations.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Document/getAnimations.html
@@ -6,49 +6,49 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <div id="target"></div>
 <script>
 "use strict";
 
-var gKeyFrames = { 'marginLeft': ['100px', '200px'] };
+const gKeyFrames = { 'marginLeft': ['100px', '200px'] };
 
 test(t => {
   assert_equals(document.getAnimations().length, 0,
                 'getAnimations returns an empty sequence for a document ' +
                 'with no animations');
 }, 'Test document.getAnimations for non-animated content');
 
 test(t => {
-  var div = createDiv(t);
-  var anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
-  var anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   assert_equals(document.getAnimations().length, 2,
                 'getAnimation returns running animations');
 
   anim1.finish();
   anim2.finish();
   assert_equals(document.getAnimations().length, 0,
                 'getAnimation only returns running animations');
 }, 'Test document.getAnimations for script-generated animations')
 
 test(t => {
-  var div = createDiv(t);
-  var anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
-  var anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
   assert_array_equals(document.getAnimations(),
                       [ anim1, anim2 ],
                       'getAnimations() returns running animations');
 }, 'Test the order of document.getAnimations with script generated animations')
 
 test(t => {
-  var effect = new KeyframeEffectReadOnly(null, gKeyFrames, 100 * MS_PER_SEC);
-  var anim = new Animation(effect, document.timeline);
+  const effect = new KeyframeEffectReadOnly(null, gKeyFrames, 100 * MS_PER_SEC);
+  const anim = new Animation(effect, document.timeline);
   anim.play();
 
   assert_equals(document.getAnimations().length, 0,
                 'document.getAnimations() only returns animations targeting ' +
                 'elements in this document');
 }, 'Test document.getAnimations with null target');
 
 </script>
--- a/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/constructor.html
+++ b/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/constructor.html
@@ -5,38 +5,38 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 "use strict";
 
-test(function(t) {
-  var timeline = new DocumentTimeline();
+test(t => {
+  const timeline = new DocumentTimeline();
 
   assert_times_equal(timeline.currentTime, document.timeline.currentTime);
 }, 'An origin time of zero is used when none is supplied');
 
-test(function(t) {
-  var timeline = new DocumentTimeline({ originTime: 0 });
+test(t => {
+  const timeline = new DocumentTimeline({ originTime: 0 });
   assert_times_equal(timeline.currentTime, document.timeline.currentTime);
 }, 'A zero origin time produces a document timeline with a current time ' +
    'identical to the default document timeline');
 
-test(function(t) {
-  var timeline = new DocumentTimeline({ originTime: 10 * MS_PER_SEC });
+test(t => {
+  const timeline = new DocumentTimeline({ originTime: 10 * MS_PER_SEC });
 
   assert_times_equal(timeline.currentTime,
                      (document.timeline.currentTime - 10 * MS_PER_SEC));
 }, 'A positive origin time makes the document timeline\'s current time lag ' +
    'behind the default document timeline');
 
-test(function(t) {
-  var timeline = new DocumentTimeline({ originTime: -10 * MS_PER_SEC });
+test(t => {
+  const timeline = new DocumentTimeline({ originTime: -10 * MS_PER_SEC });
 
   assert_times_equal(timeline.currentTime,
                 (document.timeline.currentTime + 10 * MS_PER_SEC));
 }, 'A negative origin time makes the document timeline\'s current time run ' +
    'ahead of the default document timeline');
 
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/composite.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/composite.html
@@ -7,41 +7,41 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.composite, 'replace',
                 'The default value should be replace');
 }, 'Default value');
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   anim.effect.composite = 'add';
   assert_equals(anim.effect.composite, 'add',
                 'The effect composite value should be replaced');
 }, 'Change composite value');
 
 test(t => {
-  var anim = createDiv(t).animate({ left: '10px' });
+  const anim = createDiv(t).animate({ left: '10px' });
 
   anim.effect.composite = 'add';
-  var keyframes = anim.effect.getKeyframes();
+  const keyframes = anim.effect.getKeyframes();
   assert_equals(keyframes[0].composite, undefined,
                 'unspecified keyframe composite value should be absent even ' +
                 'if effect composite is set');
 }, 'Unspecified keyframe composite value when setting effect composite');
 
 test(t => {
-  var anim = createDiv(t).animate({ left: '10px', composite: 'replace' });
+  const anim = createDiv(t).animate({ left: '10px', composite: 'replace' });
 
   anim.effect.composite = 'add';
-  var keyframes = anim.effect.getKeyframes();
+  const keyframes = anim.effect.getKeyframes();
   assert_equals(keyframes[0].composite, 'replace',
                 'specified keyframe composite value should not be overridden ' +
                 'by setting effect composite');
 }, 'Specified keyframe composite value when setting effect composite');
 
 </script>
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
@@ -6,32 +6,32 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <div id="target"></div>
 <script>
 "use strict";
 
-var target = document.getElementById("target");
+const target = document.getElementById("target");
 
 test(t => {
-  var effect = new KeyframeEffectReadOnly(target,
-                                          { left: ["10px", "20px"] });
+  const effect = new KeyframeEffectReadOnly(target,
+                                            { left: ["10px", "20px"] });
 
-  var ct = effect.getComputedTiming();
+  const ct = effect.getComputedTiming();
   assert_equals(ct.delay, 0, "computed delay");
   assert_equals(ct.fill, "none", "computed fill");
   assert_equals(ct.iterations, 1.0, "computed iterations");
   assert_equals(ct.duration, 0, "computed duration");
   assert_equals(ct.direction, "normal", "computed direction");
 }, "values of getComputedTiming() when a KeyframeEffectReadOnly is " +
    "constructed without any KeyframeEffectOptions object");
 
-var gGetComputedTimingTests = [
+const gGetComputedTimingTests = [
   { desc:     "an empty KeyframeEffectOptions object",
     input:    { },
     expected: { } },
   { desc:     "a normal KeyframeEffectOptions object",
     input:    { delay: 1000,
                 fill: "auto",
                 iterations: 5.5,
                 duration: "auto",
@@ -66,43 +66,43 @@ var gGetComputedTimingTests = [
     expected: { fill: "none" } },
   { desc:     "a forwards fill",
     input:    { fill: "forwards" },
     expected: { fill: "forwards" } }
 ];
 
 gGetComputedTimingTests.forEach(stest => {
   test(t => {
-    var effect = new KeyframeEffectReadOnly(target,
-                                            { left: ["10px", "20px"] },
-                                            stest.input);
+    const effect = new KeyframeEffectReadOnly(target,
+                                              { left: ["10px", "20px"] },
+                                              stest.input);
 
     // Helper function to provide default expected values when the test does
     // not supply them.
-    var expected = (field, defaultValue) => {
+    const expected = (field, defaultValue) => {
       return field in stest.expected ? stest.expected[field] : defaultValue;
     };
 
-    var ct = effect.getComputedTiming();
+    const ct = effect.getComputedTiming();
     assert_equals(ct.delay, expected("delay", 0),
                   "computed delay");
     assert_equals(ct.fill, expected("fill", "none"),
                   "computed fill");
     assert_equals(ct.iterations, expected("iterations", 1),
                   "computed iterations");
     assert_equals(ct.duration, expected("duration", 0),
                   "computed duration");
     assert_equals(ct.direction, expected("direction", "normal"),
                   "computed direction");
 
   }, "values of getComputedTiming() when a KeyframeEffectReadOnly is " +
      "constructed by " + stest.desc);
 });
 
-var gActiveDurationTests = [
+const gActiveDurationTests = [
   { desc:     "an empty KeyframeEffectOptions object",
     input:    { },
     expected: 0 },
   { desc:     "a non-zero duration and default iteration count",
     input:    { duration: 1000 },
     expected: 1000 },
   { desc:     "a non-zero duration and integral iteration count",
     input:    { duration: 1000, iterations: 7 },
@@ -139,27 +139,27 @@ var gActiveDurationTests = [
     expected: Infinity },
   { desc:     "an infinite duration and infinite iteration count",
     input:    { duration: Infinity, iterations: Infinity },
     expected: Infinity },
 ];
 
 gActiveDurationTests.forEach(stest => {
   test(t => {
-    var effect = new KeyframeEffectReadOnly(target,
-                                            { left: ["10px", "20px"] },
-                                            stest.input);
+    const effect = new KeyframeEffectReadOnly(target,
+                                              { left: ["10px", "20px"] },
+                                              stest.input);
 
     assert_equals(effect.getComputedTiming().activeDuration,
                   stest.expected);
 
   }, "getComputedTiming().activeDuration for " + stest.desc);
 });
 
-var gEndTimeTests = [
+const gEndTimeTests = [
   { desc:     "an empty KeyframeEffectOptions object",
     input:    { },
     expected: 0 },
   { desc:     "a non-zero duration and default iteration count",
     input:    { duration: 1000 },
     expected: 1000 },
   { desc:     "a non-zero duration and non-default iteration count",
     input:    { duration: 1000, iterations: 2.5 },
@@ -191,19 +191,19 @@ var gEndTimeTests = [
     expected: 0 },
   { desc:     "a zero duration and negative delay",
     input:    { duration: 0, iterations: 2, delay: -1000 },
     expected: 0 }
 ];
 
 gEndTimeTests.forEach(stest => {
   test(t => {
-    var effect = new KeyframeEffectReadOnly(target,
-                                            { left: ["10px", "20px"] },
-                                            stest.input);
+    const effect = new KeyframeEffectReadOnly(target,
+                                              { left: ["10px", "20px"] },
+                                              stest.input);
 
     assert_equals(effect.getComputedTiming().endTime,
                   stest.expected);
 
   }, "getComputedTiming().endTime for " + stest.desc);
 });
 
 done();
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
@@ -5,18 +5,18 @@
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="../../testcommon.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ alignContent: ['flex-start', 'flex-end'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
 
   anim.currentTime = anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).alignContent, 'flex-end',
@@ -25,18 +25,18 @@ test(t => {
   assert_equals(getComputedStyle(div).alignContent, 'flex-start',
     'Animated align-content style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).alignContent, 'flex-end',
     'Animated align-content style at 50s of the third iteration');
 }, 'iterationComposite of discrete type animation (align-content)');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ marginLeft: ['0px', '10px'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -46,22 +46,22 @@ test(t => {
   assert_equals(getComputedStyle(div).marginLeft, '20px',
     'Animated margin-left style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).marginLeft, '25px',
     'Animated margin-left style at 50s of the third iteration');
 }, 'iterationComposite of <length> type animation');
 
 test(t => {
-  var parent = createDiv(t);
+  const parent = createDiv(t);
   parent.style.width = '100px';
-  var div = createDiv(t);
+  const div = createDiv(t);
   parent.appendChild(div);
 
-  var anim =
+  const anim =
     div.animate({ width: ['0%', '50%'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -71,18 +71,18 @@ test(t => {
   assert_equals(getComputedStyle(div).width, '100px',
     'Animated width style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).width, '125px',
     'Animated width style at 50s of the third iteration');
 }, 'iterationComposite of <percentage> type animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ color: ['rgb(0, 0, 0)', 'rgb(120, 120, 120)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -92,18 +92,18 @@ test(t => {
   assert_equals(getComputedStyle(div).color, 'rgb(240, 240, 240)',
     'Animated color style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).color, 'rgb(255, 255, 255)',
     'Animated color style at 50s of the third iteration');
 }, 'iterationComposite of <color> type animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ color: ['rgb(0, 120, 0)', 'rgb(60, 60, 60)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -115,18 +115,18 @@ test(t => {
   anim.currentTime += anim.effect.timing.duration / 2;
   // The green color is (240 + 180) / 2 = 210
   assert_equals(getComputedStyle(div).color, 'rgb(150, 210, 150)',
     'Animated color style at 50s of the third iteration');
 }, 'iterationComposite of <color> type animation that green component is ' +
    'decreasing');
 
    test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ flexGrow: [0, 10] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -136,19 +136,19 @@ test(t => {
   assert_equals(getComputedStyle(div).flexGrow, '20',
     'Animated flex-grow style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).flexGrow, '25',
     'Animated flex-grow style at 50s of the third iteration');
 }, 'iterationComposite of <number> type animation');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   div.style.position = 'absolute';
-  var anim =
+  const anim =
     div.animate({ clip: ['rect(0px, 0px, 0px, 0px)',
                          'rect(10px, 10px, 10px, 10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -159,18 +159,18 @@ test(t => {
   assert_equals(getComputedStyle(div).clip, 'rect(20px, 20px, 20px, 20px)',
     'Animated clip style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).clip, 'rect(25px, 25px, 25px, 25px)',
     'Animated clip style at 50s of the third iteration');
 }, 'iterationComposite of <shape> type animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ width: ['calc(0vw + 0px)', 'calc(0vw + 10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -180,22 +180,22 @@ test(t => {
   assert_equals(getComputedStyle(div).width, '20px',
     'Animated calc width style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).width, '25px',
     'Animated calc width style at 50s of the third iteration');
 }, 'iterationComposite of <calc()> value animation');
 
 test(t => {
-  var parent = createDiv(t);
+  const parent = createDiv(t);
   parent.style.width = '100px';
-  var div = createDiv(t);
+  const div = createDiv(t);
   parent.appendChild(div);
 
-  var anim =
+  const anim =
     div.animate({ width: ['calc(0% + 0px)', 'calc(10% + 10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -209,18 +209,18 @@ test(t => {
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).width,
     '50px', // (40px + 60px) / 2
     'Animated calc width style at 50s of the third iteration');
 }, 'iterationComposite of <calc()> value animation that the values can\'t' +
    'be reduced');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ opacity: [0, 0.4] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -230,18 +230,18 @@ test(t => {
   assert_equals(getComputedStyle(div).opacity, '0.8',
     'Animated opacity style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).opacity, '1', // (0.8 + 1.2) * 0.5
     'Animated opacity style at 50s of the third iteration');
 }, 'iterationComposite of opacity animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ boxShadow: ['rgb(0, 0, 0) 0px 0px 0px 0px',
                               'rgb(120, 120, 120) 10px 10px 10px 0px'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -255,18 +255,18 @@ test(t => {
     'Animated box-shadow style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).boxShadow,
     'rgb(255, 255, 255) 25px 25px 25px 0px',
     'Animated box-shadow style at 50s of the third iteration');
 }, 'iterationComposite of box-shadow animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ filter: ['blur(0px)', 'blur(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -276,18 +276,18 @@ test(t => {
   assert_equals(getComputedStyle(div).filter, 'blur(20px)',
     'Animated filter blur style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter, 'blur(25px)',
     'Animated filter blur style at 50s of the third iteration');
 }, 'iterationComposite of filter blur animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ filter: ['brightness(1)',
                            'brightness(180%)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -301,18 +301,18 @@ test(t => {
     'Animated filter brightness style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     'brightness(3)', // (brightness(2.6) + brightness(3.4)) * 0.5
     'Animated filter brightness style at 50s of the third iteration');
 }, 'iterationComposite of filter brightness for different unit animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ filter: ['brightness(0)',
                            'brightness(1)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -326,18 +326,18 @@ test(t => {
     'Animated filter brightness style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     'brightness(0.5)', // brightness(1) is an identity element, not accumulated.
     'Animated filter brightness style at 50s of the third iteration');
 }, 'iterationComposite of filter brightness animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ filter: ['drop-shadow(rgb(0, 0, 0) 0px 0px 0px)',
                            'drop-shadow(rgb(120, 120, 120) 10px 10px 10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -351,18 +351,18 @@ test(t => {
     'Animated filter drop-shadow style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     'drop-shadow(rgb(255, 255, 255) 25px 25px 25px)',
     'Animated filter drop-shadow style at 50s of the third iteration');
 }, 'iterationComposite of filter drop-shadow animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ filter: ['brightness(1) contrast(1)',
                            'brightness(2) contrast(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -376,18 +376,18 @@ test(t => {
     'Animated filter list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     'brightness(3.5) contrast(3.5)',
     'Animated filter list at 50s of the third iteration');
 }, 'iterationComposite of same filter list animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ filter: ['brightness(1) contrast(1)',
                            'contrast(2) brightness(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -407,18 +407,18 @@ test(t => {
     // We *can* accumulate 'contrast(2) brightness(2)' onto
     // the same list 'contrast(2) brightness(2)' here.
     'contrast(4) brightness(4)', // discrete
     'Animated filter list at 50s of the third iteration');
 }, 'iterationComposite of discrete filter list because of mismatch ' +
    'of the order');
 
    test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ filter: ['sepia(0)',
                            'sepia(1) contrast(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -432,18 +432,18 @@ test(t => {
     'Animated filter list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     'sepia(2.5) contrast(3.5)',
     'Animated filter list at 50s of the third iteration');
 }, 'iterationComposite of different length filter list animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ transform: ['rotate(0deg)', 'rotate(180deg)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -456,18 +456,18 @@ test(t => {
     'Animated transform(rotate) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0, 1, -1, 0, 0, 0)', // rotate(450deg)
     'Animated transform(rotate) style at 50s of the third iteration');
 }, 'iterationComposite of transform(rotate) animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ transform: ['scale(0)', 'scale(1)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -482,18 +482,18 @@ test(t => {
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5); scale(1) an identity
                                     // element, not accumulated.
     'Animated transform(scale) style at 50s of the third iteration');
 }, 'iterationComposite of transform: [ scale(0), scale(1) ] animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ transform: ['scale(1)', 'scale(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -506,18 +506,18 @@ test(t => {
     'Animated transform(scale) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(3.5, 0, 0, 3.5, 0, 0)', // (scale(3) + scale(4)) * 0.5
     'Animated transform(scale) style at 50s of the third iteration');
 }, 'iterationComposite of transform: [ scale(1), scale(2) ] animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ transform: ['scale(0)', 'scale(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -530,18 +530,18 @@ test(t => {
     'Animated transform(scale) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(3, 0, 0, 3, 0, 0)', // (scale(2) + scale(4)) * 0.5
     'Animated transform(scale) style at 50s of the third iteration');
 }, 'iterationComposite of transform: scale(2) animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ transform: ['rotate(0deg) translateX(0px)',
                               'rotate(180deg) translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -555,18 +555,18 @@ test(t => {
     'Animated transform list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px)
     'Animated transform list at 50s of the third iteration');
 }, 'iterationComposite of transform list animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ transform: ['matrix(2, 0, 0, 2, 0, 0)',
                               'matrix(3, 0, 0, 3, 30, 0)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -584,18 +584,18 @@ test(t => {
     // from: matrix(6, 0, 0, 6, 60, 0)
     // to:   matrix(7, 0, 0, 7, 90, 0)
     //         = scale(3) + (scale(3-1)*2) + translateX(30px)*3
     'matrix(6.5, 0, 0, 6.5, 75, 0)',
     'Animated transform of matrix function at 50s of the third iteration');
 }, 'iterationComposite of transform of matrix function');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ transform: ['translateX(0px) scale(2)',
                               'scale(3) translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -616,20 +616,20 @@ test(t => {
   assert_matrix_equals(getComputedStyle(div).transform,
     // Interpolate between matrix(6, 0, 0, 6, 60, 0)
     //                 and matrix(7, 0, 0, 7, 210, 0) = scale(7) translate(30px)
     'matrix(6.5, 0, 0, 6.5, 135, 0)',
     'Animated transform list at 50s of the third iteration');
 }, 'iterationComposite of transform list animation whose order is mismatched');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   // Even if each transform list does not have functions which exist in
   // other pair of the list, we don't fill any missing functions at all.
-  var anim =
+  const anim =
     div.animate({ transform: ['translateX(0px)',
                               'scale(2) translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -652,18 +652,18 @@ test(t => {
     //                 and matrix(4, 0, 0, 4, 120, 0) =
     //                       scale(2 + (2-1)*2) translate(10px * 3)
     'matrix(3.5, 0, 0, 3.5, 80, 0)',
     'Animated transform list at 50s of the third iteration');
 }, 'iterationComposite of transform list animation whose order is mismatched ' +
    'because of missing functions');
 
    test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ transform: ['none',
                               'translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -680,18 +680,18 @@ test(t => {
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     // translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 50%
     'matrix(1, 0, 0, 1, 25, 0)',
     'Animated transform list at 50s of the third iteration');
 }, 'iterationComposite of transform from none to translate');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ transform: ['matrix3d(1, 0,  0, 0, ' +
                                        '0, 1,  0, 0, ' +
                                        '0, 0,  1, 0, ' +
                                        '0, 0, 30, 1)',
                               'matrix3d(1, 0,  0, 0, ' +
                                        '0, 1,  0, 0, ' +
                                        '0, 0,  1, 0, ' +
                                        '0, 0, 50, 1)'] },
@@ -714,18 +714,18 @@ test(t => {
   assert_matrix_equals(getComputedStyle(div).transform,
     // from: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)
     // to:   matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 150, 1)
     'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 140, 1)',
     'Animated transform of matrix3d function at 50s of the third iteration');
 }, 'iterationComposite of transform of matrix3d function');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ transform: ['rotate3d(1, 1, 0, 0deg)',
                               'rotate3d(1, 1, 0, 90deg)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
@@ -739,18 +739,18 @@ test(t => {
     'Animated transform of rotate3d function at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     rotate3dToMatrix3d(1, 1, 0, 225 * Math.PI / 180), //((270 + 180) * 0.5)deg
     'Animated transform of rotate3d function at 50s of the third iteration');
 }, 'iterationComposite of transform of rotate3d function');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ marginLeft: ['10px', '20px'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -760,18 +760,18 @@ test(t => {
   assert_equals(getComputedStyle(div).marginLeft, '50px', // 10px + 20px + 20px
     'Animated margin-left style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).marginLeft, '55px', // (50px + 60px) * 0.5
     'Animated margin-left style at 50s of the third iteration');
 }, 'iterationComposite starts with non-zero value animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim =
+  const div = createDiv(t);
+  const anim =
     div.animate({ marginLeft: ['10px', '-10px'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
@@ -784,22 +784,22 @@ test(t => {
     'Animated margin-left style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).marginLeft,
     '-20px', // (-10px + -30px) * 0.5
     'Animated margin-left style at 50s of the third iteration');
 }, 'iterationComposite with negative final value animation');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ marginLeft: ['0px', '10px'] },
-                         { duration: 100 * MS_PER_SEC,
-                           easing: 'linear',
-                           iterations: 10,
-                           iterationComposite: 'accumulate' });
+  const div = createDiv(t);
+  const anim = div.animate({ marginLeft: ['0px', '10px'] },
+                           { duration: 100 * MS_PER_SEC,
+                             easing: 'linear',
+                             iterations: 10,
+                             iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime =
     anim.effect.timing.duration * 2 + anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).marginLeft, '25px',
     'Animated style at 50s of the third iteration');
 
   anim.effect.iterationComposite = 'replace';
@@ -807,22 +807,22 @@ test(t => {
     'Animated style at 50s of the third iteration');
 
   anim.effect.iterationComposite = 'accumulate';
   assert_equals(getComputedStyle(div).marginLeft, '25px',
     'Animated style at 50s of the third iteration');
 }, 'interationComposite changes');
 
 test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ marginLeft: ['0px', '10px'] },
-                         { duration: 100 * MS_PER_SEC,
-                           easing: 'linear',
-                           iterations: 10,
-                           iterationComposite: 'accumulate' });
+  const div = createDiv(t);
+  const anim = div.animate({ marginLeft: ['0px', '10px'] },
+                           { duration: 100 * MS_PER_SEC,
+                             easing: 'linear',
+                             iterations: 10,
+                             iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime =
     anim.effect.timing.duration * 2 + anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).marginLeft, '25px',
     'Animated style at 50s of the third iteration');
 
   // double its duration.
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
@@ -8,36 +8,36 @@
 <script src="../../resources/keyframe-utils.js"></script>
 <script src="../../resources/keyframe-tests.js"></script>
 <body>
 <div id="log"></div>
 <div id="target"></div>
 <script>
 'use strict';
 
-var target = document.getElementById('target');
+const target = document.getElementById('target');
 
 test(t => {
   gEmptyKeyframeListTests.forEach(frame => {
-    var effect = new KeyframeEffect(target, {});
+    const effect = new KeyframeEffect(target, {});
     effect.setKeyframes(frame);
     assert_frame_lists_equal(effect.getKeyframes(), []);
   });
 }, 'Keyframes can be replaced with an empty keyframe');
 
 gKeyframesTests.forEach(subtest => {
   test(t => {
-    var effect = new KeyframeEffect(target, {});
+    const effect = new KeyframeEffect(target, {});
     effect.setKeyframes(subtest.input);
     assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
   }, 'Keyframes can be replaced with ' + subtest.desc);
 });
 
 gInvalidKeyframesTests.forEach(subtest => {
   test(t => {
-    var effect = new KeyframeEffect(target, {});
+    const effect = new KeyframeEffect(target, {});
     assert_throws(new TypeError, () => {
       effect.setKeyframes(subtest.input);
     });
   }, 'KeyframeEffect constructor throws with ' + subtest.desc);
 });
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/target.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/target.html
@@ -6,66 +6,66 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 "use strict";
 
-var gKeyFrames = { 'marginLeft': ['0px', '100px'] };
+const gKeyFrames = { 'marginLeft': ['0px', '100px'] };
 
 test(t => {
-  var div = createDiv(t);
-  var effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
   effect.target = div;
 
-  var anim = new Animation(effect, document.timeline);
+  const anim = new Animation(effect, document.timeline);
   anim.play();
 
   anim.currentTime = 50 * MS_PER_SEC;
   assert_equals(getComputedStyle(div).marginLeft, '50px',
                 'Value at 50% progress');
 }, 'Test setting target before constructing the associated animation');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   div.style.marginLeft = '10px';
-  var effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
-  var anim = new Animation(effect, document.timeline);
+  const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
+  const anim = new Animation(effect, document.timeline);
   anim.play();
 
   anim.currentTime = 50 * MS_PER_SEC;
   assert_equals(getComputedStyle(div).marginLeft, '10px',
                 'Value at 50% progress before setting new target');
   effect.target = div;
   assert_equals(getComputedStyle(div).marginLeft, '50px',
                 'Value at 50% progress after setting new target');
 }, 'Test setting target from null to a valid target');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   div.style.marginLeft = '10px';
-  var anim = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const anim = div.animate(gKeyFrames, 100 * MS_PER_SEC);
 
   anim.currentTime = 50 * MS_PER_SEC;
   assert_equals(getComputedStyle(div).marginLeft, '50px',
                 'Value at 50% progress before clearing the target')
 
   anim.effect.target = null;
   assert_equals(getComputedStyle(div).marginLeft, '10px',
                 'Value after clearing the target')
 }, 'Test setting target from a valid target to null');
 
 test(t => {
-  var a = createDiv(t);
-  var b = createDiv(t);
+  const a = createDiv(t);
+  const b = createDiv(t);
   a.style.marginLeft = '10px';
   b.style.marginLeft = '20px';
-  var anim = a.animate(gKeyFrames, 100 * MS_PER_SEC);
+  const anim = a.animate(gKeyFrames, 100 * MS_PER_SEC);
 
   anim.currentTime = 50 * MS_PER_SEC;
   assert_equals(getComputedStyle(a).marginLeft, '50px',
                 'Value of 1st element (currently targeted) before ' +
                 'changing the effect target');
   assert_equals(getComputedStyle(b).marginLeft, '20px',
                 'Value of 2nd element (currently not targeted) before ' +
                 'changing the effect target');
--- a/testing/web-platform/tests/web-animations/resources/easing-tests.js
+++ b/testing/web-platform/tests/web-animations/resources/easing-tests.js
@@ -1,9 +1,9 @@
-var gEasingTests = [
+const gEasingTests = [
   {
     desc: 'step-start function',
     easing: 'step-start',
     easingFunction: stepStart(1),
     serialization: 'steps(1, start)'
   },
   {
     desc: 'steps(1, start) function',
--- a/testing/web-platform/tests/web-animations/testcommon.js
+++ b/testing/web-platform/tests/web-animations/testcommon.js
@@ -5,22 +5,22 @@ policies and contribution forms [3].
 
 [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license
 [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license
 [3] http://www.w3.org/2004/10/27-testcases
  */
 
 'use strict';
 
-var MS_PER_SEC = 1000;
+const MS_PER_SEC = 1000;
 
 // The recommended minimum precision to use for time values[1].
 //
 // [1] https://w3c.github.io/web-animations/#precision-of-time-values
-var TIME_PRECISION = 0.0005; // ms
+const TIME_PRECISION = 0.0005; // ms
 
 // Allow implementations to substitute an alternative method for comparing
 // times based on their precision requirements.
 if (!window.assert_times_equal) {
   window.assert_times_equal = (actual, expected, description) => {
     assert_approx_equals(actual, expected, TIME_PRECISION, description);
   };
 }
@@ -33,17 +33,17 @@ function createDiv(test, doc) {
 
 // creates element of given tagName, appends it to the document body and
 // removes the created element during test cleanup
 // if tagName is null or undefined, returns div element
 function createElement(test, tagName, doc) {
   if (!doc) {
     doc = document;
   }
-  var element = doc.createElement(tagName || 'div');
+  const element = doc.createElement(tagName || 'div');
   doc.body.appendChild(element);
   test.add_cleanup(() => {
     element.remove();
   });
   return element;
 }
 
 // Creates a style element with the specified rules, appends it to the document
@@ -56,64 +56,64 @@ function createElement(test, tagName, do
 //   '.className2::before': 'width: 100px;' };
 // The object property name could be a keyframes name, or a selector.
 // The object property value is declarations which are property:value pairs
 // split by a space.
 function createStyle(test, rules, doc) {
   if (!doc) {
     doc = document;
   }
-  var extraStyle = doc.createElement('style');
+  const extraStyle = doc.createElement('style');
   doc.head.appendChild(extraStyle);
   if (rules) {
-    var sheet = extraStyle.sheet;
-    for (var selector in rules) {
+    const sheet = extraStyle.sheet;
+    for (const selector in rules) {
       sheet.insertRule(selector + '{' + rules[selector] + '}',
                        sheet.cssRules.length);
     }
   }
   test.add_cleanup(() => {
     extraStyle.remove();
   });
 }
 
 // Create a pseudo element
 function createPseudo(test, type) {
   createStyle(test, { '@keyframes anim': '',
                       ['.pseudo::' + type]: 'animation: anim 10s; ' +
                                             'content: \'\';'  });
-  var div = createDiv(test);
+  const div = createDiv(test);
   div.classList.add('pseudo');
-  var anims = document.getAnimations();
+  const anims = document.getAnimations();
   assert_true(anims.length >= 1);
-  var anim = anims[anims.length - 1];
+  const anim = anims[anims.length - 1];
   assert_equals(anim.effect.target.parentElement, div);
   assert_equals(anim.effect.target.type, '::' + type);
   anim.cancel();
   return anim.effect.target;
 }
 
 // Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
 function cubicBezier(x1, y1, x2, y2) {
   const xForT = t => {
-    var omt = 1-t;
+    const omt = 1-t;
     return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t;
   };
 
   const yForT = t => {
-    var omt = 1-t;
+    const omt = 1-t;
     return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t;
   };
 
   const tForX = x => {
     // Binary subdivision.
-    var mint = 0, maxt = 1;
-    for (var i = 0; i < 30; ++i) {
-      var guesst = (mint + maxt) / 2;
-      var guessx = xForT(guesst);
+    let mint = 0, maxt = 1;
+    for (let i = 0; i < 30; ++i) {
+      const guesst = (mint + maxt) / 2;
+      const guessx = xForT(guesst);
       if (x < guessx) {
         maxt = guesst;
       } else {
         mint = guesst;
       }
     }
     return (mint + maxt) / 2;
   };
@@ -130,24 +130,24 @@ function cubicBezier(x1, y1, x2, y2) {
 }
 
 function stepEnd(nsteps) {
   return x => Math.floor(x * nsteps) / nsteps;
 }
 
 function stepStart(nsteps) {
   return x => {
-    var result = Math.floor(x * nsteps + 1.0) / nsteps;
+    const result = Math.floor(x * nsteps + 1.0) / nsteps;
     return (result > 1.0) ? 1.0 : result;
   };
 }
 
 function framesTiming(nframes) {
   return x => {
-    var result = Math.floor(x * nframes) / (nframes - 1);
+    const result = Math.floor(x * nframes) / (nframes - 1);
     return (result > 1.0 && x <= 1.0) ? 1.0 : result;
   };
 }
 
 function waitForAnimationFrames(frameCount) {
   return new Promise(resolve => {
     function handleFrame() {
       if (--frameCount <= 0) {
@@ -159,17 +159,17 @@ function waitForAnimationFrames(frameCou
     window.requestAnimationFrame(handleFrame);
   });
 }
 
 // Continually calls requestAnimationFrame until |minDelay| has elapsed
 // as recorded using document.timeline.currentTime (i.e. frame time not
 // wall-clock time).
 function waitForAnimationFramesWithDelay(minDelay) {
-  var startTime = document.timeline.currentTime;
+  const startTime = document.timeline.currentTime;
   return new Promise(resolve => {
     (function handleFrame() {
       if (document.timeline.currentTime - startTime >= minDelay) {
         resolve();
       } else {
         window.requestAnimationFrame(handleFrame);
       }
     }());
@@ -186,21 +186,21 @@ function createMatrixFromArray(array) {
 // 'rotate3d(x, y, z, radian)'.
 function rotate3dToMatrix3d(x, y, z, radian) {
   return createMatrixFromArray(rotate3dToMatrix(x, y, z, radian));
 }
 
 // Returns an array of the 4x4 matrix equivalent to 'rotate3d(x, y, z, radian)'.
 // https://www.w3.org/TR/css-transforms-1/#Rotate3dDefined
 function rotate3dToMatrix(x, y, z, radian) {
-  var sc = Math.sin(radian / 2) * Math.cos(radian / 2);
-  var sq = Math.sin(radian / 2) * Math.sin(radian / 2);
+  const sc = Math.sin(radian / 2) * Math.cos(radian / 2);
+  const sq = Math.sin(radian / 2) * Math.sin(radian / 2);
 
   // Normalize the vector.
-  var length = Math.sqrt(x*x + y*y + z*z);
+  const length = Math.sqrt(x*x + y*y + z*z);
   x /= length;
   y /= length;
   z /= length;
 
   return [
     1 - 2 * (y*y + z*z) * sq,
     2 * (x * y * sq + z * sc),
     2 * (x * z * sq - y * sc),
@@ -217,26 +217,26 @@ function rotate3dToMatrix(x, y, z, radia
     0,
     0,
     1
   ];
 }
 
 // Compare matrix string like 'matrix(1, 0, 0, 1, 100, 0)' with tolerances.
 function assert_matrix_equals(actual, expected, description) {
-  var matrixRegExp = /^matrix(?:3d)*\((.+)\)/;
+  const matrixRegExp = /^matrix(?:3d)*\((.+)\)/;
   assert_regexp_match(actual, matrixRegExp,
     'Actual value is not a matrix')
   assert_regexp_match(expected, matrixRegExp,
     'Expected value is not a matrix');
 
-  var actualMatrixArray =
+  const actualMatrixArray =
     actual.match(matrixRegExp)[1].split(',').map(Number);
-  var expectedMatrixArray =
+  const expectedMatrixArray =
     expected.match(matrixRegExp)[1].split(',').map(Number);
 
   assert_equals(actualMatrixArray.length, expectedMatrixArray.length,
     'dimension of the matrix: ' + description);
-  for (var i = 0; i < actualMatrixArray.length; i++) {
+  for (let i = 0; i < actualMatrixArray.length; i++) {
     assert_approx_equals(actualMatrixArray[i], expectedMatrixArray[i], 0.0001,
       'expected ' + expected + ' but got ' + actual + ": " + description);
   }
 }
--- a/testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html
@@ -6,137 +6,137 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var tests = [ { fill: 'none', progress: null },
-                { fill: 'backwards', progress: 0 },
-                { fill: 'forwards', progress: null },
-                { fill: 'both', progress: 0 } ];
+  const tests = [ { fill: 'none', progress: null },
+                  { fill: 'backwards', progress: 0 },
+                  { fill: 'forwards', progress: null },
+                  { fill: 'both', progress: 0 } ];
   tests.forEach(test => {
-    var anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
+    const anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
     assert_equals(anim.effect.getComputedTiming().progress, test.progress,
                   'Progress in before phase when using \'' + test.fill
                   + '\' fill');
   });
 }, 'Active time in before phase');
 
 test(t => {
-  var anim = createDiv(t).animate(null, 1000);
+  const anim = createDiv(t).animate(null, 1000);
   anim.currentTime = 500;
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
 }, 'Active time in active phase and no start delay is the local time');
 
 test(t => {
-  var anim = createDiv(t).animate(null, { duration: 1000, delay: 500 });
+  const anim = createDiv(t).animate(null, { duration: 1000, delay: 500 });
   anim.currentTime = 1000;
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
 }, 'Active time in active phase and positive start delay is the local time'
    + ' minus the start delay');
 
 test(t => {
-  var anim = createDiv(t).animate(null, { duration: 1000, delay: -500 });
+  const anim = createDiv(t).animate(null, { duration: 1000, delay: -500 });
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
 }, 'Active time in active phase and negative start delay is the local time'
    + ' minus the start delay');
 
 test(t => {
-  var anim = createDiv(t).animate(null);
+  const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.getComputedTiming().progress, null);
 }, 'Active time in after phase with no fill is unresolved');
 
 test(t => {
-  var anim = createDiv(t).animate(null, { fill: 'backwards' });
+  const anim = createDiv(t).animate(null, { fill: 'backwards' });
   assert_equals(anim.effect.getComputedTiming().progress, null);
 }, 'Active time in after phase with backwards-only fill is unresolved');
 
 test(t => {
-  var anim = createDiv(t).animate(null, { duration: 1000,
-                                          iterations: 2.3,
-                                          delay: 500, // Should have no effect
-                                          fill: 'forwards' });
+  const anim = createDiv(t).animate(null, { duration: 1000,
+                                            iterations: 2.3,
+                                            delay: 500, // Should have no effect
+                                            fill: 'forwards' });
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
 }, 'Active time in after phase with forwards fill is the active duration');
 
 test(t => {
-  var anim = createDiv(t).animate(null, { duration: 0,
-                                          iterations: Infinity,
-                                          fill: 'forwards' });
+  const anim = createDiv(t).animate(null, { duration: 0,
+                                            iterations: Infinity,
+                                            fill: 'forwards' });
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity);
   assert_equals(anim.effect.getComputedTiming().progress, 1);
 }, 'Active time in after phase with forwards fill, zero-duration, and '
    + ' infinite iteration count is the active duration');
 
 test(t => {
-  var anim = createDiv(t).animate(null, { duration: 1000,
-                                          iterations: 2.3,
-                                          delay: 500,
-                                          endDelay: 4000,
-                                          fill: 'forwards' });
+  const anim = createDiv(t).animate(null, { duration: 1000,
+                                            iterations: 2.3,
+                                            delay: 500,
+                                            endDelay: 4000,
+                                            fill: 'forwards' });
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
 }, 'Active time in after phase with forwards fill and positive end delay'
    + ' is the active duration');
 
 test(t => {
-  var anim = createDiv(t).animate(null, { duration: 1000,
-                                          iterations: 2.3,
-                                          delay: 500,
-                                          endDelay: -800,
-                                          fill: 'forwards' });
+  const anim = createDiv(t).animate(null, { duration: 1000,
+                                            iterations: 2.3,
+                                            delay: 500,
+                                            endDelay: -800,
+                                            fill: 'forwards' });
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, 1);
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
 }, 'Active time in after phase with forwards fill and negative end delay'
    + ' is the active duration + end delay');
 
 test(t => {
-  var anim = createDiv(t).animate(null, { duration: 1000,
-                                          iterations: 2.3,
-                                          delay: 500,
-                                          endDelay: -2500,
-                                          fill: 'forwards' });
+  const anim = createDiv(t).animate(null, { duration: 1000,
+                                            iterations: 2.3,
+                                            delay: 500,
+                                            endDelay: -2500,
+                                            fill: 'forwards' });
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
   assert_equals(anim.effect.getComputedTiming().progress, 0);
 }, 'Active time in after phase with forwards fill and negative end delay'
    + ' greater in magnitude than the active duration is zero');
 
 test(t => {
-  var anim = createDiv(t).animate(null, { duration: 1000,
-                                          iterations: 2.3,
-                                          delay: 500,
-                                          endDelay: -4000,
-                                          fill: 'forwards' });
+  const anim = createDiv(t).animate(null, { duration: 1000,
+                                            iterations: 2.3,
+                                            delay: 500,
+                                            endDelay: -4000,
+                                            fill: 'forwards' });
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
   assert_equals(anim.effect.getComputedTiming().progress, 0);
 }, 'Active time in after phase with forwards fill and negative end delay'
    + ' greater in magnitude than the sum of the active duration and start delay'
    + ' is zero');
 
 test(t => {
-  var anim = createDiv(t).animate(null, { duration: 1000,
-                                          iterations: 2.3,
-                                          delay: 500,
-                                          fill: 'both' });
+  const anim = createDiv(t).animate(null, { duration: 1000,
+                                            iterations: 2.3,
+                                            delay: 500,
+                                            fill: 'both' });
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
   assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
 }, 'Active time in after phase with \'both\' fill is the active duration');
 
 test(t => {
   // Create an effect with a non-zero duration so we ensure we're not just
   // testing the after-phase behavior.
-  var effect = new KeyframeEffect(null, null, 1);
+  const effect = new KeyframeEffect(null, null, 1);
   assert_equals(effect.getComputedTiming().progress, null);
 }, 'Active time when the local time is unresolved, is unresolved');
 
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/timing-model/animation-effects/current-iteration.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/current-iteration.html
@@ -34,18 +34,18 @@ function runTests(tests, description) {
           activeBoundary: currentTest.active,
           after: currentTest.after },
       );
     }, `${description}: ${testParams}`);
   }
 }
 
 async_test(t => {
-  var div = createDiv(t);
-  var anim = div.animate({ opacity: [ 0, 1 ] }, { delay: 1 });
+  const div = createDiv(t);
+  const anim = div.animate({ opacity: [ 0, 1 ] }, { delay: 1 });
   assert_equals(anim.effect.getComputedTiming().currentIteration, null);
   anim.finished.then(t.step_func(() => {
     assert_equals(anim.effect.getComputedTiming().currentIteration, null);
     t.done();
   }));
 }, 'Test currentIteration during before and after phase when fill is none');
 
 
--- a/testing/web-platform/tests/web-animations/timing-model/animation-effects/local-time.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/local-time.html
@@ -5,22 +5,25 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <script>
 'use strict';
 
 test(t => {
-  var anim = createDiv(t).animate(null, 10 * MS_PER_SEC);
-  for (var seconds of [-1, 0, 5, 10, 20]) {
+  const anim = createDiv(t).animate(null, 10 * MS_PER_SEC);
+  for (const seconds of [-1, 0, 5, 10, 20]) {
     anim.currentTime = seconds * MS_PER_SEC;
-    assert_equals(anim.effect.getComputedTiming().localTime, seconds * MS_PER_SEC);
+    assert_equals(
+      anim.effect.getComputedTiming().localTime,
+      seconds * MS_PER_SEC
+    );
   }
 }, 'Local time is current time for animation effects associated with an animation');
 
 test(t => {
-  var effect = new KeyframeEffect(createDiv(t), null, 10 * MS_PER_SEC);
+  const effect = new KeyframeEffect(createDiv(t), null, 10 * MS_PER_SEC);
   assert_equals(effect.getComputedTiming().localTime, null);
 }, 'Local time is unresolved for animation effects not associated with an animation');
 
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html
@@ -43,143 +43,143 @@ function assert_phase_at_time(animation,
     assert_not_equals(animation.effect.getComputedTiming().progress, null,
                       'Animation effect is in ' + phase + ' phase when current'
                       + ' time is ' + currentTime + 'ms'
                       + ' (progress is non-null with appropriate fill mode)');
   }
 }
 
 test(t => {
-  var animation = createDiv(t).animate(null, 1);
+  const animation = createDiv(t).animate(null, 1);
 
   [ { currentTime: -1, phase: 'before' },
     { currentTime:  0, phase: 'active' },
     { currentTime:  1, phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
   });
 }, 'Phase calculation for a simple animation effect');
 
 test(t => {
-  var animation = createDiv(t).animate(null, { duration: 1, delay: 1 });
+  const animation = createDiv(t).animate(null, { duration: 1, delay: 1 });
 
   [ { currentTime: 0, phase: 'before' },
     { currentTime: 1, phase: 'active' },
     { currentTime: 2, phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
   });
 }, 'Phase calculation for an animation effect with a positive start delay');
 
 test(t => {
-  var animation = createDiv(t).animate(null, { duration: 1, delay: -1 });
+  const animation = createDiv(t).animate(null, { duration: 1, delay: -1 });
 
   [ { currentTime: -2, phase: 'before' },
     { currentTime: -1, phase: 'before' },
     { currentTime:  0, phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
   });
 }, 'Phase calculation for an animation effect with a negative start delay');
 
 test(t => {
-  var animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 });
+  const animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 });
 
   [ { currentTime: -1, phase: 'before' },
     { currentTime:  0, phase: 'active' },
     { currentTime:  1, phase: 'after'  },
     { currentTime:  2, phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
   });
 }, 'Phase calculation for an animation effect with a positive end delay');
 
 test(t => {
-  var animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 });
+  const animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 });
 
   [ { currentTime: -1,   phase: 'before' },
     { currentTime:  0,   phase: 'active' },
     { currentTime:  0.9, phase: 'active' },
     { currentTime:  1,   phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
   });
 }, 'Phase calculation for an animation effect with a negative end delay lesser'
    + ' in magnitude than the active duration');
 
 test(t => {
-  var animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 });
+  const animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 });
 
   [ { currentTime: -1, phase: 'before' },
     { currentTime:  0, phase: 'after'  },
     { currentTime:  1, phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
   });
 }, 'Phase calculation for an animation effect with a negative end delay equal'
    + ' in magnitude to the active duration');
 
 test(t => {
-  var animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });
+  const animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });
 
   [ { currentTime: -2, phase: 'before' },
     { currentTime: -1, phase: 'before' },
     { currentTime:  0, phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
   });
 }, 'Phase calculation for an animation effect with a negative end delay'
    + ' greater in magnitude than the active duration');
 
 test(t => {
-  var animation = createDiv(t).animate(null, { duration: 2,
-                                               delay: 1,
-                                               endDelay: -1 });
+  const animation = createDiv(t).animate(null, { duration: 2,
+                                                 delay: 1,
+                                                 endDelay: -1 });
 
   [ { currentTime: 0, phase: 'before' },
     { currentTime: 1, phase: 'active' },
     { currentTime: 2, phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
   });
 }, 'Phase calculation for an animation effect with a positive start delay'
    + ' and a negative end delay lesser in magnitude than the active duration');
 
 test(t => {
-  var animation = createDiv(t).animate(null, { duration: 1,
-                                               delay: -1,
-                                               endDelay: -1 });
+  const animation = createDiv(t).animate(null, { duration: 1,
+                                                 delay: -1,
+                                                 endDelay: -1 });
 
   [ { currentTime: -2, phase: 'before' },
     { currentTime: -1, phase: 'before' },
     { currentTime:  0, phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
   });
 }, 'Phase calculation for an animation effect with a negative start delay'
    + ' and a negative end delay equal in magnitude to the active duration');
 
 test(t => {
-  var animation = createDiv(t).animate(null, { duration: 1,
-                                               delay: -1,
-                                               endDelay: -2 });
+  const animation = createDiv(t).animate(null, { duration: 1,
+                                                 delay: -1,
+                                                 endDelay: -2 });
 
   [ { currentTime: -3, phase: 'before' },
     { currentTime: -2, phase: 'before' },
     { currentTime: -1, phase: 'before' },
     { currentTime:  0, phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
   });
 }, 'Phase calculation for an animation effect with a negative start delay'
    + ' and a negative end delay equal greater in magnitude than the active'
    + ' duration');
 
 test(t => {
-  var animation = createDiv(t).animate(null, 1);
+  const animation = createDiv(t).animate(null, 1);
   animation.playbackRate = -1;
 
   [ { currentTime: -1, phase: 'before' },
     { currentTime:  0, phase: 'before' },
     { currentTime:  1, phase: 'active' },
     { currentTime:  2, phase: 'after'  } ]
   .forEach(test => {
     assert_phase_at_time(animation, test.phase, test.currentTime);
--- a/testing/web-platform/tests/web-animations/timing-model/animations/canceling-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/canceling-an-animation.html
@@ -26,17 +26,17 @@ promise_test(t => {
 }, 'A play-pending ready promise should be rejected when the animation is'
    + ' canceled');
 
 promise_test(t => {
   const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
   return animation.ready.then(() => {
     animation.pause();
     // Set up listeners on pause-pending ready promise
-    var retPromise = animation.ready.then(() => {
+    const retPromise = animation.ready.then(() => {
       assert_unreached('ready promise was fulfilled');
     }).catch(err => {
       assert_equals(err.name, 'AbortError',
                     'ready promise is rejected with AbortError');
     });
     animation.cancel();
     return retPromise;
   });
--- a/testing/web-platform/tests/web-animations/timing-model/animations/current-time.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/current-time.html
@@ -6,69 +6,69 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
 
   animation.play();
   assert_equals(animation.currentTime, 0,
     'Current time returns the hold time set when entering the play-pending ' +
     'state');
 }, 'The current time returns the hold time when set');
 
 promise_test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
 
   return animation.ready.then(() => {
     assert_equals(animation.currentTime, null);
   });
 }, 'The current time is unresolved when there is no associated timeline ' +
    '(and no hold time is set)');
 
 // FIXME: Test that the current time is unresolved when we have an inactive
 // timeline if we find a way of creating an inactive timeline!
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
 
   animation.startTime = null;
   assert_equals(animation.currentTime, null);
 }, 'The current time is unresolved when the start time is unresolved ' +
    '(and no hold time is set)');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
 
   animation.playbackRate = 2;
   animation.startTime = document.timeline.currentTime - 25 * MS_PER_SEC;
 
-  var timelineTime = document.timeline.currentTime;
-  var startTime = animation.startTime;
-  var playbackRate = animation.playbackRate;
+  const timelineTime = document.timeline.currentTime;
+  const startTime = animation.startTime;
+  const playbackRate = animation.playbackRate;
   assert_times_equal(animation.currentTime,
                      (timelineTime - startTime) * playbackRate,
                      'Animation has a unresolved start time');
 }, 'The current time is calculated from the timeline time, start time and ' +
    'playback rate');
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
   animation.playbackRate = 0;
 
   return animation.ready.then(() => waitForAnimationFrames(1))
   .then(() => {
     assert_times_equal(animation.currentTime, 0);
   });
 }, 'The current time does not progress if playback rate is 0');
 
--- a/testing/web-platform/tests/web-animations/timing-model/animations/playing-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/playing-an-animation.html
@@ -7,33 +7,33 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
-  var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
   animation.currentTime = 1 * MS_PER_SEC;
   assert_times_equal(animation.currentTime, 1 * MS_PER_SEC);
   animation.play();
   assert_times_equal(animation.currentTime, 1 * MS_PER_SEC);
 }, 'Playing a running animation leaves the current time unchanged');
 
 test(t => {
-  var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
   animation.finish();
   assert_times_equal(animation.currentTime, 100 * MS_PER_SEC);
   animation.play();
   assert_times_equal(animation.currentTime, 0);
 }, 'Playing a finished animation seeks back to the start');
 
 test(t => {
-  var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
   animation.playbackRate = -1;
   animation.currentTime = 0;
   assert_times_equal(animation.currentTime, 0);
   animation.play();
   assert_times_equal(animation.currentTime, 100 * MS_PER_SEC);
 }, 'Playing a finished and reversed animation seeks to end');
 
 test(t => {
--- a/testing/web-platform/tests/web-animations/timing-model/animations/reversing-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/reversing-an-animation.html
@@ -7,213 +7,213 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 "use strict";
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
-                                   iterations: Infinity});
+  const div = createDiv(t);
+  const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
+                                      iterations: Infinity });
 
   // Wait a frame because if currentTime is still 0 when we call
   // reverse(), it will throw (per spec).
   return animation.ready.then(waitForAnimationFrames(1)).then(() => {
     assert_greater_than_equal(animation.currentTime, 0,
       'currentTime expected to be greater than 0, one frame after starting');
     animation.currentTime = 50 * MS_PER_SEC;
-    var previousPlaybackRate = animation.playbackRate;
+    const previousPlaybackRate = animation.playbackRate;
     animation.reverse();
     assert_equals(animation.playbackRate, -previousPlaybackRate,
       'playbackRate should be inverted');
   });
 }, 'Reversing an animation inverts the playback rate');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
-                                   iterations: Infinity});
+  const div = createDiv(t);
+  const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
+                                      iterations: Infinity });
   animation.currentTime = 50 * MS_PER_SEC;
   animation.pause();
 
   return animation.ready.then(() => {
     animation.reverse();
     return animation.ready;
   }).then(() => {
     assert_equals(animation.playState, 'running',
       'Animation.playState should be "running" after reverse()');
   });
 }, 'Reversing an animation plays a pausing animation');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.currentTime = 50 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.currentTime, 50 * MS_PER_SEC,
     'The current time should not change it is in the middle of ' +
     'the animation duration');
 }, 'Reversing an animation maintains the same current time');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, { duration: 200 * MS_PER_SEC,
-                                    delay: -100 * MS_PER_SEC });
+  const div = createDiv(t);
+  const animation = div.animate({}, { duration: 200 * MS_PER_SEC,
+                                      delay: -100 * MS_PER_SEC });
   assert_equals(animation.playState, 'pending',
     'The playState is pending before we call reverse');
 
   animation.reverse();
 
   assert_equals(animation.playState, 'pending',
     'The playState is still pending after calling reverse');
 }, 'Reversing an animation does not cause it to leave the pending state');
 
 promise_test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, { duration: 200 * MS_PER_SEC,
-                                    delay: -100 * MS_PER_SEC });
-  var readyResolved = false;
+  const div = createDiv(t);
+  const animation = div.animate({}, { duration: 200 * MS_PER_SEC,
+                                      delay: -100 * MS_PER_SEC });
+  let readyResolved = false;
   animation.ready.then(() => { readyResolved = true; });
 
   animation.reverse();
 
   return Promise.resolve(() => {
     assert_false(readyResolved,
                  'ready promise should not have been resolved yet');
   });
 }, 'Reversing an animation does not cause it to resolve the ready promise');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.currentTime = 200 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.currentTime, 100 * MS_PER_SEC,
     'reverse() should start playing from the animation effect end ' +
     'if the playbackRate > 0 and the currentTime > effect end');
 }, 'Reversing an animation when playbackRate > 0 and currentTime > ' +
    'effect end should make it play from the end');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
 
   animation.currentTime = -200 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.currentTime, 100 * MS_PER_SEC,
     'reverse() should start playing from the animation effect end ' +
     'if the playbackRate > 0 and the currentTime < 0');
 }, 'Reversing an animation when playbackRate > 0 and currentTime < 0 ' +
    'should make it play from the end');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.playbackRate = -1;
   animation.currentTime = -200 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.currentTime, 0,
     'reverse() should start playing from the start of animation time ' +
     'if the playbackRate < 0 and the currentTime < 0');
 }, 'Reversing an animation when playbackRate < 0 and currentTime < 0 ' +
    'should make it play from the start');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.playbackRate = -1;
   animation.currentTime = 200 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.currentTime, 0,
     'reverse() should start playing from the start of animation time ' +
     'if the playbackRate < 0 and the currentTime > effect end');
 }, 'Reversing an animation when playbackRate < 0 and currentTime > effect ' +
    'end should make it play from the start');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
-                                   iterations: Infinity});
+  const div = createDiv(t);
+  const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
+                                      iterations: Infinity });
   animation.currentTime = -200 * MS_PER_SEC;
 
   assert_throws('InvalidStateError',
     () => { animation.reverse(); },
     'reverse() should throw InvalidStateError ' +
     'if the playbackRate > 0 and the currentTime < 0 ' +
     'and the target effect is positive infinity');
 }, 'Reversing an animation when playbackRate > 0 and currentTime < 0 ' +
    'and the target effect end is positive infinity should throw an exception');
 
 test(t => {
-  var animation = createDiv(t).animate({}, { duration: 100 * MS_PER_SEC,
-                                             iterations: Infinity });
+  const animation = createDiv(t).animate({}, { duration: 100 * MS_PER_SEC,
+                                               iterations: Infinity });
   animation.currentTime = -200 * MS_PER_SEC;
 
   try { animation.reverse(); } catch(e) { }
 
   assert_equals(animation.playbackRate, 1, 'playbackRate remains unchanged');
 }, 'When reversing throws an exception, the playback rate remains unchanged');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
-                                   iterations: Infinity});
+  const div = createDiv(t);
+  const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
+                                      iterations: Infinity });
   animation.currentTime = -200 * MS_PER_SEC;
   animation.playbackRate = 0;
 
   try {
     animation.reverse();
   } catch (e) {
     assert_unreached(`Unexpected exception when calling reverse(): ${e}`);
   }
 }, 'Reversing animation when playbackRate = 0 and currentTime < 0 ' +
    'and the target effect end is positive infinity should NOT throw an ' +
    'exception');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
-                                   iterations: Infinity});
+  const div = createDiv(t);
+  const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
+                                      iterations: Infinity });
   animation.playbackRate = -1;
   animation.currentTime = -200 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.currentTime, 0,
     'reverse() should start playing from the start of animation time ' +
     'if the playbackRate < 0 and the currentTime < 0 ' +
     'and the target effect is positive infinity');
 }, 'Reversing an animation when playbackRate < 0 and currentTime < 0 ' +
    'and the target effect end is positive infinity should make it play ' +
    'from the start');
 
 test(t => {
-  var div = createDiv(t);
-  var animation = div.animate({}, 100 * MS_PER_SEC);
+  const div = createDiv(t);
+  const animation = div.animate({}, 100 * MS_PER_SEC);
   animation.playbackRate = 0;
   animation.currentTime = 50 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.playbackRate, 0,
     'reverse() should preserve playbackRate if the playbackRate == 0');
   assert_equals(animation.currentTime, 50 * MS_PER_SEC,
     'reverse() should not affect the currentTime if the playbackRate == 0');
   t.done();
 }, 'Reversing when when playbackRate == 0 should preserve the current ' +
    'time and playback rate');
 
 test(t => {
-  var div = createDiv(t);
-  var animation =
+  const div = createDiv(t);
+  const animation =
     new Animation(new KeyframeEffect(div, null, 100 * MS_PER_SEC), null);
 
   assert_throws('InvalidStateError', () => { animation.reverse(); });
 }, 'Reversing an animation without an active timeline throws an ' +
    'InvalidStateError');
 
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/timing-model/animations/set-the-animation-start-time.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/set-the-animation-start-time.html
@@ -9,17 +9,17 @@
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
   // It should only be possible to set *either* the start time or the current
   // time for an animation that does not have an active timeline.
 
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
 
   assert_equals(animation.currentTime, null, 'Intial current time');
   assert_equals(animation.startTime, null, 'Intial start time');
 
   animation.currentTime = 1000;
   assert_equals(animation.currentTime, 1000,
@@ -39,17 +39,17 @@ test(t => {
   assert_equals(animation.currentTime, null, 'The current time is unaffected');
 
 }, 'Setting the start time of an animation without an active timeline');
 
 test(t => {
   // Setting an unresolved start time on an animation without an active
   // timeline should not clear the current time.
 
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
 
   assert_equals(animation.currentTime, null, 'Intial current time');
   assert_equals(animation.startTime, null, 'Intial start time');
 
   animation.currentTime = 1000;
   assert_equals(animation.currentTime, 1000,
@@ -60,17 +60,17 @@ test(t => {
   animation.startTime = null;
   assert_equals(animation.startTime, null, 'Start time remains unresolved');
   assert_equals(animation.currentTime, 1000, 'Current time is unaffected');
 
 }, 'Setting an unresolved start time an animation without an active timeline'
    + ' does not clear the current time');
 
    test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
 
   // So long as a hold time is set, querying the current time will return
   // the hold time.
 
   // Since the start time is unresolved at this point, setting the current time
   // will set the hold time
@@ -86,17 +86,17 @@ test(t => {
 
   // Sanity check
   assert_equals(animation.playState, 'running',
                 'Animation reports it is running after setting a resolved'
                 + ' start time');
 }, 'Setting the start time clears the hold time');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
 
   // Set up a running animation (i.e. both start time and current time
   // are resolved).
   animation.startTime = document.timeline.currentTime - 1000;
   assert_equals(animation.playState, 'running');
   assert_times_equal(animation.currentTime, 1000,
@@ -107,21 +107,21 @@ test(t => {
   assert_times_equal(animation.currentTime, 1000,
                      'Hold time is set after start time is made unresolved');
   assert_equals(animation.playState, 'paused',
                 'Animation reports it is paused after setting an unresolved'
                 + ' start time');
 }, 'Setting an unresolved start time sets the hold time');
 
 promise_test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
 
-  var readyPromiseCallbackCalled = false;
+  let readyPromiseCallbackCalled = false;
   animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
 
   // Put the animation in the play-pending state
   animation.play();
 
   // Sanity check
   assert_equals(animation.playState, 'pending',
                 'Animation is in play-pending state');
@@ -136,21 +136,21 @@ promise_test(t => {
   // the ready promise resolution microtask.
   return Promise.resolve().then(() => {
     assert_true(readyPromiseCallbackCalled,
                 'Ready promise callback called after setting startTime');
   });
 }, 'Setting the start time resolves a pending ready promise');
 
 promise_test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
 
-  var readyPromiseCallbackCalled = false;
+  let readyPromiseCallbackCalled = false;
   animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
 
   // Put the animation in the pause-pending state
   animation.startTime = document.timeline.currentTime;
   animation.pause();
 
   // Sanity check
   assert_equals(animation.playState, 'pending',
@@ -164,17 +164,17 @@ promise_test(t => {
 
   return Promise.resolve().then(() => {
     assert_true(readyPromiseCallbackCalled,
                 'Ready promise callback called after setting startTime');
   });
 }, 'Setting the start time resolves a pending pause task');
 
 promise_test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
 
   // Set start time such that the current time is past the end time
   animation.startTime = document.timeline.currentTime
                         - 110 * MS_PER_SEC;
   assert_equals(animation.playState, 'finished',
                 'Seeked to finished state using the startTime');
@@ -183,17 +183,17 @@ promise_test(t => {
   // the effect end.
   assert_greater_than(animation.currentTime,
                       animation.effect.getComputedTiming().endTime,
                       'Setting the start time updated the finished state with'
                       + ' the \'did seek\' flag set to true');
 
   // Furthermore, that time should persist if we have correctly updated
   // the hold time
-  var finishedCurrentTime = animation.currentTime;
+  const finishedCurrentTime = animation.currentTime;
   return waitForAnimationFrames(1).then(() => {
     assert_equals(animation.currentTime, finishedCurrentTime,
                   'Current time does not change after seeking past the effect'
                   + ' end time by setting the current time');
   });
 }, 'Setting the start time updates the finished state');
 
 </script>
--- a/testing/web-platform/tests/web-animations/timing-model/animations/set-the-target-effect-of-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/set-the-target-effect-of-an-animation.html
@@ -6,84 +6,84 @@
 <script src='/resources/testharnessreport.js'></script>
 <script src='../../testcommon.js'></script>
 <body>
 <div id='log'></div>
 <script>
 'use strict';
 
 promise_test(t => {
-  var anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
-                                  100 * MS_PER_SEC);
+  const anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
+                                    100 * MS_PER_SEC);
   assert_equals(anim.playState, 'pending');
 
-  var retPromise = anim.ready.then(() => {
+  const retPromise = anim.ready.then(() => {
     assert_unreached('ready promise is fulfilled');
   }).catch(err => {
     assert_equals(err.name, 'AbortError',
                   'ready promise is rejected with AbortError');
   });
 
   anim.effect = null;
   assert_equals(anim.playState, 'paused');
 
   return retPromise;
 }, 'If new effect is null and old effect is not null, we reset the pending ' +
    'tasks and ready promise is rejected');
 
 promise_test(t => {
-  var anim = new Animation();
+  const anim = new Animation();
   anim.pause();
   assert_equals(anim.playState, 'pending');
 
   anim.effect = new KeyframeEffectReadOnly(createDiv(t),
                                            { marginLeft: [ '0px', '100px' ] },
                                            100 * MS_PER_SEC);
   assert_equals(anim.playState, 'pending');
 
   return anim.ready.then(() => {
     assert_equals(anim.playState, 'paused');
   });
 }, 'If animation has a pending pause task, reschedule that task to run ' +
    'as soon as animation is ready.');
 
 promise_test(t => {
-  var anim = new Animation();
+  const anim = new Animation();
   anim.play();
   assert_equals(anim.playState, 'pending');
 
   anim.effect = new KeyframeEffectReadOnly(createDiv(t),
                                            { marginLeft: [ '0px', '100px' ] },
                                            100 * MS_PER_SEC);
   assert_equals(anim.playState, 'pending');
 
   return anim.ready.then(() => {
     assert_equals(anim.playState, 'running');
   });
 }, 'If animation has a pending play task, reschedule that task to run ' +
    'as soon as animation is ready to play new effect.');
 
 promise_test(t => {
-  var animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
-                                   100 * MS_PER_SEC);
-  var animB = new Animation();
+  const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
+                                     100 * MS_PER_SEC);
+  const animB = new Animation();
 
   return animA.ready.then(() => {
     animB.effect = animA.effect;
     assert_equals(animA.effect, null);
     assert_equals(animA.playState, 'finished');
   });
 }, 'When setting the effect of an animation to the effect of an existing ' +
    'animation, the existing animation\'s target effect should be set to null.');
 
 test(t => {
-  var animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
-                                   100 * MS_PER_SEC);
-  var animB = new Animation();
-  var effect = animA.effect;
+  const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
+                                     100 * MS_PER_SEC);
+  const animB = new Animation();
+  const effect = animA.effect;
   animA.currentTime = 50 * MS_PER_SEC;
   animB.currentTime = 20 * MS_PER_SEC;
   assert_equals(effect.getComputedTiming().progress, 0.5,
                 'Original timing comes from first animation');
   animB.effect = effect;
   assert_equals(effect.getComputedTiming().progress, 0.2,
                 'After setting the effect on a different animation, ' +
                 'it uses the new animation\'s timing');
--- a/testing/web-platform/tests/web-animations/timing-model/animations/set-the-timeline-of-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/set-the-timeline-of-an-animation.html
@@ -12,123 +12,123 @@
 
 // ---------------------------------------------------------------------
 //
 // Tests from no timeline to timeline
 //
 // ---------------------------------------------------------------------
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.currentTime = 50 * MS_PER_SEC;
   assert_equals(animation.playState, 'paused');
 
   animation.timeline = document.timeline;
 
   assert_equals(animation.playState, 'paused');
   assert_times_equal(animation.currentTime, 50 * MS_PER_SEC);
 }, 'After setting timeline on paused animation it is still paused');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.currentTime = 200 * MS_PER_SEC;
   assert_equals(animation.playState, 'paused');
 
   animation.timeline = document.timeline;
 
   assert_equals(animation.playState, 'paused');
   assert_times_equal(animation.currentTime, 200 * MS_PER_SEC);
 }, 'After setting timeline on animation paused outside active interval'
    + ' it is still paused');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   assert_equals(animation.playState, 'idle');
 
   animation.timeline = document.timeline;
 
   assert_equals(animation.playState, 'idle');
 }, 'After setting timeline on an idle animation without a start time'
    + ' it is still idle');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.startTime = document.timeline.currentTime;
   assert_equals(animation.playState, 'idle');
 
   animation.timeline = document.timeline;
 
   assert_equals(animation.playState, 'running');
 }, 'After setting timeline on an idle animation with a start time'
    + ' it is running');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.startTime = document.timeline.currentTime - 200 * MS_PER_SEC;
   assert_equals(animation.playState, 'idle');
 
   animation.timeline = document.timeline;
 
   assert_equals(animation.playState, 'finished');
 }, 'After setting timeline on an idle animation with a sufficiently ancient'
    + ' start time it is finished');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.play();
   assert_equals(animation.playState, 'pending');
 
   animation.timeline = document.timeline;
 
   assert_equals(animation.playState, 'pending');
 }, 'After setting timeline on a play-pending animation it is still pending');
 
 promise_test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.play();
   assert_equals(animation.playState, 'pending');
 
   animation.timeline = document.timeline;
 
   return animation.ready.then(() => {
     assert_equals(animation.playState, 'running');
   });
 }, 'After setting timeline on a play-pending animation it begins playing'
    + ' after pending');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.startTime = document.timeline.currentTime;
   animation.pause();
   animation.timeline = null;
   assert_equals(animation.playState, 'pending');
 
   animation.timeline = document.timeline;
 
   assert_equals(animation.playState, 'pending');
 }, 'After setting timeline on a pause-pending animation it is still pending');
 
 promise_test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.startTime = document.timeline.currentTime;
   animation.pause();
   animation.timeline = null;
   assert_equals(animation.playState, 'pending');
 
   animation.timeline = document.timeline;
@@ -141,106 +141,106 @@ promise_test(t => {
 
 // ---------------------------------------------------------------------
 //
 // Tests from timeline to no timeline
 //
 // ---------------------------------------------------------------------
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
   animation.currentTime = 50 * MS_PER_SEC;
   assert_equals(animation.playState, 'paused');
 
   animation.timeline = null;
 
   assert_equals(animation.playState, 'paused');
   assert_times_equal(animation.currentTime, 50 * MS_PER_SEC);
 }, 'After clearing timeline on paused animation it is still paused');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
-  var initialStartTime = document.timeline.currentTime - 200 * MS_PER_SEC;
+  const initialStartTime = document.timeline.currentTime - 200 * MS_PER_SEC;
   animation.startTime = initialStartTime;
   assert_equals(animation.playState, 'finished');
 
   animation.timeline = null;
 
   assert_equals(animation.playState, 'idle');
   assert_times_equal(animation.startTime, initialStartTime);
 }, 'After clearing timeline on finished animation it is idle');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
-  var initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC;
+  const initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC;
   animation.startTime = initialStartTime;
   assert_equals(animation.playState, 'running');
 
   animation.timeline = null;
 
   assert_equals(animation.playState, 'idle');
   assert_times_equal(animation.startTime, initialStartTime);
 }, 'After clearing timeline on running animation it is idle');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
   assert_equals(animation.playState, 'idle');
 
   animation.timeline = null;
 
   assert_equals(animation.playState, 'idle');
   assert_equals(animation.startTime, null);
 }, 'After clearing timeline on idle animation it is still idle');
 
 test(t => {
-  var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
   assert_equals(animation.playState, 'pending');
 
   animation.timeline = null;
 
   assert_equals(animation.playState, 'pending');
 }, 'After clearing timeline on play-pending animation it is still pending');
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
   assert_equals(animation.playState, 'pending');
 
   animation.timeline = null;
   animation.timeline = document.timeline;
 
   assert_equals(animation.playState, 'pending');
   return animation.ready.then(() => {
     assert_equals(animation.playState, 'running');
   });
 }, 'After clearing and re-setting timeline on play-pending animation it'
    + ' begins to play');
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
   animation.startTime = document.timeline.currentTime;
   animation.pause();
   assert_equals(animation.playState, 'pending');
 
   animation.timeline = null;
 
   assert_equals(animation.playState, 'pending');
 }, 'After clearing timeline on a pause-pending animation it is still pending');
 
 promise_test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
   animation.startTime = document.timeline.currentTime;
   animation.pause();
   assert_equals(animation.playState, 'pending');
 
   animation.timeline = null;
   animation.timeline = document.timeline;
@@ -248,20 +248,20 @@ promise_test(t => {
   assert_equals(animation.playState, 'pending');
   return animation.ready.then(() => {
     assert_equals(animation.playState, 'paused');
   });
 }, 'After clearing and re-setting timeline on a pause-pending animation it'
    + ' becomes paused');
 
 promise_test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
-  var initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC;
+  const initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC;
   animation.startTime = initialStartTime;
   animation.pause();
   animation.play();
 
   animation.timeline = null;
   animation.timeline = document.timeline;
   assert_equals(animation.playState, 'pending');
 
--- a/testing/web-platform/tests/web-animations/timing-model/animations/updating-the-finished-state.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/updating-the-finished-state.html
@@ -16,34 +16,34 @@
 //
 // --------------------------------------------------------------------
 
 // CASE 1: playback rate > 0 and current time >= target effect end
 // (Also the start time is resolved and there is pending task)
 
 // Did seek = false
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
 
   // Here and in the following tests we wait until ready resolves as
   // otherwise we don't have a resolved start time. We test the case
   // where the start time is unresolved in a subsequent test.
   return anim.ready.then(() => {
     // Seek to 1ms before the target end and then wait 1ms
     anim.currentTime = 100 * MS_PER_SEC - 1;
     return waitForAnimationFramesWithDelay(1);
   }).then(() => {
     assert_equals(anim.currentTime, 100 * MS_PER_SEC,
                   'Hold time is set to target end clamping current time');
   });
 }, 'Updating the finished state when playing past end');
 
 // Did seek = true
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   return anim.ready.then(() => {
     anim.currentTime = 200 * MS_PER_SEC;
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_equals(anim.currentTime, 200 * MS_PER_SEC,
                   'Hold time is set so current time should NOT change');
   });
 }, 'Updating the finished state when seeking past end');
@@ -55,65 +55,65 @@ promise_test(t => {
 // the next animation frame time happens to exactly align with the target end.
 //
 // Fortunately, we don't need to test that case since even if the implementation
 // fails to set the hold time on such a tick, it should be mostly unobservable
 // (on the subsequent tick the hold time will be set to the same value anyway).
 
 // Did seek = true
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   return anim.ready.then(() => {
     anim.currentTime = 100 * MS_PER_SEC;
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_equals(anim.currentTime, 100 * MS_PER_SEC,
                   'Hold time is set so current time should NOT change');
   });
 }, 'Updating the finished state when seeking exactly to end');
 
 
 // CASE 2: playback rate < 0 and current time <= 0
 // (Also the start time is resolved and there is pending task)
 
 // Did seek = false
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = -1;
   anim.play(); // Make sure animation is not initially finished
   return anim.ready.then(() => {
     // Seek to 1ms before 0 and then wait 1ms
     anim.currentTime = 1;
     return waitForAnimationFramesWithDelay(1);
   }).then(() => {
     assert_equals(anim.currentTime, 0 * MS_PER_SEC,
                   'Hold time is set to zero clamping current time');
   });
 }, 'Updating the finished state when playing in reverse past zero');
 
 // Did seek = true
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = -1;
   anim.play();
   return anim.ready.then(() => {
     anim.currentTime = -100 * MS_PER_SEC;
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_equals(anim.currentTime, -100 * MS_PER_SEC,
                   'Hold time is set so current time should NOT change');
   });
 }, 'Updating the finished state when seeking a reversed animation past zero');
 
 // As before, it's difficult to test current time == 0 for did seek = false but
 // it doesn't really matter.
 
 // Did seek = true
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = -1;
   anim.play();
   return anim.ready.then(() => {
     anim.currentTime = 0;
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_equals(anim.currentTime, 0 * MS_PER_SEC,
                   'Hold time is set so current time should NOT change');
@@ -122,17 +122,17 @@ promise_test(t => {
    + ' to zero');
 
 // CASE 3: playback rate > 0 and current time < target end OR
 //         playback rate < 0 and current time > 0
 // (Also the start time is resolved and there is pending task)
 
 // Did seek = false; playback rate > 0
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
 
   // We want to test that the hold time is cleared so first we need to
   // put the animation in a state where the hold time is set.
   anim.finish();
   return anim.ready.then(() => {
     assert_equals(anim.currentTime, 100 * MS_PER_SEC,
                   'Hold time is initially set');
     // Then extend the duration so that the hold time is cleared and on
@@ -142,17 +142,17 @@ promise_test(t => {
   }).then(() => {
     assert_greater_than(anim.currentTime, 100 * MS_PER_SEC,
                         'Hold time is not set so current time should increase');
   });
 }, 'Updating the finished state when playing before end');
 
 // Did seek = true; playback rate > 0
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.finish();
   return anim.ready.then(() => {
     anim.currentTime = 50 * MS_PER_SEC;
     // When did seek = true, updating the finished state: (i) updates
     // the animation's start time and (ii) clears the hold time.
     // We can test both by checking that the currentTime is initially
     // updated and then increases.
     assert_equals(anim.currentTime, 50 * MS_PER_SEC, 'Start time is updated');
@@ -173,79 +173,79 @@ promise_test(t => {
 // replace the timeline and that procedure is likely to change. For all
 // other cases we either have an unresolved start time (e.g. when
 // paused), we don't have a set hold time (e.g. regular playback), or
 // the current time is zero (and anything that gets us out of that state
 // will set did seek = true).
 
 // Did seek = true; playback rate < 0
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = -1;
   return anim.ready.then(() => {
     anim.currentTime = 50 * MS_PER_SEC;
     assert_equals(anim.currentTime, 50 * MS_PER_SEC, 'Start time is updated');
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_less_than(anim.currentTime, 50 * MS_PER_SEC,
                      'Hold time is not set so current time should decrease');
   });
 }, 'Updating the finished state when seeking a reversed animation before end');
 
 // CASE 4: playback rate == 0
 
 // current time < 0
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = 0;
   return anim.ready.then(() => {
     anim.currentTime = -100 * MS_PER_SEC;
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_equals(anim.currentTime, -100 * MS_PER_SEC,
                   'Hold time should not be cleared so current time should'
                   + ' NOT change');
   });
 }, 'Updating the finished state when playback rate is zero and the'
    + ' current time is less than zero');
 
 // current time < target end
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = 0;
   return anim.ready.then(() => {
     anim.currentTime = 50 * MS_PER_SEC;
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_equals(anim.currentTime, 50 * MS_PER_SEC,
                   'Hold time should not be cleared so current time should'
                   + ' NOT change');
   });
 }, 'Updating the finished state when playback rate is zero and the'
    + ' current time is less than end');
 
 // current time > target end
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = 0;
   return anim.ready.then(() => {
     anim.currentTime = 200 * MS_PER_SEC;
     return waitForAnimationFrames(1);
   }).then(() => {
     assert_equals(anim.currentTime, 200 * MS_PER_SEC,
                   'Hold time should not be cleared so current time should'
                   + ' NOT change');
   });
 }, 'Updating the finished state when playback rate is zero and the'
    + ' current time is greater than end');
 
 // CASE 5: current time unresolved
 
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.cancel();
   // Trigger a change that will cause the "update the finished state"
   // procedure to run.
   anim.effect.timing.duration = 200 * MS_PER_SEC;
   assert_equals(anim.currentTime, null,
                 'The animation hold time / start time should not be updated');
   // The "update the finished state" procedure is supposed to run after any
   // change to timing, but just in case an implementation defers that, let's
@@ -255,17 +255,17 @@ promise_test(t => {
     assert_equals(anim.currentTime, null,
                   'The animation hold time / start time should not be updated');
   });
 }, 'Updating the finished state when current time is unresolved');
 
 // CASE 6: has a pending task
 
 test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.cancel();
   anim.currentTime = 75 * MS_PER_SEC;
   anim.play();
   // We now have a pending task and a resolved current time.
   //
   // In the next step we will adjust the timing so that the current time
   // is greater than the target end. At this point the "update the finished
   // state" procedure should run and if we fail to check for a pending task
@@ -274,17 +274,17 @@ test(t => {
   assert_equals(anim.currentTime, 75 * MS_PER_SEC,
                 'Hold time should not be updated');
 }, 'Updating the finished state when there is a pending task');
 
 // CASE 7: start time unresolved
 
 // Did seek = false
 promise_test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.cancel();
   // Make it so that only the start time is unresolved (to avoid overlapping
   // with the test case where current time is unresolved)
   anim.currentTime = 150 * MS_PER_SEC;
   // Trigger a change that will cause the "update the finished state"
   // procedure to run (did seek = false).
   anim.effect.timing.duration = 200 * MS_PER_SEC;
   return waitForAnimationFrames(1).then(() => {
@@ -293,17 +293,17 @@ promise_test(t => {
     assert_equals(anim.startTime, null,
                   'The animation start time should not be updated');
   });
 }, 'Updating the finished state when start time is unresolved and'
    + ' did seek = false');
 
 // Did seek = true
 test(t => {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.cancel();
   anim.currentTime = 150 * MS_PER_SEC;
   // Trigger a change that will cause the "update the finished state"
   // procedure to run.
   anim.currentTime = 50 * MS_PER_SEC;
   assert_equals(anim.currentTime, 50 * MS_PER_SEC,
                 'The animation hold time should not be updated');
   assert_equals(anim.startTime, null,
@@ -313,96 +313,96 @@ test(t => {
 
 // --------------------------------------------------------------------
 //
 // TESTS FOR RUNNING FINISH NOTIFICATION STEPS
 //
 // --------------------------------------------------------------------
 
 function waitForFinishEventAndPromise(animation) {
-  var eventPromise = new Promise(resolve => {
+  const eventPromise = new Promise(resolve => {
     animation.onfinish = resolve;
   });
   return Promise.all([eventPromise, animation.finished]);
 }
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 1);
+  const animation = createDiv(t).animate(null, 1);
   animation.onfinish =
     t.unreached_func('Seeking to finish should not fire finish event');
   animation.finished.then(
     t.unreached_func('Seeking to finish should not resolve finished promise'));
   animation.currentTime = 1;
   animation.currentTime = 0;
   animation.pause();
   return waitForAnimationFrames(3);
 }, 'Finish notification steps don\'t run when the animation seeks to finish'
    + ' and then seeks back again');
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 1);
+  const animation = createDiv(t).animate(null, 1);
   return animation.ready.then(() => {
     return waitForFinishEventAndPromise(animation);
   });
 }, 'Finish notification steps run when the animation completes normally');
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 1);
+  const animation = createDiv(t).animate(null, 1);
   return animation.ready.then(() => {
     animation.currentTime = 10;
     return waitForFinishEventAndPromise(animation);
   });
 }, 'Finish notification steps run when the animation seeks past finish');
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 1);
+  const animation = createDiv(t).animate(null, 1);
   return animation.ready.then(() => {
     // Register for notifications now since once we seek away from being
     // finished the 'finished' promise will be replaced.
-    var finishNotificationSteps = waitForFinishEventAndPromise(animation);
+    const finishNotificationSteps = waitForFinishEventAndPromise(animation);
     animation.finish();
     animation.currentTime = 0;
     animation.pause();
     return finishNotificationSteps;
   });
 }, 'Finish notification steps run when the animation completes with .finish(),'
    + ' even if we then seek away');
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 1);
-  var initialFinishedPromise = animation.finished;
+  const animation = createDiv(t).animate(null, 1);
+  const initialFinishedPromise = animation.finished;
 
   return animation.finished.then(target => {
     animation.currentTime = 0;
     assert_not_equals(initialFinishedPromise, animation.finished);
   });
 }, 'Animation finished promise is replaced after seeking back to start');
 
 promise_test(t => {
-  var animation = createDiv(t).animate(null, 1);
-  var initialFinishedPromise = animation.finished;
+  const animation = createDiv(t).animate(null, 1);
+  const initialFinishedPromise = animation.finished;
 
   return animation.finished.then(target => {
     animation.play();
     assert_not_equals(initialFinishedPromise, animation.finished);
   });
 }, 'Animation finished promise is replaced after replaying from start');
 
 async_test(t => {
-  var animation = createDiv(t).animate(null, 1);
+  const animation = createDiv(t).animate(null, 1);
   animation.onfinish = event => {
     animation.currentTime = 0;
     animation.onfinish = event => {
       t.done();
     };
   };
 }, 'Animation finish event is fired again after seeking back to start');
 
 async_test(t => {
-  var animation = createDiv(t).animate(null, 1);
+  const animation = createDiv(t).animate(null, 1);
   animation.onfinish = event => {
     animation.play();
     animation.onfinish = event => {
       t.done();
     };
   };
 }, 'Animation finish event is fired again after replaying from start');
 
--- a/testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
+++ b/testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
@@ -30,17 +30,17 @@ gEasingTests.forEach(params => {
                            expectedProgress + ` at ${sampleTime}ms`);
     });
   }, 'Transformed progress for ' + params.desc);
 });
 
 // Additional tests for various boundary conditions of step timing functions and
 // frames timing functions.
 
-var gStepAndFramesTimingFunctionTests = [
+const gStepAndFramesTimingFunctionTests = [
   {
     description: 'Test bounds point of step-start easing',
     effect:     {
                   delay: 1000,
                   duration: 1000,
                   fill: 'both',
                   easing: 'steps(2, start)'
                 },
@@ -288,18 +288,18 @@ var gStepAndFramesTimingFunctionTests = 
                   { currentTime: 1999, progress: 0 },
                   { currentTime: 2000, progress: 1 }
                 ]
   }
 ];
 
 gStepAndFramesTimingFunctionTests.forEach(options => {
   test(t => {
-    var target = createDiv(t);
-    var animation = target.animate(null, options.effect);
+    const target = createDiv(t);
+    const animation = target.animate(null, options.effect);
     options.conditions.forEach(condition => {
       animation.currentTime = condition.currentTime;
       assert_equals(animation.effect.getComputedTiming().progress,
                     condition.progress,
                     'Progress at ' + animation.currentTime + 'ms');
     });
   }, options.description);
 });