--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -211699,21 +211699,21 @@
"eee8ff07b3ec5e83e5f18305f5bc00eb72468443",
"testharness"
],
"web-animations/animation-model/animation-types/interpolation-per-property.html": [
"55100f7d505bc8cbc966ced0d1337ed78534a553",
"testharness"
],
"web-animations/animation-model/animation-types/property-list.js": [
- "42a14466e8ff814284a596c3a104dea419e24d31",
+ "ddcfd20fcb21807dba4c56fd10b70e6fefddeccf",
"support"
],
"web-animations/animation-model/animation-types/property-types.js": [
- "45237a7227e19bf2289336ccf1168c4122dcd67a",
+ "fee387af98249ad54a2be78ecca58909a5808b83",
"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-types.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -1213,16 +1213,80 @@ const rectType = {
{ duration: 1000, composite: 'add' });
testAnimationSamples(
animation, idlName,
[{ time: 0, expected: 'rect(110px, 110px, 110px, 110px)' }]);
}, property + ': rect');
},
}
+// stroke-dasharray: none | [ <length> | <percentage> | <number> ]*
+const dasharrayType = {
+ testInterpolation: function(property, setup) {
+ lengthType.testInterpolation(property, setup);
+ percentageType.testInterpolation(property, setup);
+ positiveNumberType.testInterpolation(property, setup);
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]:
+ ['6, 8px, 4, 4',
+ '14, 12, 16, 16px'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(
+ animation, idlName,
+ [{ time: 500, expected: '10, 10, 10, 10' }]);
+ }, property + ' supports animating as a dasharray');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var 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');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var 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');
+ },
+
+ testAddition: function(property, setup) {
+ lengthType.testAddition(property, setup);
+ percentageType.testAddition(property, setup);
+ positiveNumberType.testAddition(property, setup);
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ target.style[idlName] = '6, 30%, 2px';
+ var animation = target.animate({ [idlName]:
+ ['6, 30%, 2px',
+ '2, 50%, 6px'] },
+ { duration: 1000, fill: 'add' });
+ testAnimationSamples(
+ animation, idlName,
+ [{ time: 0, expected: '12, 60%, 4px' }]);
+ }, property + ': dasharray');
+ },
+}
+
const types = {
color: colorType,
discrete: discreteType,
filterList: filterListType,
integer: integerType,
length: lengthType,
percentage: percentageType,
lengthPercentageOrCalc: lengthPercentageOrCalcType,
@@ -1230,10 +1294,11 @@ const types = {
positiveNumber: positiveNumberType,
zeroToOneNumber: zeroToOneNumberType,
transformList: transformListType,
visibility: visibilityType,
boxShadowList: boxShadowListType,
textShadowList: textShadowListType,
rect: rectType,
position: positionType,
+ dasharray: dasharrayType,
};