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

2 files changed, 27 insertions, 0 deletions

diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
index bc4383630..a7014c043 100644
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -2837,6 +2837,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,
diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html
index 29e2ae24c..f188f4f6f 100644
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -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");