Add support for interpolation of integer-valued properties (i.e., z-index) to nsStyleAnimation. (Bug 524808) r=dholbert

layout/style/nsCSSPropList.h

@@ -2574,9 +2574,8 @@ CSS_PROP_POSITION(
     mZIndex,
     eCSSType_Value,
     nsnull,
-    CSS_PROP_NO_OFFSET,
-    eStyleAnimType_None)
-
+    offsetof(nsStylePosition, mZIndex),
+    eStyleAnimType_Coord)
 CSS_PROP_XUL(
     -moz-box-align,
     box_align,

layout/style/nsStyleAnimation.cpp

@@ -130,6 +130,12 @@ nsStyleAnimation::ComputeDistance(const Value& aStartValue,
     case eUnit_Enumerated:
       success = PR_FALSE;
       break;
+    case eUnit_Integer: {
+      PRInt32 startInt = aStartValue.GetIntValue();
+      PRInt32 endInt = aEndValue.GetIntValue();
+      aDistance = PR_ABS(endInt - startInt);
+      break;
+    }
     case eUnit_Coord: {
       nscoord startCoord = aStartValue.GetCoordValue();
       nscoord endCoord = aEndValue.GetCoordValue();
@@ -436,6 +442,15 @@ nsStyleAnimation::AddWeighted(double aCoeff1, const Value& aValue1,
     case eUnit_Enumerated:
       success = PR_FALSE;
       break;
+    case eUnit_Integer: {
+      // http://dev.w3.org/csswg/css3-transitions/#animation-of-property-types-
+      // says we should use floor
+      aResultValue.SetIntValue(NS_floor(
+          aCoeff1 * double(aValue1.GetIntValue()) +
+          aCoeff2 * double(aValue2.GetIntValue())),
+        eUnit_Integer);
+      break;
+    }
     case eUnit_Coord: {
       aResultValue.SetCoordValue(NSToCoordRound(
         aCoeff1 * aValue1.GetCoordValue() +
@@ -762,6 +777,12 @@ nsStyleAnimation::UncomputeValue(nsCSSProperty aProperty,
       static_cast<nsCSSValue*>(aSpecifiedValue)->
         SetIntValue(aComputedValue.GetIntValue(), eCSSUnit_Enumerated);
       break;
+    case eUnit_Integer:
+      NS_ABORT_IF_FALSE(nsCSSProps::kTypeTable[aProperty] == eCSSType_Value,
+                        "type mismatch");
+      static_cast<nsCSSValue*>(aSpecifiedValue)->
+        SetIntValue(aComputedValue.GetIntValue(), eCSSUnit_Integer);
+      break;
     case eUnit_Coord: {
       NS_ABORT_IF_FALSE(nsCSSProps::kTypeTable[aProperty] == eCSSType_Value,
                         "type mismatch");
@@ -914,8 +935,11 @@ StyleCoordToValue(const nsStyleCoord& aCoord, nsStyleAnimation::Value& aValue)
     case eStyleUnit_Enumerated:
       aValue.SetIntValue(aCoord.GetIntValue(),
                          nsStyleAnimation::eUnit_Enumerated);
+      break;
     case eStyleUnit_Integer:
-      return PR_FALSE;
+      aValue.SetIntValue(aCoord.GetIntValue(),
+                         nsStyleAnimation::eUnit_Integer);
+      break;
   }
   return PR_TRUE;
 }
@@ -1195,9 +1219,11 @@ nsStyleAnimation::ExtractComputedValue(nsCSSProperty aProperty,
   return PR_FALSE;
 }
 
-nsStyleAnimation::Value::Value(PRInt32 aInt, EnumeratedConstructorType)
+nsStyleAnimation::Value::Value(PRInt32 aInt, Unit aUnit,
+                               IntegerConstructorType)
 {
-  mUnit = eUnit_Enumerated;
+  NS_ASSERTION(IsIntUnit(aUnit), "unit must be of integer type");
+  mUnit = aUnit;
   mValue.mInt = aInt;
 }
 
@@ -1238,6 +1264,7 @@ nsStyleAnimation::Value::operator=(const Value& aOther)
     case eUnit_None:
       break;
     case eUnit_Enumerated:
+    case eUnit_Integer:
       mValue.mInt = aOther.mValue.mInt;
       break;
     case eUnit_Coord:
@@ -1300,6 +1327,7 @@ nsStyleAnimation::Value::SetNoneValue()
 void
 nsStyleAnimation::Value::SetIntValue(PRInt32 aInt, Unit aUnit)
 {
+  NS_ASSERTION(IsIntUnit(aUnit), "unit must be of integer type");
   FreeValue();
   mUnit = aUnit;
   mValue.mInt = aInt;
@@ -1384,6 +1412,7 @@ nsStyleAnimation::Value::operator==(const Value& aOther) const
     case eUnit_None:
       return PR_TRUE;
     case eUnit_Enumerated:
+    case eUnit_Integer:
       return mValue.mInt == aOther.mValue.mInt;
     case eUnit_Coord:
       return mValue.mCoord == aOther.mValue.mCoord;

layout/style/nsStyleAnimation.h

@@ -223,6 +223,7 @@ public:
     eUnit_Auto,
     eUnit_None,
     eUnit_Enumerated,
+    eUnit_Integer,
     eUnit_Coord,
     eUnit_Percent,
     eUnit_Float,
@@ -256,7 +257,7 @@ public:
     }
 
     PRInt32 GetIntValue() const {
-      NS_ASSERTION(mUnit == eUnit_Enumerated, "unit mismatch");
+      NS_ASSERTION(IsIntUnit(mUnit), "unit mismatch");
       return mValue.mInt;
     }
     nscoord GetCoordValue() const {
@@ -290,8 +291,8 @@ public:
                    "must be valueless unit");
     }
     Value(const Value& aOther) : mUnit(eUnit_Null) { *this = aOther; }
-    enum EnumeratedConstructorType { EnumeratedConstructor };
-    Value(PRInt32 aInt, EnumeratedConstructorType);
+    enum IntegerConstructorType { IntegerConstructor };
+    Value(PRInt32 aInt, Unit aUnit, IntegerConstructorType);
     enum CoordConstructorType { CoordConstructor };
     Value(nscoord aLength, CoordConstructorType);
     enum PercentConstructorType { PercentConstructor };
@@ -325,6 +326,9 @@ public:
   private:
     void FreeValue();
 
+    static PRBool IsIntUnit(Unit aUnit) {
+      return aUnit == eUnit_Enumerated || aUnit == eUnit_Integer;
+    }
     static PRBool IsCSSValuePairUnit(Unit aUnit) {
       return aUnit == eUnit_CSSValuePair;
     }

layout/style/test/test_transitions_per_property.html

@@ -114,6 +114,7 @@ var supported_properties = {
     "vertical-align": [ test_length_transition, test_percent_transition ],
     "width": [ test_length_transition, test_percent_transition ],
     "word-spacing": [ test_length_transition ],
+    "z-index": [ test_zindex_transition ],
 };
 
 var div = document.getElementById("display");
@@ -410,6 +411,26 @@ function test_radius_transition(prop) {
   div.style.removeProperty("padding");
 }
 
+function test_zindex_transition(prop) {
+  div.style.setProperty("-moz-transition-property", "none", "");
+  div.style.setProperty(prop, "4", "");
+  is(cs.getPropertyValue(prop), "4",
+     "integer-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("-moz-transition-property", prop, "");
+  div.style.setProperty(prop, "-5", "");
+  is(cs.getPropertyValue(prop), "-1",
+     "integer-valued property " + prop + ": interpolation of lengths");
+  div.style.setProperty(prop, "auto", "");
+  is(cs.getPropertyValue(prop), "auto",
+     "integer-valued property " + prop + ": auto not interpolable");
+  div.style.setProperty(prop, "-4", "");
+  is(cs.getPropertyValue(prop), "-4",
+     "integer-valued property " + prop + ": computed value before transition");
+  div.style.setProperty(prop, "8", "");
+  is(cs.getPropertyValue(prop), "2",
+     "integer-valued property " + prop + ": interpolation of lengths");
+}
+
 </script>
 </pre>
 </body>