mirror of
https://github.com/servo/servo.git
synced 2025-08-15 10:25:32 +01:00
Update web-platform-tests to revision be5419e845d39089ba6dc338c1bd0fa279108317
This commit is contained in:
Josh Matthews
parent
aa199307c8
commit
2b6f573eb5
3440 changed files with 109438 additions and 41750 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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' });
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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',
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue