--- 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
@@ -1578,16 +1578,377 @@ const transformListType = {
testAnimationSampleMatrices(animation, idlName, [
{ time: 0, expected: [-2, 0, 0, -2, 250, 0] },
]);
}, `${property}: non-invertible matrices in mismatched transform lists`
+ ' (invertible onto non-invertible)');
},
};
+const rotateListType = {
+ testInterpolation: (property, setup) => {
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation = target.animate(
+ {
+ [idlName]: ['45deg', '135deg'],
+ },
+ 1000
+ );
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: '90deg' }]);
+ }, `${property} without rotation axes`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation =
+ target.animate({ [idlName]: [ '0 1 0 0deg',
+ '0 1 0 90deg'] },
+ 1000);
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: '0 1 0 45deg' }]);
+ }, `${property} with rotation axes`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+
+ const animation =
+ target.animate({ [idlName]: [ '0 1 0 0deg',
+ '0 1 0 720deg'] },
+ 1000);
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 250, expected: '0 1 0 180deg' }]);
+ }, `${property} with rotation axes`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation =
+ target.animate({ [idlName]: [ '0 1 0 0deg',
+ '0 1 1 90deg'] },
+ 1000);
+
+ testAnimationSampleRotate3d(animation, idlName,
+ [{ time: 500, expected: '0 0.707107 0.707107 45deg' }]);
+ }, `${property} with rotation axes`);
+ },
+ testAddition: function(property, setup) {
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style[idlName] = '45deg';
+ const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },
+ { duration: 1000, fill: 'both',
+ composite: 'add' });
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '-45deg' },
+ { time: 1000, expected: '135deg' }]);
+ }, `${property} without rotation axes`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style.transform = 'rotate(20deg)';
+ target.style[idlName] = '0 1 0 -45deg';
+ const animation =
+ target.animate({ [idlName]: ['0 1 0 90deg',
+ '0 1 0 180deg'] },
+ { duration: 1000, fill: 'both', composite: 'add' });
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '0 1 0 45deg' },
+ { time: 1000, expected: '0 1 0 135deg' }]);
+ }, `${property} with transform`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation =
+ target.animate({ [idlName]: [ '0 1 0 0deg',
+ '1 1 1 270deg'] },
+ { duration: 1000, fill: 'both', composite: 'add' });
+
+ testAnimationSampleRotate3d(animation, idlName,
+ [{ time: 500, expected: '0.57735 0.57735 0.57735 135deg' }]);
+ }, `${property} with rotation axes`);
+ },
+ testAccumulation: function(property, setup) {
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style[idlName] = '45deg';
+ const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },
+ { duration: 1000, fill: 'both',
+ composite: 'accumulate' });
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '-45deg' },
+ { time: 1000, expected: '135deg' }]);
+ }, `${property} without rotation axes`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style.transform = 'translateX(100px)';
+ target.style[idlName] = '1 0 0 -45deg';
+ const animation =
+ target.animate({ [idlName]: ['1 0 0 90deg',
+ '1 0 0 180deg'] },
+ { duration: 1000, fill: 'both', composite: 'accumulate' });
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '1 0 0 45deg' },
+ { time: 1000, expected: '1 0 0 135deg' }]);
+ }, `${property} with transform`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation =
+ target.animate({ [idlName]: [ '0 1 0 0deg',
+ '1 0 1 180deg'] },
+ { duration: 1000, fill: 'both', composite: 'accumulate' });
+
+ testAnimationSampleRotate3d(animation, idlName,
+ [{ time: 500, expected: '0.707107 0 0.707107 90deg' }]);
+ }, `${property} with rotation axes`);
+ },
+};
+
+const translateListType = {
+ testInterpolation: (property, setup) => {
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation = target.animate(
+ {
+ [idlName]: ['200px', '400px'],
+ },
+ 1000
+ );
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: '300px' }]);
+ }, `${property} with two unspecified values`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation = target.animate(
+ {
+ [idlName]: ['200px -200px', '400px 400px'],
+ },
+ 1000
+ );
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: '300px 100px' }]);
+ }, `${property} with one unspecified value`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation = target.animate(
+ {
+ [idlName]: ['200px -200px 600px', '400px 400px -200px'],
+ },
+ 1000
+ );
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: '300px 100px 200px' }]);
+ }, `${property}`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation = target.animate(
+ {
+ [idlName]: ['0% -101px 600px', '400px 50% -200px'],
+ },
+ 1000
+ );
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: '200px -25.5px 200px' }]);
+ }, `${property}`);
+ },
+ testAddition: function(property, setup) {
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style[idlName] = '100px';
+ const animation = target.animate({ [idlName]: ['-200px', '500px'] },
+ { duration: 1000, fill: 'both',
+ composite: 'add' });
+ testAnimationSamples(animation, idlName,
+ [ { time: 0, expected: '-100px' },
+ { time: 1000, expected: '600px' }]);
+
+ }, `${property}`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.transform = 'translateY(100px)';
+ target.style[idlName] = '100px';
+ const animation = target.animate({ [idlName]: ['-200px', '500px'] },
+ { duration: 1000, fill: 'both',
+ composite: 'add' });
+ testAnimationSamples(animation, idlName,
+ [ { time: 0, expected: '-100px' },
+ { time: 1000, expected: '600px' }]);
+
+ }, `${property} with transform`);
+ },
+ testAccumulation: function(property, setup) {
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style[idlName] = '100px';
+ const animation = target.animate({ [idlName]: ['-200px', '500px'] },
+ { duration: 1000, fill: 'both',
+ composite: 'accumulate' });
+ testAnimationSamples(animation, idlName,
+ [ { time: 0, expected: '-100px' },
+ { time: 1000, expected: '600px' }]);
+ }, `${property}`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.transform = 'translateY(100px)';
+ target.style[idlName] = '100px';
+ const animation = target.animate({ [idlName]: ['-200px', '500px'] },
+ { duration: 1000, fill: 'both',
+ composite: 'accumulate' });
+ testAnimationSamples(animation, idlName,
+ [ { time: 0, expected: '-100px' },
+ { time: 1000, expected: '600px' }]);
+ }, `${property} with transform`);
+ },
+};
+
+const scaleListType = {
+ testInterpolation: (property, setup) => {
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation = target.animate({ [idlName]: ['3', '5'] },
+ 1000);
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: '4' }]);
+ }, `${property} with two unspecified values`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation = target.animate({ [idlName]: ['3 3', '5 5'] },
+ 1000);
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: '4 4' }]);
+ }, `${property} with one unspecified value`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ const animation = target.animate({ [idlName]: ['3 3 3', '5 5 5'] },
+ 1000);
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: '4 4 4' }]);
+ }, `${property}`);
+ },
+ testAddition: function(property, setup) {
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style[idlName] = '2';
+ const animation = target.animate({ [idlName]: ['-3', '5'] },
+ { duration: 1000, fill: 'both',
+ composite: 'add' });
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '-6' },
+ { time: 1000, expected: '10' }]);
+ }, `${property} with two unspecified values`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style[idlName] = '2 2';
+ const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },
+ { duration: 1000, fill: 'both',
+ composite: 'add' });
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '-6 -6' },
+ { time: 1000, expected: '10 10' }]);
+ }, `${property} with one unspecified value`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style[idlName] = '2 2 2';
+ const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] },
+ { duration: 1000, fill: 'both',
+ composite: 'add' });
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '-2 -4 -6' },
+ { time: 1000, expected: '8 10 12' }]);
+ }, `${property}`);
+ },
+ testAccumulation: function(property, setup) {
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style[idlName] = '2';
+ const animation = target.animate({ [idlName]: ['-3', '5'] },
+ { duration: 1000, fill: 'both',
+ composite: 'accumulate' });
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '-2' },
+ { time: 1000, expected: '6' }]);
+ }, `${property} with two unspecified values`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style[idlName] = '2 2';
+ const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },
+ { duration: 1000, fill: 'both',
+ composite: 'accumulate' });
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '-2 -2' },
+ { time: 1000, expected: '6 6' }]);
+ }, `${property} with one unspecified value`);
+
+ test(t => {
+ const idlName = propertyToIDL(property);
+ const target = createTestElement(t, setup);
+ target.style[idlName] = '2 2 2';
+ const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] },
+ { duration: 1000, fill: 'both',
+ composite: 'accumulate' });
+
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '0 -1 -2' },
+ { time: 1000, expected: '5 6 7' }]);
+ }, `${property}`);
+ },
+};
+
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);
@@ -2311,16 +2672,19 @@ const types = {
positiveInteger: positiveIntegerType,
length: lengthType,
percentage: percentageType,
lengthPercentageOrCalc: lengthPercentageOrCalcType,
lengthPair: lengthPairType,
positiveNumber: positiveNumberType,
opacity: opacityType,
transformList: transformListType,
+ rotateList: rotateListType,
+ translateList: translateListType,
+ scaleList: scaleListType,
visibility: visibilityType,
boxShadowList: boxShadowListType,
textShadowList: textShadowListType,
rect: rectType,
position: positionType,
dasharray: dasharrayType,
fontStretch: fontStretchType,
fontVariationSettings: fontVariationSettingsType,