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