Add support for animation of border-spacing and -moz-transform-origin. (Bug 524861) r=bzbarsky

layout/style/nsCSSPropList.h

@@ -1003,7 +1003,7 @@ CSS_PROP_TABLEBORDER(
     eCSSType_ValuePair,
     nsnull,
     CSS_PROP_NO_OFFSET,
-    eStyleAnimType_None) // XXX bug 3935
+    eStyleAnimType_Custom) // XXX bug 3935
 CSS_PROP_SHORTHAND(
     -moz-border-start,
     border_start,
@@ -2347,7 +2347,7 @@ CSS_PROP_DISPLAY(
     eCSSType_ValuePair,
     kBackgroundPositionKTable,
     CSS_PROP_NO_OFFSET,
-    eStyleAnimType_None)
+    eStyleAnimType_Custom)
 CSS_PROP_POSITION(
     top,
     top,

layout/style/nsStyleAnimation.cpp

@@ -1145,6 +1145,42 @@ nsStyleAnimation::ExtractComputedValue(nsCSSProperty aProperty,
           break;
         }
 
+        case eCSSProperty_border_spacing: {
+          const nsStyleTableBorder *styleTableBorder =
+            static_cast<const nsStyleTableBorder*>(styleStruct);
+          nsCSSValuePair *pair = new nsCSSValuePair;
+          if (!pair) {
+            return PR_FALSE;
+          }
+          pair->mXValue.SetFloatValue(
+            nsPresContext::AppUnitsToFloatCSSPixels(
+              styleTableBorder->mBorderSpacingX),
+            eCSSUnit_Pixel);
+          pair->mYValue.SetFloatValue(
+            nsPresContext::AppUnitsToFloatCSSPixels(
+              styleTableBorder->mBorderSpacingY),
+            eCSSUnit_Pixel);
+          aComputedValue.SetAndAdoptCSSValuePairValue(pair,
+                                                      eUnit_CSSValuePair);
+          break;
+        }
+
+        case eCSSProperty__moz_transform_origin: {
+          const nsStyleDisplay *styleDisplay =
+            static_cast<const nsStyleDisplay*>(styleStruct);
+          nsCSSValuePair *pair = new nsCSSValuePair;
+          if (!pair) {
+            return PR_FALSE;
+          }
+          StyleCoordToCSSValue(styleDisplay->mTransformOrigin[0],
+                               pair->mXValue);
+          StyleCoordToCSSValue(styleDisplay->mTransformOrigin[1],
+                               pair->mYValue);
+          aComputedValue.SetAndAdoptCSSValuePairValue(pair,
+                                                      eUnit_CSSValuePair);
+          break;
+        }
+
         case eCSSProperty_stroke_dasharray: {
           const nsStyleSVG *svg = static_cast<const nsStyleSVG*>(styleStruct);
           NS_ABORT_IF_FALSE((svg->mStrokeDasharray != nsnull) ==

layout/style/test/test_transitions_per_property.html

@@ -63,6 +63,8 @@ var supported_properties = {
     "-moz-outline-radius-bottomright": [ test_radius_transition ],
     "-moz-outline-radius-topleft": [ test_radius_transition ],
     "-moz-outline-radius-topright": [ test_radius_transition ],
+    "-moz-transform-origin": [ test_length_pair_transition,
+                               test_length_percent_pair_transition ],
     "background-color": [ test_color_transition ],
     "border-bottom-color": [ test_color_transition ],
     "border-bottom-width": [ test_length_transition ],
@@ -70,6 +72,7 @@ var supported_properties = {
     "border-left-width": [ test_length_transition ],
     "border-right-color": [ test_color_transition ],
     "border-right-width": [ test_length_transition ],
+    "border-spacing": [ test_length_pair_transition ],
     "border-top-color": [ test_color_transition ],
     "border-top-width": [ test_length_transition ],
     "bottom": [ test_length_transition, test_percent_transition ],
@@ -501,6 +504,28 @@ function test_pos_integer_or_auto_transition(prop) {
      "integer-valued property " + prop + ": interpolation of lengths");
 }
 
+function test_length_pair_transition(prop) {
+  div.style.setProperty("-moz-transition-property", "none", "");
+  div.style.setProperty(prop, "4px 8px", "");
+  is(cs.getPropertyValue(prop), "4px 8px",
+     "length-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("-moz-transition-property", prop, "");
+  div.style.setProperty(prop, "12px 10px", "");
+  is(cs.getPropertyValue(prop), "8px 9px",
+     "length-valued property " + prop + ": interpolation of lengths");
+}
+
+function test_length_percent_pair_transition(prop) {
+  div.style.setProperty("-moz-transition-property", "none", "");
+  div.style.setProperty(prop, "4px 50%", "");
+  is(cs.getPropertyValue(prop), "4px 50%",
+     "length-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("-moz-transition-property", prop, "");
+  div.style.setProperty(prop, "12px 70%", "");
+  is(cs.getPropertyValue(prop), "8px 60%",
+     "length-valued property " + prop + ": interpolation of lengths");
+}
+
 </script>
 </pre>
 </body>