--- 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);