Bug 1356162 part 2 - Enable w-p-t of clip animation. r?hiro draft
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Fri, 21 Apr 2017 13:23:19 +0900
changeset 566200 4c688fa8765ae701646f741429914f48cb3c32ff
parent 566199 7573b5578247f2c4abaeca3162c662048a413fcd
child 625238 fd762567a57e877ff2d9557c76e30b95234f5ef6
push id55134
push userbmo:mantaroh@gmail.com
push dateFri, 21 Apr 2017 04:23:59 +0000
reviewershiro
bugs1356162
milestone55.0a1
Bug 1356162 part 2 - Enable w-p-t of clip 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": [
-   "4fa529fe470abb7a6fb4582d0174f1696b141f87",
+   "2de5fe382c490463e4b2336d465c39778f6ae023",
    "support"
   ],
   "web-animations/animation-model/animation-types/property-types.js": [
-   "7b79c51f6dc5c33aae127406509770159815c290",
+   "da30873d581ff0397c2fe028ebcb1582867632fa",
    "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
@@ -322,16 +322,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
@@ -1019,24 +1019,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,
 };