Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-10-04 02:29:12 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision be5419e845d39089ba6dc338c1bd0fa279108317

Browse source
This commit is contained in:
Josh Matthews 2018-01-04 13:44:24 -05:00
parent aa199307c8
commit 2b6f573eb5
3440 changed files with 109438 additions and 41750 deletions
Download patch file Download diff file Expand all files Collapse all files

12
tests/wpt/web-platform-tests/web-animations/README.md
View file

@ -1,7 +1,7 @@
Web Animations Test Suite
=========================
Specification: https://w3c.github.io/web-animations/
Specification: https://drafts.csswg.org/web-animations/
Guidelines for writing tests
@ -51,24 +51,24 @@ Guidelines for writing tests
e.g.
```javascript
test(function(t) {
test(t => {
const animation = createDiv(t).animate(null);
assert_class_string(animation, 'Animation', 'Returned object is an Animation');
}, 'Element.animate() creates an Animation object');
```
```javascript
test(function(t) {
assert_throws({ name: 'TypeError' }, function() {
test(t => {
assert_throws({ name: 'TypeError' }, () => {
createDiv(t).animate(null, -1);
});
}, 'Setting a negative duration throws a TypeError');
```
```javascript
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
return animation.ready.then(function() {
return animation.ready.then(() => {
assert_greater_than(animation.startTime, 0, 'startTime when running');
});
}, 'startTime is resolved when running');

23
tests/wpt/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Tests for animation type of accumulation</title>
<link rel="help" href="https://w3c.github.io/web-animations/#animation-types">
<title>Accumulation for each property</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -17,16 +17,15 @@ html {
<script>
'use strict';
for (var property in gCSSProperties) {
for (const property in gCSSProperties) {
if (!isSupported(property)) {
continue;
}
var animationTypes = gCSSProperties[property].types;
var setupFunction = gCSSProperties[property].setup;
animationTypes.forEach(function(animationType) {
var typeObject;
var animationTypeString;
const setupFunction = gCSSProperties[property].setup;
for (const animationType of gCSSProperties[property].types) {
let typeObject;
let animationTypeString;
if (typeof animationType === 'string') {
typeObject = types[animationType];
animationTypeString = animationType;
@ -39,13 +38,13 @@ for (var property in gCSSProperties) {
// First, test that the animation type object has 'testAccumulation'.
// We use test() function here so that we can continue the remainder tests
// even if this test fails.
test(function(t) {
test(t => {
assert_own_property(typeObject, 'testAccumulation', animationTypeString +
' should have testAccumulation property');
assert_equals(typeof typeObject.testAccumulation, 'function',
'testAccumulation method should be a function');
}, property + ' (type: ' + animationTypeString +
') has testAccumulation function');
}, `${property} (type: ${animationTypeString}) has testAccumulation`
+ ' function');
if (typeObject.testAccumulation &&
typeof typeObject.testAccumulation === 'function') {
@ -53,6 +52,6 @@ for (var property in gCSSProperties) {
setupFunction,
animationType.options);
}
});
}
}
</script>

23
tests/wpt/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Tests for animation type of addition</title>
<link rel="help" href="https://w3c.github.io/web-animations/#animation-types">
<title>Addition for each property</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -17,16 +17,15 @@ html {
<script>
'use strict';
for (var property in gCSSProperties) {
for (const property in gCSSProperties) {
if (!isSupported(property)) {
continue;
}
var animationTypes = gCSSProperties[property].types;
var setupFunction = gCSSProperties[property].setup;
animationTypes.forEach(function(animationType) {
var typeObject;
var animationTypeString;
const setupFunction = gCSSProperties[property].setup;
for (const animationType of gCSSProperties[property].types) {
let typeObject;
let animationTypeString;
if (typeof animationType === 'string') {
typeObject = types[animationType];
animationTypeString = animationType;
@ -39,13 +38,13 @@ for (var property in gCSSProperties) {
// First, test that the animation type object has 'testAddition'.
// We use test() function here so that we can continue the remainder tests
// even if this test fails.
test(function(t) {
test(t => {
assert_own_property(typeObject, 'testAddition', animationTypeString +
' should have testAddition property');
assert_equals(typeof typeObject.testAddition, 'function',
'testAddition method should be a function');
}, property + ' (type: ' + animationTypeString +
') has testAddition function');
}, `${property} (type: ${animationTypeString}) has testAddition`
+ ' function');
if (typeObject.testAddition &&
typeof typeObject.testAddition === 'function') {
@ -53,6 +52,6 @@ for (var property in gCSSProperties) {
setupFunction,
animationType.options);
}
});
}
}
</script>

60
tests/wpt/web-platform-tests/web-animations/animation-model/animation-types/discrete-animation.html → tests/wpt/web-platform-tests/web-animations/animation-model/animation-types/discrete.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for discrete animation</title>
<link rel="help" href="http://w3c.github.io/web-animations/#animatable-as-string-section">
<title>Discrete animation type</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#discrete-animation-type">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,11 +10,11 @@
<script>
'use strict';
test(function(t) {
var div = createDiv(t);
test(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');
@ -31,12 +31,12 @@ test(function(t) {
'Animation produces \'to\' value during forwards fill');
}, 'Test animating discrete values');
test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;
test(t => {
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');
@ -53,15 +53,15 @@ test(function(t) {
'Animation produces \'to\' value during forwards fill');
}, 'Test discrete animation is used when interpolation fails');
test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;
test(t => {
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.
@ -83,16 +83,16 @@ test(function(t) {
}, 'Test discrete animation is used only for pairs of values that cannot'
+ ' be interpolated');
test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;
test(t => {
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');
@ -107,15 +107,15 @@ test(function(t) {
}, 'Test the 50% switch point for discrete animation is based on the'
+ ' effect easing');
test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;
test(t => {
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' });

23
tests/wpt/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for animation type of interpolation</title>
<link rel="help" href="https://w3c.github.io/web-animations/#animation-types">
<title>Interpolation for each property</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -17,16 +17,15 @@ html {
<script>
'use strict';
for (var property in gCSSProperties) {
for (const property in gCSSProperties) {
if (!isSupported(property)) {
continue;
}
var animationTypes = gCSSProperties[property].types;
var setupFunction = gCSSProperties[property].setup;
animationTypes.forEach(function(animationType) {
var typeObject;
var animationTypeString;
const setupFunction = gCSSProperties[property].setup;
for (const animationType of gCSSProperties[property].types) {
let typeObject;
let animationTypeString;
if (typeof animationType === 'string') {
typeObject = types[animationType];
animationTypeString = animationType;
@ -39,13 +38,13 @@ for (var property in gCSSProperties) {
// First, test that the animation type object has 'testInterpolation'.
// We use test() function() here so that we can continue the remainder tests
// even if this test fails.
test(function(t) {
test(t => {
assert_own_property(typeObject, 'testInterpolation', animationTypeString +
' should have testInterpolation property');
assert_equals(typeof typeObject.testInterpolation, 'function',
'testInterpolation method should be a function');
}, property + ' (type: ' + animationTypeString +
') has testInterpolation function');
}, `${property} (type: ${animationTypeString}) has testInterpolation`
+ ' function');
if (typeObject.testInterpolation &&
typeof typeObject.testInterpolation === 'function') {
@ -53,6 +52,6 @@ for (var property in gCSSProperties) {
setupFunction,
animationType.options);
}
});
}
}
</script>

54
tests/wpt/web-platform-tests/web-animations/animation-model/animation-types/property-list.js
View file

@ -1,6 +1,6 @@
'use strict';
var gCSSProperties = {
const gCSSProperties = {
'align-content': {
// https://drafts.csswg.org/css-align/#propdef-align-content
types: [
@ -146,7 +146,7 @@ var gCSSProperties = {
// https://drafts.csswg.org/css-backgrounds-3/#border-bottom-width
types: [ 'length' ],
setup: t => {
var element = createElement(t);
const element = createElement(t);
element.style.borderBottomStyle = 'solid';
return element;
}
@ -233,7 +233,7 @@ var gCSSProperties = {
// https://drafts.csswg.org/css-backgrounds-3/#border-left-width
types: [ 'length' ],
setup: t => {
var element = createElement(t);
const element = createElement(t);
element.style.borderLeftStyle = 'solid';
return element;
}
@ -252,7 +252,7 @@ var gCSSProperties = {
// https://drafts.csswg.org/css-backgrounds-3/#border-right-width
types: [ 'length' ],
setup: t => {
var element = createElement(t);
const element = createElement(t);
element.style.borderRightStyle = 'solid';
return element;
}
@ -285,7 +285,7 @@ var gCSSProperties = {
// https://drafts.csswg.org/css-backgrounds-3/#border-top-width
types: [ 'length' ],
setup: t => {
var element = createElement(t);
const element = createElement(t);
element.style.borderTopStyle = 'solid';
return element;
}
@ -402,7 +402,7 @@ var gCSSProperties = {
// https://drafts.csswg.org/css-multicol/#propdef-column-rule-width
types: [ 'length' ],
setup: t => {
var element = createElement(t);
const element = createElement(t);
element.style.columnRuleStyle = 'solid';
return element;
}
@ -1044,7 +1044,7 @@ var gCSSProperties = {
// https://drafts.csswg.org/css-ui-3/#propdef-outline-width
types: [ 'length' ],
setup: t => {
var element = createElement(t);
const element = createElement(t);
element.style.outlineStyle = 'solid';
return element;
}
@ -1054,12 +1054,6 @@ var gCSSProperties = {
types: [
]
},
'overflow-clip-box': {
// https://developer.mozilla.org/en/docs/Web/CSS/overflow-clip-box
types: [
{ type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] }
]
},
'overflow-wrap': {
// https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap
types: [
@ -1368,7 +1362,7 @@ var gCSSProperties = {
// https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow
types: [ 'textShadowList' ],
setup: t => {
var element = createElement(t);
const element = createElement(t);
element.style.color = 'green';
return element;
}
@ -1477,13 +1471,13 @@ function testAnimationSamples(animation, idlName, testSamples) {
const target = animation.effect.target.constructor.name === 'CSSPseudoElement'
? animation.effect.target.parentElement
: animation.effect.target;
testSamples.forEach(testSample => {
for (const testSample of testSamples) {
animation.currentTime = testSample.time;
assert_equals(getComputedStyle(target, type)[idlName],
testSample.expected,
`The value should be ${testSample.expected}` +
` at ${testSample.time}ms`);
});
}
}
function toOrderedArray(string) {
@ -1498,7 +1492,7 @@ function testAnimationSamplesWithAnyOrder(animation, idlName, testSamples) {
const target = animation.effect.target.constructor.name === 'CSSPseudoElement'
? animation.effect.target.parentElement
: animation.effect.target;
testSamples.forEach(testSample => {
for (const testSample of testSamples) {
animation.currentTime = testSample.time;
// Convert to array and sort the expected and actual value lists first
@ -1510,19 +1504,19 @@ function testAnimationSamplesWithAnyOrder(animation, idlName, testSamples) {
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;
testSamples.forEach(function(testSample) {
const target = animation.effect.target;
for (const testSample of testSamples) {
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);
});
`The value should be ${expected} at`
+ ` ${testSample.time}ms but got ${actual}`);
}
}
function createTestElement(t, setup) {
@ -1530,7 +1524,7 @@ function createTestElement(t, setup) {
}
function isSupported(property) {
var testKeyframe = new TestKeyframe(propertyToIDL(property));
const testKeyframe = new TestKeyframe(propertyToIDL(property));
try {
// Since TestKeyframe returns 'undefined' for |property|,
// the KeyframeEffect constructor will throw
@ -1541,7 +1535,7 @@ function isSupported(property) {
}
function TestKeyframe(testProp) {
var _propAccessCount = 0;
let _propAccessCount = 0;
Object.defineProperty(this, testProp, {
get: function() { _propAccessCount++; },
@ -1554,7 +1548,7 @@ function TestKeyframe(testProp) {
}
function propertyToIDL(property) {
// https://w3c.github.io/web-animations/#animation-property-name-to-idl-attribute-name
// https://drafts.csswg.org/web-animations/#animation-property-name-to-idl-attribute-name
if (property === 'float') {
return 'cssFloat';
}
@ -1563,11 +1557,11 @@ function propertyToIDL(property) {
return str.substr(1).toUpperCase(); });
}
function calcFromPercentage(idlName, percentageValue) {
var examElem = document.createElement('div');
const examElem = document.createElement('div');
document.body.appendChild(examElem);
examElem.style[idlName] = percentageValue;
var calcValue = getComputedStyle(examElem)[idlName];
const calcValue = getComputedStyle(examElem)[idlName];
document.body.removeChild(examElem);
return calcValue;

2046
tests/wpt/web-platform-tests/web-animations/animation-model/animation-types/property-types.js
View file

File diff suppressed because it is too large Load diff

24
tests/wpt/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-visibility.html → tests/wpt/web-platform-tests/web-animations/animation-model/animation-types/visibility.html
View file

@ -1,7 +1,9 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Effect value computation tests for 'visibility' property</title>
<link rel="help" href="https://w3c.github.io/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
<title>Animation type for the 'visibility' property</title>
<!-- FIXME: The following spec link should be updated once this definition has
been moved to CSS Values & Units. -->
<link rel="help" href="https://drafts.csswg.org/css-transitions/#animtype-visibility">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,10 +13,10 @@
<script>
'use strict';
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ visibility: ['hidden','visible'] },
{ duration: 100 * MS_PER_SEC, fill: 'both' });
test(t => {
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',
@ -30,11 +32,11 @@ test(function(t) {
}, 'Visibility clamping behavior');
test(function(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)' });
test(t => {
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',

56
tests/wpt/web-platform-tests/web-animations/animation-model/combining-effects/effect-composition.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Test for effect composition</title>
<link rel="help" href="https://w3c.github.io/web-animations/#effect-composition">
<title>Effect composition</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#effect-composition">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script src="../../testcommon.js"></script>
@ -9,21 +9,21 @@
<script>
'use strict';
[ 'accumulate', 'add' ].forEach(function(composite) {
test(function(t) {
var div = createDiv(t);
for (const composite of ['accumulate', 'add']) {
test(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');
}, `${composite} onto the base value`);
test(function(t) {
var div = createDiv(t);
var anims = [];
test(t => {
const div = createDiv(t);
const anims = [];
anims.push(div.animate({ marginLeft: ['10px', '20px'],
composite: 'replace' },
100));
@ -31,18 +31,18 @@
composite },
100));
anims.forEach(function(anim) {
for (const anim of anims) {
anim.currentTime = 50;
});
}
assert_equals(getComputedStyle(div).marginLeft, '20px',
'Animated style at 50%');
}, composite + ' onto an underlying animation value');
}, `${composite} onto an underlying animation value`);
test(function(t) {
var div = createDiv(t);
test(t => {
const div = createDiv(t);
div.style.marginLeft = '10px';
var anim =
const anim =
div.animate([{ marginLeft: '10px', composite },
{ marginLeft: '30px', composite: 'replace' }],
100);
@ -50,12 +50,12 @@
anim.currentTime = 50;
assert_equals(getComputedStyle(div).marginLeft, '25px',
'Animated style at 50%');
}, 'Composite when mixing ' + composite + ' and replace');
}, `Composite when mixing ${composite} and replace`);
test(function(t) {
var div = createDiv(t);
test(t => {
const div = createDiv(t);
div.style.marginLeft = '10px';
var anim =
const anim =
div.animate([{ marginLeft: '10px', composite: 'replace' },
{ marginLeft: '20px' }],
{ duration: 100 , composite });
@ -63,13 +63,13 @@
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');
}, `${composite} specified on a keyframe overrides the composite mode of`
+ ' the effect');
test(function(t) {
var div = createDiv(t);
test(t => {
const div = createDiv(t);
div.style.marginLeft = '10px';
var anim =
const anim =
div.animate([{ marginLeft: '10px', composite: 'replace' },
{ marginLeft: '20px' }],
100);
@ -78,8 +78,8 @@
anim.currentTime = 50; // (10 + (10 + 20)) * 0.5
assert_equals(getComputedStyle(div).marginLeft, '20px',
'Animated style at 50%');
}, 'unspecified composite mode on a keyframe is overriden by setting ' +
composite + ' of the effect');
});
}, 'unspecified composite mode on a keyframe is overriden by setting'
+ ` ${composite} of the effect`);
}
</script>

60
tests/wpt/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-context.html
View file

@ -1,19 +1,21 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests that property values respond to changes to their context</title>
<link rel="help" href="https://w3c.github.io/web-animations/#keyframes-section">
<title>The effect value of a keyframe effect: Property values that depend on
their context (target element)</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-computed-keyframes">
<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 div = createDiv(t);
test(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');
@ -22,14 +24,14 @@ test(function(t) {
'Effect value after updating font-size');
}, 'Effect values reflect changes to font-size on element');
test(function(t) {
var parentDiv = createDiv(t);
var div = createDiv(t);
test(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');
@ -38,38 +40,38 @@ test(function(t) {
'Effect value after updating font-size on parent element');
}, 'Effect values reflect changes to font-size on parent element');
promise_test(function(t) {
var parentDiv = createDiv(t);
var div = createDiv(t);
promise_test(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(function() {
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(function(t) {
var divWith10pxFontSize = createDiv(t);
promise_test(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(function() {
return animation.ready.then(() => {
animation.currentTime = 500;
divWith10pxFontSize.appendChild(div);
@ -81,15 +83,15 @@ promise_test(function(t) {
});
}, 'Effect values reflect changes to font-size from reparenting');
test(function(t) {
var divA = createDiv(t);
test(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');

819
tests/wpt/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation.html Normal file
View file

@ -0,0 +1,819 @@
<!doctype html>
<meta charset=utf-8>
<title>The effect value of a keyframe effect: Applying the iteration composite
operation</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
<link rel="help" href="https://drafts.csswg.org/web-animations/#effect-accumulation-section">
<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 => {
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',
'Animated align-content style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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');
}, 'iteration composition of discrete type animation (align-content)');
test(t => {
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;
assert_equals(getComputedStyle(div).marginLeft, '5px',
'Animated margin-left style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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');
}, 'iteration composition of <length> type animation');
test(t => {
const parent = createDiv(t);
parent.style.width = '100px';
const div = createDiv(t);
parent.appendChild(div);
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;
assert_equals(getComputedStyle(div).width, '25px',
'Animated width style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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');
}, 'iteration composition of <percentage> type animation');
test(t => {
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;
assert_equals(getComputedStyle(div).color, 'rgb(60, 60, 60)',
'Animated color style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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');
}, 'iteration composition of <color> type animation');
test(t => {
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;
assert_equals(getComputedStyle(div).color, 'rgb(30, 90, 30)',
'Animated color style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).color, 'rgb(120, 240, 120)',
'Animated color style at 0s of the third iteration');
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');
}, 'iteration composition of <color> type animation that green component is ' +
'decreasing');
test(t => {
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;
assert_equals(getComputedStyle(div).flexGrow, '5',
'Animated flex-grow style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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');
}, 'iteration composition of <number> type animation');
test(t => {
const div = createDiv(t);
div.style.position = 'absolute';
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).clip, 'rect(5px, 5px, 5px, 5px)',
'Animated clip style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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');
}, 'iteration composition of <shape> type animation');
test(t => {
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;
assert_equals(getComputedStyle(div).width, '5px',
'Animated calc width style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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');
}, 'iteration composition of <calc()> value animation');
test(t => {
const parent = createDiv(t);
parent.style.width = '100px';
const div = createDiv(t);
parent.appendChild(div);
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;
assert_equals(getComputedStyle(div).width, '10px',
// 100px * 5% + 5px
'Animated calc width style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).width,
'40px', // 100px * (10% + 10%) + (10px + 10px)
'Animated calc width style at 0s of the third iteration');
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');
}, 'iteration composition of <calc()> value animation that the values can\'t' +
'be reduced');
test(t => {
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;
assert_equals(getComputedStyle(div).opacity, '0.2',
'Animated opacity style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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');
}, 'iteration composition of opacity animation');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).boxShadow,
'rgb(60, 60, 60) 5px 5px 5px 0px',
'Animated box-shadow style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).boxShadow,
'rgb(240, 240, 240) 20px 20px 20px 0px',
'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');
}, 'iteration composition of box-shadow animation');
test(t => {
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;
assert_equals(getComputedStyle(div).filter, 'blur(5px)',
'Animated filter blur style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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');
}, 'iteration composition of filter blur animation');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'brightness(1.4)',
'Animated filter brightness style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
'brightness(2.6)', // brightness(1) + brightness(0.8) + brightness(0.8)
'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');
}, 'iteration composition of filter brightness for different unit animation');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'brightness(0.5)',
'Animated filter brightness style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
'brightness(0)', // brightness(1) is an identity element, not accumulated.
'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');
}, 'iteration composition of filter brightness animation');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'drop-shadow(rgb(60, 60, 60) 5px 5px 5px)',
'Animated filter drop-shadow style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
'drop-shadow(rgb(240, 240, 240) 20px 20px 20px)',
'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');
}, 'iteration composition of filter drop-shadow animation');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'brightness(1.5) contrast(1.5)',
'Animated filter list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
'brightness(3) contrast(3)',
'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');
}, 'iteration composition of same filter list animation');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'contrast(2) brightness(2)', // discrete
'Animated filter list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
// We can't accumulate 'contrast(2) brightness(2)' onto
// the first list 'brightness(1) contrast(1)' because of
// mismatch of the order.
'brightness(1) contrast(1)',
'Animated filter list at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
// 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');
}, 'iteration composition of discrete filter list because of mismatch ' +
'of the order');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'sepia(0.5) contrast(1.5)',
'Animated filter list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
'sepia(2) contrast(3)',
'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');
}, 'iteration composition of different length filter list animation');
test(t => {
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;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(0, 1, -1, 0, 0, 0)', // rotate(90deg)
'Animated transform(rotate) style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 0, 0)', // rotate(360deg)
'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');
}, 'iteration composition of transform(rotate) animation');
test(t => {
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;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5)
'Animated transform(scale) style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(0, 0, 0, 0, 0, 0)', // scale(0); scale(1) is an identity element,
// not accumulated.
'Animated transform(scale) style at 0s of the third iteration');
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');
}, 'iteration composition of transform: [ scale(0), scale(1) ] animation');
test(t => {
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;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(1.5, 0, 0, 1.5, 0, 0)', // scale(1.5)
'Animated transform(scale) style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(3, 0, 0, 3, 0, 0)', // scale(1 + (2 -1) + (2 -1))
'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');
}, 'iteration composition of transform: [ scale(1), scale(2) ] animation');
test(t => {
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;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 0, 0)', // scale(1)
'Animated transform(scale) style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(2, 0, 0, 2, 0, 0)', // (scale(0) + scale(2-1)*2)
'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');
}, 'iteration composition of transform: scale(2) animation');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(0, 1, -1, 0, 0, 5)', // rotate(90deg) translateX(5px)
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px)
'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');
}, 'iteration composition of transform list animation');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(2.5, 0, 0, 2.5, 15, 0)',
'Animated transform of matrix function at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
// scale(2) + (scale(3-1)*2) + translateX(30px)*2
'matrix(6, 0, 0, 6, 60, 0)',
'Animated transform of matrix function at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
// 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');
}, 'iteration composition of transform of matrix function');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
// Interpolate between matrix(2, 0, 0, 2, 0, 0) = translateX(0px) scale(2)
// and matrix(3, 0, 0, 3, 30, 0) = scale(3) translateX(10px)
'matrix(2.5, 0, 0, 2.5, 15, 0)',
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
// 'from' and 'to' value are mismatched, so accumulate
// matrix(2, 0, 0, 2, 0, 0) onto matrix(3, 0, 0, 3, 30, 0) * 2
// = scale(2) + (scale(3-1)*2) + translateX(30px)*2
'matrix(6, 0, 0, 6, 60, 0)',
'Animated transform list at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
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');
}, 'iteration composition of transform list animation whose order is'
+ ' mismatched');
test(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.
const anim =
div.animate({ transform: ['translateX(0px)',
'scale(2) translateX(10px)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
// Interpolate between matrix(1, 0, 0, 1, 0, 0) = translateX(0px)
// and matrix(2, 0, 0, 2, 20, 0) = scale(2) translateX(10px)
'matrix(1.5, 0, 0, 1.5, 10, 0)',
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
// 'from' and 'to' value are mismatched, so accumulate
// matrix(1, 0, 0, 1, 0, 0) onto matrix(2, 0, 0, 2, 20, 0) * 2
// = scale(1) + (scale(2-1)*2) + translateX(20px)*2
'matrix(3, 0, 0, 3, 40, 0)',
'Animated transform list at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
// Interpolate between matrix(3, 0, 0, 3, 40, 0)
// 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');
}, 'iteration composition of transform list animation whose order is'
+ ' mismatched because of missing functions');
test(t => {
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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
// translateX(none) -> translateX(10px) @ 50%
'matrix(1, 0, 0, 1, 5, 0)',
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
// translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 0%
'matrix(1, 0, 0, 1, 20, 0)',
'Animated transform list at 0s of the third iteration');
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');
}, 'iteration composition of transform from none to translate');
test(t => {
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)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 40, 1)',
'Animated transform of matrix3d function at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
// translateZ(30px) + (translateZ(50px)*2)
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)',
'Animated transform of matrix3d function at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
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');
}, 'iteration composition of transform of matrix3d function');
test(t => {
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();
anim.currentTime = 0;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 0, 0)', // Actually not rotated at all.
'Animated transform of rotate3d function at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
rotate3dToMatrix3d(1, 1, 0, Math.PI), // 180deg
'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');
}, 'iteration composition of transform of rotate3d function');
test(t => {
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;
assert_equals(getComputedStyle(div).marginLeft, '15px',
'Animated margin-left style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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');
}, 'iteration composition starts with non-zero value animation');
test(t => {
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;
assert_equals(getComputedStyle(div).marginLeft,
'0px',
'Animated margin-left style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).marginLeft,
'-10px', // 10px + -10px + -10px
'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');
}, 'iteration composition with negative final value animation');
test(t => {
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.
anim.effect.timing.duration = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).marginLeft, '12.5px',
'Animated style at 25s of the first iteration');
// half of original.
anim.effect.timing.duration = anim.effect.timing.duration / 4;
assert_equals(getComputedStyle(div).marginLeft, '50px',
'Animated style at 50s of the fourth iteration');
}, 'duration changes with an iteration composition operation of accumulate');
</script>

38
tests/wpt/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Effect value computation tests when keyframes overlap</title>
<link rel="help" href="https://w3c.github.io/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
<title>The effect value of a keyframe effect: Overlapping keyframes</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,16 +11,16 @@
<script>
'use strict';
test(function(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)' });
test(t => {
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');
@ -47,13 +47,13 @@ test(function(t) {
}, 'Overlapping keyframes at 0 and 1 use the appropriate value when the'
+ ' progress is outside the range [0, 1]');
test(function(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);
test(t => {
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'

29
tests/wpt/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html
View file

@ -1,7 +1,8 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for calculation of the transformed distance when computing an effect value</title>
<link rel="help" href="https://w3c.github.io/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
<title>The effect value of a keyframe effect: Calculating the transformed
distance between keyframes</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -13,8 +14,8 @@
// Test that applying easing to keyframes is applied as expected
gEasingTests.forEach(params => {
test(function(t) {
for (const params of gEasingTests) {
test(t => {
const target = createDiv(t);
const anim = target.animate([ { width: '0px' },
// We put the easing on the second keyframe
@ -25,7 +26,7 @@ gEasingTests.forEach(params => {
{ duration: 2000,
fill: 'forwards' });
[ 0, 999, 1000, 1100, 1500, 2000 ].forEach(sampleTime => {
for (const sampleTime of [0, 999, 1000, 1100, 1500, 2000]) {
anim.currentTime = sampleTime;
const portion = (sampleTime - 1000) / 1000;
@ -37,18 +38,18 @@ gEasingTests.forEach(params => {
0.01,
'The width should be approximately ' +
`${expectedWidth} at ${sampleTime}ms`);
});
}
}, `A ${params.desc} on a keyframe affects the resulting style`);
});
}
// Test that a linear-equivalent cubic-bezier easing applied to a keyframe does
// not alter (including clamping) the result.
gEasingTests.forEach(params => {
for (const params of gEasingTests) {
const linearEquivalentEasings = [ 'cubic-bezier(0, 0, 0, 0)',
'cubic-bezier(1, 1, 1, 1)' ];
test(function(t) {
linearEquivalentEasings.forEach(linearEquivalentEasing => {
test(t => {
for (const linearEquivalentEasing of linearEquivalentEasings) {
const timing = { duration: 1000,
fill: 'forwards',
easing: params.easing };
@ -65,7 +66,7 @@ gEasingTests.forEach(params => {
{ width: '100px' } ],
timing);
[ 0, 250, 500, 750, 1000 ].forEach(sampleTime => {
for (const sampleTime of [0, 250, 500, 750, 1000]) {
linearAnim.currentTime = sampleTime;
equivalentAnim.currentTime = sampleTime;
@ -73,11 +74,11 @@ gEasingTests.forEach(params => {
getComputedStyle(equivalentTarget).width,
`The 'width' of the animated elements should be equal ` +
`at ${sampleTime}ms`);
});
});
}
}
}, 'Linear-equivalent cubic-bezier keyframe easing applied to an effect ' +
`with a ${params.desc} does not alter the result`);
});
}
</script>
</body>

13
tests/wpt/web-platform-tests/web-animations/interfaces/Animatable/animate-no-browsing-context.html
View file

@ -1,8 +1,8 @@
<!doctype html>
<meta charset=utf-8>
<title>Animatable.animate tests in combination with elements in documents
<title>Animatable.animate in combination with elements in documents
without a browsing context</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animatable-animate">
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animatable-animate">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -76,16 +76,15 @@ promise_test(t => {
const div = xhrdoc.getElementById('test');
anim = div.animate(null);
anim.timeline = document.timeline;
assert_equals(anim.playState, 'pending',
'The animation should be initially pending');
assert_true(anim.pending, 'The animation should be initially pending');
return waitForAnimationFrames(2);
}).then(() => {
// Because the element is in a document without a browsing context, it will
// not be rendered and hence the user agent will never deem it ready to
// animate.
assert_equals(anim.playState, 'pending',
'The animation should still be pending after replacing'
+ ' the document timeline');
assert_true(anim.pending,
'The animation should still be pending after replacing'
+ ' the document timeline');
});
}, 'Replacing the timeline of an animation targetting an element in a'
+ ' document without a browsing context leaves it in the pending state');

152
tests/wpt/web-platform-tests/web-animations/interfaces/Animatable/animate.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animatable.animate tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animatable-animate">
<title>Animatable.animate</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animatable-animate">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -16,16 +16,16 @@
// Tests on Element
test(function(t) {
var div = createDiv(t);
var anim = div.animate(null);
test(t => {
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(function(t) {
var iframe = window.frames[0];
var div = createDiv(t, iframe.document);
var anim = Element.prototype.animate.call(div, null);
test(t => {
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');
@ -35,17 +35,17 @@ test(function(t) {
}, 'Element.animate() creates an Animation object in the relevant realm of'
+ ' the target element');
test(function(t) {
var div = createDiv(t);
var anim = Element.prototype.animate.call(div, null);
test(t => {
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(function(t) {
var iframe = window.frames[0];
var div = createDiv(t, iframe.document);
var anim = Element.prototype.animate.call(div, null);
test(t => {
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'
@ -57,10 +57,10 @@ test(function(t) {
}, 'Element.animate() creates an Animation object with a KeyframeEffect'
+ ' that is created in the relevant realm of the target element');
test(function(t) {
var iframe = window.frames[0];
var div = createDiv(t, iframe.document);
var anim = div.animate(null);
test(t => {
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'
@ -73,91 +73,91 @@ test(function(t) {
+ ' whose AnimationEffectTiming object is created in the relevant realm'
+ ' of the target element');
gEmptyKeyframeListTests.forEach(function(subTest) {
test(function(t) {
var div = createDiv(t);
var anim = div.animate(subTest, 2000);
for (const subtest of gEmptyKeyframeListTests) {
test(t => {
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)})`);
});
`(input: ${JSON.stringify(subtest)})`);
}
gKeyframesTests.forEach(function(subtest) {
test(function(t) {
var div = createDiv(t);
var anim = div.animate(subtest.input, 2000);
for (const subtest of gKeyframesTests) {
test(t => {
const div = createDiv(t);
const anim = div.animate(subtest.input, 2000);
assert_frame_lists_equal(anim.effect.getKeyframes(), subtest.output);
}, 'Element.animate() accepts ' + subtest.desc);
});
}, `Element.animate() accepts ${subtest.desc}`);
}
gInvalidKeyframesTests.forEach(function(subtest) {
test(function(t) {
var div = createDiv(t);
assert_throws(new TypeError, function() {
for (const subtest of gInvalidKeyframesTests) {
test(t => {
const div = createDiv(t);
assert_throws(new TypeError, () => {
div.animate(subtest.input, 2000);
});
}, 'Element.animate() does not accept ' + subtest.desc);
});
}, `Element.animate() does not accept ${subtest.desc}`);
}
gInvalidEasings.forEach(invalidEasing => {
test(function(t) {
var div = createDiv(t);
for (const invalidEasing of gInvalidEasings) {
test(t => {
const div = createDiv(t);
assert_throws(new TypeError, () => {
div.animate({ easing: invalidEasing }, 2000);
});
}, `Element.animate() does not accept invalid easing: '${invalidEasing}'`);
});
}
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_equals(anim.effect.timing.duration, 2000);
// Also check that unspecified parameters receive their default values
assert_equals(anim.effect.timing.fill, 'auto');
}, 'Element.animate() accepts a double as an options argument');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ duration: Infinity, fill: 'forwards' });
test(t => {
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(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] });
test(t => {
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(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
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(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, { id: 'test' });
test(t => {
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(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
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(function(t) {
var iframe = document.createElement('iframe');
async_test(t => {
const iframe = document.createElement('iframe');
iframe.width = 10;
iframe.height = 10;
iframe.addEventListener('load', t.step_func(function() {
var div = createDiv(t, iframe.contentDocument);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
iframe.addEventListener('load', t.step_func(() => {
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();
@ -167,23 +167,23 @@ async_test(function(t) {
}, 'Element.animate() correctly sets the Animation\'s timeline when ' +
'triggered on an element in a different document');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_equals(anim.playState, 'pending');
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_equals(anim.playState, 'running');
}, 'Element.animate() calls play on the Animation');
// Tests on CSSPseudoElement
test(function(t) {
var pseudoTarget = createPseudo(t, 'before');
var anim = pseudoTarget.animate(null);
test(t => {
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(function(t) {
var pseudoTarget = createPseudo(t, 'before');
var anim = pseudoTarget.animate(null);
test(t => {
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 ' +

156
tests/wpt/web-platform-tests/web-animations/interfaces/Animatable/getAnimations.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animatable.getAnimations tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animatable-getanimations">
<title>Animatable.getAnimations</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animatable-getanimations">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -9,62 +9,148 @@
<script>
'use strict';
test(function(t) {
var div = createDiv(t);
test(t => {
const div = createDiv(t);
assert_array_equals(div.getAnimations(), []);
}, 'Test getAnimations on element with no animations');
}, 'Returns an empty array for an element with no animations');
test(function(t) {
var div = createDiv(t);
var animationA = div.animate(null, 100 * MS_PER_SEC);
var animationB = div.animate(null, 100 * MS_PER_SEC);
test(t => {
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]);
}, 'Test getAnimations on element with two animations');
}, 'Returns both animations for an element with two animations');
test(function(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);
test(t => {
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');
}, 'Test getAnimations on separate elements with separate animations');
}, 'Returns only the animations specific to each sibling element');
test(function(t) {
var divParent = createDiv(t);
var divChild = createDiv(t);
test(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);
assert_array_equals(divParent.getAnimations(), [animationParent], 'divParent');
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');
}, 'Test getAnimations on parent and child elements with separate animations');
}, 'Returns only the animations specific to each parent/child element');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(null, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate(null, 100 * MS_PER_SEC);
animation.finish();
assert_array_equals(div.getAnimations(), []);
}, 'Test getAnimations on element with finished fill none animation');
}, 'Does not return finished animations that do not fill forwards');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(null, {
test(t => {
const div = createDiv(t);
const animation = div.animate(null, {
duration: 100 * MS_PER_SEC,
fill: 'forwards',
});
animation.finish();
assert_array_equals(div.getAnimations(), [animation]);
}, 'Test getAnimations on element with finished fill forwards animation');
}, 'Returns finished animations that fill forwards');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(null, {
test(t => {
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]);
}, 'Test getAnimations on element with delayed animation');
}, 'Returns animations in their delay phase');
test(t => {
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'
+ ' duration');
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 => {
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 => {
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'
+ ' number of iterations');
animation.effect.timing.iterations = 0;
assert_array_equals(div.getAnimations(), [],
'Animations should not be returned after setting the'
+ ' iteration count to zero');
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 => {
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');
animation.currentTime = 100 * MS_PER_SEC;
assert_array_equals(div.getAnimations(), [],
'Animation should not be returned after seeking to the'
+ ' clipped end of the active interval');
}, 'Returns animations based on dynamic changes to individual'
+ ' animations\' current time');
</script>
</body>

36
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/cancel.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.cancel()</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-cancel">
<title>Animation.cancel</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-cancel">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,11 +10,13 @@
<script>
'use strict';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({transform: ['translate(100px)', 'translate(100px)']},
100 * MS_PER_SEC);
return animation.ready.then(function() {
promise_test(t => {
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();
@ -23,10 +25,10 @@ promise_test(function(t) {
});
}, 'Animated style is cleared after calling Animation.cancel()');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({marginLeft: ['100px', '200px']},
100 * MS_PER_SEC);
test(t => {
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',
@ -38,11 +40,11 @@ test(function(t) {
+ ' seeked');
}, 'After cancelling an animation, it can still be seeked');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({marginLeft:['100px', '200px']},
100 * MS_PER_SEC);
return animation.ready.then(function() {
promise_test(t => {
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');
@ -50,7 +52,7 @@ promise_test(function(t) {
assert_equals(getComputedStyle(div).marginLeft, '100px',
'margin-left style is animated after re-starting animation');
return animation.ready;
}).then(function() {
}).then(() => {
assert_equals(animation.playState, 'running',
'Animation succeeds in running after being re-started');
});

87
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/constructor.html
View file

@ -1,8 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation constructor tests</title>
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animation-animation">
<link rel="author" title="Hiroyuki Ikezoe" href="mailto:hiikezoe@mozilla-japan.org">
<title>Animation constructor</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,9 +9,9 @@
<div id="log"></div>
<div id="target"></div>
<script>
"use strict";
'use strict';
var gTarget = document.getElementById("target");
const gTarget = document.getElementById('target');
function createEffect() {
return new KeyframeEffectReadOnly(gTarget, { opacity: [0, 1] });
@ -22,94 +21,94 @@ function createNull() {
return null;
}
var gTestArguments = [
const gTestArguments = [
{
createEffect: createNull,
timeline: null,
expectedTimeline: null,
expectedTimelineDescription: "null",
description: "with null effect and null timeline"
expectedTimelineDescription: 'null',
description: 'with null effect and null timeline'
},
{
createEffect: createNull,
timeline: document.timeline,
expectedTimeline: document.timeline,
expectedTimelineDescription: "document.timeline",
description: "with null effect and non-null timeline"
expectedTimelineDescription: 'document.timeline',
description: 'with null effect and non-null timeline'
},
{
createEffect: createNull,
expectedTimeline: document.timeline,
expectedTimelineDescription: "document.timeline",
description: "with null effect and no timeline parameter"
expectedTimelineDescription: 'document.timeline',
description: 'with null effect and no timeline parameter'
},
{
createEffect: createEffect,
timeline: null,
expectedTimeline: null,
expectedTimelineDescription: "null",
description: "with non-null effect and null timeline"
expectedTimelineDescription: 'null',
description: 'with non-null effect and null timeline'
},
{
createEffect: createEffect,
timeline: document.timeline,
expectedTimeline: document.timeline,
expectedTimelineDescription: "document.timeline",
description: "with non-null effect and non-null timeline"
expectedTimelineDescription: 'document.timeline',
description: 'with non-null effect and non-null timeline'
},
{
createEffect: createEffect,
expectedTimeline: document.timeline,
expectedTimelineDescription: "document.timeline",
description: "with non-null effect and no timeline parameter"
expectedTimelineDescription: 'document.timeline',
description: 'with non-null effect and no timeline parameter'
},
];
gTestArguments.forEach(function(args) {
test(function(t) {
var effect = args.createEffect();
var animation = new Animation(effect, args.timeline);
for (const args of gTestArguments) {
test(t => {
const effect = args.createEffect();
const animation = new Animation(effect, args.timeline);
assert_not_equals(animation, null,
"An animation sohuld be created");
'An animation sohuld be created');
assert_equals(animation.effect, effect,
"Animation returns the same effect passed to " +
"the Constructor");
'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);
});
'Animation timeline should be ' + args.expectedTimelineDescription);
assert_equals(animation.playState, 'idle',
'Animation.playState should be initially \'idle\'');
}, 'Animation can be constructed ' + args.description);
}
test(function(t) {
var effect = new KeyframeEffectReadOnly(null,
{ left: ["10px", "20px"] },
{ duration: 10000,
fill: "forwards" });
var anim = new Animation(effect, document.timeline);
test(t => {
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");
}, 'Animation constructed by an effect with null target runs normally');
async_test(function(t) {
var iframe = document.createElement('iframe');
async_test(t => {
const iframe = document.createElement('iframe');
iframe.addEventListener('load', t.step_func(function() {
var div = createDiv(t, iframe.contentDocument);
var effect = new KeyframeEffectReadOnly(div, null, 10000);
var anim = new Animation(effect);
iframe.addEventListener('load', t.step_func(() => {
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");
}, 'Animation constructed with a keyframe that target element is in iframe');
</script>
</body>

28
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/effect.html
View file

@ -1,29 +1,29 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.effect tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-effect">
<title>Animation.effect</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-effect">
<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";
'use strict';
test(function(t) {
var anim = new Animation();
assert_equals(anim.effect, null, "initial effect is null");
test(t => {
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.");
assert_equals(anim.effect, newEffect, 'new effect is set');
}, 'effect is set correctly.');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({ left: ['100px', '100px'] },
{ fill: 'forwards' });
var effect = animation.effect;
test(t => {
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');

140
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/finish.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.finish()</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-finish">
<title>Animation.finish</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-finish">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,32 +10,32 @@
<script>
'use strict';
var gKeyFrames = { 'marginLeft': ['100px', '200px'] };
const gKeyFrames = { 'marginLeft': ['100px', '200px'] };
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.playbackRate = 0;
assert_throws({name: 'InvalidStateError'}, function() {
assert_throws({name: 'InvalidStateError'}, () => {
animation.finish();
});
}, 'Test exceptions when finishing non-running animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames,
{duration : 100 * MS_PER_SEC,
iterations : Infinity});
test(t => {
const div = createDiv(t);
const animation = div.animate(gKeyFrames,
{ duration : 100 * MS_PER_SEC,
iterations : Infinity });
assert_throws({name: 'InvalidStateError'}, function() {
assert_throws({name: 'InvalidStateError'}, () => {
animation.finish();
});
}, 'Test exceptions when finishing infinite animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.finish();
assert_equals(animation.currentTime, 100 * MS_PER_SEC,
@ -43,9 +43,9 @@ test(function(t) {
'of the active duration');
}, 'Test finishing of animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
test(t => {
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;
@ -56,11 +56,11 @@ test(function(t) {
'end of the active duration');
}, 'Test finishing of animation with a current time past the effect end');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.currentTime = 100 * MS_PER_SEC;
return animation.finished.then(function() {
return animation.finished.then(() => {
animation.playbackRate = -1;
animation.finish();
@ -70,11 +70,11 @@ promise_test(function(t) {
});
}, 'Test finishing of reversed animation');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.currentTime = 100 * MS_PER_SEC;
return animation.finished.then(function() {
return animation.finished.then(() => {
animation.playbackRate = -1;
animation.currentTime = -1000;
animation.finish();
@ -85,11 +85,11 @@ promise_test(function(t) {
});
}, 'Test finishing of reversed animation with a current time less than zero');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.pause();
return animation.ready.then(function() {
return animation.ready.then(() => {
animation.finish();
assert_equals(animation.playState, 'finished',
@ -102,9 +102,9 @@ promise_test(function(t) {
});
}, 'Test finish() while paused');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
test(t => {
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
@ -121,9 +121,9 @@ test(function(t) {
'be set after calling finish()');
}, 'Test finish() while pause-pending with positive playbackRate');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.pause();
animation.playbackRate = -2;
animation.finish();
@ -136,9 +136,9 @@ test(function(t) {
'set after calling finish()');
}, 'Test finish() while pause-pending with negative playbackRate');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.playbackRate = 0.5;
animation.finish();
@ -155,10 +155,10 @@ test(function(t) {
// - In that case even after calling finish() we should still be pending but
// the current time should be updated
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
return animation.ready.then(function() {
promise_test(t => {
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
@ -172,13 +172,13 @@ promise_test(function(t) {
});
}, 'Test finish() during aborted pause');
promise_test(function(t) {
var div = createDiv(t);
promise_test(t => {
const div = createDiv(t);
div.style.marginLeft = '10px';
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
return animation.ready.then(function() {
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 ' +
@ -186,34 +186,34 @@ promise_test(function(t) {
});
}, 'Test resetting of computed style');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
var resolvedFinished = false;
animation.finished.then(function() {
promise_test(t => {
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(function() {
return animation.ready.then(() => {
animation.finish();
}).then(function() {
}).then(() => {
assert_true(resolvedFinished,
'Animation.finished should be resolved soon after ' +
'Animation.finish()');
});
}, 'Test finish() resolves finished promise synchronously');
promise_test(function(t) {
var effect = new KeyframeEffectReadOnly(null, gKeyFrames, 100 * MS_PER_SEC);
var animation = new Animation(effect, document.timeline);
var resolvedFinished = false;
animation.finished.then(function() {
promise_test(t => {
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(function() {
return animation.ready.then(() => {
animation.finish();
}).then(function() {
}).then(() => {
assert_true(resolvedFinished,
'Animation.finished should be resolved soon after ' +
'Animation.finish()');
@ -221,20 +221,20 @@ promise_test(function(t) {
}, 'Test finish() resolves finished promise synchronously with an animation ' +
'without a target');
promise_test(function(t) {
var effect = new KeyframeEffectReadOnly(null, gKeyFrames, 100 * MS_PER_SEC);
var animation = new Animation(effect, document.timeline);
promise_test(t => {
const effect = new KeyframeEffectReadOnly(null, gKeyFrames, 100 * MS_PER_SEC);
const animation = new Animation(effect, document.timeline);
animation.play();
var resolvedFinished = false;
animation.finished.then(function() {
let resolvedFinished = false;
animation.finished.then(() => {
resolvedFinished = true;
});
return animation.ready.then(function() {
return animation.ready.then(() => {
animation.currentTime = animation.effect.getComputedTiming().endTime - 1;
return waitForAnimationFrames(2);
}).then(function() {
}).then(() => {
assert_true(resolvedFinished,
'Animation.finished should be resolved soon after ' +
'Animation finishes normally');

273
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/finished.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.finished</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-finished">
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-finished">
<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";
'use strict';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var previousFinishedPromise = animation.finished;
return animation.ready.then(function() {
promise_test(t => {
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();
@ -27,18 +27,18 @@ promise_test(function(t) {
animation.currentTime = 100 * MS_PER_SEC;
return animation.finished;
}).then(function() {
}).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(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var previousFinishedPromise = animation.finished;
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
let previousFinishedPromise = animation.finished;
animation.finish();
return animation.finished.then(function() {
return animation.finished.then(() => {
assert_equals(animation.finished, previousFinishedPromise,
'Finished promise is the same object when playing completes');
animation.play();
@ -53,12 +53,12 @@ promise_test(function(t) {
});
}, 'Test restarting a finished animation');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var previousFinishedPromise;
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
let previousFinishedPromise;
animation.finish();
return animation.finished.then(function() {
return animation.finished.then(() => {
previousFinishedPromise = animation.finished;
animation.playbackRate = -1;
assert_not_equals(animation.finished, previousFinishedPromise,
@ -66,7 +66,7 @@ promise_test(function(t) {
'finished promise');
animation.currentTime = 0;
return animation.finished;
}).then(function() {
}).then(() => {
previousFinishedPromise = animation.finished;
animation.play();
assert_not_equals(animation.finished, previousFinishedPromise,
@ -75,12 +75,12 @@ promise_test(function(t) {
});
}, 'Test restarting a reversed finished animation');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var previousFinishedPromise = animation.finished;
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
const previousFinishedPromise = animation.finished;
animation.finish();
return animation.finished.then(function() {
return animation.finished.then(() => {
animation.currentTime = 100 * MS_PER_SEC + 1000;
assert_equals(animation.finished, previousFinishedPromise,
'Finished promise is unchanged jumping past end of ' +
@ -88,71 +88,71 @@ promise_test(function(t) {
});
}, 'Test redundant finishing of animation');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
// Setup callback to run if finished promise is resolved
var finishPromiseResolved = false;
animation.finished.then(function() {
let finishPromiseResolved = false;
animation.finished.then(() => {
finishPromiseResolved = true;
});
return animation.ready.then(function() {
return animation.ready.then(() => {
// Jump to mid-way in interval and pause
animation.currentTime = 100 * MS_PER_SEC / 2;
animation.pause();
return animation.ready;
}).then(function() {
}).then(() => {
// Jump to the end
// (But don't use finish() since that should unpause as well)
animation.currentTime = 100 * MS_PER_SEC;
return waitForAnimationFrames(2);
}).then(function() {
}).then(() => {
assert_false(finishPromiseResolved,
'Finished promise should not resolve when paused');
});
}, 'Finished promise does not resolve when paused');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
// Setup callback to run if finished promise is resolved
var finishPromiseResolved = false;
animation.finished.then(function() {
let finishPromiseResolved = false;
animation.finished.then(() => {
finishPromiseResolved = true;
});
return animation.ready.then(function() {
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
animation.currentTime = 100 * MS_PER_SEC;
return waitForAnimationFrames(2);
}).then(function() {
}).then(() => {
assert_false(finishPromiseResolved,
'Finished promise should not resolve when pause-pending');
});
}, 'Finished promise does not resolve when pause-pending');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.finish();
return animation.finished.then(function(resolvedAnimation) {
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(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var previousFinishedPromise = animation.finished;
promise_test(t => {
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(function() {
const retPromise = animation.finished.then(() => {
assert_unreached('finished promise was fulfilled');
}).catch(function(err) {
}).catch(err => {
assert_equals(err.name, 'AbortError',
'finished promise is rejected with AbortError');
assert_not_equals(animation.finished, previousFinishedPromise,
@ -163,52 +163,31 @@ promise_test(function(t) {
animation.cancel();
return retPromise;
}, 'finished promise is rejected when an animation is cancelled by calling ' +
}, 'finished promise is rejected when an animation is canceled by calling ' +
'cancel()');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var previousFinishedPromise = animation.finished;
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
const previousFinishedPromise = animation.finished;
animation.finish();
return animation.finished.then(function() {
return animation.finished.then(() => {
animation.cancel();
assert_not_equals(animation.finished, previousFinishedPromise,
'A new finished promise should be created when'
+ ' cancelling a finished animation');
+ ' canceling a finished animation');
});
}, 'cancelling an already-finished animation replaces the finished promise');
}, 'canceling an already-finished animation replaces the finished promise');
promise_test(function(t) {
var div = createDiv(t);
var 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(function(err) {
assert_equals(err.name, 'AbortError',
'finished promise is rejected with AbortError');
});
// Redundant call to cancel();
var 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(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
promise_test(t => {
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(function() {
return animation.ready.then(() => {
currentTimeBeforeShortening = animation.currentTime;
animation.effect.timing.duration = QUARTER_DUR;
// Below we use gotNextFrame to check that shortening of the animation
@ -216,17 +195,17 @@ promise_test(function(t) {
// 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
// happens.
waitForAnimationFrames(1).then(function() {
waitForAnimationFrames(1).then(() => {
gotNextFrame = true;
});
return animation.finished;
}).then(function() {
}).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 ' +
@ -234,16 +213,16 @@ promise_test(function(t) {
});
}, 'Test finished promise changes for animation duration changes');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var retPromise = animation.ready.then(function() {
promise_test(t => {
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(function() {
animation.finished.then(t.step_func(() => {
assert_unreached('finished promise should not resolve when playbackRate ' +
'is zero');
}));
@ -251,21 +230,21 @@ promise_test(function(t) {
return retPromise;
}, 'Test finished promise changes when playbackRate == 0');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
return animation.ready.then(function() {
promise_test(t => {
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(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var previousFinishedPromise = animation.finished;
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
const previousFinishedPromise = animation.finished;
animation.finish();
return animation.finished.then(function() {
return animation.finished.then(() => {
animation.currentTime = 0;
assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise should change once a prior ' +
@ -275,10 +254,10 @@ promise_test(function(t) {
}, 'Test finished promise changes when a prior finished promise resolved ' +
'and the animation falls out finished state');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var previousFinishedPromise = animation.finished;
test(t => {
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,
@ -287,10 +266,10 @@ test(function(t) {
}, 'Test no new finished promise generated when finished state ' +
'is checked asynchronously');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var previousFinishedPromise = animation.finished;
test(t => {
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,
@ -299,17 +278,17 @@ test(function(t) {
}, 'Test new finished promise generated when finished state ' +
'is checked synchronously');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var resolvedFinished = false;
animation.finished.then(function() {
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
let resolvedFinished = false;
animation.finished.then(() => {
resolvedFinished = true;
});
return animation.ready.then(function() {
return animation.ready.then(() => {
animation.finish();
animation.currentTime = 100 * MS_PER_SEC / 2;
}).then(function() {
}).then(() => {
assert_true(resolvedFinished,
'Animation.finished should be resolved even if ' +
'the finished state is changed soon');
@ -318,18 +297,18 @@ promise_test(function(t) {
}, 'Test synchronous finished promise resolved even if finished state ' +
'is changed soon');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var resolvedFinished = false;
animation.finished.then(function() {
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
let resolvedFinished = false;
animation.finished.then(() => {
resolvedFinished = true;
});
return animation.ready.then(function() {
return animation.ready.then(() => {
animation.currentTime = 100 * MS_PER_SEC;
animation.finish();
}).then(function() {
}).then(() => {
assert_true(resolvedFinished,
'Animation.finished should be resolved soon after finish() is ' +
'called even if there are other asynchronous promises just before it');
@ -337,26 +316,26 @@ promise_test(function(t) {
}, 'Test synchronous finished promise resolved even if asynchronous ' +
'finished promise happens just before synchronous promise');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.finished.then(t.step_func(function() {
promise_test(t => {
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(function() {
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(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
return animation.ready.then(function() {
promise_test(t => {
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(function() {
animation.finished.then(t.step_func(() => {
assert_unreached('Animation.finished should not be resolved');
}));
animation.currentTime = 0;
@ -366,24 +345,24 @@ promise_test(function(t) {
'falls out finished state even though the current finished ' +
'promise is generated soon after animation state became finished');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
var ready = false;
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
let ready = false;
animation.ready.then(
t.step_func(function() {
t.step_func(() => {
ready = true;
}),
t.unreached_func('Ready promise must not be rejected')
);
var testSuccess = animation.finished.then(
t.step_func(function() {
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(function() {
const timeout = waitForAnimationFrames(3).then(() => {
return Promise.reject('Finished promise did not arrive in time');
});
@ -391,24 +370,24 @@ promise_test(function(t) {
return Promise.race([timeout, testSuccess]);
}, 'Finished promise should be resolved after the ready promise is resolved');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
var caught = false;
promise_test(t => {
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(function() {
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(function() {
t.step_func(() => {
assert_true(caught, 'Ready promise has been rejected');
})
);
var timeout = waitForAnimationFrames(3).then(function() {
const timeout = waitForAnimationFrames(3).then(() => {
return Promise.reject('Finished promise was not rejected in time');
});

16
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/id.html
View file

@ -1,24 +1,24 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.id</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-id">
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-id">
<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";
'use strict';
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
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(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
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');

3
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/idlharness.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Animation IDL</title>
<link rel="help" href="https://w3c.github.io/web-animations/#animation">
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>
@ -20,6 +20,7 @@ interface Animation : EventTarget {
attribute double? currentTime;
attribute double playbackRate;
readonly attribute AnimationPlayState playState;
readonly attribute boolean pending;
readonly attribute Promise<Animation> ready;
readonly attribute Promise<Animation> finished;
attribute EventHandler onfinish;

16
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/oncancel.html
View file

@ -1,24 +1,24 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.oncancel</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-oncancel">
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-oncancel">
<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";
'use strict';
async_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var finishedTimelineTime;
animation.finished.then().catch(function() {
async_test(t => {
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(function(event) {
animation.oncancel = t.step_func_done(event => {
assert_equals(event.currentTime, null,
'event.currentTime should be null');
assert_equals(event.timelineTime, finishedTimelineTime,

70
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/onfinish.html
View file

@ -1,24 +1,24 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.onfinish</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-onfinish">
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-onfinish">
<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";
'use strict';
async_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var finishedTimelineTime;
animation.finished.then(function() {
async_test(t => {
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(function(event) {
animation.onfinish = t.step_func_done(event => {
assert_equals(event.currentTime, 0,
'event.currentTime should be zero');
assert_equals(event.timelineTime, finishedTimelineTime,
@ -30,16 +30,16 @@ async_test(function(t) {
}, 'onfinish event is fired when the currentTime < 0 and ' +
'the playbackRate < 0');
async_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
async_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
var finishedTimelineTime;
animation.finished.then(function() {
let finishedTimelineTime;
animation.finished.then(() => {
finishedTimelineTime = animation.timeline.currentTime;
});
animation.onfinish = t.step_func_done(function(event) {
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,
@ -51,16 +51,16 @@ async_test(function(t) {
}, 'onfinish event is fired when the currentTime > 0 and ' +
'the playbackRate > 0');
async_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
async_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
var finishedTimelineTime;
animation.finished.then(function() {
let finishedTimelineTime;
animation.finished.then(() => {
finishedTimelineTime = animation.timeline.currentTime;
});
animation.onfinish = t.step_func_done(function(event) {
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,
@ -71,45 +71,45 @@ async_test(function(t) {
animation.finish();
}, 'onfinish event is fired when animation.finish() is called');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.onfinish = function(event) {
animation.onfinish = event => {
assert_unreached('onfinish event should not be fired');
};
animation.currentTime = 100 * MS_PER_SEC / 2;
animation.pause();
return animation.ready.then(function() {
return animation.ready.then(() => {
animation.currentTime = 100 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
}, 'onfinish event is not fired when paused');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.onfinish = function(event) {
promise_test(t => {
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(function() {
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(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.onfinish = function(event) {
promise_test(t => {
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(function() {
return animation.ready.then(() => {
animation.currentTime = 100 * MS_PER_SEC;
animation.currentTime = 100 * MS_PER_SEC / 2;
return waitForAnimationFrames(2);

60
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/pause.html
View file

@ -1,37 +1,37 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.pause()</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-pause">
<title>Animation.pause</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-pause">
<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";
'use strict';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 1000 * MS_PER_SEC);
var previousCurrentTime = animation.currentTime;
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 1000 * MS_PER_SEC);
let previousCurrentTime = animation.currentTime;
return animation.ready.then(waitForAnimationFrames(1)).then(function() {
return animation.ready.then(waitForAnimationFrames(1)).then(() => {
assert_true(animation.currentTime >= previousCurrentTime,
'currentTime is initially increasing');
animation.pause();
return animation.ready;
}).then(function() {
}).then(() => {
previousCurrentTime = animation.currentTime;
return waitForAnimationFrames(1);
}).then(function() {
}).then(() => {
assert_equals(animation.currentTime, previousCurrentTime,
'currentTime does not increase after calling pause()');
});
}, 'pause() a running animation');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 1000 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 1000 * MS_PER_SEC);
// Go to idle state then pause
animation.cancel();
@ -39,20 +39,20 @@ promise_test(function(t) {
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');
assert_equals(animation.playState, 'paused', 'in paused play state');
assert_true(animation.pending, 'initially pause-pending');
// Check it still resolves as expected
return animation.ready.then(function() {
assert_equals(animation.playState, 'paused',
'resolves to paused state asynchronously');
return animation.ready.then(() => {
assert_false(animation.pending, 'no longer pending');
assert_equals(animation.currentTime, 0,
'keeps the initially set currentTime');
});
}, 'pause() from idle');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 1000 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 1000 * MS_PER_SEC);
animation.cancel();
animation.playbackRate = -1;
animation.pause();
@ -60,35 +60,35 @@ promise_test(function(t) {
assert_equals(animation.currentTime, 1000 * MS_PER_SEC,
'currentTime is set to the effect end');
return animation.ready.then(function() {
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(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 1000 * MS_PER_SEC,
test(t => {
const div = createDiv(t);
const animation = div.animate({}, {duration: 1000 * MS_PER_SEC,
iterations: Infinity});
animation.cancel();
animation.playbackRate = -1;
assert_throws('InvalidStateError',
function () { animation.pause(); },
() => { 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(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 1000 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 1000 * MS_PER_SEC);
return animation.ready
.then(function(animation) {
.then(animation => {
animation.finish();
animation.pause();
return animation.ready;
}).then(function(animation) {
}).then(animation => {
assert_equals(animation.currentTime, 1000 * MS_PER_SEC,
'currentTime after pausing finished animation');
});

35
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/pending.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.pending</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-pending">
<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';
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
assert_true(animation.pending);
return animation.ready.then(() => {
assert_false(animation.pending);
});
}, 'reports true -> false when initially played');
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.pause();
assert_true(animation.pending);
return animation.ready.then(() => {
assert_false(animation.pending);
});
}, 'reports true -> false when paused');
</script>
</body>

18
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/play.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.play()</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-play">
<title>Animation.play</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-play">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,19 +10,19 @@
<script>
'use strict';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({ transform: ['none', 'translate(10px)']},
{ duration : 100 * MS_PER_SEC,
iterations : Infinity});
return animation.ready.then(function() {
promise_test(t => {
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',
function () { animation.play(); },
() => { animation.play(); },
'Expected InvalidStateError exception on calling play() ' +
'with a negative playbackRate and infinite-duration ' +
'animation');

53
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/playState.html
View file

@ -1,53 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.playState</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-playstate">
<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';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'running');
});
}, 'Animation.playState reports \'pending\'->\'running\' when initially ' +
'played');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.pause();
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'paused');
});
}, 'Animation.playState reports \'pending\'->\'paused\' when pausing');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.cancel();
assert_equals(animation.playState, 'idle');
}, 'Animation.playState is \'idle\' when canceled.');
test(function(t) {
var div = createDiv(t);
var 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>
</body>

46
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/playbackRate.html
View file

@ -1,23 +1,23 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.playbackRate</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-playbackrate">
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-playbackrate">
<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";
'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,
@ -26,10 +26,10 @@ function assert_playbackrate(animation,
description);
}
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(null, 100 * MS_PER_SEC);
return animation.ready.then(function() {
promise_test(t => {
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;
@ -43,17 +43,17 @@ promise_test(function(t) {
});
}, 'Test the initial effect of setting playbackRate on currentTime');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate(null, 100 * MS_PER_SEC);
animation.playbackRate = 2;
var previousTimelineCurrentTime;
var previousAnimationCurrentTime;
return animation.ready.then(function() {
let previousTimelineCurrentTime;
let previousAnimationCurrentTime;
return animation.ready.then(() => {
previousAnimationCurrentTime = animation.currentTime;
previousTimelineCurrentTime = animation.timeline.currentTime;
return waitForAnimationFrames(1);
}).then(function() {
}).then(() => {
assert_playbackrate(animation,
previousAnimationCurrentTime,
previousTimelineCurrentTime,
@ -61,18 +61,18 @@ promise_test(function(t) {
});
}, 'Test the effect of setting playbackRate on currentTime');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate(null, 100 * MS_PER_SEC);
animation.playbackRate = 2;
var previousTimelineCurrentTime;
var previousAnimationCurrentTime;
return animation.ready.then(function() {
let previousTimelineCurrentTime;
let previousAnimationCurrentTime;
return animation.ready.then(() => {
previousAnimationCurrentTime = animation.currentTime;
previousTimelineCurrentTime = animation.timeline.currentTime;
animation.playbackRate = 1;
return waitForAnimationFrames(1);
}).then(function() {
}).then(() => {
assert_equals(animation.playbackRate, 1,
'sanity check: animation.playbackRate is still 1.');
assert_playbackrate(animation,

36
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/ready.html
View file

@ -1,22 +1,22 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.ready</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-ready">
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-ready">
<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";
'use strict';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(null, 100 * MS_PER_SEC);
var originalReadyPromise = animation.ready;
var pauseReadyPromise;
promise_test(t => {
const div = createDiv(t);
const animation = div.animate(null, 100 * MS_PER_SEC);
const originalReadyPromise = animation.ready;
let pauseReadyPromise;
return animation.ready.then(function() {
return animation.ready.then(() => {
assert_equals(animation.ready, originalReadyPromise,
'Ready promise is the same object when playing completes');
animation.pause();
@ -26,19 +26,19 @@ promise_test(function(t) {
// Wait for the promise to fulfill since if we abort the pause the ready
// promise object is reused.
return animation.ready;
}).then(function() {
}).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(function(t) {
var div = createDiv(t);
var animation = div.animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate(null, 100 * MS_PER_SEC);
return animation.ready.then(function() {
var promiseBeforeCallingPlay = animation.ready;
return animation.ready.then(() => {
const promiseBeforeCallingPlay = animation.ready;
animation.play();
assert_equals(animation.ready, promiseBeforeCallingPlay,
'Ready promise has same object identity after redundant call'
@ -46,11 +46,11 @@ promise_test(function(t) {
});
}, 'Redundant calls to play() do not generate new ready promise objects');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const div = createDiv(t);
const animation = div.animate(null, 100 * MS_PER_SEC);
return animation.ready.then(function(resolvedAnimation) {
return animation.ready.then(resolvedAnimation => {
assert_equals(resolvedAnimation, animation,
'Object identity of Animation passed to Promise callback'
+ ' matches the Animation object owning the Promise');

36
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/startTime.html
View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.startTime tests</title>
<title>Animation.startTime</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-animation-starttime">
href="https://drafts.csswg.org/web-animations/#dom-animation-starttime">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,41 +11,41 @@ href="https://w3c.github.io/web-animations/#dom-animation-starttime">
<script>
'use strict';
test(function(t) {
var animation = new Animation(new KeyframeEffect(createDiv(t), null),
document.timeline);
test(t => {
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(function(t) {
var animation = new Animation(new KeyframeEffect(createDiv(t), null),
document.timeline);
test(t => {
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(function(t) {
var animation = new Animation(new KeyframeEffect(createDiv(t), null),
document.timeline);
test(t => {
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(function(t) {
var animation = createDiv(t).animate(null);
test(t => {
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(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
return animation.ready.then(function() {
promise_test(t => {
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(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.cancel();
assert_equals(animation.startTime, null);
assert_equals(animation.currentTime, null);

77
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/delay.html
View file

@ -1,8 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>delay tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-delay">
<link rel="author" title="Daisuke Akatsuka" href="mailto:daisuke@mozilla-japan.org">
<title>AnimationEffectTiming.delay</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-delay">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,69 +10,69 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.timing.delay, 0);
}, 'Test default value');
}, 'Has the default value 0');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
test(t => {
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');
}, 'set delay 100');
}, 'Can be set to a positive number');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
test(t => {
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');
}, 'set delay -100');
}, 'Can be set to a negative number');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
test(t => {
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);
}, 'Test adding a positive delay to an animation without a backwards fill ' +
'makes it no longer active');
}, 'Can set a positive delay on an animation without a backwards fill to'
+ ' make it no longer active');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ fill: 'both',
duration: 100 });
test(t => {
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);
}, 'Test seeking an animation by setting a negative delay');
}, 'Can set a negative delay to seek into the active interval');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ fill: 'both',
duration: 100 });
test(t => {
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);
}, 'Test finishing an animation using a large negative delay');
}, 'Can set a large negative delay to finishing an animation');
test(function(t) {
var div = createDiv(t);
var anim = div.animate(null);
test(t => {
const div = createDiv(t);
const anim = div.animate(null);
for (let invalid of [NaN, Infinity]) {
assert_throws({ name: 'TypeError' }, function() {
assert_throws({ name: 'TypeError' }, () => {
anim.effect.timing.delay = invalid;
}, 'setting ' + invalid);
assert_throws({ name: 'TypeError' }, function() {
}, `setting ${invalid}`);
assert_throws({ name: 'TypeError' }, () => {
div.animate({}, { delay: invalid });
}, 'animate() with ' + invalid);
}, `animate() with ${invalid}`);
}
}, 'Setting invalid values should throw TypeError');
}, 'Throws when setting invalid values');
</script>
</body>

104
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/direction.html
View file

@ -1,8 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>direction tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-direction">
<link rel="author" title="Ryo Kato" href="mailto:foobar094@gmail.com">
<title>AnimationEffectTiming.direction</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-direction">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,22 +10,99 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.timing.direction, 'normal');
}, 'Test default value');
}, 'Has the default value \'normal\'');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
var directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
directions.forEach(function(direction) {
const directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
for (const direction of directions) {
anim.effect.timing.direction = direction;
assert_equals(anim.effect.timing.direction, direction,
'set direction to ' + direction);
});
}, 'set direction to a valid keyword');
`set direction to ${direction}`);
}
}, 'Can be set to each of the possible keywords');
test(t => {
const div = createDiv(t);
const anim = div.animate(null, { duration: 10000, direction: 'normal' });
anim.currentTime = 7000;
assert_times_equal(anim.effect.getComputedTiming().progress, 0.7,
'progress before updating direction');
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 => {
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 => {
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 => {
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 => {
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');
}, 'Can be changed from \'alternate\' to \'alternate-reverse\' while in'
+ ' progress');
</script>
</body>

186
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/duration.html
View file

@ -1,8 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>duration tests</title>
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationeffecttiming-duration">
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
<title>AnimationEffectTiming.duration</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-duration">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,148 +10,150 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.timing.duration, 'auto');
}, 'Test default value');
}, 'Has the default value \'auto\'');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
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');
}, 'set duration 123.45');
}, 'Can be set to a double value');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
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\'');
}, 'set duration auto');
}, 'Can be set to the string \'auto\'');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 'auto' });
test(t => {
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\'');
}, 'set auto duration in animate as object');
}, 'Can be set to \'auto\' using a dictionary object');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
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');
}, 'set duration Infinity');
}, 'Can be set to Infinity');
test(function(t) {
var div = createDiv(t);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
assert_throws({ name: 'TypeError' }, () => {
div.animate({ opacity: [ 0, 1 ] }, -1);
});
}, 'set negative duration in animate using a duration parameter');
}, 'animate() throws when passed a negative number');
test(function(t) {
var div = createDiv(t);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
assert_throws({ name: 'TypeError' }, () => {
div.animate({ opacity: [ 0, 1 ] }, -Infinity);
});
}, 'set negative Infinity duration in animate using a duration parameter');
}, 'animate() throws when passed negative Infinity');
test(function(t) {
var div = createDiv(t);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
assert_throws({ name: 'TypeError' }, () => {
div.animate({ opacity: [ 0, 1 ] }, NaN);
});
}, 'set NaN duration in animate using a duration parameter');
}, 'animate() throws when passed a NaN value');
test(function(t) {
var div = createDiv(t);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
assert_throws({ name: 'TypeError' }, () => {
div.animate({ opacity: [ 0, 1 ] }, { duration: -1 });
});
}, 'set negative duration in animate using an options object');
}, 'animate() throws when passed a negative number using a dictionary object');
test(function(t) {
var div = createDiv(t);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
assert_throws({ name: 'TypeError' }, () => {
div.animate({ opacity: [ 0, 1 ] }, { duration: -Infinity });
});
}, 'set negative Infinity duration in animate using an options object');
}, 'animate() throws when passed negative Infinity using a dictionary object');
test(function(t) {
var div = createDiv(t);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
assert_throws({ name: 'TypeError' }, () => {
div.animate({ opacity: [ 0, 1 ] }, { duration: NaN });
});
}, 'set NaN duration in animate using an options object');
}, 'animate() throws when passed a NaN value using a dictionary object');
test(function(t) {
var div = createDiv(t);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
assert_throws({ name: 'TypeError' }, () => {
div.animate({ opacity: [ 0, 1 ] }, { duration: 'abc' });
});
}, 'set abc string duration in animate using an options object');
}, 'animate() throws when passed a string other than \'auto\' using a'
+ ' dictionary object');
test(function(t) {
var div = createDiv(t);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
assert_throws({ name: 'TypeError' }, () => {
div.animate({ opacity: [ 0, 1 ] }, { duration: '100' });
});
}, 'set 100 string duration in animate using an options object');
}, 'animate() throws when passed a string containing a number using a'
+ ' dictionary object');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, () => {
anim.effect.timing.duration = -1;
});
}, 'set negative duration');
}, 'Throws when setting a negative number');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, () => {
anim.effect.timing.duration = -Infinity;
});
}, 'set negative Infinity duration');
}, 'Throws when setting negative infinity');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, () => {
anim.effect.timing.duration = NaN;
});
}, 'set NaN duration');
}, 'Throws when setting a NaN value');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, () => {
anim.effect.timing.duration = 'abc';
});
}, 'set duration abc');
}, 'Throws when setting a string other than \'auto\'');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, () => {
anim.effect.timing.duration = '100';
});
}, 'set duration string 100');
}, 'Throws when setting a string containing a number');
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(function() {
var originalStartTime = anim.startTime;
var originalCurrentTime = anim.currentTime;
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(() => {
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');
@ -168,5 +169,22 @@ promise_test(function(t) {
});
}, 'Extending an effect\'s duration does not change the start or current time');
test(t => {
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,
'progress after setting duration to zero');
anim.effect.timing.duration = 'auto';
assert_equals(anim.effect.getComputedTiming().progress, 1,
'progress after setting duration to \'auto\'');
}, 'Can be updated while the animation is in progress');
</script>
</body>

70
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/easing.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>easing tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-easing">
<title>AnimationEffectTiming.easing</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-easing">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,68 +11,68 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.timing.easing, 'linear');
}, 'Test default value');
}, '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');
'The progress of the animation should be approximately'
+ ` ${easingFunction(portion)} at ${currentTime}ms`);
}
gEasingTests.forEach(function(options) {
test(function(t) {
var target = createDiv(t);
var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
{ duration: 1000 * MS_PER_SEC,
fill: 'forwards' });
for (const options of gEasingTests) {
test(t => {
const target = createDiv(t);
const anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
{ duration: 1000 * MS_PER_SEC,
fill: 'forwards' });
anim.effect.timing.easing = options.easing;
assert_equals(anim.effect.timing.easing,
options.serialization || options.easing);
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(function(invalidEasing) {
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
for (const invalidEasing of gInvalidEasings) {
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
assert_throws({ name: 'TypeError' },
function() {
() => {
anim.effect.timing.easing = invalidEasing;
});
}, 'Invalid effect easing value test: \'' + invalidEasing + '\'');
});
}, `Throws on invalid easing: '${invalidEasing}'`);
}
gRoundtripEasings.forEach(easing => {
test(function(t) {
for (const easing of gRoundtripEasings) {
test(t => {
const anim = createDiv(t).animate(null);
anim.effect.timing.easing = easing;
assert_equals(anim.effect.timing.easing, easing);
}, `Canonical easing '${easing}' is returned as set`);
});
}
test(function(t) {
var delay = 1000 * MS_PER_SEC;
test(t => {
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,
@ -90,7 +90,7 @@ test(function(t) {
anim.effect.timing.easing = 'steps(2, end)';
assert_equals(anim.effect.getComputedTiming().progress, 1,
'easing replace to steps(2, end) again at after phase');
}, 'Change the easing while the animation is running');
}, 'Allows the easing to be changed while the animation is in progress');
</script>
</body>

84
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/endDelay.html
View file

@ -1,8 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>endDelay tests</title>
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationeffecttiming-enddelay">
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
<title>AnimationEffectTiming.endDelay</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-enddelay">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,79 +10,80 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.timing.endDelay, 0);
}, 'Test default value');
}, 'Has the default value 0');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
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');
}, 'set endDelay 123.45');
}, 'Can be set to a positive number');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
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');
}, 'set endDelay -1000');
}, 'Can be set to a negative number');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({name: "TypeError"}, function() {
test(t => {
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');
}, 'set endDelay Infinity');
}, 'Throws when setting infinity');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({name: "TypeError"}, function() {
test(t => {
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');
}, 'set endDelay negative Infinity');
}, 'Throws when setting negative infinity');
async_test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ duration: 100000, endDelay: 50000 });
anim.onfinish = t.step_func(function(event) {
assert_unreached('onfinish event should not be fired');
async_test(t => {
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(function() {
anim.ready.then(() => {
anim.currentTime = 100000;
return waitForAnimationFrames(2);
}).then(t.step_func(function() {
}).then(t.step_func(() => {
t.done();
}));
}, 'onfinish event is not fired duration endDelay');
}, 'finish event is not fired at the end of the active interval when the'
+ ' endDelay has not expired');
async_test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ duration: 100000, endDelay: 30000 });
anim.ready.then(function() {
async_test(t => {
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(function(event) {
anim.onfinish = t.step_func(event => {
assert_unreached('onfinish event should not be fired during endDelay');
});
return waitForAnimationFrames(2);
}).then(t.step_func(function() {
anim.onfinish = t.step_func(function(event) {
}).then(t.step_func(() => {
anim.onfinish = t.step_func(event => {
t.done();
});
anim.currentTime = 130000; // after endTime
}));
}, 'onfinish event is fired currentTime is after endTime');
}, 'finish event is fired after the endDelay has expired');
</script>
</body>

25
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/fill.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>fill tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-fill">
<title>AnimationEffectTiming.fill</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-fill">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,20 +10,21 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.timing.fill, 'auto');
}, 'Test default value');
}, 'Has the default value \'auto\'');
["none", "forwards", "backwards", "both", ].forEach(function(fill){
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
for (const fill of ['none', 'forwards', 'backwards', 'both']) {
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 100);
anim.effect.timing.fill = fill;
assert_equals(anim.effect.timing.fill, fill, 'set fill ' + fill);
assert_equals(anim.effect.getComputedTiming().fill, fill, 'getComputedTiming() after set fill ' + fill);
}, 'set fill ' + fill);
});
assert_equals(anim.effect.getComputedTiming().fill, fill,
'getComputedTiming() after set fill ' + fill);
}, `Can set fill to ${fill}`);
}
</script>
</body>

91
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/getAnimations.html
View file

@ -1,91 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Element.getAnimations tests</title>
<link rel="help" href="http://w3c.github.io/web-animations/#animationeffecttiming">
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
<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 div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
anim.finish();
assert_equals(div.getAnimations().length, 0, 'animation finished');
anim.effect.timing.duration += 100000;
assert_equals(div.getAnimations()[0], anim, 'set duration 102000');
anim.effect.timing.duration = 0;
assert_equals(div.getAnimations().length, 0, 'set duration 0');
anim.effect.timing.duration = 'auto';
assert_equals(div.getAnimations().length, 0, 'set duration \'auto\'');
}, 'when duration is changed');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
anim.effect.timing.endDelay = -3000;
assert_equals(div.getAnimations().length, 0,
'set negative endDelay so as endTime is less than currentTime');
anim.effect.timing.endDelay = 1000;
assert_equals(div.getAnimations()[0], anim,
'set positive endDelay so as endTime is more than currentTime');
anim.effect.timing.duration = 1000;
anim.currentTime = 1500;
assert_equals(div.getAnimations().length, 0,
'set currentTime less than endTime');
anim.effect.timing.endDelay = -500;
anim.currentTime = 400;
assert_equals(div.getAnimations()[0], anim,
'set currentTime less than endTime when endDelay is negative value');
anim.currentTime = 500;
assert_equals(div.getAnimations().length, 0,
'set currentTime same as endTime when endDelay is negative value');
anim.currentTime = 1000;
assert_equals(div.getAnimations().length, 0,
'set currentTime same as duration when endDelay is negative value');
}, 'when endDelay is changed');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
anim.finish();
assert_equals(div.getAnimations().length, 0, 'animation finished');
anim.effect.timing.iterations = 10;
assert_equals(div.getAnimations()[0], anim, 'set iterations 10');
anim.effect.timing.iterations = 0;
assert_equals(div.getAnimations().length, 0, 'set iterations 0');
anim.effect.timing.iterations = Infinity;
assert_equals(div.getAnimations().length, 1, 'set iterations Infinity');
}, 'when iterations is changed');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ duration: 1000, delay: 500, endDelay: -500 });
assert_equals(div.getAnimations()[0], anim, 'when currentTime 0');
anim.currentTime = 500;
assert_equals(div.getAnimations()[0], anim, 'set currentTime 500');
anim.currentTime = 1000;
assert_equals(div.getAnimations().length, 0, 'set currentTime 1000');
}, 'when currentTime changed in duration:1000, delay: 500, endDelay: -500');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ duration: 1000, delay: -500, endDelay: -500 });
assert_equals(div.getAnimations().length, 0, 'when currentTime 0');
anim.currentTime = 500;
assert_equals(div.getAnimations().length, 0, 'set currentTime 500');
anim.currentTime = 1000;
assert_equals(div.getAnimations().length, 0, 'set currentTime 1000');
}, 'when currentTime changed in duration:1000, delay: -500, endDelay: -500');
</script>
</body>

172
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html
View file

@ -1,172 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>getComputedStyle tests</title>
<link rel="help" href="http://w3c.github.io/web-animations/#animationeffecttiming">
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
<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 div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
anim.finish();
assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
anim.effect.timing.duration *= 2;
assert_equals(getComputedStyle(div).opacity, '0.5', 'set double duration');
anim.effect.timing.duration = 0;
assert_equals(getComputedStyle(div).opacity, '1', 'set duration 0');
anim.effect.timing.duration = 'auto';
assert_equals(getComputedStyle(div).opacity, '1', 'set duration \'auto\'');
}, 'changed duration immediately updates its computed styles');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
anim.finish();
assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
anim.effect.timing.iterations = 2;
assert_equals(getComputedStyle(div).opacity, '0', 'set 2 iterations');
anim.effect.timing.iterations = 0;
assert_equals(getComputedStyle(div).opacity, '1', 'set iterations 0');
anim.effect.timing.iterations = Infinity;
assert_equals(getComputedStyle(div).opacity, '0', 'set iterations Infinity');
}, 'changed iterations immediately updates its computed styles');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 1, 0 ] },
{ duration: 10000, endDelay: 1000, fill: 'none' });
anim.currentTime = 9000;
assert_equals(getComputedStyle(div).opacity, '0.1',
'set currentTime during duration');
anim.currentTime = 10900;
assert_equals(getComputedStyle(div).opacity, '1',
'set currentTime during endDelay');
anim.currentTime = 11100;
assert_equals(getComputedStyle(div).opacity, '1',
'set currentTime after endDelay');
}, 'change currentTime when fill is none and endDelay is positive');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 1, 0 ] },
{ duration: 10000,
endDelay: 1000,
fill: 'forwards' });
anim.currentTime = 5000;
assert_equals(getComputedStyle(div).opacity, '0.5',
'set currentTime during duration');
anim.currentTime = 9999;
assert_equals(getComputedStyle(div).opacity, '0.0001',
'set currentTime just a little before duration');
anim.currentTime = 10900;
assert_equals(getComputedStyle(div).opacity, '0',
'set currentTime during endDelay');
anim.currentTime = 11100;
assert_equals(getComputedStyle(div).opacity, '0',
'set currentTime after endDelay');
}, 'change currentTime when fill forwards and endDelay is positive');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 1, 0 ] },
{ duration: 10000, endDelay: -5000, fill: 'none' });
anim.currentTime = 1000;
assert_equals(getComputedStyle(div).opacity, '0.9',
'set currentTime before endTime');
anim.currentTime = 10000;
assert_equals(getComputedStyle(div).opacity, '1',
'set currentTime after endTime');
}, 'change currentTime when fill none and endDelay is negative');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 1, 0 ] },
{ duration: 10000,
endDelay: -5000,
fill: 'forwards' });
anim.currentTime = 1000;
assert_equals(getComputedStyle(div).opacity, '0.9',
'set currentTime before endTime');
anim.currentTime = 5000;
assert_equals(getComputedStyle(div).opacity, '0.5',
'set currentTime same as endTime');
anim.currentTime = 10000;
assert_equals(getComputedStyle(div).opacity, '0',
'set currentTime after endTime');
}, 'change currentTime when fill forwards and endDelay is negative');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ duration: 10000,
direction: 'normal' });
anim.currentTime = 7000;
anim.effect.timing.direction = 'reverse';
assert_equals(getComputedStyle(div).opacity, '0.3',
'change direction from "normal" to "reverse"');
}, 'change direction from "normal" to "reverse"');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ iterations: 2,
duration: 10000,
direction: 'normal' });
anim.currentTime = 17000;
anim.effect.timing.direction = 'alternate';
assert_equals(getComputedStyle(div).opacity, '0.3',
'change direction from "normal" to "alternate"');
}, 'change direction from "normal" to "alternate"');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ iterations: 2,
duration: 10000,
direction: 'normal' });
anim.currentTime = 17000;
anim.effect.timing.direction = 'alternate-reverse';
assert_equals(getComputedStyle(div).opacity, '0.7',
'change direction from "normal" to "alternate-reverse"');
}, 'change direction from "normal" to "alternate-reverse"');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ fill: 'backwards',
duration: 10000,
direction: 'normal' });
// test for a flip of value at the currentTime = 0
anim.effect.timing.direction = 'reverse';
assert_equals(getComputedStyle(div).opacity, '1',
'change direction from "normal" to "reverse" ' +
'at the starting point');
}, 'change direction from "normal" to "reverse" when currentTime is 0');
</script>
</body>

201
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/getComputedTiming.html Normal file
View file

@ -0,0 +1,201 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationEffectTiming.getComputedTiming</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffectreadonly-getcomputedtiming">
<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(t => {
const effect = new KeyframeEffect(null, null);
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 KeyframeEffect is ' +
'constructed without any KeyframeEffectOptions object');
const gGetComputedTimingTests = [
{ desc: 'an empty KeyframeEffectOptions object',
input: { },
expected: { } },
{ desc: 'a normal KeyframeEffectOptions object',
input: { delay: 1000,
fill: 'auto',
iterations: 5.5,
duration: 'auto',
direction: 'alternate' },
expected: { delay: 1000,
fill: 'none',
iterations: 5.5,
duration: 0,
direction: 'alternate' } },
{ desc: 'a double value',
input: 3000,
timing: { duration: 3000 },
expected: { delay: 0,
fill: 'none',
iterations: 1,
duration: 3000,
direction: 'normal' } },
{ desc: '+Infinity',
input: Infinity,
expected: { duration: Infinity } },
{ desc: 'an Infinity duration',
input: { duration: Infinity },
expected: { duration: Infinity } },
{ desc: 'an auto duration',
input: { duration: 'auto' },
expected: { duration: 0 } },
{ desc: 'an Infinity iterations',
input: { iterations: Infinity },
expected: { iterations: Infinity } },
{ desc: 'an auto fill',
input: { fill: 'auto' },
expected: { fill: 'none' } },
{ desc: 'a forwards fill',
input: { fill: 'forwards' },
expected: { fill: 'forwards' } }
];
for (const stest of gGetComputedTimingTests) {
test(t => {
const effect = new KeyframeEffect(null, null, stest.input);
// Helper function to provide default expected values when the test does
// not supply them.
const expected = (field, defaultValue) => {
return field in stest.expected ? stest.expected[field] : defaultValue;
};
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 KeyframeEffect is'
+ ` constructed by ${stest.desc}`);
}
const gActiveDurationTests = [
{ desc: 'an empty KeyframeEffectOptions object',
input: { },
expected: 0 },
{ desc: 'a non-zero duration and default iteration count',
input: { duration: 1000 },
expected: 1000 },
{ desc: 'a non-zero duration and integral iteration count',
input: { duration: 1000, iterations: 7 },
expected: 7000 },
{ desc: 'a non-zero duration and fractional iteration count',
input: { duration: 1000, iterations: 2.5 },
expected: 2500 },
{ desc: 'an non-zero duration and infinite iteration count',
input: { duration: 1000, iterations: Infinity },
expected: Infinity },
{ desc: 'an non-zero duration and zero iteration count',
input: { duration: 1000, iterations: 0 },
expected: 0 },
{ desc: 'a zero duration and default iteration count',
input: { duration: 0 },
expected: 0 },
{ desc: 'a zero duration and fractional iteration count',
input: { duration: 0, iterations: 2.5 },
expected: 0 },
{ desc: 'a zero duration and infinite iteration count',
input: { duration: 0, iterations: Infinity },
expected: 0 },
{ desc: 'a zero duration and zero iteration count',
input: { duration: 0, iterations: 0 },
expected: 0 },
{ desc: 'an infinite duration and default iteration count',
input: { duration: Infinity },
expected: Infinity },
{ desc: 'an infinite duration and zero iteration count',
input: { duration: Infinity, iterations: 0 },
expected: 0 },
{ desc: 'an infinite duration and fractional iteration count',
input: { duration: Infinity, iterations: 2.5 },
expected: Infinity },
{ desc: 'an infinite duration and infinite iteration count',
input: { duration: Infinity, iterations: Infinity },
expected: Infinity },
];
for (const stest of gActiveDurationTests) {
test(t => {
const effect = new KeyframeEffect(null, null, stest.input);
assert_equals(effect.getComputedTiming().activeDuration,
stest.expected);
}, `getComputedTiming().activeDuration for ${stest.desc}`);
}
const gEndTimeTests = [
{ desc: 'an empty KeyframeEffectOptions object',
input: { },
expected: 0 },
{ desc: 'a non-zero duration and default iteration count',
input: { duration: 1000 },
expected: 1000 },
{ desc: 'a non-zero duration and non-default iteration count',
input: { duration: 1000, iterations: 2.5 },
expected: 2500 },
{ desc: 'a non-zero duration and non-zero delay',
input: { duration: 1000, delay: 1500 },
expected: 2500 },
{ desc: 'a non-zero duration, non-zero delay and non-default iteration',
input: { duration: 1000, delay: 1500, iterations: 2 },
expected: 3500 },
{ desc: 'an infinite iteration count',
input: { duration: 1000, iterations: Infinity },
expected: Infinity },
{ desc: 'an infinite duration',
input: { duration: Infinity, iterations: 10 },
expected: Infinity },
{ desc: 'an infinite duration and delay',
input: { duration: Infinity, iterations: 10, delay: 1000 },
expected: Infinity },
{ desc: 'an infinite duration and negative delay',
input: { duration: Infinity, iterations: 10, delay: -1000 },
expected: Infinity },
{ desc: 'an non-zero duration and negative delay',
input: { duration: 1000, iterations: 2, delay: -1000 },
expected: 1000 },
{ desc: 'an non-zero duration and negative delay greater than active ' +
'duration',
input: { duration: 1000, iterations: 2, delay: -3000 },
expected: 0 },
{ desc: 'a zero duration and negative delay',
input: { duration: 0, iterations: 2, delay: -1000 },
expected: 0 }
];
for (const stest of gEndTimeTests) {
test(t => {
const effect = new KeyframeEffect(null, null, stest.input);
assert_equals(effect.getComputedTiming().endTime,
stest.expected);
}, `getComputedTiming().endTime for ${stest.desc}`);
}
done();
</script>
</body>

4
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/idlharness.html
View file

@ -2,9 +2,9 @@
<meta charset=utf-8>
<title>AnimationEffectTiming and AnimationEffectTimingReadOnly IDL</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#animationeffecttiming">
href="https://drafts.csswg.org/web-animations/#animationeffecttiming">
<link rel="help"
href="https://w3c.github.io/web-animations/#animationeffecttimingreadonly">
href="https://drafts.csswg.org/web-animations/#animationeffecttimingreadonly">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>

84
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/iterationStart.html
View file

@ -1,8 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>iterationStart tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-iterationstart">
<link rel="author" title="Daisuke Akatsuka" href="mailto:daisuke@mozilla-japan.org">
<title>AnimationEffectTiming.iterationStart</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-iterationstart">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,66 +10,63 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.timing.iterationStart, 0);
}, 'Test default value');
}, 'Has the default value 0');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ iterationStart: 0.2,
iterations: 1,
fill: 'both',
duration: 100,
delay: 1 });
test(t => {
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_times_equal(anim.effect.getComputedTiming().progress, 0.5);
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
}, 'Test that changing the iterationStart affects computed timing ' +
'when backwards-filling');
}, 'Changing the value updates computed timing when backwards-filling');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ iterationStart: 0.2,
iterations: 1,
fill: 'both',
duration: 100,
delay: 0 });
test(t => {
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_times_equal(anim.effect.getComputedTiming().progress, 0.5);
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
}, 'Test that changing the iterationStart affects computed timing ' +
'during the active phase');
}, 'Changing the value updates computed timing during the active phase');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ iterationStart: 0.2,
iterations: 1,
fill: 'both',
duration: 100,
delay: 0 });
test(t => {
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_times_equal(anim.effect.getComputedTiming().progress, 0.5);
assert_equals(anim.effect.getComputedTiming().currentIteration, 3);
}, 'Test that changing the iterationStart affects computed timing ' +
'when forwards-filling');
}, 'Changing the value updates computed timing when forwards-filling');
test(function(t) {
var div = createDiv(t);
var anim = div.animate(null);
test(t => {
const div = createDiv(t);
const anim = div.animate(null);
for (let invalid of [-1, NaN, Infinity]) {
assert_throws({ name: 'TypeError' }, function() {
assert_throws({ name: 'TypeError' }, () => {
anim.effect.timing.iterationStart = invalid;
}, 'setting ' + invalid);
assert_throws({ name: 'TypeError' }, function() {
}, `setting ${invalid}`);
assert_throws({ name: 'TypeError' }, () => {
div.animate({}, { iterationStart: invalid });
}, 'animate() with ' + invalid);
}, `animate() with ${invalid}`);
}
}, 'Using invalid values should throw TypeError');
}, 'Throws when setting invalid values');
</script>
</body>

89
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>iterations tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-iterations">
<title>AnimationEffectTiming.iterations</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-iterations">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,52 +10,85 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.timing.iterations, 1);
}, 'Test default value');
}, 'Has the default value 1');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
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');
}, 'set iterations 2');
}, 'Can be set to a double value');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
test(t => {
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');
}, 'set iterations Infinity');
}, 'Can be set to infinity');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, () => {
anim.effect.timing.iterations = -1;
});
}, 'set negative iterations');
}, 'Throws when setting a negative number');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, () => {
anim.effect.timing.iterations = -Infinity;
});
}, 'set negative infinity iterations ');
}, 'Throws when setting negative infinity');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, () => {
anim.effect.timing.iterations = NaN;
});
}, 'set NaN iterations');
}, 'Throws when setting a NaN value');
test(t => {
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');
anim.effect.timing.iterations = 2;
assert_times_equal(anim.effect.getComputedTiming().progress, 0,
'progress after adding an iteration');
assert_times_equal(anim.effect.getComputedTiming().currentIteration, 1,
'current iteration after adding an iteration');
anim.effect.timing.iterations = 0;
assert_equals(anim.effect.getComputedTiming().progress, 0,
'progress after setting iterations to zero');
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'current iteration after setting iterations to zero');
anim.effect.timing.iterations = Infinity;
assert_equals(anim.effect.getComputedTiming().progress, 0,
'progress after setting iterations to Infinity');
assert_equals(anim.effect.getComputedTiming().currentIteration, 1,
'current iteration after setting iterations to Infinity');
}, 'Can be updated while the animation is in progress');
</script>
</body>

6
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationPlaybackEvent/constructor.html
View file

@ -2,21 +2,21 @@
<meta charset=utf-8>
<title>AnimationPlaybackEvent constructor</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-animationplaybackevent-animationplaybackevent">
href="https://drafts.csswg.org/web-animations/#dom-animationplaybackevent-animationplaybackevent">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<script>
'use strict';
test(function(t) {
test(t => {
const evt = new AnimationPlaybackEvent('finish');
assert_equals(evt.type, 'finish');
assert_equals(evt.currentTime, null);
assert_equals(evt.timelineTime, null);
}, 'Event created without an event parameter has null time values');
test(function(t) {
test(t => {
const evt =
new AnimationPlaybackEvent('cancel', {
currentTime: -100,

2
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationPlaybackEvent/idlharness.html
View file

@ -2,7 +2,7 @@
<meta charset=utf-8>
<title>AnimationPlaybackEvent IDL</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#animationplaybackevent">
href="https://drafts.csswg.org/web-animations/#animationplaybackevent">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>

32
tests/wpt/web-platform-tests/web-animations/interfaces/Document/getAnimations.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>document.getAnimations tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-document-getanimations">
<title>Document.getAnimations</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-document-getanimations">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -9,20 +9,20 @@
<div id="log"></div>
<div id="target"></div>
<script>
"use strict";
'use strict';
var gKeyFrames = { 'marginLeft': ['100px', '200px'] };
const gKeyFrames = { 'marginLeft': ['100px', '200px'] };
test(function(t) {
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(function(t) {
var div = createDiv(t);
var anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
var anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
test(t => {
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');
@ -32,18 +32,18 @@ test(function(t) {
'getAnimation only returns running animations');
}, 'Test document.getAnimations for script-generated animations')
test(function(t) {
var div = createDiv(t);
var anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
var anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
test(t => {
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(function(t) {
var effect = new KeyframeEffectReadOnly(null, gKeyFrames, 100 * MS_PER_SEC);
var anim = new Animation(effect, document.timeline);
test(t => {
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,

4
tests/wpt/web-platform-tests/web-animations/interfaces/Document/timeline.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Document.timeline</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-document-timeline">
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-document-timeline">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,7 +10,7 @@
<script>
'use strict';
test(function() {
test(() => {
assert_equals(document.timeline, document.timeline,
'Document.timeline returns the same object every time');
const iframe = document.getElementById('iframe');

20
tests/wpt/web-platform-tests/web-animations/interfaces/DocumentTimeline/constructor.html
View file

@ -1,37 +1,37 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>DocumentTimeline constructor tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#the-documenttimeline-interface">
<link rel="help" href="https://drafts.csswg.org/web-animations/#the-documenttimeline-interface">
<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";
'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));

2
tests/wpt/web-platform-tests/web-animations/interfaces/DocumentTimeline/idlharness.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>DocumentTimeline IDL</title>
<link rel="help" href="https://w3c.github.io/web-animations/#documenttimeline">
<link rel="help" href="https://drafts.csswg.org/web-animations/#documenttimeline">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>

24
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/composite.html
View file

@ -1,8 +1,8 @@
<!doctype html>
<meta charset=utf-8>
<title>KeyframeEffect.composite tests</title>
<title>KeyframeEffect.composite</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-composite">
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-composite">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,34 +11,34 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.composite, 'replace',
'The default value should be replace');
}, 'Default value');
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
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(function(t) {
var anim = createDiv(t).animate({ left: '10px' });
test(t => {
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(function(t) {
var anim = createDiv(t).animate({ left: '10px', composite: 'replace' });
test(t => {
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');

108
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/constructor.html
View file

@ -2,9 +2,9 @@
<meta charset=utf-8>
<title>KeyframeEffect and KeyframeEffectReadOnly constructor</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-keyframeeffect">
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-keyframeeffect">
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly">
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -19,16 +19,16 @@
const target = document.getElementById('target');
test(function(t) {
gEmptyKeyframeListTests.forEach(function(frames) {
test(t => {
for (const frames of gEmptyKeyframeListTests) {
assert_equals(new KeyframeEffectReadOnly(target, frames)
.getKeyframes().length,
0, 'number of frames for ' + JSON.stringify(frames));
});
0, `number of frames for ${JSON.stringify(frames)}`);
}
}, 'A KeyframeEffectReadOnly can be constructed with no frames');
test(function(t) {
gEasingParsingTests.forEach(function(subtest) {
test(t => {
for (const subtest of gEasingParsingTests) {
const easing = subtest[0];
const expected = subtest[1];
const effect = new KeyframeEffectReadOnly(target, {
@ -36,98 +36,96 @@ test(function(t) {
}, { easing: easing });
assert_equals(effect.timing.easing, expected,
`resulting easing for '${easing}'`);
});
}
}, 'easing values are parsed correctly when passed to the ' +
'KeyframeEffectReadOnly constructor in KeyframeEffectOptions');
test(function(t) {
gInvalidEasings.forEach(invalidEasing => {
test(t => {
for (const invalidEasing of gInvalidEasings) {
assert_throws(new TypeError, () => {
new KeyframeEffectReadOnly(target, null, { easing: invalidEasing });
}, `TypeError is thrown for easing '${invalidEasing}'`);
});
}
}, 'Invalid easing values are correctly rejected when passed to the ' +
'KeyframeEffectReadOnly constructor in KeyframeEffectOptions');
test(function(t) {
const getKeyframe = function(composite) {
return { left: [ '10px', '20px' ], composite: composite };
};
gGoodKeyframeCompositeValueTests.forEach(function(composite) {
test(t => {
const getKeyframe =
composite => ({ left: [ '10px', '20px' ], composite: composite });
for (const composite of gGoodKeyframeCompositeValueTests) {
const effect = new KeyframeEffectReadOnly(target, getKeyframe(composite));
assert_equals(effect.getKeyframes()[0].composite, composite,
`resulting composite for '${composite}'`);
});
gBadCompositeValueTests.forEach(function(composite) {
assert_throws(new TypeError, function() {
}
for (const composite of gBadCompositeValueTests) {
assert_throws(new TypeError, () => {
new KeyframeEffectReadOnly(target, getKeyframe(composite));
});
});
}
}, 'composite values are parsed correctly when passed to the ' +
'KeyframeEffectReadOnly constructor in property-indexed keyframes');
test(function(t) {
const getKeyframes = function(composite) {
return [
test(t => {
const getKeyframes = composite =>
[
{ offset: 0, left: '10px', composite: composite },
{ offset: 1, left: '20px' }
];
};
gGoodKeyframeCompositeValueTests.forEach(function(composite) {
for (const composite of gGoodKeyframeCompositeValueTests) {
const effect = new KeyframeEffectReadOnly(target, getKeyframes(composite));
assert_equals(effect.getKeyframes()[0].composite, composite,
`resulting composite for '${composite}'`);
});
gBadCompositeValueTests.forEach(function(composite) {
assert_throws(new TypeError, function() {
}
for (const composite of gBadCompositeValueTests) {
assert_throws(new TypeError, () => {
new KeyframeEffectReadOnly(target, getKeyframes(composite));
});
});
}
}, 'composite values are parsed correctly when passed to the ' +
'KeyframeEffectReadOnly constructor in regular keyframes');
test(function(t) {
gGoodOptionsCompositeValueTests.forEach(function(composite) {
test(t => {
for (const composite of gGoodOptionsCompositeValueTests) {
const effect = new KeyframeEffectReadOnly(target, {
left: ['10px', '20px']
}, { composite: composite });
assert_equals(effect.getKeyframes()[0].composite, undefined,
`resulting composite for '${composite}'`);
});
gBadCompositeValueTests.forEach(function(composite) {
assert_throws(new TypeError, function() {
}
for (const composite of gBadCompositeValueTests) {
assert_throws(new TypeError, () => {
new KeyframeEffectReadOnly(target, {
left: ['10px', '20px']
}, { composite: composite });
});
});
}
}, 'composite value is absent if the composite operation specified on the ' +
'keyframe effect is being used');
gKeyframesTests.forEach(function(subtest) {
test(function(t) {
for (const subtest of gKeyframesTests) {
test(t => {
const effect = new KeyframeEffectReadOnly(target, subtest.input);
assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
}, `A KeyframeEffectReadOnly can be constructed with ${subtest.desc}`);
test(function(t) {
test(t => {
const effect = new KeyframeEffectReadOnly(target, subtest.input);
const secondEffect =
new KeyframeEffectReadOnly(target, effect.getKeyframes());
assert_frame_lists_equal(secondEffect.getKeyframes(),
effect.getKeyframes());
}, `A KeyframeEffectReadOnly constructed with ${subtest.desc} roundtrips`);
});
}
gInvalidKeyframesTests.forEach(function(subtest) {
test(function(t) {
assert_throws(new TypeError, function() {
for (const subtest of gInvalidKeyframesTests) {
test(t => {
assert_throws(new TypeError, () => {
new KeyframeEffectReadOnly(target, subtest.input);
});
}, `KeyframeEffectReadOnly constructor throws with ${subtest.desc}`);
});
}
test(function(t) {
test(t => {
const effect = new KeyframeEffectReadOnly(target,
{ left: ['10px', '20px'] });
@ -147,8 +145,8 @@ test(function(t) {
}, 'A KeyframeEffectReadOnly constructed without any ' +
'KeyframeEffectOptions object');
gKeyframeEffectOptionTests.forEach(function(subtest) {
test(function(t) {
for (const subtest of gKeyframeEffectOptionTests) {
test(t => {
const effect = new KeyframeEffectReadOnly(target,
{ left: ['10px', '20px'] },
subtest.input);
@ -172,19 +170,19 @@ gKeyframeEffectOptionTests.forEach(function(subtest) {
'timing direction');
}, `A KeyframeEffectReadOnly constructed by ${subtest.desc}`);
});
}
gInvalidKeyframeEffectOptionTests.forEach(function(subtest) {
test(function(t) {
assert_throws(new TypeError, function() {
for (const subtest of gInvalidKeyframeEffectOptionTests) {
test(t => {
assert_throws(new TypeError, () => {
new KeyframeEffectReadOnly(target,
{ left: ['10px', '20px'] },
subtest.input);
});
}, `Invalid KeyframeEffectReadOnly option by ${subtest.desc}`);
});
}
test(function(t) {
test(t => {
const effect = new KeyframeEffectReadOnly(null,
{ left: ['10px', '20px'] },
{ duration: 100 * MS_PER_SEC,
@ -193,10 +191,10 @@ test(function(t) {
'Effect created with null target has correct target');
}, 'A KeyframeEffectReadOnly constructed with null target');
test(function(t) {
test(t => {
const test_error = { name: 'test' };
assert_throws(test_error, function() {
assert_throws(test_error, () => {
new KeyframeEffect(target, { get left() { throw test_error }})
});
}, 'KeyframeEffect constructor propagates exceptions generated by accessing'

14
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/copy-constructor.html
View file

@ -2,9 +2,9 @@
<meta charset=utf-8>
<title>KeyframeEffect and KeyframeEffectReadOnly copy constructor</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-keyframeeffect-source">
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-keyframeeffect-source">
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly-source">
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly-source">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -13,13 +13,13 @@
<script>
'use strict';
test(function(t) {
test(t => {
const effect = new KeyframeEffectReadOnly(createDiv(t), null);
const copiedEffect = new KeyframeEffectReadOnly(effect);
assert_equals(copiedEffect.target, effect.target, 'same target');
}, 'Copied KeyframeEffectReadOnly has the same target');
test(function(t) {
test(t => {
const effect =
new KeyframeEffectReadOnly(null,
[ { marginLeft: '0px' },
@ -52,7 +52,7 @@ test(function(t) {
}
}, 'Copied KeyframeEffectReadOnly has the same keyframes');
test(function(t) {
test(t => {
const effect =
new KeyframeEffectReadOnly(null, null,
{ iterationComposite: 'accumulate' });
@ -64,7 +64,7 @@ test(function(t) {
'same compositeOperation');
}, 'Copied KeyframeEffectReadOnly has the same KeyframeEffectOptions');
test(function(t) {
test(t => {
const effect = new KeyframeEffectReadOnly(null, null,
{ duration: 100 * MS_PER_SEC,
delay: -1 * MS_PER_SEC,
@ -90,7 +90,7 @@ test(function(t) {
assert_equals(timingA.easing, timingB.easing, 'same easing');
}, 'Copied KeyframeEffectReadOnly has the same timing content');
test(function(t) {
test(t => {
const effect = new KeyframeEffectReadOnly(createDiv(t), null);
assert_equals(effect.constructor.name, 'KeyframeEffectReadOnly');
assert_equals(effect.timing.constructor.name,

212
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
View file

@ -1,212 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>KeyframeEffectReadOnly getComputedTiming() tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffectreadonly-getcomputedtiming">
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
<script src="/resources/testharness.js"></script>
<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");
test(function(t) {
var effect = new KeyframeEffectReadOnly(target,
{ left: ["10px", "20px"] });
var 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 = [
{ desc: "an empty KeyframeEffectOptions object",
input: { },
expected: { } },
{ desc: "a normal KeyframeEffectOptions object",
input: { delay: 1000,
fill: "auto",
iterations: 5.5,
duration: "auto",
direction: "alternate" },
expected: { delay: 1000,
fill: "none",
iterations: 5.5,
duration: 0,
direction: "alternate" } },
{ desc: "a double value",
input: 3000,
timing: { duration: 3000 },
expected: { delay: 0,
fill: "none",
iterations: 1,
duration: 3000,
direction: "normal" } },
{ desc: "+Infinity",
input: Infinity,
expected: { duration: Infinity } },
{ desc: "an Infinity duration",
input: { duration: Infinity },
expected: { duration: Infinity } },
{ desc: "an auto duration",
input: { duration: "auto" },
expected: { duration: 0 } },
{ desc: "an Infinity iterations",
input: { iterations: Infinity },
expected: { iterations: Infinity } },
{ desc: "an auto fill",
input: { fill: "auto" },
expected: { fill: "none" } },
{ desc: "a forwards fill",
input: { fill: "forwards" },
expected: { fill: "forwards" } }
];
gGetComputedTimingTests.forEach(function(stest) {
test(function(t) {
var 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 = function(field, defaultValue) {
return field in stest.expected ? stest.expected[field] : defaultValue;
};
var 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 = [
{ 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 },
expected: 7000 },
{ desc: "a non-zero duration and fractional iteration count",
input: { duration: 1000, iterations: 2.5 },
expected: 2500 },
{ desc: "an non-zero duration and infinite iteration count",
input: { duration: 1000, iterations: Infinity },
expected: Infinity },
{ desc: "an non-zero duration and zero iteration count",
input: { duration: 1000, iterations: 0 },
expected: 0 },
{ desc: "a zero duration and default iteration count",
input: { duration: 0 },
expected: 0 },
{ desc: "a zero duration and fractional iteration count",
input: { duration: 0, iterations: 2.5 },
expected: 0 },
{ desc: "a zero duration and infinite iteration count",
input: { duration: 0, iterations: Infinity },
expected: 0 },
{ desc: "a zero duration and zero iteration count",
input: { duration: 0, iterations: 0 },
expected: 0 },
{ desc: "an infinite duration and default iteration count",
input: { duration: Infinity },
expected: Infinity },
{ desc: "an infinite duration and zero iteration count",
input: { duration: Infinity, iterations: 0 },
expected: 0 },
{ desc: "an infinite duration and fractional iteration count",
input: { duration: Infinity, iterations: 2.5 },
expected: Infinity },
{ desc: "an infinite duration and infinite iteration count",
input: { duration: Infinity, iterations: Infinity },
expected: Infinity },
];
gActiveDurationTests.forEach(function(stest) {
test(function(t) {
var effect = new KeyframeEffectReadOnly(target,
{ left: ["10px", "20px"] },
stest.input);
assert_equals(effect.getComputedTiming().activeDuration,
stest.expected);
}, "getComputedTiming().activeDuration for " + stest.desc);
});
var 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 },
expected: 2500 },
{ desc: "a non-zero duration and non-zero delay",
input: { duration: 1000, delay: 1500 },
expected: 2500 },
{ desc: "a non-zero duration, non-zero delay and non-default iteration",
input: { duration: 1000, delay: 1500, iterations: 2 },
expected: 3500 },
{ desc: "an infinite iteration count",
input: { duration: 1000, iterations: Infinity },
expected: Infinity },
{ desc: "an infinite duration",
input: { duration: Infinity, iterations: 10 },
expected: Infinity },
{ desc: "an infinite duration and delay",
input: { duration: Infinity, iterations: 10, delay: 1000 },
expected: Infinity },
{ desc: "an infinite duration and negative delay",
input: { duration: Infinity, iterations: 10, delay: -1000 },
expected: Infinity },
{ desc: "an non-zero duration and negative delay",
input: { duration: 1000, iterations: 2, delay: -1000 },
expected: 1000 },
{ desc: "an non-zero duration and negative delay greater than active " +
"duration",
input: { duration: 1000, iterations: 2, delay: -3000 },
expected: 0 },
{ desc: "a zero duration and negative delay",
input: { duration: 0, iterations: 2, delay: -1000 },
expected: 0 }
];
gEndTimeTests.forEach(function(stest) {
test(function(t) {
var effect = new KeyframeEffectReadOnly(target,
{ left: ["10px", "20px"] },
stest.input);
assert_equals(effect.getComputedTiming().endTime,
stest.expected);
}, "getComputedTiming().endTime for " + stest.desc);
});
done();
</script>
</body>

4
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/idlharness.html
View file

@ -1,9 +1,9 @@
<!doctype html>
<meta charset=utf-8>
<title>KeyframeEffect IDL</title>
<link rel="help" href="https://w3c.github.io/web-animations/#keyframeeffect">
<link rel="help" href="https://drafts.csswg.org/web-animations/#keyframeeffect">
<link rel="help"
href="https://w3c.github.io/web-animations/#keyframeeffectreadonly">
href="https://drafts.csswg.org/web-animations/#keyframeeffectreadonly">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>

824
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>KeyframeEffect.iterationComposite tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#effect-accumulation-section">
<title>KeyframeEffect.iterationComposite</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-iterationcomposite">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script src="../../testcommon.js"></script>
@ -9,792 +9,13 @@
<script>
'use strict';
test(function(t) {
var div = createDiv(t);
var 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',
'Animated align-content style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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(function(t) {
var div = createDiv(t);
var 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;
assert_equals(getComputedStyle(div).marginLeft, '5px',
'Animated margin-left style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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(function(t) {
var parent = createDiv(t);
parent.style.width = '100px';
var div = createDiv(t);
parent.appendChild(div);
var 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;
assert_equals(getComputedStyle(div).width, '25px',
'Animated width style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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(function(t) {
var div = createDiv(t);
var 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;
assert_equals(getComputedStyle(div).color, 'rgb(60, 60, 60)',
'Animated color style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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(function(t) {
var div = createDiv(t);
var 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;
assert_equals(getComputedStyle(div).color, 'rgb(30, 90, 30)',
'Animated color style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).color, 'rgb(120, 240, 120)',
'Animated color style at 0s of the third iteration');
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(function(t) {
var div = createDiv(t);
var 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;
assert_equals(getComputedStyle(div).flexGrow, '5',
'Animated flex-grow style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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(function(t) {
var div = createDiv(t);
div.style.position = 'absolute';
var 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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).clip, 'rect(5px, 5px, 5px, 5px)',
'Animated clip style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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(function(t) {
var div = createDiv(t);
var 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;
assert_equals(getComputedStyle(div).width, '5px',
'Animated calc width style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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(function(t) {
var parent = createDiv(t);
parent.style.width = '100px';
var div = createDiv(t);
parent.appendChild(div);
var 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;
assert_equals(getComputedStyle(div).width, '10px',
// 100px * 5% + 5px
'Animated calc width style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).width,
'40px', // 100px * (10% + 10%) + (10px + 10px)
'Animated calc width style at 0s of the third iteration');
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(function(t) {
var div = createDiv(t);
var 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;
assert_equals(getComputedStyle(div).opacity, '0.2',
'Animated opacity style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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(function(t) {
var div = createDiv(t);
var 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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).boxShadow,
'rgb(60, 60, 60) 5px 5px 5px 0px',
'Animated box-shadow style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).boxShadow,
'rgb(240, 240, 240) 20px 20px 20px 0px',
'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(function(t) {
var div = createDiv(t);
var 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;
assert_equals(getComputedStyle(div).filter, 'blur(5px)',
'Animated filter blur style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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(function(t) {
var div = createDiv(t);
var anim =
div.animate({ filter: ['brightness(1)',
'brightness(180%)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'brightness(1.4)',
'Animated filter brightness style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
'brightness(2.6)', // brightness(1) + brightness(0.8) + brightness(0.8)
'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(function(t) {
var div = createDiv(t);
var anim =
div.animate({ filter: ['brightness(0)',
'brightness(1)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'brightness(0.5)',
'Animated filter brightness style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
'brightness(0)', // brightness(1) is an identity element, not accumulated.
'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(function(t) {
var div = createDiv(t);
var 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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'drop-shadow(rgb(60, 60, 60) 5px 5px 5px)',
'Animated filter drop-shadow style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
'drop-shadow(rgb(240, 240, 240) 20px 20px 20px)',
'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(function(t) {
var div = createDiv(t);
var 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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'brightness(1.5) contrast(1.5)',
'Animated filter list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
'brightness(3) contrast(3)',
'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(function(t) {
var div = createDiv(t);
var 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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'contrast(2) brightness(2)', // discrete
'Animated filter list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
// We can't accumulate 'contrast(2) brightness(2)' onto
// the first list 'brightness(1) contrast(1)' because of
// mismatch of the order.
'brightness(1) contrast(1)',
'Animated filter list at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
// 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(function(t) {
var div = createDiv(t);
var anim =
div.animate({ filter: ['sepia(0)',
'sepia(1) contrast(2)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).filter,
'sepia(0.5) contrast(1.5)',
'Animated filter list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).filter,
'sepia(2) contrast(3)',
'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(function(t) {
var div = createDiv(t);
var 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;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(0, 1, -1, 0, 0, 0)', // rotate(90deg)
'Animated transform(rotate) style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 0, 0)', // rotate(360deg)
'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(function(t) {
var div = createDiv(t);
var 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;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5)
'Animated transform(scale) style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(0, 0, 0, 0, 0, 0)', // scale(0); scale(1) is an identity element,
// not accumulated.
'Animated transform(scale) style at 0s of the third iteration');
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(function(t) {
var div = createDiv(t);
var 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;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(1.5, 0, 0, 1.5, 0, 0)', // scale(1.5)
'Animated transform(scale) style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(3, 0, 0, 3, 0, 0)', // scale(1 + (2 -1) + (2 -1))
'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(function(t) {
var div = createDiv(t);
var 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;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 0, 0)', // scale(1)
'Animated transform(scale) style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(2, 0, 0, 2, 0, 0)', // (scale(0) + scale(2-1)*2)
'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(function(t) {
var div = createDiv(t);
var 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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(0, 1, -1, 0, 0, 5)', // rotate(90deg) translateX(5px)
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px)
'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(function(t) {
var div = createDiv(t);
var 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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(2.5, 0, 0, 2.5, 15, 0)',
'Animated transform of matrix function at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
// scale(2) + (scale(3-1)*2) + translateX(30px)*2
'matrix(6, 0, 0, 6, 60, 0)',
'Animated transform of matrix function at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
// 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(function(t) {
var div = createDiv(t);
var 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();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
// Interpolate between matrix(2, 0, 0, 2, 0, 0) = translateX(0px) scale(2)
// and matrix(3, 0, 0, 3, 30, 0) = scale(3) translateX(10px)
'matrix(2.5, 0, 0, 2.5, 15, 0)',
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
// 'from' and 'to' value are mismatched, so accumulate
// matrix(2, 0, 0, 2, 0, 0) onto matrix(3, 0, 0, 3, 30, 0) * 2
// = scale(2) + (scale(3-1)*2) + translateX(30px)*2
'matrix(6, 0, 0, 6, 60, 0)',
'Animated transform list at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
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(function(t) {
var 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 =
div.animate({ transform: ['translateX(0px)',
'scale(2) translateX(10px)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
// Interpolate between matrix(1, 0, 0, 1, 0, 0) = translateX(0px)
// and matrix(2, 0, 0, 2, 20, 0) = scale(2) translateX(10px)
'matrix(1.5, 0, 0, 1.5, 10, 0)',
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
// 'from' and 'to' value are mismatched, so accumulate
// matrix(1, 0, 0, 1, 0, 0) onto matrix(2, 0, 0, 2, 20, 0) * 2
// = scale(1) + (scale(2-1)*2) + translateX(20px)*2
'matrix(3, 0, 0, 3, 40, 0)',
'Animated transform list at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
// Interpolate between matrix(3, 0, 0, 3, 40, 0)
// 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(function(t) {
var div = createDiv(t);
var anim =
div.animate({ transform: ['none',
'translateX(10px)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
// translateX(none) -> translateX(10px) @ 50%
'matrix(1, 0, 0, 1, 5, 0)',
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
// translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 0%
'matrix(1, 0, 0, 1, 20, 0)',
'Animated transform list at 0s of the third iteration');
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(function(t) {
var div = createDiv(t);
var 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)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 40, 1)',
'Animated transform of matrix3d function at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
// translateZ(30px) + (translateZ(50px)*2)
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)',
'Animated transform of matrix3d function at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
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(function(t) {
var div = createDiv(t);
var 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();
anim.currentTime = 0;
assert_matrix_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 0, 0)', // Actually not rotated at all.
'Animated transform of rotate3d function at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
rotate3dToMatrix3d(1, 1, 0, Math.PI), // 180deg
'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(function(t) {
var div = createDiv(t);
var 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;
assert_equals(getComputedStyle(div).marginLeft, '15px',
'Animated margin-left style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
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(function(t) {
var div = createDiv(t);
var 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;
assert_equals(getComputedStyle(div).marginLeft,
'0px',
'Animated margin-left style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).marginLeft,
'-10px', // 10px + -10px + -10px
'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(function(t) {
var div = createDiv(t);
var anim = div.animate({ marginLeft: ['0px', '10px'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
test(t => {
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 =
@ -809,31 +30,6 @@ test(function(t) {
anim.effect.iterationComposite = 'accumulate';
assert_equals(getComputedStyle(div).marginLeft, '25px',
'Animated style at 50s of the third iteration');
}, 'interationComposite changes');
test(function(t) {
var div = createDiv(t);
var 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.
anim.effect.timing.duration = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).marginLeft, '12.5px',
'Animated style at 25s of the first iteration');
// half of original.
anim.effect.timing.duration = anim.effect.timing.duration / 4;
assert_equals(getComputedStyle(div).marginLeft, '50px',
'Animated style at 50s of the fourth iteration');
}, 'duration changes with iterationComposite(accumulate)');
}, 'iterationComposite can be updated while an animation is in progress');
</script>

6
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for processing a keyframes argument (property access)</title>
<link rel="help" href="https://w3c.github.io/web-animations/#processing-a-keyframes-argument">
<title>Processing a keyframes argument (property access)</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#processing-a-keyframes-argument">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -201,7 +201,7 @@ test(() => {
{ offset: null, computedOffset: 0.5, easing: 'linear', left: '300px' },
{ offset: null, computedOffset: 1, easing: 'linear', left: '200px' },
]);
}, "'easing' and 'offset' are ignored on iterable objects");
}, '\'easing\' and \'offset\' are ignored on iterable objects');
test(() => {
const effect = new KeyframeEffect(null, createIterable([

4
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for processing a keyframes argument (easing)</title>
<link rel="help" href="https://w3c.github.io/web-animations/#processing-a-keyframes-argument">
<title>Processing a keyframes argument (easing)</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#processing-a-keyframes-argument">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>

36
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>KeyframeEffect setKeyframes() tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-keyframeeffect-setkeyframes">
<title>KeyframeEffect.setKeyframes</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-setkeyframes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -13,31 +13,31 @@
<script>
'use strict';
var target = document.getElementById('target');
const target = document.getElementById('target');
test(function(t) {
gEmptyKeyframeListTests.forEach(function(frame) {
var effect = new KeyframeEffect(target, {});
test(t => {
for (const frame of gEmptyKeyframeListTests) {
const effect = new KeyframeEffect(target, {});
effect.setKeyframes(frame);
assert_frame_lists_equal(effect.getKeyframes(), []);
});
}
}, 'Keyframes can be replaced with an empty keyframe');
gKeyframesTests.forEach(function(subtest) {
test(function(t) {
var effect = new KeyframeEffect(target, {});
for (const subtest of gKeyframesTests) {
test(t => {
const effect = new KeyframeEffect(target, {});
effect.setKeyframes(subtest.input);
assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
}, 'Keyframes can be replaced with ' + subtest.desc);
});
}, `Keyframes can be replaced with ${subtest.desc}`);
}
gInvalidKeyframesTests.forEach(function(subtest) {
test(function(t) {
var effect = new KeyframeEffect(target, {});
assert_throws(new TypeError, function() {
for (const subtest of gInvalidKeyframesTests) {
test(t => {
const effect = new KeyframeEffect(target, {});
assert_throws(new TypeError, () => {
effect.setKeyframes(subtest.input);
});
}, 'KeyframeEffect constructor throws with ' + subtest.desc);
});
}, `KeyframeEffect constructor throws with ${subtest.desc}`);
}
</script>
</body>

38
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/setTarget.html → tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/target.html
View file

@ -1,24 +1,24 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Writable effect.target tests</title>
<title>KeyframeEffect.target</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-target">
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-target">
<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";
'use strict';
var gKeyFrames = { 'marginLeft': ['0px', '100px'] };
const gKeyFrames = { 'marginLeft': ['0px', '100px'] };
test(function(t) {
var div = createDiv(t);
var effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
test(t => {
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;
@ -26,11 +26,11 @@ test(function(t) {
'Value at 50% progress');
}, 'Test setting target before constructing the associated animation');
test(function(t) {
var div = createDiv(t);
test(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;
@ -41,10 +41,10 @@ test(function(t) {
'Value at 50% progress after setting new target');
}, 'Test setting target from null to a valid target');
test(function(t) {
var div = createDiv(t);
test(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',
@ -55,12 +55,12 @@ test(function(t) {
'Value after clearing the target')
}, 'Test setting target from a valid target to null');
test(function(t) {
var a = createDiv(t);
var b = createDiv(t);
test(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',

4
tests/wpt/web-platform-tests/web-animations/resources/easing-tests.js
View file

@ -1,4 +1,6 @@
var gEasingTests = [
'use strict';
const gEasingTests = [
{
desc: 'step-start function',
easing: 'step-start',

4
tests/wpt/web-platform-tests/web-animations/resources/effect-tests.js
View file

@ -1,3 +1,5 @@
'use strict';
// Common utility methods for testing animation effects
// Tests the |property| member of |animation's| target effect's computed timing
@ -26,7 +28,7 @@ function assert_computed_timing_for_each_phase(animation, property, values) {
const timing = effect.getComputedTiming();
// The following calculations are based on the definitions here:
// https://w3c.github.io/web-animations/#animation-effect-phases-and-states
// https://drafts.csswg.org/web-animations/#animation-effect-phases-and-states
const beforeActive = Math.max(Math.min(timing.delay, timing.endTime), 0);
const activeAfter =
Math.max(Math.min(timing.delay + timing.activeDuration, timing.endTime), 0);

120
tests/wpt/web-platform-tests/web-animations/testcommon.js
View file

@ -10,19 +10,19 @@ policies and contribution forms [3].
'use strict';
var MS_PER_SEC = 1000;
const MS_PER_SEC = 1000;
// The recommended minimum precision to use for time values[1].
//
// [1] https://w3c.github.io/web-animations/#precision-of-time-values
var TIME_PRECISION = 0.0005; // ms
// [1] https://drafts.csswg.org/web-animations/#precision-of-time-values
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 = function(actual, expected, description) {
window.assert_times_equal = (actual, expected, description) => {
assert_approx_equals(actual, expected, TIME_PRECISION, description);
}
};
}
// creates div element, appends it to the document body and
@ -38,9 +38,9 @@ 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(function() {
test.add_cleanup(() => {
element.remove();
});
return element;
@ -61,16 +61,16 @@ 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) {
sheet.insertRule(selector + '{' + rules[selector] + '}',
const sheet = extraStyle.sheet;
for (const selector in rules) {
sheet.insertRule(`${selector}{${rules[selector]}}`,
sheet.cssRules.length);
}
}
test.add_cleanup(function() {
test.add_cleanup(() => {
extraStyle.remove();
});
}
@ -78,37 +78,37 @@ function createStyle(test, rules, doc) {
// Create a pseudo element
function createPseudo(test, type) {
createStyle(test, { '@keyframes anim': '',
['.pseudo::' + type]: 'animation: anim 10s; ' +
[`.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);
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) {
function xForT(t) {
var omt = 1-t;
const xForT = t => {
const omt = 1-t;
return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t;
}
};
function yForT(t) {
var omt = 1-t;
const yForT = t => {
const omt = 1-t;
return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t;
}
};
function tForX(x) {
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 {
@ -116,9 +116,9 @@ function cubicBezier(x1, y1, x2, y2) {
}
}
return (mint + maxt) / 2;
}
};
return function bezierClosure(x) {
return x => {
if (x == 0) {
return 0;
}
@ -126,31 +126,29 @@ function cubicBezier(x1, y1, x2, y2) {
return 1;
}
return yForT(tForX(x));
}
};
}
function stepEnd(nsteps) {
return function stepEndClosure(x) {
return Math.floor(x * nsteps) / nsteps;
}
return x => Math.floor(x * nsteps) / nsteps;
}
function stepStart(nsteps) {
return function stepStartClosure(x) {
var result = Math.floor(x * nsteps + 1.0) / nsteps;
return x => {
const result = Math.floor(x * nsteps + 1.0) / nsteps;
return (result > 1.0) ? 1.0 : result;
}
};
}
function framesTiming(nframes) {
return function framesClosure(x) {
var result = Math.floor(x * nframes) / (nframes - 1);
return x => {
const result = Math.floor(x * nframes) / (nframes - 1);
return (result > 1.0 && x <= 1.0) ? 1.0 : result;
}
};
}
function waitForAnimationFrames(frameCount) {
return new Promise(function(resolve, reject) {
return new Promise(resolve => {
function handleFrame() {
if (--frameCount <= 0) {
resolve();
@ -166,8 +164,8 @@ function waitForAnimationFrames(frameCount) {
// as recorded using document.timeline.currentTime (i.e. frame time not
// wall-clock time).
function waitForAnimationFramesWithDelay(minDelay) {
var startTime = document.timeline.currentTime;
return new Promise(function(resolve) {
const startTime = document.timeline.currentTime;
return new Promise(resolve => {
(function handleFrame() {
if (document.timeline.currentTime - startTime >= minDelay) {
resolve();
@ -178,10 +176,24 @@ function waitForAnimationFramesWithDelay(minDelay) {
});
}
// Waits for a requestAnimationFrame callback in the next refresh driver tick.
function waitForNextFrame() {
const timeAtStart = document.timeline.currentTime;
return new Promise(resolve => {
window.requestAnimationFrame(() => {
if (timeAtStart === document.timeline.currentTime) {
window.requestAnimationFrame(resolve);
} else {
resolve();
}
});
});
}
// Returns 'matrix()' or 'matrix3d()' function string generated from an array.
function createMatrixFromArray(array) {
return (array.length == 16 ? 'matrix3d' : 'matrix') +
'(' + array.join() + ')';
return (array.length == 16 ? 'matrix3d' : 'matrix') + `(${array.join()})`;
}
// Returns 'matrix3d()' function string equivalent to
@ -193,11 +205,11 @@ function rotate3dToMatrix3d(x, y, z, radian) {
// Returns an array of the 4x4 matrix equivalent to 'rotate3d(x, y, z, radian)'.
// https://www.w3.org/TR/css-transforms-1/#Rotate3dDefined
function rotate3dToMatrix(x, y, z, radian) {
var sc = Math.sin(radian / 2) * Math.cos(radian / 2);
var sq = Math.sin(radian / 2) * Math.sin(radian / 2);
const sc = Math.sin(radian / 2) * Math.cos(radian / 2);
const sq = Math.sin(radian / 2) * Math.sin(radian / 2);
// Normalize the vector.
var length = Math.sqrt(x*x + y*y + z*z);
const length = Math.sqrt(x*x + y*y + z*z);
x /= length;
y /= length;
z /= length;
@ -224,21 +236,21 @@ function rotate3dToMatrix(x, y, z, radian) {
// Compare matrix string like 'matrix(1, 0, 0, 1, 100, 0)' with tolerances.
function assert_matrix_equals(actual, expected, description) {
var matrixRegExp = /^matrix(?:3d)*\((.+)\)/;
const matrixRegExp = /^matrix(?:3d)*\((.+)\)/;
assert_regexp_match(actual, matrixRegExp,
'Actual value is not a matrix')
assert_regexp_match(expected, matrixRegExp,
'Expected value is not a matrix');
var actualMatrixArray =
const actualMatrixArray =
actual.match(matrixRegExp)[1].split(',').map(Number);
var expectedMatrixArray =
const expectedMatrixArray =
expected.match(matrixRegExp)[1].split(',').map(Number);
assert_equals(actualMatrixArray.length, expectedMatrixArray.length,
'dimension of the matrix: ' + description);
for (var i = 0; i < actualMatrixArray.length; i++) {
`dimension of the matrix: ${description}`);
for (let i = 0; i < actualMatrixArray.length; i++) {
assert_approx_equals(actualMatrixArray[i], expectedMatrixArray[i], 0.0001,
'expected ' + expected + ' but got ' + actual + ": " + description);
`expected ${expected} but got ${actual}: ${description}`);
}
}

123
tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/active-time.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Active time tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#calculating-the-active-time">
<title>Active time</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-the-active-time">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,110 +10,109 @@
<script>
'use strict';
test(function(t) {
var tests = [ { fill: 'none', progress: null },
{ fill: 'backwards', progress: 0 },
{ fill: 'forwards', progress: null },
{ fill: 'both', progress: 0 } ];
tests.forEach(function(test) {
var anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
test(t => {
const tests = [ { fill: 'none', progress: null },
{ fill: 'backwards', progress: 0 },
{ fill: 'forwards', progress: null },
{ fill: 'both', progress: 0 } ];
for (const test of tests) {
const anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
assert_equals(anim.effect.getComputedTiming().progress, test.progress,
'Progress in before phase when using \'' + test.fill
+ '\' fill');
});
`Progress in before phase when using '${test.fill}' fill`);
}
}, 'Active time in before phase');
test(function(t) {
var anim = createDiv(t).animate(null, 1000);
test(t => {
const anim = createDiv(t).animate(null, 1000);
anim.currentTime = 500;
assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
}, 'Active time in active phase and no start delay is the local time');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000, delay: 500 });
test(t => {
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(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000, delay: -500 });
test(t => {
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(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.getComputedTiming().progress, null);
}, 'Active time in after phase with no fill is unresolved');
test(function(t) {
var anim = createDiv(t).animate(null, { fill: 'backwards' });
test(t => {
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(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500, // Should have no effect
fill: 'forwards' });
test(t => {
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(function(t) {
var anim = createDiv(t).animate(null, { duration: 0,
iterations: Infinity,
fill: 'forwards' });
test(t => {
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(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: 4000,
fill: 'forwards' });
test(t => {
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(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -800,
fill: 'forwards' });
test(t => {
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(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -2500,
fill: 'forwards' });
test(t => {
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(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -4000,
fill: 'forwards' });
test(t => {
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);
@ -121,20 +120,20 @@ test(function(t) {
+ ' greater in magnitude than the sum of the active duration and start delay'
+ ' is zero');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
fill: 'both' });
test(t => {
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(function(t) {
test(t => {
// Create an effect with a non-zero duration so we ensure we're not just
// testing the after-phase behavior.
var effect = new KeyframeEffect(null, null, 1);
const effect = new KeyframeEffect(null, null, 1);
assert_equals(effect.getComputedTiming().progress, null);
}, 'Active time when the local time is unresolved, is unresolved');

12
tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/current-iteration.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Current iteration tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#current-iteration">
<title>Current iteration</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#current-iteration">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -38,11 +38,11 @@ function runTests(tests, description) {
}
}
async_test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, { delay: 1 });
async_test(t => {
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(function() {
anim.finished.then(t.step_func(() => {
assert_equals(anim.effect.getComputedTiming().currentIteration, null);
t.done();
}));

19
tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/local-time.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationEffect local time tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#local-time">
<title>Local time</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#local-time">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -9,16 +9,19 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null, 10 * MS_PER_SEC);
for (var seconds of [-1, 0, 5, 10, 20]) {
test(t => {
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(function(t) {
var effect = new KeyframeEffect(createDiv(t), null, 10 * MS_PER_SEC);
test(t => {
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');

177
tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/phases-and-states.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Tests for phases and states</title>
<link rel="help" href="https://w3c.github.io/web-animations/#animation-effect-phases-and-states">
<title>Phases and states</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-effect-phases-and-states">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -25,7 +25,7 @@ function assert_phase_at_time(animation, phase, currentTime) {
animation.effect.timing.fill = 'none';
assert_not_equals(animation.effect.getComputedTiming().progress, null,
'Animation effect is in active phase when current time'
+ ' is ' + currentTime + 'ms');
+ ` is ${currentTime}ms`);
} else {
// The easiest way to distinguish between the 'before' phase and the 'after'
// phase is to toggle the fill mode. For example, if the progress is null
@ -33,157 +33,146 @@ function assert_phase_at_time(animation, phase, currentTime) {
// 'backwards' then we are in the before phase.
animation.effect.timing.fill = 'none';
assert_equals(animation.effect.getComputedTiming().progress, null,
'Animation effect is in ' + phase + ' phase when current time'
+ ' is ' + currentTime + 'ms'
`Animation effect is in ${phase} phase when current time`
+ ` is ${currentTime}ms`
+ ' (progress is null with \'none\' fill mode)');
animation.effect.timing.fill = phase === 'before'
? 'backwards'
: 'forwards';
assert_not_equals(animation.effect.getComputedTiming().progress, null,
'Animation effect is in ' + phase + ' phase when current'
+ ' time is ' + currentTime + 'ms'
`Animation effect is in ${phase} phase when current time`
+ ` is ${currentTime}ms`
+ ' (progress is non-null with appropriate fill mode)');
}
}
test(function(t) {
var animation = createDiv(t).animate(null, 1);
test(t => {
const animation = createDiv(t).animate(null, 1);
[ { currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 1, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 1, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for a simple animation effect');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1, delay: 1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1, delay: 1 });
[ { currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a positive start delay');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1, delay: -1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1, delay: -1 });
[ { currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative start delay');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 });
[ { currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 1, phase: 'after' },
{ currentTime: 2, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 1, phase: 'after' },
{ currentTime: 2, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a positive end delay');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 });
[ { currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 0.9, phase: 'active' },
{ currentTime: 1, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 0.9, phase: 'active' },
{ currentTime: 1, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative end delay lesser'
+ ' in magnitude than the active duration');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 });
[ { currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' },
{ currentTime: 1, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' },
{ currentTime: 1, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative end delay equal'
+ ' in magnitude to the active duration');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });
[ { currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative end delay'
+ ' greater in magnitude than the active duration');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 2,
delay: 1,
endDelay: -1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 2,
delay: 1,
endDelay: -1 });
[ { currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a positive start delay'
+ ' and a negative end delay lesser in magnitude than the active duration');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1,
delay: -1,
endDelay: -1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1,
delay: -1,
endDelay: -1 });
[ { currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative start delay'
+ ' and a negative end delay equal in magnitude to the active duration');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1,
delay: -1,
endDelay: -2 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1,
delay: -1,
endDelay: -2 });
[ { currentTime: -3, phase: 'before' },
{ currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -3, phase: 'before' },
{ currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative start delay'
+ ' and a negative end delay equal greater in magnitude than the active'
+ ' duration');
test(function(t) {
var animation = createDiv(t).animate(null, 1);
test(t => {
const animation = createDiv(t).animate(null, 1);
animation.playbackRate = -1;
[ { currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for a simple animation effect with negative playback'
+ ' rate');

4
tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/simple-iteration-progress.html
View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Simple iteration progress tests</title>
<title>Simple iteration progress</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#simple-iteration-progress">
href="https://drafts.csswg.org/web-animations/#simple-iteration-progress">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>

54
tests/wpt/web-platform-tests/web-animations/timing-model/animations/canceling-an-animation.html
View file

@ -2,16 +2,16 @@
<meta charset=utf-8>
<title>Canceling an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#canceling-an-animation-section">
href="https://drafts.csswg.org/web-animations/#canceling-an-animation-section">
<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";
'use strict';
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const retPromise = animation.ready.then(() => {
assert_unreached('ready promise was fulfilled');
@ -26,12 +26,12 @@ promise_test(function(t) {
}, 'A play-pending ready promise should be rejected when the animation is'
+ ' canceled');
promise_test(function(t) {
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(function() {
const retPromise = animation.ready.then(() => {
assert_unreached('ready promise was fulfilled');
}).catch(err => {
assert_equals(err.name, 'AbortError',
@ -43,20 +43,58 @@ promise_test(function(t) {
}, 'A pause-pending ready promise should be rejected when the animation is'
+ ' canceled');
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null);
animation.cancel();
return animation.ready.then(function(p) {
return animation.ready.then(p => {
assert_equals(p, animation);
});
}, 'When an animation is canceled, it should create a resolved Promise');
test(function(t) {
test(t => {
const animation = createDiv(t).animate(null);
const promise = animation.ready;
animation.cancel();
assert_not_equals(animation.ready, promise);
}, 'The ready promise should be replaced when the animation is canceled');
promise_test(t => {
const animation = new Animation(
new KeyframeEffect(null, null, { duration: 1000 }),
null
);
assert_equals(animation.playState, 'idle',
'The animation should be initially idle');
animation.finished.then(t.step_func(() => {
assert_unreached('Finished promise should not resolve');
}), t.step_func(() => {
assert_unreached('Finished promise should not reject');
}));
animation.cancel();
return waitForAnimationFrames(3);
}, 'The finished promise should NOT be rejected if the animation is already'
+ ' idle');
promise_test(t => {
const animation = new Animation(
new KeyframeEffect(null, null, { duration: 1000 }),
null
);
assert_equals(animation.playState, 'idle',
'The animation should be initially idle');
animation.oncancel = t.step_func(() => {
assert_unreached('Cancel event should not be fired');
});
animation.cancel();
return waitForAnimationFrames(3);
}, 'The cancel event should NOT be fired if the animation is already'
+ ' idle');
</script>
</body>

37
tests/wpt/web-platform-tests/web-animations/timing-model/animations/current-time.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for current time</title>
<link rel="help" href="https://w3c.github.io/web-animations/#current-time">
<title>Current time</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#current-time">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,8 +10,8 @@
<script>
'use strict';
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
@ -21,12 +21,12 @@ test(function(t) {
'state');
}, 'The current time returns the hold time when set');
promise_test(function(t) {
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
return animation.ready.then(function() {
return animation.ready.then(() => {
assert_equals(animation.currentTime, null);
});
}, 'The current time is unresolved when there is no associated timeline ' +
@ -35,8 +35,8 @@ promise_test(function(t) {
// 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(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
@ -45,30 +45,29 @@ test(function(t) {
}, 'The current time is unresolved when the start time is unresolved ' +
'(and no hold time is set)');
test(function(t) {
var animation =
test(t => {
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(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.playbackRate = 0;
return animation.ready.then(function() {
return waitForAnimationFrames(1);
}).then(function() {
return animation.ready.then(() => waitForAnimationFrames(1))
.then(() => {
assert_times_equal(animation.currentTime, 0);
});
}, 'The current time does not progress if playback rate is 0');

4
tests/wpt/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation.html
View file

@ -2,7 +2,7 @@
<meta charset=utf-8>
<title>Finishing an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#finishing-an-animation-section">
href="https://drafts.csswg.org/web-animations/#finishing-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,7 +11,7 @@
<script>
'use strict';
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
let readyResolved = false;

6
tests/wpt/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation.html
View file

@ -2,7 +2,7 @@
<meta charset=utf-8>
<title>Pausing an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#finishing-an-animation-section">
href="https://drafts.csswg.org/web-animations/#pausing-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,14 +11,14 @@
<script>
'use strict';
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
animation.pause();
return promise.then(p => {
assert_equals(p, animation);
assert_equals(animation.ready, promise);
assert_equals(animation.playState, 'paused');
assert_false(animation.pending, 'No longer pause-pending');
});
}, 'A pending ready promise should be resolved and not replaced when the'
+ ' animation is paused');

157
tests/wpt/web-platform-tests/web-animations/timing-model/animations/play-states.html Normal file
View file

@ -0,0 +1,157 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Play states</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#play-state">
<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(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
assert_equals(animation.currentTime, null,
'Current time should be initially unresolved');
assert_equals(animation.playState, 'idle');
}, 'reports \'idle\' for an animation with an unresolved current time'
+ ' and no pending tasks')
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.pause();
assert_equals(animation.playState, 'paused');
}, 'reports \'paused\' for an animation with a pending pause task');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.currentTime = 0;
assert_equals(animation.startTime, null,
'Start time should still be unresolved after setting current'
+ ' time');
assert_equals(animation.playState, 'paused');
}, 'reports \'paused\' for an animation with a resolved current time and'
+ ' unresolved start time')
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
assert_not_equals(animation.currentTime, null,
'Current time should be resolved after setting start time');
assert_equals(animation.playState, 'running');
}, 'reports \'running\' for an animation with a resolved start time and'
+ ' current time');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.currentTime = 100 * MS_PER_SEC;
assert_equals(animation.playState, 'finished');
}, 'reports \'finished\' when playback rate > 0 and'
+ ' current time = target effect end');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.playbackRate = 0;
animation.currentTime = 100 * MS_PER_SEC;
assert_equals(animation.playState, 'running');
}, 'reports \'running\' when playback rate = 0 and'
+ ' current time = target effect end');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.playbackRate = -1;
animation.currentTime = 100 * MS_PER_SEC;
assert_equals(animation.playState, 'running');
}, 'reports \'running\' when playback rate < 0 and'
+ ' current time = target effect end');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.currentTime = 0;
assert_equals(animation.playState, 'running');
}, 'reports \'running\' when playback rate > 0 and'
+ ' current time = 0');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.playbackRate = 0;
animation.currentTime = 0;
assert_equals(animation.playState, 'running');
}, 'reports \'running\' when playback rate = 0 and'
+ ' current time = 0');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.playbackRate = -1;
animation.currentTime = 0;
assert_equals(animation.playState, 'finished');
}, 'reports \'finished\' when playback rate < 0 and'
+ ' current time = 0');
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 0);
assert_equals(animation.startTime, null,
'Sanity check: start time should be unresolved');
assert_equals(animation.playState, 'finished');
}, 'reports \'finished\' when playback rate > 0 and'
+ ' current time = target effect end and there is a pending play task');
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
assert_equals(animation.startTime, null,
'Sanity check: start time should be unresolved');
assert_equals(animation.playState, 'running');
}, 'reports \'running\' when playback rate > 0 and'
+ ' current time < target effect end and there is a pending play task');
</script>
</body>

18
tests/wpt/web-platform-tests/web-animations/timing-model/animations/playing-an-animation.html
View file

@ -2,7 +2,7 @@
<meta charset=utf-8>
<title>Playing an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#playing-an-animation-section">
href="https://drafts.csswg.org/web-animations/#playing-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,24 +11,24 @@
<script>
'use strict';
test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
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(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
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(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.playbackRate = -1;
animation.currentTime = 0;
assert_times_equal(animation.currentTime, 0);
@ -36,7 +36,7 @@ test(function(t) {
assert_times_equal(animation.currentTime, 100 * MS_PER_SEC);
}, 'Playing a finished and reversed animation seeks to end');
test(function(t) {
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.cancel();
const promise = animation.ready;
@ -45,7 +45,7 @@ test(function(t) {
}, 'The ready promise should be replaced if the animation is not already'
+ ' pending');
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
return promise.then(p => {

132
tests/wpt/web-platform-tests/web-animations/timing-model/animations/reversing-an-animation.html
View file

@ -1,53 +1,53 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Reversing an animation</title>
<title>Reverse an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#reverse-an-animation">
href="https://drafts.csswg.org/web-animations/#reverse-an-animation">
<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";
'use strict';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
iterations: Infinity});
promise_test(t => {
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(function() {
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(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
iterations: Infinity});
promise_test(t => {
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(function() {
return animation.ready.then(() => {
animation.reverse();
return animation.ready;
}).then(function() {
}).then(() => {
assert_equals(animation.playState, 'running',
'Animation.playState should be "running" after reverse()');
});
}, 'Reversing an animation plays a pausing animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.currentTime = 50 * MS_PER_SEC;
animation.reverse();
@ -56,24 +56,24 @@ test(function(t) {
'the animation duration');
}, 'Reversing an animation maintains the same current time');
test(function(t) {
var div = createDiv(t);
var 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');
test(t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 200 * MS_PER_SEC,
delay: -100 * MS_PER_SEC });
assert_true(animation.pending,
'The animation is pending before we call reverse');
animation.reverse();
assert_equals(animation.playState, 'pending',
'The playState is still pending after calling reverse');
assert_true(animation.pending,
'The animation is still pending after calling reverse');
}, 'Reversing an animation does not cause it to leave the pending state');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, { duration: 200 * MS_PER_SEC,
delay: -100 * MS_PER_SEC });
var readyResolved = false;
promise_test(t => {
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();
@ -84,9 +84,9 @@ promise_test(function(t) {
});
}, 'Reversing an animation does not cause it to resolve the ready promise');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.currentTime = 200 * MS_PER_SEC;
animation.reverse();
@ -96,9 +96,9 @@ test(function(t) {
}, 'Reversing an animation when playbackRate > 0 and currentTime > ' +
'effect end should make it play from the end');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.currentTime = -200 * MS_PER_SEC;
animation.reverse();
@ -109,9 +109,9 @@ test(function(t) {
}, 'Reversing an animation when playbackRate > 0 and currentTime < 0 ' +
'should make it play from the end');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.playbackRate = -1;
animation.currentTime = -200 * MS_PER_SEC;
animation.reverse();
@ -122,9 +122,9 @@ test(function(t) {
}, 'Reversing an animation when playbackRate < 0 and currentTime < 0 ' +
'should make it play from the start');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.playbackRate = -1;
animation.currentTime = 200 * MS_PER_SEC;
animation.reverse();
@ -135,23 +135,23 @@ test(function(t) {
}, 'Reversing an animation when playbackRate < 0 and currentTime > effect ' +
'end should make it play from the start');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
iterations: Infinity});
test(t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
animation.currentTime = -200 * MS_PER_SEC;
assert_throws('InvalidStateError',
function () { animation.reverse(); },
() => { 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(function(t) {
var animation = createDiv(t).animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
test(t => {
const animation = createDiv(t).animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
animation.currentTime = -200 * MS_PER_SEC;
try { animation.reverse(); } catch(e) { }
@ -159,10 +159,10 @@ test(function(t) {
assert_equals(animation.playbackRate, 1, 'playbackRate remains unchanged');
}, 'When reversing throws an exception, the playback rate remains unchanged');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
iterations: Infinity});
test(t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
animation.currentTime = -200 * MS_PER_SEC;
animation.playbackRate = 0;
@ -175,10 +175,10 @@ test(function(t) {
'and the target effect end is positive infinity should NOT throw an ' +
'exception');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
iterations: Infinity});
test(t => {
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();
@ -191,9 +191,9 @@ test(function(t) {
'and the target effect end is positive infinity should make it play ' +
'from the start');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.playbackRate = 0;
animation.currentTime = 50 * MS_PER_SEC;
animation.reverse();
@ -206,12 +206,12 @@ test(function(t) {
}, 'Reversing when when playbackRate == 0 should preserve the current ' +
'time and playback rate');
test(function(t) {
var div = createDiv(t);
var animation =
test(t => {
const div = createDiv(t);
const animation =
new Animation(new KeyframeEffect(div, null, 100 * MS_PER_SEC), null);
assert_throws('InvalidStateError', function() { animation.reverse(); });
assert_throws('InvalidStateError', () => { animation.reverse(); });
}, 'Reversing an animation without an active timeline throws an ' +
'InvalidStateError');

63
tests/wpt/web-platform-tests/web-animations/timing-model/animations/set-the-animation-start-time.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Setting the start time tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#set-the-animation-start-time">
<title>Set the animation start time</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#set-the-animation-start-time">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,12 +10,11 @@
<script>
'use strict';
test(function(t)
{
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);
@ -41,12 +40,11 @@ test(function(t)
}, 'Setting the start time of an animation without an active timeline');
test(function(t)
{
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);
@ -66,9 +64,8 @@ test(function(t)
}, 'Setting an unresolved start time an animation without an active timeline'
+ ' does not clear the current time');
test(function(t)
{
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
@ -93,9 +90,8 @@ test(function(t)
+ ' start time');
}, 'Setting the start time clears the hold time');
test(function(t)
{
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
@ -115,21 +111,20 @@ test(function(t)
+ ' start time');
}, 'Setting an unresolved start time sets the hold time');
promise_test(function(t)
{
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
var readyPromiseCallbackCalled = false;
animation.ready.then(function() { readyPromiseCallbackCalled = true; } );
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');
assert_true(animation.pending && animation.playState === 'running',
'Animation is in play-pending state');
// Setting the start time should resolve the 'ready' promise, i.e.
// it should schedule a microtask to run the promise callbacks.
@ -139,28 +134,27 @@ promise_test(function(t)
// If we schedule another microtask then it should run immediately after
// the ready promise resolution microtask.
return Promise.resolve().then(function() {
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(function(t)
{
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
var readyPromiseCallbackCalled = false;
animation.ready.then(function() { readyPromiseCallbackCalled = true; } );
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',
'Animation is in pause-pending state');
assert_true(animation.pending && animation.playState === 'paused',
'Animation is in pause-pending state');
// Setting the start time should resolve the 'ready' promise although
// the resolution callbacks when be run in a separate microtask.
@ -168,15 +162,14 @@ promise_test(function(t)
assert_false(readyPromiseCallbackCalled,
'Ready promise callback is not called synchronously');
return Promise.resolve().then(function() {
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(function(t)
{
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
@ -195,8 +188,8 @@ promise_test(function(t)
// Furthermore, that time should persist if we have correctly updated
// the hold time
var finishedCurrentTime = animation.currentTime;
return waitForAnimationFrames(1).then(function() {
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');

60
tests/wpt/web-platform-tests/web-animations/timing-model/animations/set-the-target-effect-of-an-animation.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Setting the target effect tests</title>
<link rel='help' href='https://w3c.github.io/web-animations/#setting-the-target-effect'>
<title>Setting the target effect</title>
<link rel='help' href='https://drafts.csswg.org/web-animations/#setting-the-target-effect'>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='../../testcommon.js'></script>
@ -10,63 +10,67 @@
<script>
'use strict';
promise_test(function(t) {
var anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_equals(anim.playState, 'pending');
promise_test(t => {
const anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_true(anim.pending);
var retPromise = anim.ready.then(function() {
const retPromise = anim.ready.then(() => {
assert_unreached('ready promise is fulfilled');
}).catch(function(err) {
}).catch(err => {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
anim.effect = null;
// This is a bit odd, see: https://github.com/w3c/web-animations/issues/207
assert_equals(anim.playState, 'paused');
assert_false(anim.pending);
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(function(t) {
var anim = new Animation();
promise_test(t => {
const anim = new Animation();
anim.pause();
assert_equals(anim.playState, 'pending');
assert_true(anim.pending);
anim.effect = new KeyframeEffectReadOnly(createDiv(t),
{ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_equals(anim.playState, 'pending');
assert_true(anim.pending);
return anim.ready.then(function() {
return anim.ready.then(() => {
assert_false(anim.pending);
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(function(t) {
var anim = new Animation();
promise_test(t => {
const anim = new Animation();
anim.play();
assert_equals(anim.playState, 'pending');
assert_true(anim.pending);
anim.effect = new KeyframeEffectReadOnly(createDiv(t),
{ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_equals(anim.playState, 'pending');
assert_true(anim.pending);
return anim.ready.then(function() {
return anim.ready.then(() => {
assert_false(anim.pending);
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(function(t) {
var animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
var animB = new Animation();
promise_test(t => {
const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
const animB = new Animation();
return animA.ready.then(function() {
return animA.ready.then(() => {
animB.effect = animA.effect;
assert_equals(animA.effect, null);
assert_equals(animA.playState, 'finished');
@ -74,11 +78,11 @@ promise_test(function(t) {
}, '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(function(t) {
var animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
var animB = new Animation();
var effect = animA.effect;
test(t => {
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,

150
tests/wpt/web-platform-tests/web-animations/timing-model/animations/set-the-timeline-of-an-animation.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Setting the timeline tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#setting-the-timeline">
<title>Setting the timeline</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#setting-the-timeline">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -16,8 +16,8 @@
//
// ---------------------------------------------------------------------
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.currentTime = 50 * MS_PER_SEC;
@ -29,8 +29,8 @@ test(function(t) {
assert_times_equal(animation.currentTime, 50 * MS_PER_SEC);
}, 'After setting timeline on paused animation it is still paused');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.currentTime = 200 * MS_PER_SEC;
@ -43,8 +43,8 @@ test(function(t) {
}, 'After setting timeline on animation paused outside active interval'
+ ' it is still paused');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
assert_equals(animation.playState, 'idle');
@ -55,8 +55,8 @@ test(function(t) {
}, 'After setting timeline on an idle animation without a start time'
+ ' it is still idle');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.startTime = document.timeline.currentTime;
@ -68,8 +68,8 @@ test(function(t) {
}, 'After setting timeline on an idle animation with a start time'
+ ' it is running');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.startTime = document.timeline.currentTime - 200 * MS_PER_SEC;
@ -81,60 +81,44 @@ test(function(t) {
}, 'After setting timeline on an idle animation with a sufficiently ancient'
+ ' start time it is finished');
test(function(t) {
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.play();
assert_equals(animation.playState, 'pending');
assert_true(animation.pending && animation.playState === 'running',
'Animation is initially play-pending');
animation.timeline = document.timeline;
assert_equals(animation.playState, 'pending');
}, 'After setting timeline on a play-pending animation it is still pending');
assert_true(animation.pending && animation.playState === 'running',
'Animation is still play-pending after setting timeline');
promise_test(function(t) {
var 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(function() {
assert_equals(animation.playState, 'running');
return animation.ready.then(() => {
assert_true(!animation.pending && animation.playState === 'running',
'Animation plays after it finishes pending');
});
}, 'After setting timeline on a play-pending animation it begins playing'
+ ' after pending');
test(function(t) {
var animation =
promise_test(t => {
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');
assert_true(animation.pending && animation.playState === 'paused',
'Animation is initially pause-pending');
animation.timeline = document.timeline;
assert_equals(animation.playState, 'pending');
}, 'After setting timeline on a pause-pending animation it is still pending');
assert_true(animation.pending && animation.playState === 'paused',
'Animation is still pause-pending after setting timeline');
promise_test(function(t) {
var 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;
return animation.ready.then(function() {
assert_equals(animation.playState, 'paused');
return animation.ready.then(() => {
assert_true(!animation.pending && animation.playState === 'paused',
'Animation pauses after it finishes pending');
});
}, 'After setting timeline on a pause-pending animation it becomes paused'
+ ' after pending');
@ -145,24 +129,26 @@ promise_test(function(t) {
//
// ---------------------------------------------------------------------
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
animation.currentTime = 50 * MS_PER_SEC;
assert_false(animation.pending);
assert_equals(animation.playState, 'paused');
animation.timeline = null;
assert_false(animation.pending);
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(function(t) {
var animation =
test(t => {
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');
@ -172,11 +158,11 @@ test(function(t) {
assert_times_equal(animation.startTime, initialStartTime);
}, 'After clearing timeline on finished animation it is idle');
test(function(t) {
var animation =
test(t => {
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');
@ -186,8 +172,8 @@ test(function(t) {
assert_times_equal(animation.startTime, initialStartTime);
}, 'After clearing timeline on running animation it is idle');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
assert_equals(animation.playState, 'idle');
@ -198,75 +184,73 @@ test(function(t) {
assert_equals(animation.startTime, null);
}, 'After clearing timeline on idle animation it is still idle');
test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
assert_equals(animation.playState, 'pending');
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
assert_true(animation.pending && animation.playState === 'running');
animation.timeline = null;
assert_equals(animation.playState, 'pending');
assert_true(animation.pending && animation.playState === 'running');
}, 'After clearing timeline on play-pending animation it is still pending');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
assert_equals(animation.playState, 'pending');
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
assert_true(animation.pending && animation.playState === 'running');
animation.timeline = null;
animation.timeline = document.timeline;
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'running');
assert_true(animation.pending && animation.playState === 'running');
return animation.ready.then(() => {
assert_true(!animation.pending && animation.playState === 'running');
});
}, 'After clearing and re-setting timeline on play-pending animation it'
+ ' begins to play');
test(function(t) {
var animation =
test(t => {
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');
assert_true(animation.pending && animation.playState === 'paused');
animation.timeline = null;
assert_equals(animation.playState, 'pending');
assert_true(animation.pending && animation.playState === 'paused');
}, 'After clearing timeline on a pause-pending animation it is still pending');
promise_test(function(t) {
var animation =
promise_test(t => {
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');
assert_true(animation.pending && animation.playState === 'paused');
animation.timeline = null;
animation.timeline = document.timeline;
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'paused');
assert_true(animation.pending && animation.playState === 'paused');
return animation.ready.then(() => {
assert_true(!animation.pending && animation.playState === 'paused');
});
}, 'After clearing and re-setting timeline on a pause-pending animation it'
+ ' becomes paused');
+ ' completes pausing');
promise_test(function(t) {
var animation =
promise_test(t => {
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');
return animation.ready.then(function() {
assert_equals(animation.playState, 'running');
return animation.ready.then(() => {
assert_times_equal(animation.startTime, initialStartTime);
});
}, 'After clearing and re-setting timeline on an animation in the middle of'

200
tests/wpt/web-platform-tests/web-animations/timing-model/animations/updating-the-finished-state.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for updating the finished state of an animation</title>
<link rel="help" href="https://w3c.github.io/web-animations/#updating-the-finished-state">
<title>Updating the finished state</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#updating-the-finished-state">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -20,29 +20,29 @@
// (Also the start time is resolved and there is pending task)
// Did seek = false
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
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(function() {
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(function() {
}).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(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(function() {
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(() => {
anim.currentTime = 200 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, 200 * MS_PER_SEC,
'Hold time is set so current time should NOT change');
});
@ -59,12 +59,12 @@ promise_test(function(t) {
// (on the subsequent tick the hold time will be set to the same value anyway).
// Did seek = true
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(function() {
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(() => {
anim.currentTime = 100 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, 100 * MS_PER_SEC,
'Hold time is set so current time should NOT change');
});
@ -75,29 +75,29 @@ promise_test(function(t) {
// (Also the start time is resolved and there is pending task)
// Did seek = false
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
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(function() {
return anim.ready.then(() => {
// Seek to 1ms before 0 and then wait 1ms
anim.currentTime = 1;
return waitForAnimationFramesWithDelay(1);
}).then(function() {
}).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(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
anim.play();
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = -100 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, -100 * MS_PER_SEC,
'Hold time is set so current time should NOT change');
});
@ -107,14 +107,14 @@ promise_test(function(t) {
// it doesn't really matter.
// Did seek = true
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
anim.play();
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = 0;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, 0 * MS_PER_SEC,
'Hold time is set so current time should NOT change');
});
@ -126,38 +126,38 @@ promise_test(function(t) {
// (Also the start time is resolved and there is pending task)
// Did seek = false; playback rate > 0
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
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(function() {
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
// the next tick the current time will increase.
anim.effect.timing.duration *= 2;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).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(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.finish();
return anim.ready.then(function() {
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');
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_greater_than(anim.currentTime, 50 * MS_PER_SEC,
'Hold time is not set so current time should increase');
});
@ -177,14 +177,14 @@ promise_test(function(t) {
// will set did seek = true).
// Did seek = true; playback rate < 0
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
return anim.ready.then(function() {
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(function() {
return waitForNextFrame();
}).then(() => {
assert_less_than(anim.currentTime, 50 * MS_PER_SEC,
'Hold time is not set so current time should decrease');
});
@ -193,13 +193,13 @@ promise_test(function(t) {
// CASE 4: playback rate == 0
// current time < 0
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = 0;
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = -100 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, -100 * MS_PER_SEC,
'Hold time should not be cleared so current time should'
+ ' NOT change');
@ -208,13 +208,13 @@ promise_test(function(t) {
+ ' current time is less than zero');
// current time < target end
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = 0;
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = 50 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, 50 * MS_PER_SEC,
'Hold time should not be cleared so current time should'
+ ' NOT change');
@ -223,13 +223,13 @@ promise_test(function(t) {
+ ' current time is less than end');
// current time > target end
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = 0;
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = 200 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, 200 * MS_PER_SEC,
'Hold time should not be cleared so current time should'
+ ' NOT change');
@ -239,8 +239,8 @@ promise_test(function(t) {
// CASE 5: current time unresolved
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
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.
@ -251,7 +251,7 @@ promise_test(function(t) {
// change to timing, but just in case an implementation defers that, let's
// wait a frame and check that the hold time / start time has still not been
// updated.
return waitForAnimationFrames(1).then(function() {
return waitForAnimationFrames(1).then(() => {
assert_equals(anim.currentTime, null,
'The animation hold time / start time should not be updated');
});
@ -259,8 +259,8 @@ promise_test(function(t) {
// CASE 6: has a pending task
test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.cancel();
anim.currentTime = 75 * MS_PER_SEC;
anim.play();
@ -278,8 +278,8 @@ test(function(t) {
// CASE 7: start time unresolved
// Did seek = false
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
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)
@ -287,7 +287,7 @@ promise_test(function(t) {
// 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(function() {
return waitForAnimationFrames(1).then(() => {
assert_equals(anim.currentTime, 150 * MS_PER_SEC,
'The animation hold time should not be updated');
assert_equals(anim.startTime, null,
@ -297,8 +297,8 @@ promise_test(function(t) {
+ ' did seek = false');
// Did seek = true
test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.cancel();
anim.currentTime = 150 * MS_PER_SEC;
// Trigger a change that will cause the "update the finished state"
@ -318,14 +318,14 @@ test(function(t) {
// --------------------------------------------------------------------
function waitForFinishEventAndPromise(animation) {
var eventPromise = new Promise(function(resolve) {
animation.onfinish = function() { resolve(); }
const eventPromise = new Promise(resolve => {
animation.onfinish = resolve;
});
return Promise.all([eventPromise, animation.finished]);
}
promise_test(function(t) {
var animation = createDiv(t).animate(null, 1);
promise_test(t => {
const animation = createDiv(t).animate(null, 1);
animation.onfinish =
t.unreached_func('Seeking to finish should not fire finish event');
animation.finished.then(
@ -337,27 +337,27 @@ promise_test(function(t) {
}, 'Finish notification steps don\'t run when the animation seeks to finish'
+ ' and then seeks back again');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 1);
return animation.ready.then(function() {
promise_test(t => {
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(function(t) {
var animation = createDiv(t).animate(null, 1);
return animation.ready.then(function() {
promise_test(t => {
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(function(t) {
var animation = createDiv(t).animate(null, 1);
return animation.ready.then(function() {
promise_test(t => {
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();
@ -366,41 +366,41 @@ promise_test(function(t) {
}, 'Finish notification steps run when the animation completes with .finish(),'
+ ' even if we then seek away');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 1);
var initialFinishedPromise = animation.finished;
promise_test(t => {
const animation = createDiv(t).animate(null, 1);
const initialFinishedPromise = animation.finished;
return animation.finished.then(function(target) {
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(function(t) {
var animation = createDiv(t).animate(null, 1);
var initialFinishedPromise = animation.finished;
promise_test(t => {
const animation = createDiv(t).animate(null, 1);
const initialFinishedPromise = animation.finished;
return animation.finished.then(function(target) {
return animation.finished.then(target => {
animation.play();
assert_not_equals(initialFinishedPromise, animation.finished);
});
}, 'Animation finished promise is replaced after replaying from start');
async_test(function(t) {
var animation = createDiv(t).animate(null, 1);
animation.onfinish = function(event) {
async_test(t => {
const animation = createDiv(t).animate(null, 1);
animation.onfinish = event => {
animation.currentTime = 0;
animation.onfinish = function(event) {
animation.onfinish = event => {
t.done();
};
};
}, 'Animation finish event is fired again after seeking back to start');
async_test(function(t) {
var animation = createDiv(t).animate(null, 1);
animation.onfinish = function(event) {
async_test(t => {
const animation = createDiv(t).animate(null, 1);
animation.onfinish = event => {
animation.play();
animation.onfinish = function(event) {
animation.onfinish = event => {
t.done();
};
};

36
tests/wpt/web-platform-tests/web-animations/timing-model/time-transformations/transformed-progress.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for the transformed progress</title>
<link rel="help" href="https://w3c.github.io/web-animations/#calculating-the-transformed-progress">
<title>Transformed progress</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-the-transformed-progress">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -12,14 +12,14 @@
<script>
'use strict';
gEasingTests.forEach(params => {
test(function(t) {
for (const params of gEasingTests) {
test(t => {
const target = createDiv(t);
const anim = target.animate(null, { duration: 1000,
fill: 'forwards',
easing: params.easing });
[ 0, 250, 500, 750, 1000 ].forEach(sampleTime => {
for (const sampleTime of [0, 250, 500, 750, 1000]) {
anim.currentTime = sampleTime;
const portion = sampleTime / anim.effect.getComputedTiming().duration;
const expectedProgress = params.easingFunction(portion);
@ -27,15 +27,15 @@ gEasingTests.forEach(params => {
expectedProgress,
0.01,
'The progress should be approximately ' +
expectedProgress + ` at ${sampleTime}ms`);
});
}, 'Transformed progress for ' + params.desc);
});
`${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: {
@ -291,18 +291,18 @@ var gStepAndFramesTimingFunctionTests = [
}
];
gStepAndFramesTimingFunctionTests.forEach(function(options) {
test(function(t) {
var target = createDiv(t);
var animation = target.animate(null, options.effect);
options.conditions.forEach(function(condition) {
for (const options of gStepAndFramesTimingFunctionTests) {
test(t => {
const target = createDiv(t);
const animation = target.animate(null, options.effect);
for (const condition of options.conditions) {
animation.currentTime = condition.currentTime;
assert_equals(animation.effect.getComputedTiming().progress,
condition.progress,
'Progress at ' + animation.currentTime + 'ms');
});
`Progress at ${animation.currentTime}ms`);
}
}, options.description);
});
}
</script>
</body>

8
tests/wpt/web-platform-tests/web-animations/timing-model/timelines/document-timelines.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Document timelines</title>
<link rel="help" href="https://w3c.github.io/web-animations/#document-timelines">
<link rel="help" href="https://drafts.csswg.org/web-animations/#document-timelines">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -9,7 +9,7 @@
<script>
'use strict';
async_test(function(t) {
async_test(t => {
assert_true(document.timeline.currentTime > 0,
'The current time is initially is positive');
// document.timeline.currentTime should be set even before document
@ -25,8 +25,8 @@ async_test(function(t) {
// We can't just compare document.timeline.currentTime to
// window.performance.now() because currentTime is only updated on a sample
// so we use requestAnimationFrame instead.
window.requestAnimationFrame(function(rafTime) {
t.step(function() {
window.requestAnimationFrame(rafTime => {
t.step(() => {
assert_equals(document.timeline.currentTime, rafTime,
'The current time matches requestAnimationFrame time');
});

31
tests/wpt/web-platform-tests/web-animations/timing-model/timelines/timelines.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Timelines</title>
<link rel="help" href="https://w3c.github.io/web-animations/#timelines">
<link rel="help" href="https://drafts.csswg.org/web-animations/#timelines">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -9,7 +9,7 @@
<script>
'use strict';
promise_test(function(t) {
promise_test(t => {
const valueAtStart = document.timeline.currentTime;
const timeAtStart = window.performance.now();
while (window.performance.now() - timeAtStart < 50) {
@ -17,13 +17,13 @@ promise_test(function(t) {
}
assert_equals(document.timeline.currentTime, valueAtStart,
'Timeline time does not change within an animation frame');
return waitForAnimationFrames(1).then(function() {
return waitForAnimationFrames(1).then(() => {
assert_greater_than(document.timeline.currentTime, valueAtStart,
'Timeline time increases between animation frames');
});
}, 'Timeline time increases once per animation frame');
async_test(function(t) {
async_test(t => {
const iframe = document.createElement('iframe');
iframe.width = 10;
iframe.height = 10;
@ -49,20 +49,20 @@ async_test(function(t) {
document.body.appendChild(iframe);
}, 'Timeline time increases once per animation frame in an iframe');
async_test(function(t) {
async_test(t => {
const startTime = document.timeline.currentTime;
let firstRafTime;
requestAnimationFrame(function() {
t.step(function() {
requestAnimationFrame(() => {
t.step(() => {
assert_greater_than_equal(document.timeline.currentTime, startTime,
'Timeline time should have progressed');
firstRafTime = document.timeline.currentTime;
});
});
requestAnimationFrame(function() {
t.step(function() {
requestAnimationFrame(() => {
t.step(() => {
assert_equals(document.timeline.currentTime, firstRafTime,
'Timeline time should be the same');
});
@ -71,4 +71,17 @@ async_test(function(t) {
}, 'Timeline time should be the same for all RAF callbacks in an animation'
+ ' frame');
async_test(t => {
const div = createDiv(t);
const animation = div.animate(null, 100 * MS_PER_SEC);
animation.ready.then(t.step_func(() => {
const readyTimelineTime = document.timeline.currentTime;
requestAnimationFrame(t.step_func_done(() => {
assert_equals(readyTimelineTime, document.timeline.currentTime,
'There should be a microtask checkpoint');
}));
}));
}, 'Performs a microtask checkpoint after updating timelins');
</script>