Bug 1415448 - Replace var with const/let in web-platform-tests/web-animations; r=hiro

Because 'const' is longer than 'var', in quite a number of places this patch
also updates the indentation of subsequent lines.

Also, in a number of cases this means the line now needs to be wrapped. In
general I've used 'prettier' to do the line wrapping which means that the line
wrapping style differs a little from the existing code (which is already quite
inconsistent). Hopefully in the future we can use prettier on all files to make
this more consistent.

Also, in some cases, to avoid further line wrapping, this patch uses shorthand
property names (specifically replacing 'composite: composite' with just
'composite'). This appears to be supported in all browsers like to implement Web
Animations (Firefox 33+, Chrome 47+, Edge, Safari 9+).

MozReview-Commit-ID: 2xEaeZSYjlc

--HG--
extra : rebase_source : 602d73233957e4e94a1ef48bdd710aea153bf846

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;

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;

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' });
 

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;

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;

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',

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);

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');

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'

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 ' +

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');

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',

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();

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');

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;
   });

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');
   });
 

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');

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;
   });

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');
   };

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();

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

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',

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;

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,

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);

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;

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');

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');

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,

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 => {

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,

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;

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();
 

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,

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));

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');

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);

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 =

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);
     });

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',

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',

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);
   }

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');
 

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);

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');
 

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' },

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',

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))

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);

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(); });

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'

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,

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();

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 => {

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,