--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -7,18 +7,18 @@ const discreteType = {
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: [from, to] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: from.toLowerCase() },
{ time: 499, expected: from.toLowerCase() },
{ time: 500, expected: to.toLowerCase() },
{ time: 1000, expected: to.toLowerCase() }]);
- }, property + ' uses discrete animation when animating between "'
- + from + '" and "' + to + '" with linear easing');
+ }, `${property} uses discrete animation when animating between`
+ + ` "${from}" and "${to}" with linear easing`);
test(t => {
// Easing: http://cubic-bezier.com/#.68,0,1,.01
// With this curve, we don't reach the 50% point until about 95% of
// the time has expired.
const idlName = propertyToIDL(property);
const keyframes = {};
const target = createTestElement(t, setup);
@@ -29,18 +29,18 @@ const discreteType = {
fill: 'both',
easing: 'cubic-bezier(0.68,0,1,0.01)',
}
);
testAnimationSamples(animation, idlName,
[{ time: 0, expected: from.toLowerCase() },
{ time: 940, expected: from.toLowerCase() },
{ time: 960, expected: to.toLowerCase() }]);
- }, property + ' uses discrete animation when animating between "'
- + from + '" and "' + to + '" with effect easing');
+ }, `${property} uses discrete animation when animating between`
+ + ` "${from}" and "${to}" with effect easing`);
test(t => {
// Easing: http://cubic-bezier.com/#.68,0,1,.01
// With this curve, we don't reach the 50% point until about 95% of
// the time has expired.
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
@@ -49,47 +49,47 @@ const discreteType = {
easing: 'cubic-bezier(0.68,0,1,0.01)',
},
{ duration: 1000, fill: 'both' }
);
testAnimationSamples(animation, idlName,
[{ time: 0, expected: from.toLowerCase() },
{ time: 940, expected: from.toLowerCase() },
{ time: 960, expected: to.toLowerCase() }]);
- }, property + ' uses discrete animation when animating between "'
- + from + '" and "' + to + '" with keyframe easing');
+ }, `${property} uses discrete animation when animating between`
+ + ` "${from}" and "${to}" with keyframe easing`);
});
},
testAdditionOrAccumulation: (property, setup, options, composite) => {
options.forEach(keyframes => {
const [ from, to ] = keyframes;
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.animate({ [idlName]: [from, from] }, 1000);
const animation = target.animate(
{ [idlName]: [to, to] },
{ duration: 1000, composite }
);
testAnimationSamples(animation, idlName,
[{ time: 0, expected: to.toLowerCase() }]);
- }, property + ': "' + to + '" onto "' + from + '"');
+ }, `${property}: "${to}" onto "${from}"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.animate({ [idlName]: [to, to] }, 1000);
const animation = target.animate(
{ [idlName]: [from, from] },
{ duration: 1000, composite }
);
testAnimationSamples(animation, idlName,
[{ time: 0, expected: from.toLowerCase() }]);
- }, property + ': "' + from + '" onto "' + to + '"');
+ }, `${property}: "${from}" onto "${to}"`);
});
},
testAddition: function(property, setup, options) {
this.testAdditionOrAccumulation(property, setup, options, 'add');
},
testAccumulation: function(property, setup, options) {
@@ -101,50 +101,50 @@ const lengthType = {
testInterpolation: (property, setup) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['10px', '50px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: '30px' }]);
- }, property + ' supports animating as a length');
+ }, `${property} supports animating as a length`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['1rem', '5rem'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: '30px' }]);
- }, property + ' supports animating as a length of rem');
+ }, `${property} supports animating as a length of rem`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '10px';
const animation = target.animate(
{ [idlName]: ['10px', '50px'] },
{ duration: 1000, composite }
);
testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]);
- }, property + ': length');
+ }, `${property}: length`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '1rem';
const animation = target.animate(
{ [idlName]: ['1rem', '5rem'] },
{ duration: 1000, composite }
);
testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]);
- }, property + ': length of rem');
+ }, `${property}: length of rem`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -157,60 +157,60 @@ const lengthPairType = {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]: ['10px 10px', '50px 50px'] },
{ duration: 1000, fill: 'both' }
);
testAnimationSamples(animation, idlName,
[{ time: 500, expected: '30px 30px' }]);
- }, property + ' supports animating as a length pair');
+ }, `${property} supports animating as a length pair`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]: ['1rem 1rem', '5rem 5rem'] },
{ duration: 1000, fill: 'both' }
);
testAnimationSamples(animation, idlName,
[{ time: 500, expected: '30px 30px' }]);
- }, property + ' supports animating as a length pair of rem');
+ }, `${property} supports animating as a length pair of rem`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '10px 10px';
const animation = target.animate(
{ [idlName]: ['10px 10px', '50px 50px'] },
{ duration: 1000, composite }
);
testAnimationSamples(
animation,
idlName,
[{ time: 0, expected: '20px 20px' }]
);
- }, property + ': length pair');
+ }, `${property}: length pair`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '1rem 1rem';
const animation = target.animate(
{ [idlName]: ['1rem 1rem', '5rem 5rem'] },
{ duration: 1000, composite }
);
testAnimationSamples(
animation,
idlName,
[{ time: 0, expected: '20px 20px' }]
);
- }, property + ': length pair of rem');
+ }, `${property}: length pair of rem`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -221,30 +221,30 @@ const percentageType = {
testInterpolation: (property, setup) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['10%', '50%'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: '30%' }]);
- }, property + ' supports animating as a percentage');
+ }, `${property} supports animating as a percentage`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '60%';
const animation = target.animate(
{ [idlName]: ['70%', '100%'] },
{ duration: 1000, composite }
);
testAnimationSamples(animation, idlName, [{ time: 0, expected: '130%' }]);
- }, property + ': percentage');
+ }, `${property}: percentage`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -255,31 +255,31 @@ const integerType = {
testInterpolation: (property, setup) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: [-2, 2] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: '0' }]);
- }, property + ' supports animating as an integer');
+ }, `${property} supports animating as an integer`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = -1;
const animation = target.animate(
{ [idlName]: [-2, 2] },
{ duration: 1000, composite }
);
testAnimationSamples(animation, idlName,
[{ time: 0, expected: '-3' }]);
- }, property + ': integer');
+ }, `${property}: integer`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -290,31 +290,31 @@ const positiveIntegerType = {
testInterpolation: (property, setup) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: [1, 3] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[ { time: 500, expected: '2' } ]);
- }, property + ' supports animating as a positive integer');
+ }, `${property} supports animating as a positive integer`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 1;
const animation = target.animate(
{ [idlName]: [2, 5] },
{ duration: 1000, composite }
);
testAnimationSamples(animation, idlName,
[{ time: 0, expected: '3' }]);
- }, property + ': positive integer');
+ }, `${property}: positive integer`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -328,142 +328,142 @@ const lengthPercentageOrCalcType = {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['10px', '20%'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'calc(5px + 10%)' }]);
- }, property + ' supports animating as combination units "px" and "%"');
+ }, `${property} supports animating as combination units "px" and "%"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['10%', '2em'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'calc(10px + 5%)' }]);
- }, property + ' supports animating as combination units "%" and "em"');
+ }, `${property} supports animating as combination units "%" and "em"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['1em', '2rem'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: '15px' }]);
- }, property + ' supports animating as combination units "em" and "rem"');
+ }, `${property} supports animating as combination units "em" and "rem"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]: ['10px', 'calc(1em + 20%)'] },
{ duration: 1000, fill: 'both' }
);
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'calc(10px + 10%)' }]);
- }, property + ' supports animating as combination units "px" and "calc"');
+ }, `${property} supports animating as combination units "px" and "calc"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]: ['calc(10px + 10%)', 'calc(1em + 1rem + 20%)'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500,
expected: 'calc(15px + 15%)' }]);
- }, property + ' supports animating as a calc');
+ }, `${property} supports animating as a calc`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
lengthType.testAddition(property, setup);
percentageType.testAddition(property, setup);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '10px';
const animation = target.animate({ [idlName]: ['10%', '50%'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'calc(10px + 10%)' }]);
- }, property + ': units "%" onto "px"');
+ }, `${property}: units "%" onto "px"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '10%';
const animation = target.animate({ [idlName]: ['10px', '50px'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'calc(10px + 10%)' }]);
- }, property + ': units "px" onto "%"');
+ }, `${property}: units "px" onto "%"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '10%';
const animation = target.animate({ [idlName]: ['2rem', '5rem'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'calc(20px + 10%)' }]);
- }, property + ': units "rem" onto "%"');
+ }, `${property}: units "rem" onto "%"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '2rem';
const animation = target.animate({ [idlName]: ['10%', '50%'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'calc(20px + 10%)' }]);
- }, property + ': units "%" onto "rem"');
+ }, `${property}: units "%" onto "rem"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '2em';
const animation = target.animate({ [idlName]: ['2rem', '5rem'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName, [{ time: 0, expected: '40px' }]);
- }, property + ': units "rem" onto "em"');
+ }, `${property}: units "rem" onto "em"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '2rem';
const animation = target.animate({ [idlName]: ['2em', '5em'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName, [{ time: 0, expected: '40px' }]);
- }, property + ': units "em" onto "rem"');
+ }, `${property}: units "em" onto "rem"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '10px';
const animation = target.animate({ [idlName]: ['calc(2em + 20%)',
'calc(5rem + 50%)'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'calc(30px + 20%)' }]);
- }, property + ': units "calc" onto "px"');
+ }, `${property}: units "calc" onto "px"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'calc(10px + 10%)';
const animation = target.animate({ [idlName]: ['calc(20px + 20%)',
'calc(2em + 3rem + 40%)'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'calc(30px + 30%)' }]);
- }, property + ': calc');
+ }, `${property}: calc`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -474,28 +474,28 @@ const positiveNumberType = {
testInterpolation: (property, setup) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: [1.1, 1.5] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: '1.3' }]);
- }, property + ' supports animating as a positive number');
+ }, `${property} supports animating as a positive number`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 1.1;
const animation = target.animate({ [idlName]: [1.1, 1.5] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName, [{ time: 0, expected: '2.2' }]);
- }, property + ': positive number');
+ }, `${property}: positive number`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -507,37 +507,37 @@ const opacityType = {
testInterpolation: (property, setup) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: [0.3, 0.8] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: '0.55' }]);
- }, property + ' supports animating as a [0, 1] number');
+ }, `${property} supports animating as a [0, 1] number`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 0.3;
const animation = target.animate({ [idlName]: [0.3, 0.8] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName, [{ time: 0, expected: '0.6' }]);
- }, property + ': [0, 1] number');
+ }, `${property}: [0, 1] number`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 0.8;
const animation = target.animate({ [idlName]: [0.3, 0.8] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName, [{ time: 0, expected: '1' }]);
- }, property + ': [0, 1] number (clamped)');
+ }, `${property}: [0, 1] number (clamped)`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -550,43 +550,43 @@ const visibilityType = {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['visible', 'hidden'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'visible' },
{ time: 999, expected: 'visible' },
{ time: 1000, expected: 'hidden' }]);
- }, property + ' uses visibility animation when animating '
- + 'from "visible" to "hidden"');
+ }, `${property} uses visibility animation when animating`
+ + ' from "visible" to "hidden"');
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['hidden', 'visible'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'hidden' },
{ time: 1, expected: 'visible' },
{ time: 1000, expected: 'visible' }]);
- }, property + ' uses visibility animation when animating '
- + 'from "hidden" to "visible"');
+ }, `${property} uses visibility animation when animating`
+ + ' from "hidden" to "visible"');
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['hidden', 'collapse'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'hidden' },
{ time: 499, expected: 'hidden' },
{ time: 500, expected: 'collapse' },
{ time: 1000, expected: 'collapse' }]);
- }, property + ' uses visibility animation when animating '
- + 'from "hidden" to "collapse"');
+ }, `${property} uses visibility animation when animating`
+ + ' from "hidden" to "collapse"');
test(t => {
// Easing: http://cubic-bezier.com/#.68,-.55,.26,1.55
// With this curve, the value is less than 0 till about 34%
// also more than 1 since about 63%
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
@@ -596,44 +596,44 @@ const visibilityType = {
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'visible' },
{ time: 1, expected: 'visible' },
{ time: 330, expected: 'visible' },
{ time: 340, expected: 'visible' },
{ time: 620, expected: 'visible' },
{ time: 630, expected: 'hidden' },
{ time: 1000, expected: 'hidden' }]);
- }, property + ' uses visibility animation when animating '
- + 'from "visible" to "hidden" with easeInOutBack easing');
+ }, `${property} uses visibility animation when animating`
+ + ' from "visible" to "hidden" with easeInOutBack easing');
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'visible';
const animation = target.animate({ [idlName]: ['visible', 'hidden'] },
{ duration: 1000, fill: 'both',
composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'visible' },
{ time: 1000, expected: 'visible' }]);
- }, property + ': onto "visible"');
+ }, `${property}: onto "visible"`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'hidden';
const animation = target.animate({ [idlName]: ['hidden', 'visible'] },
{ duration: 1000, fill: 'both',
composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'hidden' },
{ time: 1000, expected: 'visible' }]);
- }, property + ': onto "hidden"');
+ }, `${property}: onto "hidden"`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -645,75 +645,75 @@ const colorType = {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['rgb(255, 0, 0)',
'rgb(0, 0, 255)'] },
1000);
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(128, 0, 128)' }]);
- }, property + ' supports animating as color of rgb()');
+ }, `${property} supports animating as color of rgb()`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },
1000);
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(128, 0, 128)' }]);
- }, property + ' supports animating as color of #RGB');
+ }, `${property} supports animating as color of #RGB`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['hsl(0, 100%, 50%)',
'hsl(240, 100%, 50%)'] },
1000);
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(128, 0, 128)' }]);
- }, property + ' supports animating as color of hsl()');
+ }, `${property} supports animating as color of hsl()`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]: ['#ff000066', '#0000ffcc'] },
1000
);
// R: 255 * (0.4 * 0.5) / 0.6 = 85
// B: 255 * (0.8 * 0.5) / 0.6 = 170
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]);
- }, property + ' supports animating as color of #RGBa');
+ }, `${property} supports animating as color of #RGBa`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{
[idlName]: ['rgba(255, 0, 0, 0.4)', 'rgba(0, 0, 255, 0.8)'],
},
1000
);
testAnimationSamples(animation, idlName, // Same as above.
[{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]);
- }, property + ' supports animating as color of rgba()');
+ }, `${property} supports animating as color of rgba()`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{
[idlName]: ['hsla(0, 100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8)'],
},
1000
);
testAnimationSamples(animation, idlName, // Same as above.
[{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]);
- }, property + ' supports animating as color of hsla()');
+ }, `${property} supports animating as color of hsla()`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rgb(128, 128, 128)';
const animation = target.animate(
@@ -723,76 +723,76 @@ const colorType = {
{ duration: 1000, composite }
);
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'rgb(255, 128, 128)' },
// The value at 50% is interpolated
// from 'rgb(128+255, 128, 128)'
// to 'rgb(128, 128, 128+255)'.
{ time: 500, expected: 'rgb(255, 128, 255)' }]);
- }, property + ' supports animating as color of rgb() with overflowed ' +
- 'from and to values');
+ }, `${property} supports animating as color of rgb() with overflowed `
+ + ' from and to values');
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rgb(128, 128, 128)';
const animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'rgb(255, 128, 128)' }]);
- }, property + ' supports animating as color of #RGB');
+ }, `${property} supports animating as color of #RGB`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rgb(128, 128, 128)';
const animation = target.animate({ [idlName]: ['hsl(0, 100%, 50%)',
'hsl(240, 100%, 50%)'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'rgb(255, 128, 128)' }]);
- }, property + ' supports animating as color of hsl()');
+ }, `${property} supports animating as color of hsl()`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rgb(128, 128, 128)';
const animation = target.animate(
{ [idlName]: ['#ff000066', '#0000ffcc'] },
{ duration: 1000, composite }
);
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'rgb(230, 128, 128)' }]);
- }, property + ' supports animating as color of #RGBa');
+ }, `${property} supports animating as color of #RGBa`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rgb(128, 128, 128)';
const animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4)',
'rgba(0, 0, 255, 0.8)'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName, // Same as above.
[{ time: 0, expected: 'rgb(230, 128, 128)' }]);
- }, property + ' supports animating as color of rgba()');
+ }, `${property} supports animating as color of rgba()`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rgb(128, 128, 128)';
const animation = target.animate(
{
[idlName]: ['hsla(0, 100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8)'],
},
{ duration: 1000, composite }
);
testAnimationSamples(animation, idlName, // Same as above.
[{ time: 0, expected: 'rgb(230, 128, 128)' }]);
- }, property + ' supports animating as color of hsla()');
+ }, `${property} supports animating as color of hsla()`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -807,17 +807,17 @@ const transformListType = {
const animation = target.animate(
{
[idlName]: ['translate(200px, -200px)', 'translate(400px, 400px)'],
},
1000
);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: [ 1, 0, 0, 1, 300, 100 ] }]);
- }, property + ': translate');
+ }, `${property}: translate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{
[idlName]: ['rotate(45deg)', 'rotate(135deg)'],
},
@@ -825,131 +825,131 @@ const transformListType = {
);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: [ Math.cos(Math.PI / 2),
Math.sin(Math.PI / 2),
-Math.sin(Math.PI / 2),
Math.cos(Math.PI / 2),
0, 0] }]);
- }, property + ': rotate');
+ }, `${property}: rotate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['scale(3)', 'scale(5)'] },
1000);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: [ 4, 0, 0, 4, 0, 0 ] }]);
- }, property + ': scale');
+ }, `${property}: scale`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['skew(30deg, 60deg)',
'skew(60deg, 30deg)'] },
1000);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: [ 1, Math.tan(Math.PI / 4),
Math.tan(Math.PI / 4), 1,
0, 0] }]);
- }, property + ': skew');
+ }, `${property}: skew`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: ['translateX(100px) rotate(45deg)',
'translateX(200px) rotate(135deg)'] },
1000);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: [ Math.cos(Math.PI / 2),
Math.sin(Math.PI / 2),
-Math.sin(Math.PI / 2),
Math.cos(Math.PI / 2),
150, 0 ] }]);
- }, property + ': rotate and translate');
+ }, `${property}: rotate and translate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: ['rotate(45deg) translateX(100px)',
'rotate(135deg) translateX(200px)'] },
1000);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: [ Math.cos(Math.PI / 2),
Math.sin(Math.PI / 2),
-Math.sin(Math.PI / 2),
Math.cos(Math.PI / 2),
150 * Math.cos(Math.PI / 2),
150 * Math.sin(Math.PI / 2) ] }]);
- }, property + ': translate and rotate');
+ }, `${property}: translate and rotate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = // matrix(0, 1, -1, 0, 0, 100)
target.animate({ [idlName]: ['rotate(90deg) translateX(100px)',
// matrix(-1, 0, 0, -1, 200, 0)
'translateX(200px) rotate(180deg)'] },
1000);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4),
Math.sin(Math.PI * 3 / 4),
-Math.sin(Math.PI * 3 / 4),
Math.cos(Math.PI * 3 / 4),
100, 50 ] }]);
- }, property + ': mismatch order of translate and rotate');
+ }, `${property}: mismatch order of translate and rotate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = // Same matrices as above.
target.animate({ [idlName]: [ 'matrix(0, 1, -1, 0, 0, 100)',
'matrix(-1, 0, 0, -1, 200, 0)' ] },
1000);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4),
Math.sin(Math.PI * 3 / 4),
-Math.sin(Math.PI * 3 / 4),
Math.cos(Math.PI * 3 / 4),
100, 50 ] }]);
- }, property + ': matrix');
+ }, `${property}: matrix`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, 0deg)',
'rotate3d(1, 1, 0, 90deg)'] },
1000);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI / 4) }]);
- }, property + ': rotate3d');
+ }, `${property}: rotate3d`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// To calculate expected matrices easily, generate input matrices from
// rotate3d.
const from = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);
const to = rotate3dToMatrix3d(1, 1, 0, Math.PI * 3 / 4);
const animation = target.animate({ [idlName]: [ from, to ] }, 1000);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI * 2 / 4) }]);
- }, property + ': matrix3d');
+ }, `${property}: matrix3d`);
// This test aims for forcing the two mismatched transforms to be
// decomposed into matrix3d before interpolation. Therefore, we not only
// test the interpolation, but also test the 3D matrix decomposition.
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
@@ -963,28 +963,28 @@ const transformListType = {
1000
);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: [ 0.4, 0, 0, 0,
0, 0.4, 0, 0,
0, 0, 1, 0,
0, 0, 0.5, 1] }]);
- }, property + ': mismatched 3D transforms');
+ }, `${property}: mismatched 3D transforms`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: ['rotateY(60deg)', 'none' ] }, 1000);
testAnimationSampleMatrices(animation, idlName,
// rotateY(30deg) == rotate3D(0, 1, 0, 30deg)
[{ time: 500, expected: rotate3dToMatrix(0, 1, 0, Math.PI / 6) }]);
- }, property + ': rotateY');
+ }, `${property}: rotateY`);
// Following tests aim for test the fallback discrete interpolation behavior
// for non-invertible matrices. The non-invertible matrix that we use is the
// singular matrix, matrix(1, 1, 0, 0, 0, 100).
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
@@ -992,17 +992,17 @@ const transformListType = {
'matrix( 1, 1, 0, 0, 0, 100)'] },
{ duration: 1000, fill: 'both' });
testAnimationSampleMatrices(animation, idlName,
[ { time: 0, expected: [ -1, 0, 0, -1, 200, 0 ] },
{ time: 499, expected: [ -1, 0, 0, -1, 200, 0 ] },
{ time: 500, expected: [ 1, 1, 0, 0, 0, 100 ] },
{ time: 1000, expected: [ 1, 1, 0, 0, 0, 100 ] }]);
- }, property + ': non-invertible matrices');
+ }, `${property}: non-invertible matrices`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{
[idlName]: [
// matrix(0, -1, 1, 0, 250, 0)
@@ -1014,17 +1014,17 @@ const transformListType = {
{ duration: 1000, fill: 'both' }
);
testAnimationSampleMatrices(animation, idlName,
[ { time: 0, expected: [ 0, -1, 1, 0, 250, 0 ] },
{ time: 499, expected: [ 0, -1, 1, 0, 250, 0 ] },
{ time: 500, expected: [ -1, -1, 0, 0, 100, 100 ] },
{ time: 1000, expected: [ -1, -1, 0, 0, 100, 100 ] }]);
- }, property + ': non-invertible matrices in matched transform lists');
+ }, `${property}: non-invertible matrices in matched transform lists`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{
[idlName]: [
// matrix(-2, 0, 0, -2, 250, 0)
@@ -1036,32 +1036,32 @@ const transformListType = {
{ duration: 1000, fill: 'both' }
);
testAnimationSampleMatrices(animation, idlName,
[ { time: 0, expected: [ -2, 0, 0, -2, 250, 0 ] },
{ time: 499, expected: [ -2, 0, 0, -2, 250, 0 ] },
{ time: 500, expected: [ 1, 1, 1, 1, 100, 100 ] },
{ time: 1000, expected: [ 1, 1, 1, 1, 100, 100 ] }]);
- }, property + ': non-invertible matrices in mismatched transform lists');
+ }, `${property}: non-invertible matrices in mismatched transform lists`);
},
testAddition: function(property, setup) {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'translateX(100px)';
const animation = target.animate({ [idlName]: ['translateX(-200px)',
'translateX(500px)'] },
{ duration: 1000, fill: 'both',
composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[ { time: 0, expected: [ 1, 0, 0, 1, -100, 0 ] },
{ time: 1000, expected: [ 1, 0, 0, 1, 600, 0 ] }]);
- }, property + ': translate');
+ }, `${property}: translate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rotate(45deg)';
const animation = target.animate({ [idlName]: ['rotate(-90deg)',
'rotate(90deg)'] },
{ duration: 1000, fill: 'both',
@@ -1073,30 +1073,30 @@ const transformListType = {
-Math.sin(-Math.PI / 4),
Math.cos(-Math.PI / 4),
0, 0] },
{ time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),
Math.sin(Math.PI * 3 / 4),
-Math.sin(Math.PI * 3 / 4),
Math.cos(Math.PI * 3 / 4),
0, 0] }]);
- }, property + ': rotate');
+ }, `${property}: rotate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'scale(2)';
const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },
{ duration: 1000, fill: 'both',
composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: [ -6, 0, 0, -6, 0, 0 ] }, // scale(-3) scale(2)
{ time: 1000, expected: [ 10, 0, 0, 10, 0, 0 ] }]); // scale(5) scale(2)
- }, property + ': scale');
+ }, `${property}: scale`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// matrix(1, tan(10deg), tan(10deg), 1)
target.style[idlName] = 'skew(10deg, 10deg)';
const animation = // matrix(1, tan(20deg), tan(-30deg), 1)
target.animate({ [idlName]: ['skew(-30deg, 20deg)',
@@ -1124,94 +1124,94 @@ const transformListType = {
Math.tan(-Math.PI/6) + Math.tan(Math.PI/18),
1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),
0, 0] },
{ time: 1000, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),
Math.tan(Math.PI/18) + Math.tan(-Math.PI/6),
Math.tan(Math.PI/9) + Math.tan(Math.PI/18),
1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9),
0, 0] }]);
- }, property + ': skew');
+ }, `${property}: skew`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// matrix(1, 0, 0, 1, 100, 0)
target.style[idlName] = 'translateX(100px)';
const animation = // matrix(0, 1, -1, 0, 0, 0)
target.animate({ [idlName]: ['rotate(90deg)',
// matrix(-1, 0, 0, -1, 0, 0)
'rotate(180deg)'] },
{ duration: 1000, fill: 'both', composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },
{ time: 1000, expected: [ -1, 0, 0, -1, 100, 0 ] }]);
- }, property + ': rotate on translate');
+ }, `${property}: rotate on translate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// matrix(0, 1, -1, 0, 0, 0)
target.style[idlName] = 'rotate(90deg)';
const animation = // matrix(1, 0, 0, 1, 100, 0)
target.animate({ [idlName]: ['translateX(100px)',
// matrix(1, 0, 0, 1, 200, 0)
'translateX(200px)'] },
{ duration: 1000, fill: 'both', composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: [ 0, 1, -1, 0, 0, 100 ] },
{ time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);
- }, property + ': translate on rotate');
+ }, `${property}: translate on rotate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';
const animation = // Same matrices as above.
target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',
'matrix(1, 0, 0, 1, 200, 0)' ] },
{ duration: 1000, fill: 'both', composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: [ 0, 1, -1, 0, 0, 100 ] },
{ time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);
- }, property + ': matrix');
+ }, `${property}: matrix`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';
const animation =
target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',
'rotate3d(1, 1, 0, 90deg)'] },
{ duration: 1000, fill: 'both', composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },
{ time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);
- }, property + ': rotate3d');
+ }, `${property}: rotate3d`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// To calculate expected matrices easily, generate input matrices from
// rotate3d.
target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);
const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);
const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);
const animation =
target.animate({ [idlName]: [ from, to ] },
{ duration: 1000, fill: 'both', composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },
{ time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);
- }, property + ': matrix3d');
+ }, `${property}: matrix3d`);
// Following tests aim for test the addition behavior for non-invertible
// matrices. Note that the addition for non-invertible matrices should be
// the same, just like addition for invertible matrices. With these tests,
// we can assure that addition never behaves as discrete. The non-invertible
// matrix that we use is the singular matrix, matrix(1, 1, 0, 0, 0, 100).
test(t => {
const idlName = propertyToIDL(property);
@@ -1220,62 +1220,62 @@ const transformListType = {
const animation =
target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',
'matrix( 1, 1, 0, 0, 0, 100)'] },
{ duration: 1000, fill: 'both', composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[ { time: 0, expected: [ -1, 0, 0, -1, 250, 0 ] },
{ time: 1000, expected: [ 1, 1, 0, 0, 50, 100 ] }]);
- }, property + ': non-invertible matrices');
+ }, `${property}: non-invertible matrices`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'translateX(50px)';
const animation = // matrix(0, -1, 1, 0, 200, 0)
target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
// matrix(-1, -1, 0, 0, 0, 100)
'matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)'] },
{ duration: 1000, fill: 'both', composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[ { time: 0, expected: [ 0, -1, 1, 0, 250, 0 ] },
{ time: 1000, expected: [ -1, -1, 0, 0, 50, 100 ] }]);
- }, property + ': non-invertible matrices in matched transform lists');
+ }, `${property}: non-invertible matrices in matched transform lists`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'translateX(50px)';
const animation = // matrix(-2, 0, 0, -2, 200, 0)
target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) scale(2)',
// matrix(1, 1, 1, 1, 0, 100)
'matrix( 1, 1, 0, 0, 0, 100) skew(45deg)'] },
{ duration: 1000, fill: 'both', composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[ { time: 0, expected: [ -2, 0, 0, -2, 250, 0 ] },
{ time: 1000, expected: [ 1, 1, 1, 1, 50, 100 ] }]);
- }, property + ': non-invertible matrices in mismatched transform lists');
+ }, `${property}: non-invertible matrices in mismatched transform lists`);
},
testAccumulation: function(property, setup) {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'translateX(100px)';
const animation = target.animate({ [idlName]: ['translateX(-200px)',
'translateX(500px)'] },
{ duration: 1000, fill: 'both',
composite: 'accumulate' });
testAnimationSampleMatrices(animation, idlName,
[ { time: 0, expected: [ 1, 0, 0, 1, -100, 0 ] },
{ time: 1000, expected: [ 1, 0, 0, 1, 600, 0 ] }]);
- }, property + ': translate');
+ }, `${property}: translate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rotate(45deg)';
const animation = target.animate({ [idlName]: ['rotate(-90deg)',
'rotate(90deg)'] },
{ duration: 1000, fill: 'both',
@@ -1287,32 +1287,32 @@ const transformListType = {
-Math.sin(-Math.PI / 4),
Math.cos(-Math.PI / 4),
0, 0] },
{ time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),
Math.sin(Math.PI * 3 / 4),
-Math.sin(Math.PI * 3 / 4),
Math.cos(Math.PI * 3 / 4),
0, 0] }]);
- }, property + ': rotate');
+ }, `${property}: rotate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'scale(2)';
const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },
{ duration: 1000, fill: 'both',
composite: 'accumulate' });
testAnimationSampleMatrices(animation, idlName,
// scale((2 - 1) + (-3 - 1) + 1)
[{ time: 0, expected: [ -2, 0, 0, -2, 0, 0 ] },
// scale((2 - 1) + (5 - 1) + 1)
{ time: 1000, expected: [ 6, 0, 0, 6, 0, 0 ] }]);
- }, property + ': scale');
+ }, `${property}: scale`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// matrix(1, tan(10deg), tan(10deg), 1)
target.style[idlName] = 'skew(10deg, 10deg)';
const animation = // matrix(1, tan(20deg), tan(-30deg), 1)
target.animate({ [idlName]: ['skew(-30deg, 20deg)',
@@ -1322,94 +1322,94 @@ const transformListType = {
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: [ 1, Math.tan(Math.PI/6),
Math.tan(-Math.PI/9), 1,
0, 0] },
{ time: 1000, expected: [ 1, Math.tan(-Math.PI/9),
Math.tan(Math.PI/6), 1,
0, 0] }]);
- }, property + ': skew');
+ }, `${property}: skew`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// matrix(1, 0, 0, 1, 100, 0)
target.style[idlName] = 'translateX(100px)';
const animation = // matrix(0, 1, -1, 0, 0, 0)
target.animate({ [idlName]: ['rotate(90deg)',
// matrix(-1, 0, 0, -1, 0, 0)
'rotate(180deg)'] },
{ duration: 1000, fill: 'both', composite: 'accumulate' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },
{ time: 1000, expected: [ -1, 0, 0, -1, 100, 0 ] }]);
- }, property + ': rotate on translate');
+ }, `${property}: rotate on translate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// matrix(0, 1, -1, 0, 0, 0)
target.style[idlName] = 'rotate(90deg)';
const animation = // matrix(1, 0, 0, 1, 100, 0)
target.animate({ [idlName]: ['translateX(100px)',
// matrix(1, 0, 0, 1, 200, 0)
'translateX(200px)'] },
{ duration: 1000, fill: 'both', composite: 'accumulate' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },
{ time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);
- }, property + ': translate on rotate');
+ }, `${property}: translate on rotate`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';
const animation = // Same matrices as above.
target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',
'matrix(1, 0, 0, 1, 200, 0)' ] },
{ duration: 1000, fill: 'both', composite: 'accumulate' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },
{ time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);
- }, property + ': matrix');
+ }, `${property}: matrix`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';
const animation =
target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',
'rotate3d(1, 1, 0, 90deg)'] },
{ duration: 1000, fill: 'both', composite: 'accumulate' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },
{ time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);
- }, property + ': rotate3d');
+ }, `${property}: rotate3d`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// To calculate expected matrices easily, generate input matrices from
// rotate3d.
target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);
const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);
const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);
const animation =
target.animate({ [idlName]: [ from, to ] },
{ duration: 1000, fill: 'both', composite: 'accumulate' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },
{ time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);
- }, property + ': matrix3d');
+ }, `${property}: matrix3d`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const matrixArray = [ 1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 1, 1 ];
@@ -1417,17 +1417,17 @@ const transformListType = {
target.style[idlName] = createMatrixFromArray(matrixArray);
const animation =
target.animate({ [idlName]: [ 'none', 'none' ] },
{ duration: 1000, fill: 'both', composite: 'accumulate' });
testAnimationSampleMatrices(animation, idlName,
[{ time: 0, expected: matrixArray },
{ time: 1000, expected: matrixArray }]);
- }, property + ': none');
+ }, `${property}: none`);
// Following tests aim for test the fallback discrete accumulation behavior
// for non-invertible matrices. The non-invertible matrix that we use is the
// singular matrix, matrix(1, 1, 0, 0, 0, 100).
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',
@@ -1439,17 +1439,17 @@ const transformListType = {
'matrix( 1, 1, 0, 0, 0, 100)',
],
},
{ duration: 1000, composite: 'accumulate' }
);
testAnimationSampleMatrices(animation, idlName, [
{ time: 0, expected: [1, 1, 0, 0, 0, 100] },
]);
- }, property + ': non-invertible matrices (non-invertible onto invertible)');
+ }, `${property}: non-invertible matrices (non-invertible onto invertible)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.animate({ [idlName]: ['matrix( 1, 1, 0, 0, 0, 100)',
'matrix( 1, 1, 0, 0, 0, 100)'] }, 1000);
const animation = target.animate(
{
@@ -1458,17 +1458,17 @@ const transformListType = {
'matrix(-1, 0, 0, -1, 200, 0)',
],
},
{ duration: 1000, composite: 'accumulate' }
);
testAnimationSampleMatrices(animation, idlName, [
{ time: 0, expected: [-1, 0, 0, -1, 200, 0] },
]);
- }, property + ': non-invertible matrices (invertible onto non-invertible)');
+ }, `${property}: non-invertible matrices (invertible onto non-invertible)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// matrix(0, -1, 1, 0, 250, 0)
target.animate(
{
[idlName]: [
@@ -1486,17 +1486,17 @@ const transformListType = {
'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',
],
},
{ duration: 1000, composite: 'accumulate' }
);
testAnimationSampleMatrices(animation, idlName, [
{ time: 0, expected: [-1, -1, 0, 0, 100, 100] },
]);
- }, property + ': non-invertible matrices in matched transform lists (non-invertible onto invertible)');
+ }, `${property}: non-invertible matrices in matched transform lists (non-invertible onto invertible)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// matrix(-1, -1, 0, 0, 100, 100)
target.animate(
{
[idlName]: [
@@ -1514,17 +1514,17 @@ const transformListType = {
'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
],
},
{ duration: 1000, composite: 'accumulate' }
);
testAnimationSampleMatrices(animation, idlName, [
{ time: 0, expected: [0, -1, 1, 0, 250, 0] },
]);
- }, property + ': non-invertible matrices in matched transform lists (invertible onto non-invertible)');
+ }, `${property}: non-invertible matrices in matched transform lists (invertible onto non-invertible)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// matrix(-2, 0, 0, -2, 250, 0)
target.animate(
{
[idlName]: [
@@ -1542,18 +1542,18 @@ const transformListType = {
'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',
],
},
{ duration: 1000, composite: 'accumulate' }
);
testAnimationSampleMatrices(animation, idlName, [
{ time: 0, expected: [1, 1, 1, 1, 100, 100] },
]);
- }, property + ': non-invertible matrices in mismatched transform lists' +
- ' (non-invertible onto invertible)');
+ }, `${property}: non-invertible matrices in mismatched transform lists`
+ + ' (non-invertible onto invertible)');
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
// matrix(1, 1, 1, 1, 100, 100)
target.animate(
{
[idlName]: [
@@ -1571,206 +1571,206 @@ const transformListType = {
'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)',
],
},
{ duration: 1000, composite: 'accumulate' }
);
testAnimationSampleMatrices(animation, idlName, [
{ time: 0, expected: [-2, 0, 0, -2, 250, 0] },
]);
- }, property + ': non-invertible matrices in mismatched transform lists' +
- ' (invertible onto non-invertible)');
+ }, `${property}: non-invertible matrices in mismatched transform lists`
+ + ' (invertible onto non-invertible)');
},
};
const filterListType = {
testInterpolation: (property, setup) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]:
['blur(10px)', 'blur(50px)'] },
1000);
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'blur(30px)' }]);
- }, property + ': blur function' );
+ }, `${property}: blur function`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['hue-rotate(0deg)',
'hue-rotate(100deg)'] },
1000);
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'hue-rotate(50deg)' }]);
- }, property + ': hue-rotate function with same unit(deg)' );
+ }, `${property}: hue-rotate function with same unit(deg)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['hue-rotate(10deg)',
'hue-rotate(100rad)'] },
1000);
// 10deg = 0.1745rad.
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'hue-rotate(50.0873rad)' }]);
- }, property + ': hue-rotate function with different unit(deg -> rad)');
+ }, `${property}: hue-rotate function with different unit(deg -> rad)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]:
['drop-shadow(10px 10px 10px rgba(255, 0, 0, 0.4))',
'drop-shadow(50px 50px 50px rgba(0, 0, 255, 0.8))'] },
1000);
testAnimationSamples(
animation, idlName,
[{ time: 500,
expected: 'drop-shadow(rgba(85, 0, 170, 0.6) 30px 30px 30px)' }]);
- }, property + ': drop-shadow function' );
+ }, `${property}: drop-shadow function`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]:
['brightness(0.1) contrast(0.1) grayscale(0.1) invert(0.1) ' +
'opacity(0.1) saturate(0.1) sepia(0.1)',
'brightness(0.5) contrast(0.5) grayscale(0.5) invert(0.5) ' +
'opacity(0.5) saturate(0.5) sepia(0.5)'] },
1000);
testAnimationSamples(animation, idlName,
[{ time: 500,
expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +
'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);
- }, property + ': percentage or numeric-specifiable functions' +
- '(number value)');
+ }, `${property}: percentage or numeric-specifiable functions`
+ + ' (number value)');
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]:
['brightness(10%) contrast(10%) grayscale(10%) invert(10%) ' +
'opacity(10%) saturate(10%) sepia(10%)',
'brightness(50%) contrast(50%) grayscale(50%) invert(50%) ' +
'opacity(50%) saturate(50%) sepia(50%)'] },
1000);
testAnimationSamples(animation, idlName,
[{ time: 500,
expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +
'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);
- }, property + ': percentage or numeric-specifiable functions' +
- '(percentage value)');
+ }, `${property}: percentage or numeric-specifiable functions`
+ + ' (percentage value)');
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]:
// To make missing filter-function-lists, specified the grayscale.
['grayscale(0)',
'grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)' ]},
1000);
testAnimationSamples(animation, idlName,
[{ time: 500,
expected: 'grayscale(0.5) brightness(0.5) contrast(0.5) ' +
'opacity(0.5) saturate(0.5)' }]);
- }, property + ': interpolate different length of filter-function-list ' +
- ' with function which lacuna value is 1');
+ }, `${property}: interpolate different length of filter-function-list`
+ + ' with function which lacuna value is 1');
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]:
// To make missing filter-function-lists, specified the opacity.
['opoacity(1)',
'opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)'] },
1000);
testAnimationSamples(animation, idlName,
[{ time: 500,
expected:
'opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)' }]);
- }, property + ': interpolate different length of filter-function-list ' +
- ' with function which lacuna value is 0');
+ }, `${property}: interpolate different length of filter-function-list`
+ + ' with function which lacuna value is 0');
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style.color = "rgba(255, 0, 0, 0.4)";
const animation = target.animate(
{ [idlName]:
['blur(0px)',
'blur(10px) drop-shadow(10px 10px 10px rgba(0, 0, 255, 0.8))'] },
1000);
testAnimationSamples(animation, idlName,
[{ time: 500,
// The lacuna value of drop-shadow's color is taken from
// the color property.
expected: 'blur(5px) drop-shadow(rgba(85, 0, 170, 0.6) 5px 5px 5px' }]);
- }, property + ': interpolate different length of filter-function-list ' +
- 'with drop-shadow function');
+ }, `${property}: interpolate different length of filter-function-list`
+ + ' with drop-shadow function');
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['none', 'blur(10px)'] },
1000);
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'blur(5px)' }]);
- }, property + ': interpolate from none');
+ }, `${property}: interpolate from none`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate(
{ [idlName]:
['blur(0px) url(\"#f1\")',
'blur(10px) url(\"#f2\")']},
1000);
testAnimationSamples(animation, idlName,
[{ time: 499, expected: 'blur(0px) url(\"#f1\")' },
{ time: 500, expected: 'blur(10px) url(\"#f2\")' }]);
- }, property + ': url function (interpoalte as discrete)');
+ }, `${property}: url function (interpoalte as discrete)`);
},
testAddition: function(property, setup) {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'blur(10px)';
const animation = target.animate({ [idlName]: ['blur(20px)',
'blur(50px)'] },
{ duration: 1000, composite: 'add' });
testAnimationSamples(animation, idlName,
[ { time: 0, expected: 'blur(10px) blur(20px)' }]);
- }, property + ': blur on blur');
+ }, `${property}: blur on blur`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'blur(10px)';
const animation = target.animate({ [idlName]: ['brightness(80%)',
'brightness(40%)'] },
{ duration: 1000, composite: 'add' });
testAnimationSamples(animation, idlName,
[ { time: 0, expected: 'blur(10px) brightness(0.8)' }]);
- }, property + ': different filter functions');
+ }, `${property}: different filter functions`);
},
testAccumulation: function(property, setup) {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'blur(10px) brightness(0.3)';
const animation = target.animate(
@@ -1782,17 +1782,17 @@ const filterListType = {
},
{ duration: 1000, composite: 'accumulate' }
);
// brightness(0.1) onto brightness(0.3) means
// brightness((0.1 - 1.0) + (0.3 - 1.0) + 1.0). The result of this formula
// is brightness(-0.6) that means brightness(0.0).
testAnimationSamples(animation, idlName,
[ { time: 0, expected: 'blur(30px) brightness(0)' }]);
- }, property + ': same ordered filter functions');
+ }, `${property}: same ordered filter functions`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'blur(10px) brightness(1.3)';
const animation = target.animate(
{
[idlName]: [
@@ -1800,289 +1800,289 @@ const filterListType = {
'brightness(1.2) blur(20px)',
],
},
{ duration: 1000, composite: 'accumulate' }
);
// Mismatched ordered functions can't be accumulated.
testAnimationSamples(animation, idlName,
[ { time: 0, expected: 'brightness(1.2) blur(20px)' }]);
- }, property + ': mismatched ordered filter functions');
+ }, `${property}: mismatched ordered filter functions`);
},
};
const textShadowListType = {
testInterpolation: (property, setup) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'none',
'rgb(100, 100, 100) 10px 10px 10px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
// Premultiplied
[{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
- }, property + ': from none to other');
+ }, `${property}: from none to other`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px',
'none' ] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
// Premultiplied
[{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
- }, property + ': from other to none');
+ }, `${property}: from other to none`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px',
'rgb(100, 100, 100) 10px 10px 10px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px' }]);
- }, property + ': single shadow');
+ }, `${property}: single shadow`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px, '
+ 'rgb(200, 200, 200) 20px 20px 20px',
'rgb(100, 100, 100) 10px 10px 10px, '
+ 'rgb(100, 100, 100) 10px 10px 10px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px, '
+ 'rgb(150, 150, 150) 15px 15px 15px' }]);
- }, property + ': shadow list');
+ }, `${property}: shadow list`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px',
'rgb(100, 100, 100) 10px 10px 10px, '
+ 'rgb(100, 100, 100) 10px 10px 10px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px, '
+ 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
- }, property + ': mismatched list length (from longer to shorter)');
+ }, `${property}: mismatched list length (from longer to shorter)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px, '
+ 'rgb(100, 100, 100) 10px 10px 10px',
'rgb(200, 200, 200) 20px 20px 20px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px, '
+ 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
- }, property + ': mismatched list length (from shorter to longer)');
+ }, `${property}: mismatched list length (from shorter to longer)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style.color = 'rgb(0, 255, 0)';
const animation =
target.animate({ [idlName]: [ 'currentcolor 0px 0px 0px',
'currentcolor 10px 10px 10px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(0, 255, 0) 5px 5px 5px' }]);
- }, property + ': with currentcolor');
+ }, `${property}: with currentcolor`);
},
testAddition: function(property, setup) {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px';
const animation =
target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',
'rgb(120, 120, 120) 10px 10px 10px'] },
{ duration: 1000, composite: 'add' });
testAnimationSamples(animation, idlName,
[ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px, ' +
'rgb(120, 120, 120) 10px 10px 10px' }]);
- }, property + ': shadow');
+ }, `${property}: shadow`);
},
testAccumulation: function(property, setup) {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px';
const animation =
target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',
'rgb(120, 120, 120) 10px 10px 10px'] },
{ duration: 1000, composite: 'accumulate' });
testAnimationSamples(animation, idlName,
[ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px' }]);
- }, property + ': shadow');
+ }, `${property}: shadow`);
},
};
const boxShadowListType = {
testInterpolation: (property, setup) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'none',
'rgb(100, 100, 100) 10px 10px 10px 0px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
// Premultiplied
[{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
- }, property + ': from none to other');
+ }, `${property}: from none to other`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px',
'none' ] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
// Premultiplied
[{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
- }, property + ': from other to none');
+ }, `${property}: from other to none`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px',
'rgb(100, 100, 100) 10px 10px 10px 0px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px 0px' }]);
- }, property + ': single shadow');
+ }, `${property}: single shadow`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px, '
+ 'rgb(200, 200, 200) 20px 20px 20px 20px',
'rgb(100, 100, 100) 10px 10px 10px 0px, '
+ 'rgb(100, 100, 100) 10px 10px 10px 0px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px 0px, '
+ 'rgb(150, 150, 150) 15px 15px 15px 10px' }]);
- }, property + ': shadow list');
+ }, `${property}: shadow list`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px 20px',
'rgb(100, 100, 100) 10px 10px 10px 0px, '
+ 'rgb(100, 100, 100) 10px 10px 10px 0px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '
+ 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
- }, property + ': mismatched list length (from shorter to longer)');
+ }, `${property}: mismatched list length (from shorter to longer)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px, '
+ 'rgb(100, 100, 100) 10px 10px 10px 0px',
'rgb(200, 200, 200) 20px 20px 20px 20px']},
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '
+ 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
- }, property + ': mismatched list length (from longer to shorter)');
+ }, `${property}: mismatched list length (from longer to shorter)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style.color = 'rgb(0, 255, 0)';
const animation =
target.animate({ [idlName]: [ 'currentcolor 0px 0px 0px 0px',
'currentcolor 10px 10px 10px 10px'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'rgb(0, 255, 0) 5px 5px 5px 5px' }]);
- }, property + ': with currentcolor');
+ }, `${property}: with currentcolor`);
},
testAddition: function(property, setup) {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px 0px';
const animation =
target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 0px',
'rgb(120, 120, 120) 10px 10px 10px 0px'] },
{ duration: 1000, composite: 'add' });
testAnimationSamples(animation, idlName,
[ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px 0px, ' +
'rgb(120, 120, 120) 10px 10px 10px 0px' }]);
- }, property + ': shadow');
+ }, `${property}: shadow`);
},
testAccumulation: function(property, setup) {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px 10px';
const animation =
target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 10px',
'rgb(120, 120, 120) 10px 10px 10px 10px'] },
{ duration: 1000, composite: 'accumulate' });
testAnimationSamples(animation, idlName,
[ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px 20px' }]);
- }, property + ': shadow');
+ }, `${property}: shadow`);
},
};
const positionType = {
testInterpolation: (property, setup) => {
lengthPairType.testInterpolation(property, setup);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]: ['10% 10%', '50% 50%'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(
animation, idlName,
[{ time: 500, expected: calcFromPercentage(idlName, '30% 30%') }]);
- }, property + ' supports animating as a position of percent');
+ }, `${property} supports animating as a position of percent`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
lengthPairType.testAddition(property, setup);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = '60% 60%';
const animation = target.animate({ [idlName]: ['70% 70%', '100% 100%'] },
{ duration: 1000, composite });
testAnimationSamples(
animation, idlName,
[{ time: 0, expected: calcFromPercentage(idlName, '130% 130%') }]);
- }, property + ': position of percentage');
+ }, `${property}: position of percentage`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -2096,32 +2096,32 @@ const rectType = {
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]:
['rect(10px, 10px, 10px, 10px)',
'rect(50px, 50px, 50px, 50px)'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(
animation, idlName,
[{ time: 500, expected: 'rect(30px, 30px, 30px, 30px)' }]);
- }, property + ' supports animating as a rect');
+ }, `${property} supports animating as a rect`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'rect(100px, 100px, 100px, 100px)';
const animation = target.animate({ [idlName]:
['rect(10px, 10px, 10px, 10px)',
'rect(10px, 10px, 10px, 10px)'] },
{ duration: 1000, composite });
testAnimationSamples(
animation, idlName,
[{ time: 0, expected: 'rect(110px, 110px, 110px, 110px)' }]);
- }, property + ': rect');
+ }, `${property}: rect`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -2139,29 +2139,29 @@ const dasharrayType = {
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]:
['8, 16, 4',
'4, 8, 12, 16'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(
animation, idlName,
[{ time: 500, expected: '6, 12, 8, 12, 10, 6, 10, 16, 4, 8, 14, 10' }]);
- }, property + ' supports animating as a dasharray (mismatched length)');
+ }, `${property} supports animating as a dasharray (mismatched length)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation = target.animate({ [idlName]:
['2, 50%, 6, 10',
'6, 30%, 2, 2'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(
animation, idlName,
[{ time: 500, expected: '4, 40%, 4, 6' }]);
- }, property + ' supports animating as a dasharray (mixed number and percentage)');
+ }, `${property} supports animating as a dasharray (mixed number and percentage)`);
},
// Note that stroke-dasharray is neither additive nor cumulative, so we should
// write this additive test case that animating value replaces underlying
// values.
// See https://www.w3.org/TR/SVG2/painting.html#StrokeDashing.
testAdditionOrAccumulation: (property, setup, composite) => {
@@ -2171,17 +2171,17 @@ const dasharrayType = {
target.style[idlName] = '6, 30%, 2px';
const animation = target.animate({ [idlName]:
['1, 2, 3, 4, 5',
'6, 7, 8, 9, 10'] },
{ duration: 1000, composite });
testAnimationSamples(
animation, idlName,
[{ time: 0, expected: '1, 2, 3, 4, 5' }]);
- }, property + ': dasharray');
+ }, `${property}: dasharray`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');
@@ -2194,41 +2194,42 @@ const fontStretchType = {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: ['ultra-condensed', 'extra-condensed'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 499, expected: 'ultra-condensed' },
{ time: 500, expected: 'extra-condensed' }]);
- }, property + ' supports animating as a font-stretch (adjacent values)');
+ }, `${property} supports animating as a font-stretch (adjacent values)`);
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
const animation =
target.animate({ [idlName]: ['ultra-condensed', 'condensed'] },
{ duration: 1000, fill: 'both' });
testAnimationSamples(animation, idlName,
[{ time: 500, expected: 'extra-condensed' }]);
- }, property + ' supports animating as a font-stretch (between value)');
+ }, `${property} supports animating as a font-stretch (between value)`);
},
testAdditionOrAccumulation: (property, setup, composite) => {
test(t => {
const idlName = propertyToIDL(property);
const target = createTestElement(t, setup);
target.style[idlName] = 'condensed';
const animation =
target.animate({ [idlName]: ['expanded', 'ultra-expanded'] },
{ duration: 1000, composite });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: 'normal' },
{ time: 250, expected: 'semi-expanded' }]);
- }, property + ' uses font-stretch behavior for composite type ' + composite);
+ },
+ `${property} uses font-stretch behavior for composite type ${composite}`);
},
testAddition: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'add');
},
testAccumulation: function(property, setup) {
this.testAdditionOrAccumulation(property, setup, 'accumulate');