Bug 1356162 - Enable web-platform-tests of clip property animation. r?hiro
MozReview-Commit-ID: 7HRcmV7CWAN
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -211689,21 +211689,21 @@
"eee8ff07b3ec5e83e5f18305f5bc00eb72468443",
"testharness"
],
"web-animations/animation-model/animation-types/interpolation-per-property.html": [
"55100f7d505bc8cbc966ced0d1337ed78534a553",
"testharness"
],
"web-animations/animation-model/animation-types/property-list.js": [
- "0d7f75b05e66da256fe4d2ecb17332ec7abccfd2",
+ "283bee6ac9dd238697fe7412c55f72a1ac47e7a3",
"support"
],
"web-animations/animation-model/animation-types/property-types.js": [
- "f114971fefa63200be12565b896e475667f07153",
+ "5d70d7b947b0fbfc27ede27911775f038e17ff4a",
"support"
],
"web-animations/animation-model/animation-types/spacing-keyframes-filters.html": [
"bd771a8a18245560221d92ea3495f81918c09848",
"testharness"
],
"web-animations/animation-model/animation-types/spacing-keyframes-shapes.html": [
"03c3ab6815cfa96c07d5f95b6059fb276c50a25f",
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -326,16 +326,21 @@ var gCSSProperties = {
// https://drafts.csswg.org/css-page-floats/#propdef-clear
types: [
{ type: 'discrete', options: [ [ 'left', 'right' ] ] }
]
},
'clip': {
// https://drafts.fxtf.org/css-masking-1/#propdef-clip
types: [
+ 'rect',
+ { type: 'discrete', options: [ [ 'rect(10px, 10px, 10px, 10px)',
+ 'auto' ],
+ [ 'rect(10px, 10px, 10px, 10px)',
+ 'rect(10px, 10px, 10px, auto)'] ] }
]
},
'clip-path': {
// https://drafts.fxtf.org/css-masking-1/#propdef-clip-path
types: [
]
},
'clip-rule': {
--- 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
@@ -1173,24 +1173,56 @@ const positionType = {
{ duration: 1000, composite: 'add' });
testAnimationSamples(
animation, idlName,
[{ time: 0, expected: calcFromPercentage(idlName, '130% 130%') }]);
}, property + ': position of percentage');
},
};
+const rectType = {
+ testInterpolation: function(property, setup) {
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]:
+ ['rect(10px, 10px, 10px, 10px)',
+ 'rect(50px, 50px, 50px, 50px)'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(
+ animation, idlName,
+ [{ time: 500, expected: 'rect(30px, 30px, 30px, 30px)' }]);
+ }, property + ' supports animating as a rect');
+ },
+
+ testAddition: function(property, setup) {
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ target.style[idlName] = 'rect(100px, 100px, 100px, 100px)';
+ var animation = target.animate({ [idlName]:
+ ['rect(10px, 10px, 10px, 10px)',
+ 'rect(10px, 10px, 10px, 10px)'] },
+ { duration: 1000, composite: 'add' });
+ testAnimationSamples(
+ animation, idlName,
+ [{ time: 0, expected: 'rect(110px, 110px, 110px, 110px)' }]);
+ }, property + ': rect');
+ },
+}
+
const types = {
color: colorType,
discrete: discreteType,
filterList: filterListType,
integer: integerType,
length: lengthType,
percentage: percentageType,
lengthPercentageOrCalc: lengthPercentageOrCalcType,
positiveNumber: positiveNumberType,
transformList: transformListType,
visibility: visibilityType,
boxShadowList: boxShadowListType,
textShadowList: textShadowListType,
+ rect: rectType,
position: positionType,
};