Bug 1299741 part 12 - Add test for new currentcolor interpolation. r=birtles draft
authorXidorn Quan <me@upsuper.org>
Fri, 02 Sep 2016 17:13:28 +1000
changeset 415371 01224dc8a6d9ec613197bce78f6c0a43603242dc
parent 415370 293aa61adaa091bb3d4350a4b86ec9cfbb40eb02
child 531600 40679e3254c7c289648e91dedcc405fa22e664d5
push id29862
push userxquan@mozilla.com
push dateTue, 20 Sep 2016 08:44:59 +0000
reviewersbirtles
bugs1299741
milestone52.0a1
Bug 1299741 part 12 - Add test for new currentcolor interpolation. r=birtles MozReview-Commit-ID: 4696qH6yoUc
layout/style/test/test_transitions_per_property.html
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -260,17 +260,18 @@ var supported_properties = {
     "stroke-width": [ test_length_transition_svg, test_percent_transition,
                       test_length_clamped_svg, test_percent_clamped ],
     "text-decoration": [ test_color_shorthand_transition,
                          test_currentcolor_shorthand_transition,
                          test_border_color_shorthand_transition ],
     "text-decoration-color": [ test_color_transition,
                                test_currentcolor_transition,
                                test_border_color_transition ],
-    "text-emphasis-color": [ test_color_transition ],
+    "text-emphasis-color": [ test_color_transition,
+                             test_true_currentcolor_transition ],
     "text-indent": [ test_length_transition, test_percent_transition,
                      test_length_percent_calc_transition,
                      test_length_unclamped, test_percent_unclamped ],
     "text-shadow": [ test_shadow_transition ],
     "top": [ test_length_transition, test_percent_transition,
              test_length_percent_calc_transition,
              test_length_unclamped, test_percent_unclamped ],
     "transform": [ test_transform_transition ],
@@ -281,18 +282,20 @@ var supported_properties = {
                         test_length_percent_calc_transition,
                         test_length_unclamped, test_percent_unclamped ],
     "visibility": [ test_visibility_transition ],
     "width": [ test_length_transition, test_percent_transition,
                test_length_percent_calc_transition,
                test_length_clamped, test_percent_clamped ],
     "word-spacing": [ test_length_transition, test_length_unclamped ],
     "z-index": [ test_integer_transition, test_pos_integer_or_auto_transition ],
-    "-webkit-text-fill-color": [ test_color_transition ],
-    "-webkit-text-stroke-color": [ test_color_transition ]
+    "-webkit-text-fill-color": [ test_color_transition,
+                                 test_true_currentcolor_transition ],
+    "-webkit-text-stroke-color": [ test_color_transition,
+                                   test_true_currentcolor_transition ]
 };
 
 if (SupportsMaskShorthand()) {
   supported_properties["mask-position"] = [ test_background_position_transition,
                                      // FIXME: We don't currently test clamping,
                                      // since mask-position uses calc() as
                                      // an intermediate form.
                                      /* test_length_percent_pair_unclamped */ ];
@@ -1324,16 +1327,57 @@ function test_currentcolor_transition(pr
   if (!is_shorthand) {
     check_distance(prop, "rgb(128, 64, 0)", "rgb(96, 48, 32)",
                          "currentColor");
   }
 
   (prop == "color" ? div.parentNode : div).style.removeProperty("color");
 }
 
+function test_true_currentcolor_transition(prop, get_color=(x => x), is_shorthand=false) {
+  const msg_prefix = `color-valued property ${prop}: `;
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty("color", "rgb(128, 0, 0)", "");
+  div.style.setProperty(prop, "rgb(0, 0, 128)", "");
+  is(get_color(cs.getPropertyValue(prop)), "rgb(0, 0, 128)",
+     msg_prefix + "computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "currentcolor", "");
+  is(get_color(cs.getPropertyValue(prop)), "rgb(32, 0, 96)",
+     msg_prefix + "interpolation of rgb color and currentcolor");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty("color", "rgb(128, 0, 0)", "");
+  div.style.setProperty(prop, "rgb(0, 0, 128)", "");
+  is(get_color(cs.getPropertyValue(prop)), "rgb(0, 0, 128)",
+     msg_prefix + "computed value before transition");
+  div.style.setProperty("transition-property", `color, ${prop}`, "");
+  div.style.setProperty("color", "rgb(0, 128, 0)", "");
+  div.style.setProperty(prop, "currentcolor", "");
+  is(cs.getPropertyValue("color"), "rgb(96, 32, 0)",
+     "interpolation of rgb color property");
+  is(get_color(cs.getPropertyValue(prop)), "rgb(24, 8, 96)",
+     msg_prefix + "interpolation of rgb color and interpolated currentcolor");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty("color", "rgba(128, 0, 0, 0.1)", "");
+  div.style.setProperty(prop, "rgba(0, 0, 128, 0.9)", "");
+  is(get_color(cs.getPropertyValue(prop)), "rgba(0, 0, 128, 0.9)",
+     msg_prefix + "computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "currentcolor", "");
+  is(get_color(cs.getPropertyValue(prop)), "rgba(5, 0, 123, 0.7)",
+     msg_prefix + "interpolation of rgba color and currentcolor");
+
+  // It is not possible to check distance, because there is a hidden
+  // dimension for ratio of currentcolor.
+
+  div.style.removeProperty("color");
+}
+
 function test_border_color_transition(prop, get_color=(x => x), is_shorthand=false) {
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "rgb(128, 64, 0)", "");
   div.style.setProperty("color", "rgb(0, 0, 128)", "");
   is(get_color(cs.getPropertyValue(prop)), "rgb(128, 64, 0)",
      "color-valued property " + prop + ": computed value before transition");
   div.style.setProperty("transition-property", prop, "");
   div.style.removeProperty(prop);