Make nsStyleAnimation extract -moz-column-rule-color correctly. (Bug 557580) r=dholbert
authorL. David Baron <dbaron@dbaron.org>
Tue, 06 Apr 2010 19:03:12 -0700
changeset 40524 7ab21bd712e31decb1ffbfd4f209f2cdc042a4c1
parent 40523 b931ea32034b6ab61214cb3aaec814da8aff159d
child 40525 2c04659a51ce9e8fb93cf52dd7eca1fa373d2530
push idunknown
push userunknown
push dateunknown
reviewersdholbert
bugs557580
milestone1.9.3a4pre
Make nsStyleAnimation extract -moz-column-rule-color correctly. (Bug 557580) r=dholbert
layout/style/nsCSSPropList.h
layout/style/nsStyleAnimation.cpp
layout/style/test/test_transitions_events.html
layout/style/test/test_transitions_per_property.html
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -1252,18 +1252,18 @@ CSS_PROP_COLUMN(
     -moz-column-rule-color,
     _moz_column_rule_color,
     MozColumnRuleColor,
     CSS_PROPERTY_IGNORED_WHEN_COLORS_DISABLED,
     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,
     MozColumnRuleStyle,
     0,
     Column,
     mColumnRuleStyle,
     eCSSType_Value,
--- a/layout/style/nsStyleAnimation.cpp
+++ b/layout/style/nsStyleAnimation.cpp
@@ -1367,16 +1367,29 @@ nsStyleAnimation::ExtractComputedValue(n
         #else
           if (!styleOutline->GetOutlineColor(color))
             color = aStyleContext->GetStyleColor()->mColor;
         #endif
           aComputedValue.SetColorValue(color);
           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);
           if (styleColumn->mColumnCount == NS_STYLE_COLUMN_COUNT_AUTO) {
             aComputedValue.SetAutoValue();
           } else {
             aComputedValue.SetIntValue(styleColumn->mColumnCount,
                                        eUnit_Integer);
--- a/layout/style/test/test_transitions_events.html
+++ b/layout/style/test/test_transitions_events.html
@@ -15,16 +15,17 @@ https://bugzilla.mozilla.org/show_bug.cg
 
 #one { -moz-transition-duration: 500ms; -moz-transition-property: all; }
 #two { -moz-transition: margin-left 1s; }
 #three { -moz-transition: margin 0.5s 0.25s; }
 
 #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 {
   /* give the reversing transition a long duration; the reversing will
      still be quick */
   -moz-transition-duration: 30s;
   -moz-transition-timing-function: cubic-bezier(0, 1, 1, 0);
 }
@@ -56,16 +57,17 @@ function $(id) { return document.getElem
 function cs(id) { return getComputedStyle($(id), ""); }
 
 var got_one_root = false;
 var got_one_target = false;
 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;
 var got_three_bottom = false;
 var got_three_left = false;
 var got_four_root = false;
 var got_body = false;
 
@@ -110,49 +112,59 @@ document.documentElement.addEventListene
          " propertyName='" + event.propertyName + "'");
     }
   }, false);
 
 $("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");
     }
     is(event.elapsedTime, 0.5,
        "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);
 
 started_test();
 started_test();
 started_test();
 started_test();
 started_test();
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -52,36 +52,41 @@ var supported_properties = {
     "-moz-border-radius-bottomright": [ test_radius_transition ],
     "-moz-border-radius-topleft": [ test_radius_transition ],
     "-moz-border-radius-topright": [ test_radius_transition ],
     "-moz-box-flex": [ test_float_zeroToOne_transition,
                        test_float_aboveOne_transition ],
     "-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 ],
     "-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 ],
     "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 ],
     "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 ],
@@ -294,16 +299,41 @@ function test_color_transition(prop) {
   div.style.setProperty("-moz-transition-property", "none", "");
   div.style.setProperty(prop, "rgb(255, 28, 0)", "");
   is(cs.getPropertyValue(prop), "rgb(255, 28, 0)",
      "color-valued property " + prop + ": computed value before transition");
   div.style.setProperty("-moz-transition-property", 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) {
   var spreadStr = (prop == "-moz-box-shadow") ? " 0px" : "";
 
   div.style.setProperty("-moz-transition-property", "none", "");
   div.style.setProperty(prop, "none", "");
   is(cs.getPropertyValue(prop), "none",