Make nsStyleAnimation extract -moz-column-rule-color correctly. (Bug 557580) r=dholbert

layout/style/nsCSSPropList.h

@@ -1257,8 +1257,8 @@ CSS_PROP_COLUMN(
     mColumnRuleColor,
     eCSSType_Value,
     nsnull,
-    offsetof(nsStyleColumn, mColumnRuleColor),
-    eStyleAnimType_Color)
+    CSS_PROP_NO_OFFSET,
+    eStyleAnimType_Custom)
 CSS_PROP_COLUMN(
     -moz-column-rule-style,
     _moz_column_rule_style,

layout/style/nsStyleAnimation.cpp

@@ -1372,6 +1372,19 @@ nsStyleAnimation::ExtractComputedValue(nsCSSProperty aProperty,
           break;
         }
 
+        case eCSSProperty__moz_column_rule_color: {
+          const nsStyleColumn *styleColumn =
+            static_cast<const nsStyleColumn*>(styleStruct);
+          nscolor color;
+          if (styleColumn->mColumnRuleColorIsForeground) {
+            color = aStyleContext->GetStyleColor()->mColor;
+          } else {
+            color = styleColumn->mColumnRuleColor;
+          }
+          aComputedValue.SetColorValue(color);
+          break;
+        }
+
         case eCSSProperty__moz_column_count: {
           const nsStyleColumn *styleColumn =
             static_cast<const nsStyleColumn*>(styleStruct);

layout/style/test/test_transitions_events.html

@@ -20,6 +20,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=531585
 #four, #five, #six {
   -moz-transition: 500ms color;
   border-color: black; /* don't derive from color */
+  -moz-column-rule-color: black; /* don't derive from color */
 }
 
 #four {
@@ -61,6 +62,7 @@ var got_one_target_bordertop = false;
 var got_one_target_borderright = false;
 var got_one_target_borderbottom = false;
 var got_one_target_borderleft = false;
+var got_one_target_columnrule = false;
 var got_two_target = false;
 var got_three_top = false;
 var got_three_right = false;
@@ -115,30 +117,41 @@ $("one").addEventListener("transitionend",
   function(event) {
     switch (event.propertyName) {
       case "color":
-        ok(!got_one_target, "transitionend on one on target");
+        ok(!got_one_target,
+           "transitionend on one on target (color)");
         got_one_target = true;
         event.stopPropagation();
         break;
       case "border-top-color":
-        ok(!got_one_target_bordertop, "transitionend on one on target");
+        ok(!got_one_target_bordertop,
+           "transitionend on one on target (border-top-color)");
         got_one_target_bordertop = true;
         event.stopPropagation();
         break;
       case "border-right-color":
-        ok(!got_one_target_borderright, "transitionend on one on target");
+        ok(!got_one_target_borderright,
+           "transitionend on one on target (border-right-color)");
         got_one_target_borderright = true;
         // Let this event through to body
         break;
       case "border-bottom-color":
-        ok(!got_one_target_borderbottom, "transitionend on one on target");
+        ok(!got_one_target_borderbottom,
+           "transitionend on one on target (border-bottom-color)");
         got_one_target_borderbottom = true;
         event.stopPropagation();
         break;
       case "border-left-color":
-        ok(!got_one_target_borderleft, "transitionend on one on target");
+        ok(!got_one_target_borderleft,
+           "transitionend on one on target (border-left-color)");
         got_one_target_borderleft = true;
         event.stopPropagation();
         break;
+      case "-moz-column-rule-color":
+        ok(!got_one_target_columnrule,
+           "transitionend on one on target (-moz-column-rule-color)");
+        got_one_target_columnrule = true;
+        event.stopPropagation();
+        break;
       default:
         ok(false, "unexpected property name " + event.propertyName +
                   " for transitionend on one on target");
@@ -147,7 +160,6 @@ $("one").addEventListener("transitionend",
        "elapsedTime for transitionend on one");
     is(cs("one").getPropertyValue(event.propertyName), "rgb(0, 255, 0)",
        "computed style of " + event.propertyName + " for transitionend on one");
-    got_one_target = true;
     finished_test();
   }, false);
 

layout/style/test/test_transitions_per_property.html

@@ -57,7 +57,8 @@ var supported_properties = {
     "-moz-box-shadow": [ test_shadow_transition ],
     "-moz-column-count": [ test_pos_integer_or_auto_transition ],
     "-moz-column-gap": [ test_length_transition ],
-    "-moz-column-rule-color": [ test_color_transition ],
+    "-moz-column-rule-color": [ test_color_transition,
+                                test_border_color_transition ],
     "-moz-column-rule-width": [ test_length_transition ],
     "-moz-column-width": [ test_length_transition ],
     "-moz-image-region": [ test_rect_transition ],
@@ -69,14 +70,18 @@ var supported_properties = {
                                test_length_percent_pair_transition ],
     "background-color": [ test_color_transition ],
     "background-position": [ test_background_position_transition ],
-    "border-bottom-color": [ test_color_transition ],
+    "border-bottom-color": [ test_color_transition,
+                             test_border_color_transition ],
     "border-bottom-width": [ test_length_transition ],
-    "border-left-color": [ test_color_transition ],
+    "border-left-color": [ test_color_transition,
+                           test_border_color_transition ],
     "border-left-width": [ test_length_transition ],
-    "border-right-color": [ test_color_transition ],
+    "border-right-color": [ test_color_transition,
+                            test_border_color_transition ],
     "border-right-width": [ test_length_transition ],
     "border-spacing": [ test_length_pair_transition ],
-    "border-top-color": [ test_color_transition ],
+    "border-top-color": [ test_color_transition,
+                          test_border_color_transition ],
     "border-top-width": [ test_length_transition ],
     "bottom": [ test_length_transition, test_percent_transition ],
     "clip": [ test_rect_transition ],
@@ -299,6 +304,31 @@ function test_color_transition(prop) {
   div.style.setProperty(prop, "rgb(77, 84, 128)", "");
   is(cs.getPropertyValue(prop), "rgb(166, 56, 64)",
      "color-valued property " + prop + ": interpolation of colors");
+
+  div.style.setProperty("-moz-transition-property", "none", "");
+  div.style.setProperty(prop, "rgb(128, 64, 0)", "");
+  (prop == "color" ? div.parentNode : div).style.
+    setProperty("color", "rgb(0, 0, 128)", "");
+  is(cs.getPropertyValue(prop), "rgb(128, 64, 0)",
+     "color-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("-moz-transition-property", prop, "");
+  div.style.setProperty(prop, "currentColor", "");
+  is(cs.getPropertyValue(prop), "rgb(64, 32, 64)",
+     "color-valued property " + prop + ": interpolation of currentColor");
+  (prop == "color" ? div.parentNode : div).style.removeProperty("color");
+}
+
+function test_border_color_transition(prop) {
+  div.style.setProperty("-moz-transition-property", "none", "");
+  div.style.setProperty(prop, "rgb(128, 64, 0)", "");
+  div.style.setProperty("color", "rgb(0, 0, 128)", "");
+  is(cs.getPropertyValue(prop), "rgb(128, 64, 0)",
+     "color-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("-moz-transition-property", prop, "");
+  div.style.removeProperty(prop);
+  is(cs.getPropertyValue(prop), "rgb(64, 32, 64)",
+     "color-valued property " + prop + ": interpolation of initial value");
+  div.style.removeProperty("color");
 }
 
 function test_shadow_transition(prop) {