Bug 1266570: Add CSS_PROPERTY_STORES_CALC flag to "clip-path" property, so it can transition between percent and pixel shape-coordinates. r=heycam

Our transition/animation code uses "calc" to represent interpolated values between percent & pixel endpoints.  But it only does that if the property has this CSS_PROPERTY_STORES_CALC flag. (This check is in StyleAnimationValue.cpp's static helper, GetCommonUnit().)

We do indeed store (& honor) calc() units for "clip-path" in its style struct, so we can & should add this flag.

MozReview-Commit-ID: 7eEEo9ROnpU

--HG--
extra : rebase_source : b2aa4887bf17048c7fe485f77302e4df91a20f1c

layout/style/nsCSSPropList.h

@@ -1412,7 +1412,8 @@ CSS_PROP_SVGRESET(
     ClipPath,
     CSS_PROPERTY_PARSE_VALUE |
         CSS_PROPERTY_VALUE_PARSER_FUNCTION |
-        CSS_PROPERTY_CREATES_STACKING_CONTEXT,
+        CSS_PROPERTY_CREATES_STACKING_CONTEXT |
+        CSS_PROPERTY_STORES_CALC,
     "",
     0,
     nullptr,

layout/style/test/test_transitions_per_property.html

@@ -693,6 +693,21 @@ var clipPathTests = [
   { start: "inset(100% 100% 100% 100% round 100% 100%) border-box",
     end: "inset(500% 500% 500% 500% round 500% 500%) border-box",
     expected: ["inset", ["200% round 200%"], "border-box"] },
+  // matching functions with calc() values
+  { start: "circle(calc(80px + 20px))", end: "circle(calc(200px + 300px))",
+    expected: ["circle", ["200px at 50% 50%"]] },
+  { start: "circle(calc(80% + 20%))", end: "circle(calc(200% + 300%))",
+    expected: ["circle", ["calc(0px + 200%) at 50% 50%"]] },
+  { start: "circle(calc(10px + 20%))", end: "circle(calc(50px + 40%))",
+    expected: ["circle", ["calc(20px + 25%) at 50% 50%"]] },
+  // matching functions with interpolation between percentage/pixel values
+  { start: "circle(20px)", end: "circle(100%)",
+    expected: ["circle", ["calc(15px + 25%) at 50% 50%"]] },
+  { start: "ellipse(100% 100px at 8px 20%) border-box",
+    end:   "ellipse(40px 4%    at 80% 60px) border-box",
+    expected: ["ellipse", ["calc(10px + 75%) calc(75px + 1%) at " +
+                           "calc(6px + 20%) calc(15px + 15%)"],
+               "border-box"] },
   // no interpolation for keywords
   { start: "circle()", end: "circle(50px)",
     expected: ["circle", ["50px at 50% 50%"]] },