Add support for animation of border-spacing and -moz-transform-origin. (Bug 524861) r=bzbarsky
authorL. David Baron <dbaron@dbaron.org>
Fri, 11 Dec 2009 08:13:19 -0800
changeset 35570 9553ddacda66a05dbf4e3dbcdd90bdde54ff2f3e
parent 35569 fa46cff7f78d136e9e5335e35b1def2329663a08
child 35571 3a6b865babdcf5ddeed5194c2b225857a13cf31e
push idunknown
push userunknown
push dateunknown
reviewersbzbarsky
bugs524861
milestone1.9.3a1pre
Add support for animation of border-spacing and -moz-transform-origin. (Bug 524861) r=bzbarsky
layout/style/nsCSSPropList.h
layout/style/nsStyleAnimation.cpp
layout/style/test/test_transitions_per_property.html
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -998,17 +998,17 @@ CSS_PROP_TABLEBORDER(
     border_spacing,
     BorderSpacing,
     0,
     Table,
     mBorderSpacing,
     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,
     MozBorderStart,
     0)
 CSS_PROP_SHORTHAND(
     -moz-border-start-color,
     border_start_color,
@@ -2342,17 +2342,17 @@ CSS_PROP_DISPLAY(
     _moz_transform_origin,
     MozTransformOrigin,
     0,
     Display,
     mTransformOrigin,
     eCSSType_ValuePair,
     kBackgroundPositionKTable,
     CSS_PROP_NO_OFFSET,
-    eStyleAnimType_None)
+    eStyleAnimType_Custom)
 CSS_PROP_POSITION(
     top,
     top,
     Top,
     0,
     Position,
     mOffset.mTop,
     eCSSType_Value,
--- a/layout/style/nsStyleAnimation.cpp
+++ b/layout/style/nsStyleAnimation.cpp
@@ -1140,16 +1140,52 @@ nsStyleAnimation::ExtractComputedValue(n
             aComputedValue.SetAutoValue();
           } else {
             aComputedValue.SetIntValue(styleColumn->mColumnCount,
                                        eUnit_Integer);
           }
           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) ==
                             (svg->mStrokeDasharrayLength != 0),
                             "pointer/length mismatch");
           nsAutoPtr<nsCSSValueList> result;
           if (svg->mStrokeDasharray) {
             NS_ABORT_IF_FALSE(svg->mStrokeDasharrayLength > 0,
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -58,23 +58,26 @@ var supported_properties = {
     "-moz-column-gap": [ test_length_transition ],
     "-moz-column-rule-color": [ test_color_transition ],
     "-moz-column-rule-width": [ test_length_transition ],
     "-moz-column-width": [ test_length_transition ],
     "-moz-outline-radius-bottomleft": [ test_radius_transition ],
     "-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 ],
     "border-left-color": [ test_color_transition ],
     "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 ],
     "color": [ test_color_transition ],
     "fill": [ test_color_transition ],
     "fill-opacity" : [ test_float_zeroToOne_transition ],
     "flood-color": [ test_color_transition ],
     "flood-opacity" : [ test_float_zeroToOne_transition ],
@@ -496,12 +499,34 @@ function test_pos_integer_or_auto_transi
   div.style.setProperty(prop, "8", "");
   is(cs.getPropertyValue(prop), "8",
      "integer-valued property " + prop + ": computed value before transition");
   div.style.setProperty(prop, "4", "");
   is(cs.getPropertyValue(prop), "6",
      "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>
 </html>