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