Issue #1668 - Part 1: Implement support for caret-color property.

This CSS property allows input carets (that blinking input cursor you see in text fields), to be given a custom color. This was implemented in Firefox 53, and it was such a minor feature that no one ever missed it, but I don't see any harm in implementing this.

https://bugzilla.mozilla.org/show_bug.cgi?id=1063162
This commit is contained in:
athenian200 2020-09-29 11:31:46 -05:00 • committed by roytam1
commit 33e50615d9
13 changed files with 118 additions and 11 deletions

View file

@ -2836,6 +2836,18 @@ var gCSSProperties = {
other_values: [ "bottom", "left", "right", "top-outside", "bottom-outside" ],
invalid_values: []
},
"caret-color": {
domProp: "caretColor",
inherited: true,
type: CSS_TYPE_LONGHAND,
prerequisites: { "color": "black" },
// Though "auto" is an independent computed-value time keyword value,
// it is not distinguishable from currentcolor because getComputedStyle
// always returns used value for <color>.
initial_values: [ "auto", "currentcolor", "black", "rgb(0,0,0)" ],
other_values: [ "green", "transparent", "rgba(128,128,128,.5)", "#123" ],
invalid_values: [ "#0", "#00", "#00000", "cc00ff" ]
},
"clear": {
domProp: "clear",
inherited: false,

View file

@ -1373,6 +1373,21 @@ function test_true_currentcolor_transition(prop, get_color=(x => x), is_shorthan
div.style.removeProperty("color");
}
function test_auto_color_transition(prop, get_color=(x => x), is_shorthand=false) {
const msg_prefix = `color-valued property ${prop}: `;
const test_color = "rgb(51, 102, 153)";
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "auto", "");
let used_value_of_auto = get_color(cs.getPropertyValue(prop));
isnot(used_value_of_auto, test_color,
msg_prefix + "ensure used auto value is different than our test color");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, test_color, "");
is(get_color(cs.getPropertyValue(prop)), test_color,
msg_prefix + "not interpolatable between auto and rgb color");
}
function get_color_from_shorthand_value(value) {
var m = value.match(/rgba?\([^, ]*, [^, ]*, [^, ]*(?:, [^, ]*)?\)/);
isnot(m, null, "shorthand property value should contain color");