diff --git 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
index cab5b6713cd6..746a566bb764 100644
--- 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
@@ -17,16 +17,16 @@ html {
 <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;
diff --git 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
index 3c15f0ca6d7d..91e7268dcc1a 100644
--- 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
@@ -17,16 +17,16 @@ html {
 <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;
diff --git 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
index 27202618c680..add3429043f5 100644
--- 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
@@ -11,10 +11,10 @@
 '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');
@@ -32,11 +32,11 @@ test(t => {
 }, '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');
@@ -54,14 +54,14 @@ test(t => {
 }, '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.
@@ -84,15 +84,15 @@ test(t => {
    + ' 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');
@@ -108,14 +108,14 @@ test(t => {
    + ' 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' });
 
diff --git 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
index 5dda2865d878..d9ccb6b7552e 100644
--- 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
@@ -17,16 +17,16 @@ html {
 <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;
diff --git 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
index 4315d0fe7164..da8b89579f6d 100644
--- 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,6 +1,6 @@
 'use strict';
 
-var gCSSProperties = {
+const gCSSProperties = {
   'align-content': {
     // https://drafts.csswg.org/css-align/#propdef-align-content
     types: [
@@ -146,7 +146,7 @@ var gCSSProperties = {
     // 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;
     }
@@ -233,7 +233,7 @@ var gCSSProperties = {
     // 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;
     }
@@ -252,7 +252,7 @@ var gCSSProperties = {
     // 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;
     }
@@ -285,7 +285,7 @@ var gCSSProperties = {
     // 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;
     }
@@ -402,7 +402,7 @@ var gCSSProperties = {
     // 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;
     }
@@ -1044,7 +1044,7 @@ var gCSSProperties = {
     // 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;
     }
@@ -1368,7 +1368,7 @@ var gCSSProperties = {
     // 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;
     }
@@ -1514,11 +1514,11 @@ function testAnimationSamplesWithAnyOrder(animation, idlName, testSamples) {
 }
 
 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);
@@ -1530,7 +1530,7 @@ function createTestElement(t, setup) {
 }
 
 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
@@ -1541,7 +1541,7 @@ function isSupported(property) {
 }
 
 function TestKeyframe(testProp) {
-  var _propAccessCount = 0;
+  let _propAccessCount = 0;
 
   Object.defineProperty(this, testProp, {
     get: function() { _propAccessCount++; },
@@ -1563,11 +1563,11 @@ function propertyToIDL(property) {
                             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;
diff --git 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
index c84b21e078f3..fc3cde279de8 100644
--- 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,12 +1,12 @@
 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() },
@@ -19,12 +19,17 @@ const discreteType = {
         // 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() },
@@ -36,11 +41,15 @@ const discreteType = {
         // 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() },
@@ -52,23 +61,27 @@ const discreteType = {
 
   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 + '"');
@@ -87,19 +100,19 @@ const discreteType = {
 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');
@@ -107,20 +120,24 @@ const lengthType = {
 
   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');
   },
@@ -137,19 +154,23 @@ const lengthType = {
 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');
@@ -157,21 +178,33 @@ const lengthPairType = {
 
   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');
   },
 
@@ -187,10 +220,10 @@ const lengthPairType = {
 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');
@@ -198,11 +231,13 @@ const percentageType = {
 
   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');
   },
@@ -219,10 +254,10 @@ const percentageType = {
 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');
@@ -230,11 +265,13 @@ const integerType = {
 
   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');
@@ -252,10 +289,10 @@ const integerType = {
 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');
@@ -263,11 +300,13 @@ const positiveIntegerType = {
 
   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');
@@ -288,45 +327,47 @@ const lengthPercentageOrCalcType = {
     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,
@@ -340,81 +381,81 @@ const lengthPercentageOrCalcType = {
     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');
@@ -432,10 +473,10 @@ const lengthPercentageOrCalcType = {
 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');
@@ -443,11 +484,11 @@ const positiveNumberType = {
 
   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');
   },
@@ -465,10 +506,10 @@ const positiveNumberType = {
 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');
@@ -476,20 +517,20 @@ const opacityType = {
 
   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)');
   },
@@ -506,10 +547,10 @@ const opacityType = {
 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' },
@@ -518,10 +559,10 @@ const visibilityType = {
        + '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' },
@@ -530,10 +571,10 @@ const visibilityType = {
      + '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' },
@@ -546,9 +587,9 @@ const visibilityType = {
       // 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)' });
@@ -566,24 +607,24 @@ const visibilityType = {
 
   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' }]);
@@ -602,61 +643,69 @@ const visibilityType = {
 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()');
@@ -664,12 +713,15 @@ const colorType = {
 
   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
@@ -680,54 +732,59 @@ const colorType = {
        '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()');
@@ -745,21 +802,27 @@ const colorType = {
 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),
@@ -770,21 +833,21 @@ const transformListType = {
     }, 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),
@@ -793,9 +856,9 @@ const transformListType = {
     }, 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);
@@ -809,9 +872,9 @@ const transformListType = {
     }, 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);
@@ -826,9 +889,9 @@ const transformListType = {
     }, 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)'] },
@@ -843,9 +906,9 @@ const transformListType = {
     }, 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);
@@ -859,9 +922,9 @@ const transformListType = {
     }, 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);
@@ -871,14 +934,13 @@ const transformListType = {
     }, 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) }]);
@@ -888,13 +950,18 @@ const transformListType = {
     // 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,
@@ -904,9 +971,9 @@ const transformListType = {
     }, 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,
@@ -918,9 +985,9 @@ const transformListType = {
     // 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' });
@@ -933,13 +1000,19 @@ const transformListType = {
     }, 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 ] },
@@ -949,13 +1022,19 @@ const transformListType = {
     }, 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 ] },
@@ -967,26 +1046,26 @@ const transformListType = {
 
   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),
@@ -1002,12 +1081,12 @@ const transformListType = {
     }, 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)
@@ -1015,11 +1094,11 @@ const transformListType = {
     }, 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)'] },
@@ -1053,11 +1132,11 @@ const transformListType = {
     }, 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)'] },
@@ -1069,11 +1148,11 @@ const transformListType = {
     }, 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)'] },
@@ -1085,10 +1164,10 @@ const transformListType = {
     }, 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' });
@@ -1099,10 +1178,10 @@ const transformListType = {
     }, 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' });
@@ -1113,14 +1192,14 @@ const transformListType = {
     }, 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' });
 
@@ -1135,10 +1214,10 @@ const transformListType = {
     // 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' });
@@ -1149,10 +1228,10 @@ const transformListType = {
     }, 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)'] },
@@ -1164,10 +1243,10 @@ const transformListType = {
     }, 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)'] },
@@ -1181,10 +1260,10 @@ const transformListType = {
 
   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' });
@@ -1194,10 +1273,10 @@ const transformListType = {
     }, 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' });
@@ -1216,10 +1295,10 @@ const transformListType = {
     }, 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' });
 
@@ -1231,11 +1310,11 @@ const transformListType = {
     }, 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)'] },
@@ -1251,11 +1330,11 @@ const transformListType = {
     }, 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)'] },
@@ -1267,11 +1346,11 @@ const transformListType = {
     }, 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)'] },
@@ -1283,10 +1362,10 @@ const transformListType = {
     }, 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' });
@@ -1297,10 +1376,10 @@ const transformListType = {
     }, 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' });
@@ -1311,14 +1390,14 @@ const transformListType = {
     }, 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' });
 
@@ -1328,15 +1407,15 @@ const transformListType = {
     }, 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' });
 
@@ -1349,84 +1428,154 @@ const transformListType = {
     // 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)');
   },
@@ -1435,33 +1584,33 @@ const transformListType = {
 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,
@@ -1469,9 +1618,9 @@ const filterListType = {
     }, 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))'] },
@@ -1484,9 +1633,9 @@ const filterListType = {
     }, 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)',
@@ -1502,9 +1651,9 @@ const filterListType = {
        '(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%)',
@@ -1520,9 +1669,9 @@ const filterListType = {
        '(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)',
@@ -1537,9 +1686,9 @@ const filterListType = {
        ' 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)',
@@ -1554,10 +1703,10 @@ const filterListType = {
        ' 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))'] },
@@ -1572,9 +1721,9 @@ const filterListType = {
        '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,
@@ -1582,9 +1731,9 @@ const filterListType = {
     }, 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\")']},
@@ -1597,23 +1746,23 @@ const filterListType = {
 
   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');
@@ -1621,12 +1770,18 @@ const filterListType = {
 
   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).
@@ -1635,12 +1790,18 @@ const filterListType = {
     }, 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)' }]);
@@ -1651,9 +1812,9 @@ const filterListType = {
 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' });
@@ -1663,9 +1824,9 @@ const textShadowListType = {
     }, 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' });
@@ -1675,9 +1836,9 @@ const textShadowListType = {
     }, 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' });
@@ -1686,9 +1847,9 @@ const textShadowListType = {
     }, 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, '
@@ -1700,9 +1861,9 @@ const textShadowListType = {
     }, 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'] },
@@ -1713,9 +1874,9 @@ const textShadowListType = {
     }, 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'] },
@@ -1726,10 +1887,10 @@ const textShadowListType = {
     }, 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' });
@@ -1740,10 +1901,10 @@ const textShadowListType = {
 
   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' });
@@ -1755,10 +1916,10 @@ const textShadowListType = {
 
   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' });
@@ -1772,9 +1933,9 @@ const textShadowListType = {
 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' });
@@ -1784,9 +1945,9 @@ const boxShadowListType = {
     }, 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' });
@@ -1796,9 +1957,9 @@ const boxShadowListType = {
     }, 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' });
@@ -1807,9 +1968,9 @@ const boxShadowListType = {
     }, 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, '
@@ -1821,9 +1982,9 @@ const boxShadowListType = {
     }, 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'] },
@@ -1834,9 +1995,9 @@ const boxShadowListType = {
     }, 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']},
@@ -1847,10 +2008,10 @@ const boxShadowListType = {
     }, 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' });
@@ -1861,10 +2022,10 @@ const boxShadowListType = {
 
   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' });
@@ -1876,10 +2037,10 @@ const boxShadowListType = {
 
   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' });
@@ -1894,10 +2055,10 @@ const positionType = {
     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%') }]);
@@ -1908,11 +2069,11 @@ const positionType = {
     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%') }]);
@@ -1931,12 +2092,12 @@ const positionType = {
 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)' }]);
@@ -1945,13 +2106,13 @@ const rectType = {
 
   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)' }]);
@@ -1974,24 +2135,24 @@ const dasharrayType = {
     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' }]);
@@ -2005,13 +2166,13 @@ const dasharrayType = {
   // 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' }]);
@@ -2030,9 +2191,9 @@ const dasharrayType = {
 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,
@@ -2041,9 +2202,9 @@ const fontStretchType = {
     }, 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,
@@ -2053,12 +2214,12 @@ const fontStretchType = {
 
   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' }]);
@@ -2123,7 +2284,7 @@ const fontVariationSettingsType = {
       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' } ]);
diff --git 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
index f24cfbee071c..f5a60b4e2c7b 100644
--- 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
@@ -14,9 +14,9 @@
 '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',
@@ -33,10 +33,10 @@ test(t => {
 }, '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',
diff --git 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
index 95ef6d7ad391..4a2cecd65449 100644
--- 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
@@ -11,9 +11,9 @@
 
 [ '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;
@@ -22,8 +22,8 @@
   }, 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));
@@ -40,9 +40,9 @@
   }, 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);
@@ -53,9 +53,9 @@
   }, '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 });
@@ -67,9 +67,9 @@
      '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);
diff --git 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
index c23881a1e453..9e5d46019d97 100644
--- 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
@@ -10,10 +10,10 @@
 <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');
@@ -23,13 +23,13 @@ test(t => {
 }, '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');
@@ -39,12 +39,12 @@ test(t => {
 }, '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;
@@ -58,15 +58,15 @@ promise_test(t => {
    + ' 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(() => {
@@ -82,14 +82,14 @@ promise_test(t => {
 }, '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');
diff --git 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
index 769632c39eb7..011b76f88402 100644
--- 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
@@ -12,15 +12,15 @@
 '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');
@@ -48,12 +48,12 @@ test(t => {
    + ' 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'
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html b/testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
index fa25aebb69dd..49182f3f6012 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
@@ -17,15 +17,15 @@
 // 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');
@@ -36,16 +36,16 @@ test(t => {
    + ' 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'
@@ -58,9 +58,9 @@ test(t => {
    + ' 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'
@@ -75,8 +75,8 @@ test(t => {
 
 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)})`);
@@ -84,15 +84,15 @@ gEmptyKeyframeListTests.forEach(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);
     });
@@ -101,7 +101,7 @@ gInvalidKeyframesTests.forEach(subtest => {
 
 gInvalidEasings.forEach(invalidEasing => {
   test(t => {
-    var div = createDiv(t);
+    const div = createDiv(t);
     assert_throws(new TypeError, () => {
       div.animate({ easing: invalidEasing }, 2000);
     });
@@ -109,17 +109,17 @@ gInvalidEasings.forEach(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
@@ -127,37 +127,37 @@ test(t => {
 }, '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();
@@ -168,22 +168,22 @@ async_test(t => {
    '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 ' +
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animatable/getAnimations.html b/testing/web-platform/tests/web-animations/interfaces/Animatable/getAnimations.html
index dc6ed2400b8e..ec50df3f41a3 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animatable/getAnimations.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animatable/getAnimations.html
@@ -10,47 +10,47 @@
 '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',
   });
@@ -59,8 +59,8 @@ test(t => {
 }, '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,
   });
@@ -68,8 +68,8 @@ test(t => {
 }, '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(), [],
@@ -88,8 +88,8 @@ test(t => {
    + ' 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(), [],
@@ -106,8 +106,8 @@ test(t => {
    + ' 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(), [],
@@ -131,11 +131,11 @@ test(t => {
    + ' 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');
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/cancel.html b/testing/web-platform/tests/web-animations/interfaces/Animation/cancel.html
index d557e40d540c..a342b2e91d1b 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/cancel.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/cancel.html
@@ -11,9 +11,11 @@
 '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');
@@ -24,9 +26,9 @@ promise_test(t => {
 }, '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',
@@ -39,9 +41,9 @@ test(t => {
 }, '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',
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/constructor.html b/testing/web-platform/tests/web-animations/interfaces/Animation/constructor.html
index 8e6edae231b4..64587bad4e11 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/constructor.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/constructor.html
@@ -11,7 +11,7 @@
 <script>
 "use strict";
 
-var gTarget = document.getElementById("target");
+const gTarget = document.getElementById("target");
 
 function createEffect() {
   return new KeyframeEffectReadOnly(gTarget, { opacity: [0, 1] });
@@ -21,7 +21,7 @@ function createNull() {
   return null;
 }
 
-var gTestArguments = [
+const gTestArguments = [
   {
     createEffect: createNull,
     timeline: null,
@@ -66,8 +66,8 @@ var gTestArguments = [
 
 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");
@@ -82,11 +82,11 @@ gTestArguments.forEach(args => {
 });
 
 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;
@@ -96,12 +96,12 @@ test(t => {
 }, "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();
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/effect.html b/testing/web-platform/tests/web-animations/interfaces/Animation/effect.html
index 205fc6ff91bd..062ebe8ee081 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/effect.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/effect.html
@@ -11,19 +11,19 @@
 "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');
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/finish.html b/testing/web-platform/tests/web-animations/interfaces/Animation/finish.html
index ee4f4e09b178..c413d04c7b27 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/finish.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/finish.html
@@ -10,11 +10,11 @@
 <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'}, () => {
@@ -23,10 +23,10 @@ test(t => {
 }, '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();
@@ -34,8 +34,8 @@ test(t => {
 }, '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,
@@ -44,8 +44,8 @@ test(t => {
 }, '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;
@@ -57,8 +57,8 @@ test(t => {
 }, '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;
@@ -71,8 +71,8 @@ promise_test(t => {
 }, '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;
@@ -86,8 +86,8 @@ promise_test(t => {
 }, '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();
@@ -103,8 +103,8 @@ promise_test(t => {
 }, '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
@@ -122,8 +122,8 @@ test(t => {
 }, '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();
@@ -137,8 +137,8 @@ test(t => {
 }, '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();
 
@@ -156,8 +156,8 @@ test(t => {
 //   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();
@@ -173,12 +173,12 @@ promise_test(t => {
 }, '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 ' +
@@ -187,9 +187,9 @@ promise_test(t => {
 }, '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;
   });
@@ -204,9 +204,9 @@ promise_test(t => {
 }, '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;
   });
@@ -222,11 +222,11 @@ promise_test(t => {
    '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;
   });
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/finished.html b/testing/web-platform/tests/web-animations/interfaces/Animation/finished.html
index 13367a7aff84..e96d601a9c70 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/finished.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/finished.html
@@ -11,9 +11,9 @@
 "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');
@@ -34,9 +34,9 @@ promise_test(t => {
 }, '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,
@@ -54,9 +54,9 @@ promise_test(t => {
 }, '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;
@@ -76,9 +76,9 @@ promise_test(t => {
 }, '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;
@@ -89,10 +89,10 @@ promise_test(t => {
 }, '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;
   });
@@ -113,10 +113,10 @@ promise_test(t => {
 }, '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;
   });
@@ -134,8 +134,8 @@ promise_test(t => {
 }, '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,
@@ -145,12 +145,12 @@ promise_test(t => {
 }, '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',
@@ -167,9 +167,9 @@ promise_test(t => {
    '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();
@@ -180,19 +180,19 @@ promise_test(t => {
 }, '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'
@@ -201,12 +201,12 @@ promise_test(t => {
 }, '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;
@@ -226,7 +226,7 @@ promise_test(t => {
                                '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 ' +
@@ -235,9 +235,9 @@ promise_test(t => {
 }, '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);
@@ -252,8 +252,8 @@ promise_test(t => {
 }, '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;
@@ -261,9 +261,9 @@ promise_test(t => {
 }, '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;
@@ -276,9 +276,9 @@ promise_test(t => {
    '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,
@@ -288,9 +288,9 @@ test(t => {
    '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,
@@ -300,9 +300,9 @@ test(t => {
    '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;
   });
@@ -319,9 +319,9 @@ promise_test(t => {
    '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;
   });
@@ -338,8 +338,8 @@ promise_test(t => {
    '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');
   }));
@@ -352,8 +352,8 @@ promise_test(t => {
    '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(() => {
@@ -367,8 +367,8 @@ promise_test(t => {
    '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;
@@ -376,14 +376,14 @@ promise_test(t => {
     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');
   });
 
@@ -392,8 +392,8 @@ promise_test(t => {
 }, '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(() => {
@@ -401,14 +401,14 @@ promise_test(t => {
     })
   );
 
-  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');
   });
 
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/id.html b/testing/web-platform/tests/web-animations/interfaces/Animation/id.html
index 23c1f43dfde5..4d0ac956febc 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/id.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/id.html
@@ -11,14 +11,14 @@
 "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');
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/oncancel.html b/testing/web-platform/tests/web-animations/interfaces/Animation/oncancel.html
index 092753c1cf3a..54d2f940675f 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/oncancel.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/oncancel.html
@@ -11,9 +11,9 @@
 "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;
   });
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/onfinish.html b/testing/web-platform/tests/web-animations/interfaces/Animation/onfinish.html
index 2155c460a400..e51eea1e60c6 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/onfinish.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/onfinish.html
@@ -11,9 +11,9 @@
 "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;
   });
@@ -31,10 +31,10 @@ async_test(t => {
    '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;
   });
@@ -52,10 +52,10 @@ async_test(t => {
    '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;
   });
@@ -72,8 +72,8 @@ async_test(t => {
 }, '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');
@@ -89,8 +89,8 @@ promise_test(t => {
 }, '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');
   };
@@ -103,8 +103,8 @@ promise_test(t => {
 }, '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');
   };
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/pause.html b/testing/web-platform/tests/web-animations/interfaces/Animation/pause.html
index c73b27608d4c..a9456147a681 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/pause.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/pause.html
@@ -11,9 +11,9 @@
 "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,
@@ -30,8 +30,8 @@ promise_test(t => {
 }, '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();
@@ -51,8 +51,8 @@ promise_test(t => {
 }, '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();
@@ -67,8 +67,8 @@ promise_test(t => {
 }, '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;
@@ -81,8 +81,8 @@ test(t => {
 }, '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();
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/play.html b/testing/web-platform/tests/web-animations/interfaces/Animation/play.html
index 9bd86ce22b3f..d3e0122cab01 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/play.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/play.html
@@ -11,10 +11,10 @@
 '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
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/playState.html b/testing/web-platform/tests/web-animations/interfaces/Animation/playState.html
index 47af5b8a5028..cf6ce66e86e5 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/playState.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/playState.html
@@ -11,8 +11,8 @@
 '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(() => {
@@ -22,8 +22,8 @@ promise_test(t => {
    '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');
@@ -33,15 +33,15 @@ promise_test(t => {
 }, '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',
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/playbackRate.html b/testing/web-platform/tests/web-animations/interfaces/Animation/playbackRate.html
index 980b5069d631..58631a5daaf8 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/playbackRate.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/playbackRate.html
@@ -14,10 +14,10 @@ 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,
@@ -27,8 +27,8 @@ function assert_playbackrate(animation,
 }
 
 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;
@@ -44,11 +44,11 @@ promise_test(t => {
 }, '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;
@@ -62,11 +62,11 @@ promise_test(t => {
 }, '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;
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/ready.html b/testing/web-platform/tests/web-animations/interfaces/Animation/ready.html
index 0c4da5d5f6b8..1dc631f05b82 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/ready.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/ready.html
@@ -11,10 +11,10 @@
 "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,
@@ -34,11 +34,11 @@ promise_test(t => {
 }, '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'
@@ -47,8 +47,8 @@ promise_test(t => {
 }, '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,
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/startTime.html b/testing/web-platform/tests/web-animations/interfaces/Animation/startTime.html
index 1548e9577fdd..fab8534faa96 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/startTime.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/startTime.html
@@ -12,40 +12,40 @@ href="https://w3c.github.io/web-animations/#dom-animation-starttime">
 '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);
diff --git a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/delay.html b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/delay.html
index c83912eb3837..0192602b7a38 100644
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/delay.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/delay.html
@@ -11,13 +11,13 @@
 '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,
@@ -25,8 +25,8 @@ test(t => {
 }, '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,
@@ -34,8 +34,8 @@ test(t => {
 }, '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);
@@ -43,27 +43,27 @@ test(t => {
    + ' 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;
diff --git a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
index 067286428c2f..307562d68026 100644
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
@@ -11,15 +11,15 @@
 '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,
@@ -28,8 +28,8 @@ test(t => {
 }, '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');
@@ -41,10 +41,10 @@ test(t => {
 }, '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');
 
@@ -56,12 +56,12 @@ test(t => {
    + ' 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');
 
@@ -72,11 +72,11 @@ test(t => {
 }, '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');
@@ -88,11 +88,11 @@ test(t => {
 }, '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');
diff --git a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/duration.html b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/duration.html
index bec3d59bcc58..98ddd68f9730 100644
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/duration.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/duration.html
@@ -11,13 +11,13 @@
 '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');
@@ -26,8 +26,8 @@ test(t => {
 }, '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,
@@ -35,16 +35,16 @@ test(t => {
 }, '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,
@@ -52,49 +52,49 @@ test(t => {
 }, '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' });
   });
@@ -102,7 +102,7 @@ test(t => {
    + ' dictionary object');
 
 test(t => {
-  var div = createDiv(t);
+  const div = createDiv(t);
   assert_throws({ name: 'TypeError' }, () => {
     div.animate({ opacity: [ 0, 1 ] }, { duration: '100' });
   });
@@ -110,50 +110,50 @@ test(t => {
    + ' 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');
 
@@ -170,8 +170,8 @@ promise_test(t => {
 }, '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');
diff --git a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
index 78e917c41179..eb0c7ca71726 100644
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
@@ -12,13 +12,13 @@
 '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,
@@ -28,15 +28,15 @@ function assert_progress(animation, currentTime, easingFunction) {
 
 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);
@@ -47,8 +47,8 @@ gEasingTests.forEach(options => {
 
 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;
@@ -65,14 +65,14 @@ gRoundtripEasings.forEach(easing => {
 });
 
 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,
diff --git a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/endDelay.html b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/endDelay.html
index 52ba3e85d318..940e6efbad1b 100644
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/endDelay.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/endDelay.html
@@ -11,13 +11,13 @@
 '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');
@@ -26,8 +26,8 @@ test(t => {
 }, '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,
@@ -35,25 +35,25 @@ test(t => {
 }, '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');
   });
@@ -68,9 +68,9 @@ async_test(t => {
    + ' 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 => {
diff --git a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/fill.html b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/fill.html
index 5d6302dc1ccd..044f18491a8b 100644
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/fill.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/fill.html
@@ -11,14 +11,14 @@
 '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,
diff --git a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterationStart.html b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterationStart.html
index f6637c785dec..979dde89b82c 100644
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterationStart.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterationStart.html
@@ -11,44 +11,44 @@
 '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);
@@ -56,8 +56,8 @@ test(t => {
 }, '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;
diff --git a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterations.html b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
index 54c8e14e1511..b8192e076999 100644
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
@@ -11,13 +11,13 @@
 '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,
@@ -25,8 +25,8 @@ test(t => {
 }, '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,
@@ -34,32 +34,32 @@ test(t => {
 }, '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();
 
diff --git a/testing/web-platform/tests/web-animations/interfaces/Document/getAnimations.html b/testing/web-platform/tests/web-animations/interfaces/Document/getAnimations.html
index 1c68f26631f3..cc201de9f5e6 100644
--- a/testing/web-platform/tests/web-animations/interfaces/Document/getAnimations.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Document/getAnimations.html
@@ -11,7 +11,7 @@
 <script>
 "use strict";
 
-var gKeyFrames = { 'marginLeft': ['100px', '200px'] };
+const gKeyFrames = { 'marginLeft': ['100px', '200px'] };
 
 test(t => {
   assert_equals(document.getAnimations().length, 0,
@@ -20,9 +20,9 @@ test(t => {
 }, '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');
 
@@ -33,17 +33,17 @@ test(t => {
 }, '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,
diff --git a/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/constructor.html b/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/constructor.html
index 8968ff4ce8e3..b7283947f876 100644
--- a/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/constructor.html
+++ b/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/constructor.html
@@ -10,28 +10,28 @@
 <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));
diff --git a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/composite.html b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/composite.html
index ace0cc5e48b1..6447dd2c07e5 100644
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/composite.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/composite.html
@@ -12,33 +12,33 @@
 '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');
diff --git a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
index 78d644d93f00..6273d7fa201a 100644
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
@@ -11,13 +11,13 @@
 <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");
@@ -26,7 +26,7 @@ test(t => {
 }, "values of getComputedTiming() when a KeyframeEffectReadOnly is " +
    "constructed without any KeyframeEffectOptions object");
 
-var gGetComputedTimingTests = [
+const gGetComputedTimingTests = [
   { desc:     "an empty KeyframeEffectOptions object",
     input:    { },
     expected: { } },
@@ -71,17 +71,17 @@ var gGetComputedTimingTests = [
 
 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"),
@@ -97,7 +97,7 @@ gGetComputedTimingTests.forEach(stest => {
      "constructed by " + stest.desc);
 });
 
-var gActiveDurationTests = [
+const gActiveDurationTests = [
   { desc:     "an empty KeyframeEffectOptions object",
     input:    { },
     expected: 0 },
@@ -144,9 +144,9 @@ var gActiveDurationTests = [
 
 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);
@@ -154,7 +154,7 @@ gActiveDurationTests.forEach(stest => {
   }, "getComputedTiming().activeDuration for " + stest.desc);
 });
 
-var gEndTimeTests = [
+const gEndTimeTests = [
   { desc:     "an empty KeyframeEffectOptions object",
     input:    { },
     expected: 0 },
@@ -196,9 +196,9 @@ var gEndTimeTests = [
 
 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);
diff --git a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
index c0aab1da5cf1..ed58d6d745ce 100644
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
@@ -10,8 +10,8 @@
 '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',
@@ -30,8 +30,8 @@ test(t => {
 }, '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',
@@ -51,12 +51,12 @@ test(t => {
 }, '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',
@@ -76,8 +76,8 @@ test(t => {
 }, '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',
@@ -97,8 +97,8 @@ test(t => {
 }, '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',
@@ -120,8 +120,8 @@ test(t => {
    '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',
@@ -141,9 +141,9 @@ test(t => {
 }, '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,
@@ -164,8 +164,8 @@ test(t => {
 }, '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',
@@ -185,12 +185,12 @@ test(t => {
 }, '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',
@@ -214,8 +214,8 @@ test(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',
@@ -235,8 +235,8 @@ test(t => {
 }, '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,
@@ -260,8 +260,8 @@ test(t => {
 }, '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',
@@ -281,8 +281,8 @@ test(t => {
 }, '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,
@@ -306,8 +306,8 @@ test(t => {
 }, '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,
@@ -331,8 +331,8 @@ test(t => {
 }, '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,
@@ -356,8 +356,8 @@ test(t => {
 }, '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,
@@ -381,8 +381,8 @@ test(t => {
 }, '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,
@@ -412,8 +412,8 @@ test(t => {
    '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,
@@ -437,8 +437,8 @@ test(t => {
 }, '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',
@@ -461,8 +461,8 @@ test(t => {
 }, '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',
@@ -487,8 +487,8 @@ test(t => {
 }, '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',
@@ -511,8 +511,8 @@ test(t => {
 }, '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',
@@ -535,8 +535,8 @@ test(t => {
 }, '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,
@@ -560,8 +560,8 @@ test(t => {
 }, '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,
@@ -589,8 +589,8 @@ test(t => {
 }, '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,
@@ -621,10 +621,10 @@ test(t => {
 }, '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,
@@ -657,8 +657,8 @@ test(t => {
    '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,
@@ -685,8 +685,8 @@ test(t => {
 }, '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, ' +
@@ -719,8 +719,8 @@ test(t => {
 }, '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,
@@ -744,8 +744,8 @@ test(t => {
 }, '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',
@@ -765,8 +765,8 @@ test(t => {
 }, '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',
@@ -789,12 +789,12 @@ test(t => {
 }, '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 =
@@ -812,12 +812,12 @@ test(t => {
 }, '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 =
diff --git a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
index a6280fac9fd3..06f4cb281736 100644
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
@@ -13,11 +13,11 @@
 <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(), []);
   });
@@ -25,7 +25,7 @@ test(t => {
 
 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);
@@ -33,7 +33,7 @@ gKeyframesTests.forEach(subtest => {
 
 gInvalidKeyframesTests.forEach(subtest => {
   test(t => {
-    var effect = new KeyframeEffect(target, {});
+    const effect = new KeyframeEffect(target, {});
     assert_throws(new TypeError, () => {
       effect.setKeyframes(subtest.input);
     });
diff --git a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/target.html b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/target.html
index fd883edf972b..97b80956e139 100644
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/target.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/target.html
@@ -11,14 +11,14 @@
 <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;
@@ -27,10 +27,10 @@ test(t => {
 }, '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;
@@ -42,9 +42,9 @@ test(t => {
 }, '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',
@@ -56,11 +56,11 @@ test(t => {
 }, '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',
diff --git a/testing/web-platform/tests/web-animations/resources/easing-tests.js b/testing/web-platform/tests/web-animations/resources/easing-tests.js
index f2d7a3ee5d5b..3fb0e7b79507 100644
--- a/testing/web-platform/tests/web-animations/resources/easing-tests.js
+++ b/testing/web-platform/tests/web-animations/resources/easing-tests.js
@@ -1,4 +1,4 @@
-var gEasingTests = [
+const gEasingTests = [
   {
     desc: 'step-start function',
     easing: 'step-start',
diff --git a/testing/web-platform/tests/web-animations/testcommon.js b/testing/web-platform/tests/web-animations/testcommon.js
index 58410f7603a2..d1ffe6bac201 100644
--- a/testing/web-platform/tests/web-animations/testcommon.js
+++ b/testing/web-platform/tests/web-animations/testcommon.js
@@ -10,12 +10,12 @@ policies and contribution forms [3].
 
 '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.
@@ -38,7 +38,7 @@ 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();
@@ -61,11 +61,11 @@ 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);
     }
@@ -80,11 +80,11 @@ 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();
@@ -94,21 +94,21 @@ function createPseudo(test, type) {
 // 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 {
@@ -135,14 +135,14 @@ function stepEnd(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;
   };
 }
@@ -164,7 +164,7 @@ function waitForAnimationFrames(frameCount) {
 // 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) {
@@ -191,11 +191,11 @@ function rotate3dToMatrix3d(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;
@@ -222,20 +222,20 @@ function rotate3dToMatrix(x, y, z, radian) {
 
 // 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);
   }
diff --git 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
index 3600d908f878..f76bb9091c68 100644
--- 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
@@ -11,12 +11,12 @@
 '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');
@@ -24,48 +24,48 @@ test(t => {
 }, '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);
@@ -73,11 +73,11 @@ test(t => {
    + ' 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);
@@ -85,11 +85,11 @@ test(t => {
    + ' 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);
@@ -97,11 +97,11 @@ test(t => {
    + ' 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);
@@ -109,11 +109,11 @@ test(t => {
    + ' 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);
@@ -122,10 +122,10 @@ test(t => {
    + ' 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);
@@ -134,7 +134,7 @@ test(t => {
 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');
 
diff --git 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
index 3e740985106a..0ac920d56a4f 100644
--- 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
@@ -39,8 +39,8 @@ function runTests(tests, description) {
 }
 
 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);
diff --git 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
index 579e103ae1bb..54455a15001a 100644
--- 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
@@ -10,15 +10,18 @@
 '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');
 
diff --git 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
index 35efa2dfb282..10e533f3c6cf 100644
--- 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
@@ -48,7 +48,7 @@ function assert_phase_at_time(animation, phase, currentTime) {
 }
 
 test(t => {
-  var animation = createDiv(t).animate(null, 1);
+  const animation = createDiv(t).animate(null, 1);
 
   [ { currentTime: -1, phase: 'before' },
     { currentTime:  0, phase: 'active' },
@@ -59,7 +59,7 @@ test(t => {
 }, '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' },
@@ -70,7 +70,7 @@ test(t => {
 }, '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' },
@@ -81,7 +81,7 @@ test(t => {
 }, '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' },
@@ -93,7 +93,7 @@ test(t => {
 }, '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' },
@@ -106,7 +106,7 @@ test(t => {
    + ' 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'  },
@@ -118,7 +118,7 @@ test(t => {
    + ' 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' },
@@ -130,9 +130,9 @@ test(t => {
    + ' 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' },
@@ -144,9 +144,9 @@ test(t => {
    + ' 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' },
@@ -158,9 +158,9 @@ test(t => {
    + ' 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' },
@@ -174,7 +174,7 @@ test(t => {
    + ' duration');
 
 test(t => {
-  var animation = createDiv(t).animate(null, 1);
+  const animation = createDiv(t).animate(null, 1);
   animation.playbackRate = -1;
 
   [ { currentTime: -1, phase: 'before' },
diff --git 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
index cb11d1744722..5457e40c3202 100644
--- 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
@@ -31,7 +31,7 @@ promise_test(t => {
   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',
diff --git 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
index b4cb11f1688e..680d8ad93034 100644
--- 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
@@ -11,7 +11,7 @@
 'use strict';
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);
 
@@ -22,7 +22,7 @@ test(t => {
 }, '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);
 
@@ -36,7 +36,7 @@ promise_test(t => {
 // 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);
 
@@ -46,16 +46,16 @@ test(t => {
    '(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');
@@ -63,7 +63,7 @@ test(t => {
    '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))
diff --git 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
index 3c1bf0580bed..43e9a6be8e61 100644
--- 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
@@ -12,7 +12,7 @@
 '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();
@@ -20,7 +20,7 @@ test(t => {
 }, '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();
@@ -28,7 +28,7 @@ test(t => {
 }, '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);
diff --git 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
index 23d7929cf83a..157e598f9633 100644
--- 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
@@ -12,9 +12,9 @@
 "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).
@@ -22,7 +22,7 @@ promise_test(t => {
     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');
@@ -30,9 +30,9 @@ promise_test(t => {
 }, '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();
 
@@ -46,8 +46,8 @@ promise_test(t => {
 }, '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();
 
@@ -57,9 +57,9 @@ test(t => {
 }, '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');
 
@@ -70,10 +70,10 @@ test(t => {
 }, '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();
@@ -85,8 +85,8 @@ promise_test(t => {
 }, '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();
 
@@ -97,8 +97,8 @@ test(t => {
    '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();
@@ -110,8 +110,8 @@ test(t => {
    '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();
@@ -123,8 +123,8 @@ test(t => {
    '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();
@@ -136,9 +136,9 @@ test(t => {
    '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',
@@ -150,8 +150,8 @@ test(t => {
    '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) { }
@@ -160,9 +160,9 @@ test(t => {
 }, '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;
 
@@ -176,9 +176,9 @@ test(t => {
    '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();
@@ -192,8 +192,8 @@ test(t => {
    '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();
@@ -207,8 +207,8 @@ test(t => {
    '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(); });
diff --git 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
index 666a12ff3043..48071c04360e 100644
--- 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
@@ -14,7 +14,7 @@ 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);
 
@@ -44,7 +44,7 @@ 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);
 
@@ -65,7 +65,7 @@ test(t => {
    + ' 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);
 
@@ -91,7 +91,7 @@ test(t => {
 }, '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);
 
@@ -112,11 +112,11 @@ test(t => {
 }, '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
@@ -141,11 +141,11 @@ promise_test(t => {
 }, '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
@@ -169,7 +169,7 @@ promise_test(t => {
 }, '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);
 
@@ -188,7 +188,7 @@ promise_test(t => {
 
   // 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'
diff --git 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
index 30563be238b8..8f835cc86851 100644
--- 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
@@ -11,11 +11,11 @@
 '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',
@@ -30,7 +30,7 @@ promise_test(t => {
    'tasks and ready promise is rejected');
 
 promise_test(t => {
-  var anim = new Animation();
+  const anim = new Animation();
   anim.pause();
   assert_equals(anim.playState, 'pending');
 
@@ -46,7 +46,7 @@ promise_test(t => {
    'as soon as animation is ready.');
 
 promise_test(t => {
-  var anim = new Animation();
+  const anim = new Animation();
   anim.play();
   assert_equals(anim.playState, 'pending');
 
@@ -62,9 +62,9 @@ promise_test(t => {
    '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;
@@ -75,10 +75,10 @@ promise_test(t => {
    '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,
diff --git 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
index 50bd3d420915..63662fdb1264 100644
--- 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
@@ -17,7 +17,7 @@
 // ---------------------------------------------------------------------
 
 test(t => {
-  var animation =
+  const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.currentTime = 50 * MS_PER_SEC;
@@ -30,7 +30,7 @@ test(t => {
 }, '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;
@@ -44,7 +44,7 @@ test(t => {
    + ' 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');
@@ -56,7 +56,7 @@ test(t => {
    + ' 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;
@@ -69,7 +69,7 @@ test(t => {
    + ' 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;
@@ -82,7 +82,7 @@ test(t => {
    + ' 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();
@@ -94,7 +94,7 @@ test(t => {
 }, '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();
@@ -109,7 +109,7 @@ promise_test(t => {
    + ' 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;
@@ -123,7 +123,7 @@ test(t => {
 }, '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;
@@ -146,7 +146,7 @@ promise_test(t => {
 // ---------------------------------------------------------------------
 
 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;
@@ -159,10 +159,10 @@ test(t => {
 }, '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');
 
@@ -173,10 +173,10 @@ test(t => {
 }, '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');
 
@@ -187,7 +187,7 @@ test(t => {
 }, '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');
@@ -199,7 +199,7 @@ test(t => {
 }, '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;
@@ -208,7 +208,7 @@ test(t => {
 }, '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;
@@ -222,7 +222,7 @@ promise_test(t => {
    + ' 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;
@@ -235,7 +235,7 @@ test(t => {
 }, '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;
@@ -253,10 +253,10 @@ promise_test(t => {
    + ' 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();
diff --git 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
index e05739e6b66c..c77c4d71c85e 100644
--- 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
@@ -21,7 +21,7 @@
 
 // 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
@@ -38,7 +38,7 @@ promise_test(t => {
 
 // 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);
@@ -60,7 +60,7 @@ promise_test(t => {
 
 // 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);
@@ -76,7 +76,7 @@ promise_test(t => {
 
 // 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(() => {
@@ -91,7 +91,7 @@ promise_test(t => {
 
 // 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(() => {
@@ -108,7 +108,7 @@ promise_test(t => {
 
 // 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(() => {
@@ -127,7 +127,7 @@ promise_test(t => {
 
 // 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.
@@ -147,7 +147,7 @@ promise_test(t => {
 
 // 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;
@@ -178,7 +178,7 @@ promise_test(t => {
 
 // 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;
@@ -194,7 +194,7 @@ promise_test(t => {
 
 // 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;
@@ -209,7 +209,7 @@ promise_test(t => {
 
 // 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;
@@ -224,7 +224,7 @@ promise_test(t => {
 
 // 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;
@@ -240,7 +240,7 @@ promise_test(t => {
 // 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.
@@ -260,7 +260,7 @@ promise_test(t => {
 // 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();
@@ -279,7 +279,7 @@ test(t => {
 
 // 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)
@@ -298,7 +298,7 @@ promise_test(t => {
 
 // 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"
@@ -318,14 +318,14 @@ test(t => {
 // --------------------------------------------------------------------
 
 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(
@@ -338,14 +338,14 @@ promise_test(t => {
    + ' 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);
@@ -353,11 +353,11 @@ promise_test(t => {
 }, '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();
@@ -367,8 +367,8 @@ promise_test(t => {
    + ' 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;
@@ -377,8 +377,8 @@ promise_test(t => {
 }, '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();
@@ -387,7 +387,7 @@ promise_test(t => {
 }, '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 => {
@@ -397,7 +397,7 @@ async_test(t => {
 }, '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 => {
diff --git 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
index 00534cea9bee..0d2b0abb1dfb 100644
--- 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
@@ -35,7 +35,7 @@ gEasingTests.forEach(params => {
 // 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:     {
@@ -293,8 +293,8 @@ var gStepAndFramesTimingFunctionTests = [
 
 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,