Bug 1415448 - Use for...of instead of forEach in web-platform-tests/web-animations; r?hiro draft
authorBrian Birtles <birtles@gmail.com>
Thu, 16 Nov 2017 12:38:06 +0900
changeset 698855 f6ae88fa9ad2e46464ee491ca649569d3ec03a3c
parent 698854 685b344ced911811482c3f55968e86fe2dd7e08f
child 698856 a9d6243fb68460245525f170dc982921cfcf7ba7
push id89374
push userbbirtles@mozilla.com
push dateThu, 16 Nov 2017 05:02:29 +0000
reviewershiro
bugs1415448
milestone59.0a1
Bug 1415448 - Use for...of instead of forEach in web-platform-tests/web-animations; r?hiro MozReview-Commit-ID: CEMNCSEmpgr
testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property.html
testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property.html
testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property.html
testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html
testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html
testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
testing/web-platform/tests/web-animations/interfaces/Animation/constructor.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/fill.html
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/constructor.html
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html
testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html
testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/accumulation-per-property.html
@@ -17,19 +17,18 @@ html {
 <script>
 'use strict';
 
 for (const property in gCSSProperties) {
   if (!isSupported(property)) {
     continue;
   }
 
-  const animationTypes = gCSSProperties[property].types;
   const setupFunction = gCSSProperties[property].setup;
-  animationTypes.forEach(animationType => {
+  for (const animationType of gCSSProperties[property].types) {
     let typeObject;
     let animationTypeString;
     if (typeof animationType === 'string') {
       typeObject = types[animationType];
       animationTypeString = animationType;
     } else if (typeof animationType === 'object' &&
                animationType.type && typeof animationType.type === 'string') {
       typeObject = types[animationType.type];
@@ -48,11 +47,11 @@ for (const property in gCSSProperties) {
        + ' function');
 
     if (typeObject.testAccumulation &&
         typeof typeObject.testAccumulation === 'function') {
       typeObject.testAccumulation(property,
                               setupFunction,
                               animationType.options);
     }
-  });
+  }
 }
 </script>
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/addition-per-property.html
@@ -17,19 +17,18 @@ html {
 <script>
 'use strict';
 
 for (const property in gCSSProperties) {
   if (!isSupported(property)) {
     continue;
   }
 
-  const animationTypes = gCSSProperties[property].types;
   const setupFunction = gCSSProperties[property].setup;
-  animationTypes.forEach(animationType => {
+  for (const animationType of gCSSProperties[property].types) {
     let typeObject;
     let animationTypeString;
     if (typeof animationType === 'string') {
       typeObject = types[animationType];
       animationTypeString = animationType;
     } else if (typeof animationType === 'object' &&
                animationType.type && typeof animationType.type === 'string') {
       typeObject = types[animationType.type];
@@ -48,11 +47,11 @@ for (const property in gCSSProperties) {
        + ' function');
 
     if (typeObject.testAddition &&
         typeof typeObject.testAddition === 'function') {
       typeObject.testAddition(property,
                               setupFunction,
                               animationType.options);
     }
-  });
+  }
 }
 </script>
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/interpolation-per-property.html
@@ -17,19 +17,18 @@ html {
 <script>
 'use strict';
 
 for (const property in gCSSProperties) {
   if (!isSupported(property)) {
     continue;
   }
 
-  const animationTypes = gCSSProperties[property].types;
   const setupFunction = gCSSProperties[property].setup;
-  animationTypes.forEach(animationType => {
+  for (const animationType of gCSSProperties[property].types) {
     let typeObject;
     let animationTypeString;
     if (typeof animationType === 'string') {
       typeObject = types[animationType];
       animationTypeString = animationType;
     } else if (typeof animationType === 'object' &&
                animationType.type && typeof animationType.type === 'string') {
       typeObject = types[animationType.type];
@@ -48,11 +47,11 @@ for (const property in gCSSProperties) {
        + ' function');
 
     if (typeObject.testInterpolation &&
         typeof typeObject.testInterpolation === 'function') {
       typeObject.testInterpolation(property,
                                    setupFunction,
                                    animationType.options);
     }
-  });
+  }
 }
 </script>
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -1472,62 +1472,62 @@ const gCSSProperties = {
   },
 };
 
 function testAnimationSamples(animation, idlName, testSamples) {
   const type = animation.effect.target.type;
   const target = animation.effect.target.constructor.name === 'CSSPseudoElement'
                  ? animation.effect.target.parentElement
                  : animation.effect.target;
-  testSamples.forEach(testSample => {
+  for (const testSample of testSamples) {
     animation.currentTime = testSample.time;
     assert_equals(getComputedStyle(target, type)[idlName],
                   testSample.expected,
                   `The value should be ${testSample.expected}` +
                   ` at ${testSample.time}ms`);
-  });
+  }
 }
 
 function toOrderedArray(string) {
   return string.split(/\s*,\s/).sort();
 }
 
 // This test is for some list-based CSS properties such as font-variant-settings
 // don't specify an order for serializing computed values.
 // This test is for such the property.
 function testAnimationSamplesWithAnyOrder(animation, idlName, testSamples) {
   const type = animation.effect.target.type;
   const target = animation.effect.target.constructor.name === 'CSSPseudoElement'
                  ? animation.effect.target.parentElement
                  : animation.effect.target;
-  testSamples.forEach(testSample => {
+  for (const testSample of testSamples) {
     animation.currentTime = testSample.time;
 
     // Convert to array and sort the expected and actual value lists first
     // before comparing them.
     const computedValues =
       toOrderedArray(getComputedStyle(target, type)[idlName]);
     const expectedValues = toOrderedArray(testSample.expected);
 
     assert_array_equals(computedValues, expectedValues,
                         `The computed values should be ${expectedValues}` +
                         ` at ${testSample.time}ms`);
-  });
+  }
 }
 
 function testAnimationSampleMatrices(animation, idlName, testSamples) {
   const target = animation.effect.target;
-  testSamples.forEach(function(testSample) {
+  for (const testSample of testSamples) {
     animation.currentTime = testSample.time;
     const actual = getComputedStyle(target)[idlName];
     const expected = createMatrixFromArray(testSample.expected);
     assert_matrix_equals(actual, expected,
                          `The value should be ${expected} at`
                          + ` ${testSample.time}ms but got ${actual}`);
-  });
+  }
 }
 
 function createTestElement(t, setup) {
   return setup ? setup(t) : createElement(t);
 }
 
 function isSupported(property) {
   const testKeyframe = new TestKeyframe(propertyToIDL(property));
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -1,13 +1,13 @@
 'use strict';
 
 const discreteType = {
   testInterpolation: (property, setup, options) => {
-    options.forEach(keyframes => {
+    for (const keyframes of options) {
       const [ from, to ] = keyframes;
       test(t => {
         const idlName = propertyToIDL(property);
         const target = createTestElement(t, setup);
         const animation = target.animate({ [idlName]: [from, to] },
                                          { duration: 1000, fill: 'both' });
         testAnimationSamples(animation, idlName,
                              [{ time: 0,    expected: from.toLowerCase() },
@@ -53,21 +53,21 @@ const discreteType = {
           { duration: 1000, fill: 'both' }
         );
         testAnimationSamples(animation, idlName,
                              [{ time: 0,    expected: from.toLowerCase() },
                               { time: 940,  expected: from.toLowerCase() },
                               { time: 960,  expected: to.toLowerCase() }]);
       }, `${property} uses discrete animation when animating between`
          + ` "${from}" and "${to}" with keyframe easing`);
-    });
+    }
   },
 
   testAdditionOrAccumulation: (property, setup, options, composite) => {
-    options.forEach(keyframes => {
+    for (const keyframes of options) {
       const [ from, to ] = keyframes;
       test(t => {
         const idlName = propertyToIDL(property);
         const target = createTestElement(t, setup);
         target.animate({ [idlName]: [from, from] }, 1000);
         const animation = target.animate(
           { [idlName]: [to, to] },
           { duration: 1000, composite }
@@ -82,17 +82,17 @@ const discreteType = {
         target.animate({ [idlName]: [to, to] }, 1000);
         const animation = target.animate(
           { [idlName]: [from, from] },
           { duration: 1000, composite }
         );
         testAnimationSamples(animation, idlName,
                              [{ time: 0, expected: from.toLowerCase() }]);
       }, `${property}: "${from}" onto "${to}"`);
-    });
+    }
   },
 
   testAddition: function(property, setup, options) {
     this.testAdditionOrAccumulation(property, setup, options, 'add');
   },
 
   testAccumulation: function(property, setup, options) {
     this.testAdditionOrAccumulation(property, setup, options, 'accumulate');
--- a/testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html
+++ b/testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html
@@ -4,17 +4,17 @@
 <link rel="help" href="https://w3c.github.io/web-animations/#effect-composition">
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="../../testcommon.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 
-[ 'accumulate', 'add' ].forEach(composite => {
+for (const composite of ['accumulate', 'add']) {
   test(t => {
     const div = createDiv(t);
     div.style.marginLeft = '10px';
     const anim =
       div.animate({ marginLeft: ['0px', '10px'], composite }, 100);
 
     anim.currentTime = 50;
     assert_equals(getComputedStyle(div).marginLeft, '15px',
@@ -26,19 +26,19 @@
     const anims = [];
     anims.push(div.animate({ marginLeft: ['10px', '20px'],
                              composite: 'replace' },
                            100));
     anims.push(div.animate({ marginLeft: ['0px', '10px'],
                              composite },
                            100));
 
-    anims.forEach(anim => {
+    for (const anim of anims) {
       anim.currentTime = 50;
-    });
+    }
 
     assert_equals(getComputedStyle(div).marginLeft, '20px',
       'Animated style at 50%');
   }, `${composite} onto an underlying animation value`);
 
   test(t => {
     const div = createDiv(t);
     div.style.marginLeft = '10px';
@@ -75,11 +75,11 @@
                   100);
 
     anim.effect.composite = composite;
     anim.currentTime = 50;                       // (10 + (10 + 20)) * 0.5
     assert_equals(getComputedStyle(div).marginLeft, '20px',
       'Animated style at 50%');
   }, 'unspecified composite mode on a keyframe is overriden by setting'
       + ` ${composite} of the effect`);
-});
+}
 
 </script>
--- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html
@@ -8,76 +8,76 @@
 <script src="../../resources/easing-tests.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 
 // Test that applying easing to keyframes is applied as expected
 
-gEasingTests.forEach(params => {
+for (const params of gEasingTests) {
   test(t => {
     const target = createDiv(t);
     const anim   = target.animate([ { width: '0px' },
                                     // We put the easing on the second keyframe
                                     // so we can test that it is only applied
                                     // to the specified keyframe.
                                     { width: '100px', easing: params.easing },
                                     { width: '200px' } ],
                                   { duration: 2000,
                                     fill: 'forwards' });
 
-    [ 0, 999, 1000, 1100, 1500, 2000 ].forEach(sampleTime => {
+    for (const sampleTime of [0, 999, 1000, 1100, 1500, 2000]) {
       anim.currentTime = sampleTime;
 
       const portion = (sampleTime - 1000) / 1000;
       const expectedWidth = sampleTime < 1000
                             ? sampleTime / 10 // first segment is linear
                             : 100 + params.easingFunction(portion) * 100;
       assert_approx_equals(parseFloat(getComputedStyle(target).width),
                            expectedWidth,
                            0.01,
                            'The width should be approximately ' +
                            `${expectedWidth} at ${sampleTime}ms`);
-    });
+    }
   }, `A ${params.desc} on a keyframe affects the resulting style`);
-});
+}
 
 // Test that a linear-equivalent cubic-bezier easing applied to a keyframe does
 // not alter (including clamping) the result.
 
-gEasingTests.forEach(params => {
+for (const params of gEasingTests) {
   const linearEquivalentEasings = [ 'cubic-bezier(0, 0, 0, 0)',
                                     'cubic-bezier(1, 1, 1, 1)' ];
   test(t => {
-    linearEquivalentEasings.forEach(linearEquivalentEasing => {
+    for (const linearEquivalentEasing of linearEquivalentEasings) {
       const timing = { duration: 1000,
                        fill: 'forwards',
                        easing: params.easing };
 
       const linearTarget = createDiv(t);
       const linearAnim = linearTarget.animate([ { width: '0px' },
                                                 { width: '100px' } ],
                                               timing);
 
       const equivalentTarget = createDiv(t);
       const equivalentAnim =
         equivalentTarget.animate([ { width: '0px',
                                      easing: linearEquivalentEasing },
                                    { width: '100px' } ],
                                  timing);
 
-      [ 0, 250, 500, 750, 1000 ].forEach(sampleTime => {
+      for (const sampleTime of [0, 250, 500, 750, 1000]) {
         linearAnim.currentTime = sampleTime;
         equivalentAnim.currentTime = sampleTime;
 
         assert_equals(getComputedStyle(linearTarget).width,
                       getComputedStyle(equivalentTarget).width,
                       `The 'width' of the animated elements should be equal ` +
                       `at ${sampleTime}ms`);
-      });
-    });
+      }
+    }
   }, 'Linear-equivalent cubic-bezier keyframe easing applied to an effect ' +
      `with a ${params.desc} does not alter the result`);
-});
+}
 
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
@@ -68,50 +68,50 @@ test(t => {
   assert_not_equals(Object.getPrototypeOf(anim.effect.timing),
                     AnimationEffectTiming.prototype,
                     'The prototype of the created AnimationEffectTiming is NOT'
                     + ' that of the current global');
 }, 'Element.animate() creates an Animation object with a KeyframeEffect'
    + ' whose AnimationEffectTiming object is created in the relevant realm'
    + ' of the target element');
 
-gEmptyKeyframeListTests.forEach(subTest => {
+for (const subtest of gEmptyKeyframeListTests) {
   test(t => {
     const div = createDiv(t);
-    const anim = div.animate(subTest, 2000);
+    const anim = div.animate(subtest, 2000);
     assert_not_equals(anim, null);
   }, 'Element.animate() accepts empty keyframe lists ' +
-     `(input: ${JSON.stringify(subTest)})`);
-});
+     `(input: ${JSON.stringify(subtest)})`);
+}
 
-gKeyframesTests.forEach(subtest => {
+for (const subtest of gKeyframesTests) {
   test(t => {
     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 => {
+for (const subtest of gInvalidKeyframesTests) {
   test(t => {
     const div = createDiv(t);
     assert_throws(new TypeError, () => {
       div.animate(subtest.input, 2000);
     });
   }, `Element.animate() does not accept ${subtest.desc}`);
-});
+}
 
-gInvalidEasings.forEach(invalidEasing => {
+for (const invalidEasing of gInvalidEasings) {
   test(t => {
     const div = createDiv(t);
     assert_throws(new TypeError, () => {
       div.animate({ easing: invalidEasing }, 2000);
     });
   }, `Element.animate() does not accept invalid easing: '${invalidEasing}'`);
-});
+}
 
 test(t => {
   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');
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/constructor.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/constructor.html
@@ -59,32 +59,32 @@ const gTestArguments = [
   {
     createEffect: createEffect,
     expectedTimeline: document.timeline,
     expectedTimelineDescription: 'document.timeline',
     description: 'with non-null effect and no timeline parameter'
   },
 ];
 
-gTestArguments.forEach(args => {
+for (const args of gTestArguments) {
   test(t => {
     const effect = args.createEffect();
     const animation = new Animation(effect, args.timeline);
 
     assert_not_equals(animation, null,
                       'An animation sohuld be created');
     assert_equals(animation.effect, effect,
                   'Animation returns the same effect passed to ' +
                   'the Constructor');
     assert_equals(animation.timeline, args.expectedTimeline,
                   'Animation timeline should be ' + args.expectedTimelineDescription);
     assert_equals(animation.playState, 'idle',
                   'Animation.playState should be initially \'idle\'');
   }, 'Animation can be constructed ' + args.description);
-});
+}
 
 test(t => {
   const effect = new KeyframeEffectReadOnly(null,
                                             { left: ['10px', '20px'] },
                                             { duration: 10000,
                                               fill: 'forwards' });
   const anim = new Animation(effect, document.timeline);
   anim.pause();
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/direction.html
@@ -15,21 +15,21 @@ test(t => {
   assert_equals(anim.effect.timing.direction, 'normal');
 }, 'Has the default value \'normal\'');
 
 test(t => {
   const div = createDiv(t);
   const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
 
   const directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
-  directions.forEach(direction => {
+  for (const direction of directions) {
     anim.effect.timing.direction = direction;
     assert_equals(anim.effect.timing.direction, direction,
                   `set direction to ${direction}`);
-  });
+  }
 }, 'Can be set to each of the possible keywords');
 
 test(t => {
   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');
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
@@ -21,53 +21,53 @@ function assert_progress(animation, curr
   const portion = currentTime / animation.effect.timing.duration;
   assert_approx_equals(animation.effect.getComputedTiming().progress,
                        easingFunction(portion),
                        0.01,
                        'The progress of the animation should be approximately'
                        + ` ${easingFunction(portion)} at ${currentTime}ms`);
 }
 
-gEasingTests.forEach(options => {
+for (const options of gEasingTests) {
   test(t => {
     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);
 
     const easing = options.easingFunction;
     assert_progress(anim, 0, easing);
     assert_progress(anim, 250 * MS_PER_SEC, easing);
     assert_progress(anim, 500 * MS_PER_SEC, easing);
     assert_progress(anim, 750 * MS_PER_SEC, easing);
     assert_progress(anim, 1000 * MS_PER_SEC, easing);
   }, options.desc);
-});
+}
 
-gInvalidEasings.forEach(invalidEasing => {
+for (const invalidEasing of gInvalidEasings) {
   test(t => {
     const div = createDiv(t);
     const anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
     assert_throws({ name: 'TypeError' },
                   () => {
                     anim.effect.timing.easing = invalidEasing;
                   });
   }, `Throws on invalid easing: '${invalidEasing}'`);
-});
+}
 
-gRoundtripEasings.forEach(easing => {
+for (const easing of gRoundtripEasings) {
   test(t => {
     const anim = createDiv(t).animate(null);
     anim.effect.timing.easing = easing;
     assert_equals(anim.effect.timing.easing, easing);
   }, `Canonical easing '${easing}' is returned as set`);
-});
+}
 
 test(t => {
   const delay = 1000 * MS_PER_SEC;
 
   const target = createDiv(t);
   const anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
                               { duration: 1000 * MS_PER_SEC,
                                 fill: 'both',
--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/fill.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/fill.html
@@ -10,21 +10,21 @@
 <script>
 'use strict';
 
 test(t => {
   const anim = createDiv(t).animate(null);
   assert_equals(anim.effect.timing.fill, 'auto');
 }, 'Has the default value \'auto\'');
 
-['none', 'forwards', 'backwards', 'both', ].forEach(fill => {
+for (const fill of ['none', 'forwards', 'backwards', 'both']) {
   test(t => {
     const div = createDiv(t);
     const anim = div.animate({ opacity: [ 0, 1 ] }, 100);
     anim.effect.timing.fill = fill;
     assert_equals(anim.effect.timing.fill, fill, 'set fill ' + fill);
     assert_equals(anim.effect.getComputedTiming().fill, fill,
                   'getComputedTiming() after set fill ' + fill);
   }, `Can set fill to ${fill}`);
-});
+}
 
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/constructor.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/constructor.html
@@ -15,120 +15,120 @@
 <div id="log"></div>
 <div id="target"></div>
 <script>
 'use strict';
 
 const target = document.getElementById('target');
 
 test(t => {
-  gEmptyKeyframeListTests.forEach(frames => {
+  for (const frames of gEmptyKeyframeListTests) {
     assert_equals(new KeyframeEffectReadOnly(target, frames)
                         .getKeyframes().length,
                   0, `number of frames for ${JSON.stringify(frames)}`);
-  });
+  }
 }, 'A KeyframeEffectReadOnly can be constructed with no frames');
 
 test(t => {
-  gEasingParsingTests.forEach(subtest => {
+  for (const subtest of gEasingParsingTests) {
     const easing = subtest[0];
     const expected = subtest[1];
     const effect = new KeyframeEffectReadOnly(target, {
       left: ['10px', '20px']
     }, { easing: easing });
     assert_equals(effect.timing.easing, expected,
                   `resulting easing for '${easing}'`);
-  });
+  }
 }, 'easing values are parsed correctly when passed to the ' +
    'KeyframeEffectReadOnly constructor in KeyframeEffectOptions');
 
 test(t => {
-  gInvalidEasings.forEach(invalidEasing => {
+  for (const invalidEasing of gInvalidEasings) {
     assert_throws(new TypeError, () => {
       new KeyframeEffectReadOnly(target, null, { easing: invalidEasing });
     }, `TypeError is thrown for easing '${invalidEasing}'`);
-  });
+  }
 }, 'Invalid easing values are correctly rejected when passed to the ' +
    'KeyframeEffectReadOnly constructor in KeyframeEffectOptions');
 
 test(t => {
   const getKeyframe =
     composite => ({ left: [ '10px', '20px' ], composite: composite });
-  gGoodKeyframeCompositeValueTests.forEach(composite => {
+  for (const composite of gGoodKeyframeCompositeValueTests) {
     const effect = new KeyframeEffectReadOnly(target, getKeyframe(composite));
     assert_equals(effect.getKeyframes()[0].composite, composite,
                   `resulting composite for '${composite}'`);
-  });
-  gBadCompositeValueTests.forEach(composite => {
+  }
+  for (const composite of gBadCompositeValueTests) {
     assert_throws(new TypeError, () => {
       new KeyframeEffectReadOnly(target, getKeyframe(composite));
     });
-  });
+  }
 }, 'composite values are parsed correctly when passed to the ' +
    'KeyframeEffectReadOnly constructor in property-indexed keyframes');
 
 test(t => {
   const getKeyframes = composite =>
     [
       { offset: 0, left: '10px', composite: composite },
       { offset: 1, left: '20px' }
     ];
-  gGoodKeyframeCompositeValueTests.forEach(composite => {
+  for (const composite of gGoodKeyframeCompositeValueTests) {
     const effect = new KeyframeEffectReadOnly(target, getKeyframes(composite));
     assert_equals(effect.getKeyframes()[0].composite, composite,
                   `resulting composite for '${composite}'`);
-  });
-  gBadCompositeValueTests.forEach(composite => {
+  }
+  for (const composite of gBadCompositeValueTests) {
     assert_throws(new TypeError, () => {
       new KeyframeEffectReadOnly(target, getKeyframes(composite));
     });
-  });
+  }
 }, 'composite values are parsed correctly when passed to the ' +
    'KeyframeEffectReadOnly constructor in regular keyframes');
 
 test(t => {
-  gGoodOptionsCompositeValueTests.forEach(composite => {
+  for (const composite of gGoodOptionsCompositeValueTests) {
     const effect = new KeyframeEffectReadOnly(target, {
       left: ['10px', '20px']
     }, { composite: composite });
     assert_equals(effect.getKeyframes()[0].composite, undefined,
                   `resulting composite for '${composite}'`);
-  });
-  gBadCompositeValueTests.forEach(composite => {
+  }
+  for (const composite of gBadCompositeValueTests) {
     assert_throws(new TypeError, () => {
       new KeyframeEffectReadOnly(target, {
         left: ['10px', '20px']
       }, { composite: composite });
     });
-  });
+  }
 }, 'composite value is absent if the composite operation specified on the ' +
    'keyframe effect is being used');
 
-gKeyframesTests.forEach(subtest => {
+for (const subtest of gKeyframesTests) {
   test(t => {
     const effect = new KeyframeEffectReadOnly(target, subtest.input);
     assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
   }, `A KeyframeEffectReadOnly can be constructed with ${subtest.desc}`);
 
   test(t => {
     const effect = new KeyframeEffectReadOnly(target, subtest.input);
     const secondEffect =
       new KeyframeEffectReadOnly(target, effect.getKeyframes());
     assert_frame_lists_equal(secondEffect.getKeyframes(),
                              effect.getKeyframes());
   }, `A KeyframeEffectReadOnly constructed with ${subtest.desc} roundtrips`);
-});
+}
 
-gInvalidKeyframesTests.forEach(subtest => {
+for (const subtest of gInvalidKeyframesTests) {
   test(t => {
     assert_throws(new TypeError, () => {
       new KeyframeEffectReadOnly(target, subtest.input);
     });
   }, `KeyframeEffectReadOnly constructor throws with ${subtest.desc}`);
-});
+}
 
 test(t => {
   const effect = new KeyframeEffectReadOnly(target,
                                             { left: ['10px', '20px'] });
 
   const timing = effect.timing;
   assert_equals(timing.delay, 0, 'default delay');
   assert_equals(timing.endDelay, 0, 'default endDelay');
@@ -140,17 +140,17 @@ test(t => {
   assert_equals(timing.easing, 'linear', 'default easing');
 
   assert_equals(effect.composite, 'replace', 'default composite');
   assert_equals(effect.iterationComposite, 'replace',
                 'default iterationComposite');
 }, 'A KeyframeEffectReadOnly constructed without any ' +
    'KeyframeEffectOptions object');
 
-gKeyframeEffectOptionTests.forEach(subtest => {
+for (const subtest of gKeyframeEffectOptionTests) {
   test(t => {
     const effect = new KeyframeEffectReadOnly(target,
                                               { left: ['10px', '20px'] },
                                               subtest.input);
 
     // Helper function to provide default expected values when the test does
     // not supply them.
     const expected = (field, defaultValue) => {
@@ -165,27 +165,27 @@ gKeyframeEffectOptionTests.forEach(subte
     assert_equals(timing.iterations, expected('iterations', 1),
                   'timing iterations');
     assert_equals(timing.duration, expected('duration', 'auto'),
                   'timing duration');
     assert_equals(timing.direction, expected('direction', 'normal'),
                   'timing direction');
 
   }, `A KeyframeEffectReadOnly constructed by ${subtest.desc}`);
-});
+}
 
-gInvalidKeyframeEffectOptionTests.forEach(subtest => {
+for (const subtest of gInvalidKeyframeEffectOptionTests) {
   test(t => {
     assert_throws(new TypeError, () => {
       new KeyframeEffectReadOnly(target,
                                  { left: ['10px', '20px'] },
                                  subtest.input);
     });
   }, `Invalid KeyframeEffectReadOnly option by ${subtest.desc}`);
-});
+}
 
 test(t => {
   const effect = new KeyframeEffectReadOnly(null,
                                             { left: ['10px', '20px'] },
                                             { duration: 100 * MS_PER_SEC,
                                               fill: 'forwards' });
   assert_equals(effect.target, null,
                 'Effect created with null target has correct target');
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
@@ -64,17 +64,17 @@ const gGetComputedTimingTests = [
   { desc:     'an auto fill',
     input:    { fill: 'auto' },
     expected: { fill: 'none' } },
   { desc:     'a forwards fill',
     input:    { fill: 'forwards' },
     expected: { fill: 'forwards' } }
 ];
 
-gGetComputedTimingTests.forEach(stest => {
+for (const stest of gGetComputedTimingTests) {
   test(t => {
     const effect = new KeyframeEffectReadOnly(target,
                                               { left: ['10px', '20px'] },
                                               stest.input);
 
     // Helper function to provide default expected values when the test does
     // not supply them.
     const expected = (field, defaultValue) => {
@@ -90,17 +90,17 @@ gGetComputedTimingTests.forEach(stest =>
                   'computed iterations');
     assert_equals(ct.duration, expected('duration', 0),
                   'computed duration');
     assert_equals(ct.direction, expected('direction', 'normal'),
                   'computed direction');
 
   }, 'values of getComputedTiming() when a KeyframeEffectReadOnly is'
      + ` constructed by ${stest.desc}`);
-});
+}
 
 const gActiveDurationTests = [
   { desc:     'an empty KeyframeEffectOptions object',
     input:    { },
     expected: 0 },
   { desc:     'a non-zero duration and default iteration count',
     input:    { duration: 1000 },
     expected: 1000 },
@@ -137,27 +137,27 @@ const gActiveDurationTests = [
   { desc:     'an infinite duration and fractional iteration count',
     input:    { duration: Infinity, iterations: 2.5 },
     expected: Infinity },
   { desc:     'an infinite duration and infinite iteration count',
     input:    { duration: Infinity, iterations: Infinity },
     expected: Infinity },
 ];
 
-gActiveDurationTests.forEach(stest => {
+for (const stest of gActiveDurationTests) {
   test(t => {
     const effect = new KeyframeEffectReadOnly(target,
                                               { left: ['10px', '20px'] },
                                               stest.input);
 
     assert_equals(effect.getComputedTiming().activeDuration,
                   stest.expected);
 
   }, `getComputedTiming().activeDuration for ${stest.desc}`);
-});
+}
 
 const gEndTimeTests = [
   { desc:     'an empty KeyframeEffectOptions object',
     input:    { },
     expected: 0 },
   { desc:     'a non-zero duration and default iteration count',
     input:    { duration: 1000 },
     expected: 1000 },
@@ -189,23 +189,23 @@ const gEndTimeTests = [
               'duration',
     input:    { duration: 1000, iterations: 2, delay: -3000 },
     expected: 0 },
   { desc:     'a zero duration and negative delay',
     input:    { duration: 0, iterations: 2, delay: -1000 },
     expected: 0 }
 ];
 
-gEndTimeTests.forEach(stest => {
+for (const stest of gEndTimeTests) {
   test(t => {
     const effect = new KeyframeEffectReadOnly(target,
                                               { left: ['10px', '20px'] },
                                               stest.input);
 
     assert_equals(effect.getComputedTiming().endTime,
                   stest.expected);
 
   }, `getComputedTiming().endTime for ${stest.desc}`);
-});
+}
 
 done();
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
@@ -11,33 +11,33 @@
 <div id="log"></div>
 <div id="target"></div>
 <script>
 'use strict';
 
 const target = document.getElementById('target');
 
 test(t => {
-  gEmptyKeyframeListTests.forEach(frame => {
+  for (const frame of gEmptyKeyframeListTests) {
     const effect = new KeyframeEffect(target, {});
     effect.setKeyframes(frame);
     assert_frame_lists_equal(effect.getKeyframes(), []);
-  });
+  }
 }, 'Keyframes can be replaced with an empty keyframe');
 
-gKeyframesTests.forEach(subtest => {
+for (const subtest of gKeyframesTests) {
   test(t => {
     const effect = new KeyframeEffect(target, {});
     effect.setKeyframes(subtest.input);
     assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
   }, `Keyframes can be replaced with ${subtest.desc}`);
-});
+}
 
-gInvalidKeyframesTests.forEach(subtest => {
+for (const subtest of gInvalidKeyframesTests) {
   test(t => {
     const effect = new KeyframeEffect(target, {});
     assert_throws(new TypeError, () => {
       effect.setKeyframes(subtest.input);
     });
   }, `KeyframeEffect constructor throws with ${subtest.desc}`);
-});
+}
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/active-time.html
@@ -10,21 +10,21 @@
 <script>
 'use strict';
 
 test(t => {
   const tests = [ { fill: 'none', progress: null },
                   { fill: 'backwards', progress: 0 },
                   { fill: 'forwards', progress: null },
                   { fill: 'both', progress: 0 } ];
-  tests.forEach(test => {
+  for (const test of tests) {
     const anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
     assert_equals(anim.effect.getComputedTiming().progress, test.progress,
                   `Progress in before phase when using '${test.fill}' fill`);
-  });
+  }
 }, 'Active time in before phase');
 
 test(t => {
   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');
 
--- a/testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animation-effects/phases-and-states.html
@@ -45,147 +45,136 @@ function assert_phase_at_time(animation,
                       + ` is ${currentTime}ms`
                       + ' (progress is non-null with appropriate fill mode)');
   }
 }
 
 test(t => {
   const animation = createDiv(t).animate(null, 1);
 
-  [ { currentTime: -1, phase: 'before' },
-    { currentTime:  0, phase: 'active' },
-    { currentTime:  1, phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: -1, phase: 'before' },
+                      { currentTime:  0, phase: 'active' },
+                      { currentTime:  1, phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for a simple animation effect');
 
 test(t => {
   const animation = createDiv(t).animate(null, { duration: 1, delay: 1 });
 
-  [ { currentTime: 0, phase: 'before' },
-    { currentTime: 1, phase: 'active' },
-    { currentTime: 2, phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: 0, phase: 'before' },
+                      { currentTime: 1, phase: 'active' },
+                      { currentTime: 2, phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for an animation effect with a positive start delay');
 
 test(t => {
   const animation = createDiv(t).animate(null, { duration: 1, delay: -1 });
 
-  [ { currentTime: -2, phase: 'before' },
-    { currentTime: -1, phase: 'before' },
-    { currentTime:  0, phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: -2, phase: 'before' },
+                      { currentTime: -1, phase: 'before' },
+                      { currentTime:  0, phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for an animation effect with a negative start delay');
 
 test(t => {
   const animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 });
 
-  [ { currentTime: -1, phase: 'before' },
-    { currentTime:  0, phase: 'active' },
-    { currentTime:  1, phase: 'after'  },
-    { currentTime:  2, phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: -1, phase: 'before' },
+                      { currentTime:  0, phase: 'active' },
+                      { currentTime:  1, phase: 'after'  },
+                      { currentTime:  2, phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for an animation effect with a positive end delay');
 
 test(t => {
   const animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 });
 
-  [ { currentTime: -1,   phase: 'before' },
-    { currentTime:  0,   phase: 'active' },
-    { currentTime:  0.9, phase: 'active' },
-    { currentTime:  1,   phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: -1,   phase: 'before' },
+                      { currentTime:  0,   phase: 'active' },
+                      { currentTime:  0.9, phase: 'active' },
+                      { currentTime:  1,   phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for an animation effect with a negative end delay lesser'
    + ' in magnitude than the active duration');
 
 test(t => {
   const animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 });
 
-  [ { currentTime: -1, phase: 'before' },
-    { currentTime:  0, phase: 'after'  },
-    { currentTime:  1, phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: -1, phase: 'before' },
+                      { currentTime:  0, phase: 'after'  },
+                      { currentTime:  1, phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for an animation effect with a negative end delay equal'
    + ' in magnitude to the active duration');
 
 test(t => {
   const animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });
 
-  [ { currentTime: -2, phase: 'before' },
-    { currentTime: -1, phase: 'before' },
-    { currentTime:  0, phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: -2, phase: 'before' },
+                      { currentTime: -1, phase: 'before' },
+                      { currentTime:  0, phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for an animation effect with a negative end delay'
    + ' greater in magnitude than the active duration');
 
 test(t => {
   const animation = createDiv(t).animate(null, { duration: 2,
                                                  delay: 1,
                                                  endDelay: -1 });
 
-  [ { currentTime: 0, phase: 'before' },
-    { currentTime: 1, phase: 'active' },
-    { currentTime: 2, phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: 0, phase: 'before' },
+                      { currentTime: 1, phase: 'active' },
+                      { currentTime: 2, phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for an animation effect with a positive start delay'
    + ' and a negative end delay lesser in magnitude than the active duration');
 
 test(t => {
   const animation = createDiv(t).animate(null, { duration: 1,
                                                  delay: -1,
                                                  endDelay: -1 });
 
-  [ { currentTime: -2, phase: 'before' },
-    { currentTime: -1, phase: 'before' },
-    { currentTime:  0, phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: -2, phase: 'before' },
+                      { currentTime: -1, phase: 'before' },
+                      { currentTime:  0, phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for an animation effect with a negative start delay'
    + ' and a negative end delay equal in magnitude to the active duration');
 
 test(t => {
   const animation = createDiv(t).animate(null, { duration: 1,
                                                  delay: -1,
                                                  endDelay: -2 });
 
-  [ { currentTime: -3, phase: 'before' },
-    { currentTime: -2, phase: 'before' },
-    { currentTime: -1, phase: 'before' },
-    { currentTime:  0, phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: -3, phase: 'before' },
+                      { currentTime: -2, phase: 'before' },
+                      { currentTime: -1, phase: 'before' },
+                      { currentTime:  0, phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for an animation effect with a negative start delay'
    + ' and a negative end delay equal greater in magnitude than the active'
    + ' duration');
 
 test(t => {
   const animation = createDiv(t).animate(null, 1);
   animation.playbackRate = -1;
 
-  [ { currentTime: -1, phase: 'before' },
-    { currentTime:  0, phase: 'before' },
-    { currentTime:  1, phase: 'active' },
-    { currentTime:  2, phase: 'after'  } ]
-  .forEach(test => {
+  for (const test of [{ currentTime: -1, phase: 'before' },
+                      { currentTime:  0, phase: 'before' },
+                      { currentTime:  1, phase: 'active' },
+                      { currentTime:  2, phase: 'after'  }]) {
     assert_phase_at_time(animation, test.phase, test.currentTime);
-  });
+  }
 }, 'Phase calculation for a simple animation effect with negative playback'
    + ' rate');
 
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
+++ b/testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
@@ -7,35 +7,35 @@
 <script src="../../testcommon.js"></script>
 <script src="../../resources/easing-tests.js"></script>
 <body>
 <div id="log"></div>
 <div id="target"></div>
 <script>
 'use strict';
 
-gEasingTests.forEach(params => {
+for (const params of gEasingTests) {
   test(t => {
     const target = createDiv(t);
     const anim   = target.animate(null, { duration: 1000,
                                           fill: 'forwards',
                                           easing: params.easing });
 
-    [ 0, 250, 500, 750, 1000 ].forEach(sampleTime => {
+    for (const sampleTime of [0, 250, 500, 750, 1000]) {
       anim.currentTime = sampleTime;
       const portion = sampleTime / anim.effect.getComputedTiming().duration;
       const expectedProgress = params.easingFunction(portion);
       assert_approx_equals(anim.effect.getComputedTiming().progress,
                            expectedProgress,
                            0.01,
                            'The progress should be approximately ' +
                            `${expectedProgress} at ${sampleTime}ms`);
-    });
+    }
   }, `Transformed progress for ${params.desc}`);
-});
+}
 
 // Additional tests for various boundary conditions of step timing functions and
 // frames timing functions.
 
 const gStepAndFramesTimingFunctionTests = [
   {
     description: 'Test bounds point of step-start easing',
     effect:     {
@@ -286,23 +286,23 @@ const gStepAndFramesTimingFunctionTests 
                   { currentTime: 1499, progress: 1 },
                   { currentTime: 1500, progress: 0 },
                   { currentTime: 1999, progress: 0 },
                   { currentTime: 2000, progress: 1 }
                 ]
   }
 ];
 
-gStepAndFramesTimingFunctionTests.forEach(options => {
+for (const options of gStepAndFramesTimingFunctionTests) {
   test(t => {
     const target = createDiv(t);
     const animation = target.animate(null, options.effect);
-    options.conditions.forEach(condition => {
+    for (const condition of options.conditions) {
       animation.currentTime = condition.currentTime;
       assert_equals(animation.effect.getComputedTiming().progress,
                     condition.progress,
                     `Progress at ${animation.currentTime}ms`);
-    });
+    }
   }, options.description);
-});
+}
 
 </script>
 </body>