Bug 1354437 - enable border-spacing interpolation test. draft
authorJeremy Chen <jeremychen@mozilla.com>
Thu, 27 Apr 2017 17:26:31 +0800
changeset 569355 4be93c6328f42343c6fad344b877b0beb2ef45a4
parent 569354 b813a38bd73a6a53f1473728f0346961b5192e6a
child 626179 170623cfabafe6d77d7dbb9105d35e66a98cbb55
push id56143
push userbmo:jeremychen@mozilla.com
push dateThu, 27 Apr 2017 10:17:21 +0000
bugs1354437
milestone55.0a1
Bug 1354437 - enable border-spacing interpolation test. So far, we don't have a type to test anamations of a pair of length. Since border-spacing consists two absolute lengths, we shall add this new type. MozReview-Commit-ID: Bo8VMWPLDHc
testing/web-platform/meta/MANIFEST.json
testing/web-platform/mozilla/meta/MANIFEST.json
testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -166247,17 +166247,17 @@
    "e3daa6a1f0c1d87f0b02909affcf190bd29eadf9",
    "testharness"
   ],
   "dom/nodes/Element-children.html": [
    "e3fe31ea198922fe64fbf985ae99d1cd4512567a",
    "testharness"
   ],
   "dom/nodes/Element-classlist.html": [
-   "7e3b68e65468fba0708f4084a9b2f6af93edde90",
+   "612d218e8252405070a6c075d6eb5aa5f36772c1",
    "testharness"
   ],
   "dom/nodes/Element-closest.html": [
    "4171fb8b70948ba2617e05b118aaf5d9367e916f",
    "testharness"
   ],
   "dom/nodes/Element-firstElementChild-entity-xhtml.xhtml": [
    "d8babfc580fb43cfec2a2600be979ae769087c05",
@@ -166391,17 +166391,17 @@
    "d6bb6d9f107f2d3ffd3c86793185eeb4336df834",
    "testharness"
   ],
   "dom/nodes/Element-webkitMatchesSelector.html": [
    "31934621453740439f9b318c0bb8b180ac3071c3",
    "testharness"
   ],
   "dom/nodes/MutationObserver-attributes.html": [
-   "0a224c3dc64de0c4cf1fdc895a2c52667be2134f",
+   "f0695f2e137e34f015d9831d68b89c669d515c75",
    "testharness"
   ],
   "dom/nodes/MutationObserver-characterData.html": [
    "ecf8cba9842dc6fed4b678a40c039389088c9d6e",
    "testharness"
   ],
   "dom/nodes/MutationObserver-childList.html": [
    "91826df379f2edb53ab2d5d408905636512eeb28",
@@ -205567,29 +205567,29 @@
    "9cc10269ce5c49d9c93565909b5a2c6255170178",
    "testharness"
   ],
   "selection/getSelection.html": [
    "4b5b638ae5cdaab02fbe9cca255a119134238a7d",
    "testharness"
   ],
   "selection/interfaces.html": [
-   "dc08fae99f9b481a63ed5f78aa8b32eeaba28b35",
+   "55d32a5d2a362a2d7bd0ddc580fa24180f3d3579",
    "testharness"
   ],
   "selection/isCollapsed.html": [
    "d1984a9359d880dfb81197e7ec31b2456833809d",
    "testharness"
   ],
   "selection/removeAllRanges.html": [
    "23385a72a586db288b282eb251f9384048532666",
    "testharness"
   ],
   "selection/removeRange.html": [
-   "c67aebaddeb575fe92b7339f0c2e67209faf468a",
+   "4a1ca00b32bca658f31bbff3f01a0d9154fb9779",
    "testharness"
   ],
   "selection/selectAllChildren.html": [
    "1951e6d34c7959c038146efde2d49a7898eaee29",
    "testharness"
   ],
   "selection/setBaseAndExtent.html": [
    "856ba9771d2c1e2eaae00dcf6b8378a42003cc7a",
@@ -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": [
-   "283bee6ac9dd238697fe7412c55f72a1ac47e7a3",
+   "a07677026775e050539fbec9fe518fe762025923",
    "support"
   ],
   "web-animations/animation-model/animation-types/property-types.js": [
-   "5d70d7b947b0fbfc27ede27911775f038e17ff4a",
+   "564158b80368dc7ff9aa8fa0140343289762c413",
    "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/mozilla/meta/MANIFEST.json
+++ b/testing/web-platform/mozilla/meta/MANIFEST.json
@@ -833,17 +833,17 @@
   }
  },
  "paths": {
   "./placeholder": [
    "74e16eb87ecdfeb2dfc28f36e0c73a584abdf9c2",
    "support"
   ],
   "dom/classList.html": [
-   "f289334e7b3486259b9aae54b4282a7211b8813e",
+   "6d9b7f24be9c7e2ccf504c8fe05e93bbc01fd7c6",
    "testharness"
   ],
   "fetch/api/redirect/redirect-referrer-mixed-content.js": [
    "f9d7ec9cf9fa8c847e45664b05482e3f8c191385",
    "support"
   ],
   "fetch/api/redirect/redirect-referrer.https.html": [
    "99cbd16b78771f35e075e4012d8dbc5dce3209c0",
--- 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
@@ -254,18 +254,17 @@ var gCSSProperties = {
     setup: t => {
       var element = createElement(t);
       element.style.borderRightStyle = 'solid';
       return element;
     }
   },
   'border-spacing': {
     // https://drafts.csswg.org/css-tables/#propdef-border-spacing
-    types: [
-    ]
+    types: [ 'lengthPair' ]
   },
   'border-top-color': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-top-color
     types: [ 'color' ]
   },
   'border-top-left-radius': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-top-left-radius
     types: [
--- 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
@@ -119,16 +119,59 @@ const lengthType = {
       var animation = target.animate({ [idlName]: ['1rem', '5rem'] },
                                      { duration: 1000, composite: 'add' });
       testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]);
     }, property + ': length of rem');
   },
 
 };
 
+const lengthPairType = {
+  testInterpolation: function(property, setup) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var 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');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var 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');
+  },
+
+  testAddition: function(property, setup) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.style[idlName] = '10px 10px';
+      var animation = target.animate({ [idlName]: ['10px 10px', '50px 50px'] },
+                                     { duration: 1000, composite: 'add' });
+      testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px 20px' }]);
+    }, property + ': length pair');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.style[idlName] = '1rem 1rem';
+      var animation = target.animate({ [idlName]: ['1rem 1rem', '5rem 5rem'] },
+                                     { duration: 1000, composite: 'add' });
+      testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px 20px' }]);
+    }, property + ': length pair of rem');
+  },
+
+};
+
 const percentageType = {
   testInterpolation: function(property, setup) {
     test(function(t) {
       var idlName = propertyToIDL(property);
       var target = createTestElement(t, setup);
       var animation = target.animate({ [idlName]: ['10%', '50%'] },
                                      { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
@@ -1212,16 +1255,17 @@ const rectType = {
 const types = {
   color: colorType,
   discrete: discreteType,
   filterList: filterListType,
   integer: integerType,
   length: lengthType,
   percentage: percentageType,
   lengthPercentageOrCalc: lengthPercentageOrCalcType,
+  lengthPair: lengthPairType,
   positiveNumber: positiveNumberType,
   transformList: transformListType,
   visibility: visibilityType,
   boxShadowList: boxShadowListType,
   textShadowList: textShadowListType,
   rect: rectType,
   position: positionType,
 };