Bug 1356162 - Enable web-platform-tests of clip property animation. r?hiro draft
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Wed, 26 Apr 2017 16:24:30 +0900
changeset 568511 6842ba15f6af17e99dce9e8ab5b1717e8783acec
parent 568252 3f0c8da53c5cb015933b10b52ded3f30432b378a
child 625935 61f81dcf8f3078bda38676e58d7548b9c85c91e2
push id55882
push userbmo:mantaroh@gmail.com
push dateWed, 26 Apr 2017 07:24:42 +0000
reviewershiro
bugs1356162
milestone55.0a1
Bug 1356162 - Enable web-platform-tests of clip property animation. r?hiro MozReview-Commit-ID: 7HRcmV7CWAN
testing/web-platform/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
@@ -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,
 };