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 id12647
push userdbaron@mozilla.com
push dateWed, 07 Apr 2010 02:03:41 +0000
treeherderautoland@2c04659a51ce [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs557580
milestone1.9.3a4pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
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",