--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -66,75 +66,84 @@ var supported_properties = {
"-moz-box-flex": [ test_float_zeroToOne_transition,
test_float_aboveOne_transition,
test_float_zeroToOne_clamped ],
"box-shadow": [ test_shadow_transition ],
"-moz-column-count": [ test_pos_integer_or_auto_transition,
test_integer_at_least_one_clamping ],
"-moz-column-gap": [ test_length_transition,
test_length_clamped ],
- "-moz-column-rule-color": [ test_color_transition,
+ "-moz-column-rule-color": [ test_general_color_transition,
+ test_currentcolor_transition,
test_border_color_transition ],
"-moz-column-rule-width": [ test_length_transition,
test_length_clamped ],
"-moz-column-width": [ test_length_transition,
test_length_clamped ],
"-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 ],
- "background-color": [ test_color_transition ],
+ "background-color": [ test_general_color_transition,
+ test_currentcolor_transition ],
"background-position": [ test_background_position_transition,
// FIXME: We don't currently test clamping,
// since background-position uses calc() as
// an intermediate form.
/* test_length_percent_pair_unclamped */ ],
"background-size": [ test_background_size_transition,
// FIXME: We don't currently test clamping,
// since background-size uses calc() as an
// intermediate form.
/* test_length_percent_pair_clamped */ ],
- "border-bottom-color": [ test_color_transition,
+ "border-bottom-color": [ test_general_color_transition,
+ test_currentcolor_transition,
test_border_color_transition ],
"border-bottom-width": [ test_length_transition,
test_length_clamped ],
- "border-left-color": [ test_color_transition,
+ "border-left-color": [ test_general_color_transition,
+ test_currentcolor_transition,
test_border_color_transition ],
"border-left-width": [ test_length_transition,
test_length_clamped ],
- "border-right-color": [ test_color_transition,
+ "border-right-color": [ test_general_color_transition,
+ test_currentcolor_transition,
test_border_color_transition ],
"border-right-width": [ test_length_transition,
test_length_clamped ],
"border-spacing": [ test_length_pair_transition,
test_length_pair_transition_clamped ],
- "border-top-color": [ test_color_transition,
+ "border-top-color": [ test_general_color_transition,
+ test_currentcolor_transition,
test_border_color_transition ],
"border-top-width": [ test_length_transition,
test_length_clamped ],
"bottom": [ test_length_transition, test_percent_transition,
test_length_percent_calc_transition,
test_length_unclamped, test_percent_unclamped ],
"clip": [ test_rect_transition ],
"clip-path": [ test_clip_path_transition ],
- "color": [ test_color_transition ],
- "fill": [ test_color_transition ],
+ "color": [ test_general_color_transition,
+ test_currentcolor_transition ],
+ "fill": [ test_general_color_transition,
+ test_currentcolor_transition ],
"fill-opacity" : [ test_float_zeroToOne_transition,
// opacity is clamped in computed style
// (not parsing/interpolation)
test_float_zeroToOne_clamped ],
"filter" : [ test_filter_transition ],
"flex-basis": [ test_length_transition, test_percent_transition,
test_length_clamped, test_percent_clamped ],
"flex-grow": [ test_float_zeroToOne_transition,
test_float_aboveOne_transition ],
"flex-shrink": [ test_float_zeroToOne_transition,
test_float_aboveOne_transition ],
- "flood-color": [ test_color_transition ],
+ "flood-color": [ test_general_color_transition,
+ test_currentcolor_transition ],
"flood-opacity" : [ test_float_zeroToOne_transition,
// opacity is clamped in computed style
// (not parsing/interpolation)
test_float_zeroToOne_clamped ],
"font-size": [ test_length_transition, test_percent_transition,
test_length_percent_calc_transition,
test_length_clamped, test_percent_clamped ],
"font-size-adjust": [ test_float_zeroToOne_transition,
@@ -147,17 +156,18 @@ var supported_properties = {
"grid-row-gap": [ test_grid_gap ],
"height": [ test_length_transition, test_percent_transition,
test_length_percent_calc_transition,
test_length_clamped, test_percent_clamped ],
"left": [ test_length_transition, test_percent_transition,
test_length_percent_calc_transition,
test_length_unclamped, test_percent_unclamped ],
"letter-spacing": [ test_length_transition, test_length_unclamped ],
- "lighting-color": [ test_color_transition ],
+ "lighting-color": [ test_general_color_transition,
+ test_currentcolor_transition ],
// NOTE: when calc() is supported on 'line-height', we should add
// test_length_percent_calc_transition.
"line-height": [ test_length_transition, test_percent_transition,
test_length_clamped, test_percent_clamped ],
"margin-bottom": [ test_length_transition, test_percent_transition,
test_length_percent_calc_transition,
test_length_unclamped, test_percent_unclamped ],
"margin-left": [ test_length_transition, test_percent_transition,
@@ -184,17 +194,18 @@ var supported_properties = {
test_length_percent_calc_transition,
test_length_clamped, test_percent_clamped ],
"object-position": [ test_background_position_transition ],
"opacity" : [ test_float_zeroToOne_transition,
// opacity is clamped in computed style
// (not parsing/interpolation)
test_float_zeroToOne_clamped ],
"order": [ test_integer_transition ],
- "outline-color": [ test_color_transition ],
+ "outline-color": [ test_general_color_transition,
+ test_currentcolor_transition ],
"outline-offset": [ test_length_transition, test_length_unclamped ],
"outline-width": [ test_length_transition, test_length_clamped ],
"padding-bottom": [ test_length_transition, test_percent_transition,
test_length_percent_calc_transition,
test_length_clamped, test_percent_clamped ],
"padding-left": [ test_length_transition, test_percent_transition,
test_length_percent_calc_transition,
test_length_clamped, test_percent_clamped ],
@@ -206,43 +217,46 @@ var supported_properties = {
test_length_clamped, test_percent_clamped ],
"perspective": [ test_length_transition ],
"perspective-origin": [ test_length_pair_transition,
test_length_percent_pair_transition,
test_length_percent_pair_unclamped ],
"right": [ test_length_transition, test_percent_transition,
test_length_percent_calc_transition,
test_length_unclamped, test_percent_unclamped ],
- "stop-color": [ test_color_transition ],
+ "stop-color": [ test_general_color_transition,
+ test_currentcolor_transition ],
"stop-opacity" : [ test_float_zeroToOne_transition,
// opacity is clamped in computed style
// (not parsing/interpolation)
test_float_zeroToOne_clamped ],
- "stroke": [ test_color_transition ],
+ "stroke": [ test_general_color_transition,
+ test_currentcolor_transition ],
"stroke-dasharray": [ test_dasharray_transition ],
// NOTE: when calc() is supported on 'stroke-dashoffset', we should
// add test_length_percent_calc_transition.
"stroke-dashoffset": [ test_length_transition_svg, test_percent_transition,
test_length_unclamped_svg, test_percent_unclamped ],
"stroke-miterlimit": [ test_float_aboveOne_transition,
test_float_aboveOne_clamped ],
"stroke-opacity" : [ test_float_zeroToOne_transition,
// opacity is clamped in computed style
// (not parsing/interpolation)
test_float_zeroToOne_clamped ],
// NOTE: when calc() is supported on 'stroke-width', we should add
// test_length_percent_calc_transition.
"stroke-width": [ test_length_transition_svg, test_percent_transition,
test_length_clamped_svg, test_percent_clamped ],
- "text-decoration": [ test_color_shorthand_transition,
+ "text-decoration": [ test_general_color_shorthand_transition,
+ test_currentcolor_shorthand_transition,
test_border_color_shorthand_transition ],
- "text-decoration-color": [ test_color_transition,
+ "text-decoration-color": [ test_general_color_transition,
+ test_currentcolor_transition,
test_border_color_transition ],
- "text-emphasis-color": [ test_color_transition,
- test_border_color_transition ],
+ "text-emphasis-color": [ test_general_color_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 ],
@@ -253,18 +267,17 @@ 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,
- test_border_color_transition ]
+ "-webkit-text-fill-color": [ test_general_color_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 */ ];
@@ -1220,46 +1233,31 @@ function test_length_percent_calc_transi
check_distance(prop, "50%", "calc(37.5% + 50px)", "200px");
check_distance(prop, "calc(25% + 100px)", "calc(37.5% + 75px)",
"75%");
check_distance(prop, "150px", "calc(125px + 12.5%)",
"calc(50% + 50px)");
}
-function test_color_transition(prop, get_color=(x => x), is_shorthand=false) {
+function test_general_color_transition(prop, get_color=(x => x), is_shorthand=false) {
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "rgb(255, 28, 0)", "");
is(get_color(cs.getPropertyValue(prop)), "rgb(255, 28, 0)",
"color-valued property " + prop + ": computed value before transition");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "rgb(75, 84, 128)", "");
is(get_color(cs.getPropertyValue(prop)), "rgb(210, 42, 32)",
"color-valued property " + prop + ": interpolation of colors");
- div.style.setProperty("transition-property", "none", "");
- div.style.setProperty(prop, "rgb(128, 64, 0)", "");
- (prop == "color" ? div.parentNode : 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.setProperty(prop, "currentColor", "");
- is(get_color(cs.getPropertyValue(prop)), "rgb(96, 48, 32)",
- "color-valued property " + prop + ": interpolation of currentColor");
-
if (!is_shorthand) {
check_distance(prop, "rgb(255, 28, 0)", "rgb(210, 42, 32)",
"rgb(75, 84, 128)");
- check_distance(prop, "rgb(128, 64, 0)", "rgb(96, 48, 32)",
- "currentColor");
}
- (prop == "color" ? div.parentNode : div).style.removeProperty("color");
-
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "rgb(0, 255, 0)", "");
var vals = cs.getPropertyValue(prop).match(/rgb\(([^, ]*), ([^, ]*), ([^, ]*)\)/);
is(vals.length, 4,
"color-valued property " + prop + ": flush before clamping test (length)");
is(vals[1], "0",
"color-valued property " + prop + ": flush before clamping test (red)");
@@ -1277,16 +1275,36 @@ function test_color_transition(prop, get
"color-valued property " + prop + ": clamping of negatives (red)");
is(vals[2], "255",
"color-valued property " + prop + ": clamping of above-range (green)");
is(vals[3], "0",
"color-valued property " + prop + ": clamping of negatives (blue)");
div.style.setProperty("transition-timing-function", "linear", "");
}
+function test_currentcolor_transition(prop, get_color=(x => x), is_shorthand=false) {
+ div.style.setProperty("transition-property", "none", "");
+ div.style.setProperty(prop, "rgb(128, 64, 0)", "");
+ (prop == "color" ? div.parentNode : 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.setProperty(prop, "currentColor", "");
+ is(get_color(cs.getPropertyValue(prop)), "rgb(96, 48, 32)",
+ "color-valued property " + prop + ": interpolation of currentColor");
+
+ 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_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);
@@ -1301,18 +1319,22 @@ function test_border_color_transition(pr
}
function get_color_from_shorthand_value(value) {
var m = value.match(/rgb\([^, ]*, [^, ]*, [^, ]*\)/);
isnot(m, null, "shorthand property value should contain color");
return m[0];
}
-function test_color_shorthand_transition(prop) {
- test_color_transition(prop, get_color_from_shorthand_value, true);
+function test_general_color_shorthand_transition(prop) {
+ test_general_color_transition(prop, get_color_from_shorthand_value, true);
+}
+
+function test_currentcolor_shorthand_transition(prop) {
+ test_currentcolor_transition(prop, get_color_from_shorthand_value, true);
}
function test_border_color_shorthand_transition(prop) {
test_border_color_transition(prop, get_color_from_shorthand_value, true);
}
function test_clip_path_equals(computedValStr, expectedList)
{