Bug 1355732 Enable web platform tests of column-* properties animation. r?hiro
MozReview-Commit-ID: EsuYbfbP17G
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -203000,17 +203000,17 @@
"14d79d1008193c96f0eadaf3e47ef321a429b905",
"testharness"
],
"service-workers/service-worker/update-after-oneday.https.html": [
"7c8c6c3edca83d54f1838eccf3afb0b1223c7a44",
"testharness"
],
"service-workers/service-worker/update-bytecheck.https.html": [
- "79b4a278f0e35646cfdffeebf8f0523e2772bc9b",
+ "6562348b198124822297c6b622c3e63870427672",
"testharness"
],
"service-workers/service-worker/update-recovery.https.html": [
"aac5705d6844e4a33200418504adb57053a45be2",
"testharness"
],
"service-workers/service-worker/update.https.html": [
"73c129838eda3c18365f384b8b0a5c32b5e9cf6d",
@@ -207644,21 +207644,21 @@
"eee8ff07b3ec5e83e5f18305f5bc00eb72468443",
"testharness"
],
"web-animations/animation-model/animation-types/interpolation-per-property.html": [
"55100f7d505bc8cbc966ced0d1337ed78534a553",
"testharness"
],
"web-animations/animation-model/animation-types/property-list.js": [
- "4fa529fe470abb7a6fb4582d0174f1696b141f87",
+ "3d7b22ebf950652c8f806fff6aef68685a67ed5d",
"support"
],
"web-animations/animation-model/animation-types/property-types.js": [
- "7b79c51f6dc5c33aae127406509770159815c290",
+ "38bdeff00d21201dc65c8e0fd8a337093ab807e5",
"support"
],
"web-animations/animation-model/animation-types/spacing-keyframes-filters.html": [
"bd771a8a18245560221d92ea3495f81918c09848",
"testharness"
],
"web-animations/animation-model/animation-types/spacing-keyframes-shapes.html": [
"03c3ab6815cfa96c07d5f95b6059fb276c50a25f",
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/addition-per-property.html.ini
@@ -0,0 +1,6 @@
+prefs: [layout.css.contain.enabled:true, layout.css.initial-letter.enabled:true, layout.css.overflow-clip-box.enabled:true, layout.css.shape-outside.enabled:true]
+[addition-per-property.html]
+ type: testharness
+ [column-gap: "normal" onto "200px"]
+ expected: FAIL
+ bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1356241
--- a/testing/web-platform/meta/web-animations/animation-model/animation-types/interpolation-per-property.html.ini
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/interpolation-per-property.html.ini
@@ -30,8 +30,19 @@ prefs: [layout.css.contain.enabled:true,
[word-spacing supports animating as combination units "px" and "%"]
expected: FAIL
bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1291187
[word-spacing supports animating as combination units "%" and "em"]
expected: FAIL
bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1291187
+ [column-gap uses discrete animation when animating between "normal" and "200px" with linear easing]
+ expected: FAIL
+ bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1356241
+
+ [column-gap uses discrete animation when animating between "normal" and "200px" with effect easing]
+ expected: FAIL
+ bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1356241
+
+ [column-gap uses discrete animation when animating between "normal" and "200px" with keyframe easing]
+ expected: FAIL
+ bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1356241
--- 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
@@ -359,22 +359,25 @@ var gCSSProperties = {
'color-interpolation-filters': {
// https://drafts.fxtf.org/filters-1/#propdef-color-interpolation-filters
types: [
{ type: 'discrete', options: [ [ 'sRGB', 'linearRGB' ] ] }
]
},
'column-count': {
// https://drafts.csswg.org/css-multicol/#propdef-column-count
- types: [
+ types: [ 'positiveInteger',
+ { type: 'discrete', options: [ [ 'auto', '10' ] ] }
]
},
'column-gap': {
// https://drafts.csswg.org/css-multicol/#propdef-column-gap
- types: [ 'length' ]
+ types: [ 'length',
+ { type: 'discrete', options: [ [ 'normal', '200px' ] ] }
+ ]
},
'column-rule-color': {
// https://drafts.csswg.org/css-multicol/#propdef-column-rule-color
types: [ 'color' ]
},
'column-fill': {
// https://drafts.csswg.org/css-multicol/#propdef-column-fill
types: [
@@ -1513,17 +1516,16 @@ function propertyToIDL(property) {
// https://w3c.github.io/web-animations/#animation-property-name-to-idl-attribute-name
if (property === 'float') {
return 'cssFloat';
}
return property.replace(/-[a-z]/gi,
function (str) {
return str.substr(1).toUpperCase(); });
}
-
function calcFromPercentage(idlName, percentageValue) {
var examElem = document.createElement('div');
document.body.appendChild(examElem);
examElem.style[idlName] = percentageValue;
var calcValue = getComputedStyle(examElem)[idlName];
document.body.removeChild(examElem);
--- 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
@@ -174,16 +174,44 @@ const integerType = {
{ duration: 1000, composite: 'add' });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: '-3' }]);
}, property + ': integer');
},
};
+const positiveIntegerType = {
+ testInterpolation: function(property, setup) {
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: [1, 3] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '1' },
+ { time: 500, expected: '2' },
+ { time: 1000, expected: '3' }]);
+ }, property + ' supports animating as a positive integer');
+ },
+
+ testAddition: function(property, setup) {
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ target.style[idlName] = 1;
+ var animation = target.animate({ [idlName]: [2, 5] },
+ { duration: 1000, composite: 'add' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '3' }]);
+ }, property + ': positive integer');
+ },
+
+};
+
const lengthPercentageOrCalcType = {
testInterpolation: function(property, setup) {
lengthType.testInterpolation(property, setup);
percentageType.testInterpolation(property, setup);
test(function(t) {
var idlName = propertyToIDL(property);
var target = createTestElement(t, setup);
@@ -1024,16 +1052,17 @@ const positionType = {
},
};
const types = {
color: colorType,
discrete: discreteType,
filterList: filterListType,
integer: integerType,
+ positiveInteger: positiveIntegerType,
length: lengthType,
percentage: percentageType,
lengthPercentageOrCalc: lengthPercentageOrCalcType,
positiveNumber: positiveNumberType,
transformList: transformListType,
visibility: visibilityType,
boxShadowList: boxShadowListType,
textShadowList: textShadowListType,