Bug 1965029 - Accept CSS color syntax in input type=color r=emilio

The alpha and colorspace part of the https://html.spec.whatwg.org/#serialize-a-color-well-control-color is largely skipped in this patch, as we don't support them yet in `<input type=color>`, and thus the value is always in the "HTML compatible" form.

Changing the existing WPT color.tentative.html to color.html to specifically cover implementations without `alpha` and `colorspace` support, because otherwise reading the test result of `color.window.js` is overly confusing. (Ideally the two tests should share the same test data, but for now I'm skipping that as I'm not confident yet to fill the display-p3 fields. That can be done when we actually implement `colorspace` support.)

Introducing Servo_ComputeColorWellControlColor so that the colorspace conversion can happen before losing number precision, following the spec.

Differential Revision: https://phabricator.services.mozilla.com/D258654

Author: saschanaz

dom/canvas/CanvasRenderingContext2D.cpp

@@ -1309,9 +1309,10 @@ CanvasRenderingContext2D::ParseColorSlow(const nsACString& aString) {
 
   PresShell* presShell = GetPresShell();
   ServoStyleSet* set = presShell ? presShell->StyleSet() : nullptr;
+  const StylePerDocumentStyleData* data = set ? set->RawData() : nullptr;
   bool wasCurrentColor = false;
   nscolor color;
-  if (ServoCSSParser::ComputeColor(set, NS_RGB(0, 0, 0), aString, &color,
+  if (ServoCSSParser::ComputeColor(data, NS_RGB(0, 0, 0), aString, &color,
                                    &wasCurrentColor, loader)) {
     result.mWasCurrentColor = wasCurrentColor;
     result.mColor.emplace(color);

dom/html/HTMLInputElement.cpp

@@ -15,6 +15,7 @@
 #include "mozilla/dom/BlobImpl.h"
 #include "mozilla/dom/CustomEvent.h"
 #include "mozilla/dom/Directory.h"
+#include "mozilla/dom/DocumentInlines.h"
 #include "mozilla/dom/DocumentOrShadowRoot.h"
 #include "mozilla/dom/ElementBinding.h"
 #include "mozilla/dom/FileSystemUtils.h"
@@ -33,6 +34,7 @@
 #include "mozilla/Maybe.h"
 #include "mozilla/MouseEvents.h"
 #include "mozilla/PresShell.h"
+#include "mozilla/ServoCSSParser.h"
 #include "mozilla/StaticPrefs_dom.h"
 #include "mozilla/StaticPrefs_signon.h"
 #include "mozilla/TextUtils.h"
@@ -724,6 +726,41 @@ static bool IsPickerBlocked(Document* aDoc) {
   return true;
 }
 
+/**
+ * Parse a CSS color string and convert it to the target colorspace if it
+ * succeeds.
+ * https://html.spec.whatwg.org/#update-a-color-well-control-color
+ *
+ * @param aValue the string to be parsed
+ * @return the parsed result as a HTML compatible form
+ */
+static Maybe<StyleAbsoluteColor> MaybeComputeColor(Document* aDocument,
+                                                   const nsAString& aValue) {
+  // A few steps are ignored given we don't support alpha and colorspace. See
+  // bug 1919718.
+  return ServoCSSParser::ComputeColorWellControlColor(
+      aDocument->EnsureStyleSet().RawData(), NS_ConvertUTF16toUTF8(aValue),
+      StyleColorSpace::Srgb);
+}
+
+/**
+ * https://html.spec.whatwg.org/#serialize-a-color-well-control-color
+ * https://drafts.csswg.org/css-color/#color-serialization-html-compatible-serialization-is-requested
+ *
+ * @param aColor The parsed color
+ * @param aResult The result in the form of #ffffff.
+ */
+static void SerializeColorForHTMLCompatibility(const StyleAbsoluteColor& aColor,
+                                               nsAString& aResult) {
+  // Raw StyleAbsoluteColor can have floats outside of 0-1 range e.g. when
+  // display-p3 color is converted to srgb, and ToColor guarantees to fit the
+  // values within the range.
+  nscolor color = aColor.ToColor();
+  aResult.Truncate();
+  aResult.AppendPrintf("#%02x%02x%02x", NS_GET_R(color), NS_GET_G(color),
+                       NS_GET_B(color));
+}
+
 nsTArray<nsString> HTMLInputElement::GetColorsFromList() {
   RefPtr<HTMLDataListElement> dataList = GetList();
   if (!dataList) {
@@ -740,10 +777,15 @@ nsTArray<nsString> HTMLInputElement::GetColorsFromList() {
       continue;
     }
 
-    nsString value;
+    nsAutoString value;
     option->GetValue(value);
-    if (IsValidSimpleColor(value)) {
-      ToLowerCase(value);
+    // https://html.spec.whatwg.org/#update-a-color-well-control-color
+    // https://html.spec.whatwg.org/#serialize-a-color-well-control-color
+    if (Maybe<StyleAbsoluteColor> result =
+            MaybeComputeColor(OwnerDoc(), value)) {
+      // Serialization step 6: If htmlCompatible is true, then do so with
+      // HTML-compatible serialization requested.
+      SerializeColorForHTMLCompatibility(*result, value);
       colors.AppendElement(value);
     }
   }
@@ -4981,13 +5023,15 @@ void HTMLInputElement::SanitizeValue(nsAString& aValue,
       }
     } break;
     case FormControlType::InputColor: {
-      if (IsValidSimpleColor(aValue)) {
-        ToLowerCase(aValue);
-      } else {
-        // Set default (black) color, if aValue wasn't parsed correctly.
-        aValue.AssignLiteral("#000000");
-      }
-    } break;
+      // https://html.spec.whatwg.org/#update-a-color-well-control-color
+      // https://html.spec.whatwg.org/#serialize-a-color-well-control-color
+      StyleAbsoluteColor color = MaybeComputeColor(OwnerDoc(), aValue)
+                                     .valueOr(StyleAbsoluteColor::BLACK);
+      // Serialization step 6: If htmlCompatible is true, then do so with
+      // HTML-compatible serialization requested.
+      SerializeColorForHTMLCompatibility(color, aValue);
+      break;
+    }
     default:
       break;
   }
@@ -5009,20 +5053,6 @@ Maybe<nscolor> HTMLInputElement::ParseSimpleColor(const nsAString& aColor) {
   return Some(color);
 }
 
-bool HTMLInputElement::IsValidSimpleColor(const nsAString& aValue) const {
-  if (aValue.Length() != 7 || aValue.First() != '#') {
-    return false;
-  }
-
-  for (int i = 1; i < 7; ++i) {
-    if (!IsAsciiDigit(aValue[i]) && !(aValue[i] >= 'a' && aValue[i] <= 'f') &&
-        !(aValue[i] >= 'A' && aValue[i] <= 'F')) {
-      return false;
-    }
-  }
-  return true;
-}
-
 bool HTMLInputElement::IsLeapYear(uint32_t aYear) const {
   if ((aYear % 4 == 0 && aYear % 100 != 0) || (aYear % 400 == 0)) {
     return true;

dom/html/HTMLInputElement.h

@@ -1127,14 +1127,6 @@ class HTMLInputElement final : public TextControlElement,
    */
   RadioGroupContainer* FindTreeRadioGroupContainer() const;
 
-  /**
-   * Parse a color string of the form #XXXXXX where X should be hexa characters
-   * @param the string to be parsed.
-   * @return whether the string is a valid simple color.
-   * Note : this function does not consider the empty string as valid.
-   */
-  bool IsValidSimpleColor(const nsAString& aValue) const;
-
   /**
    * Parse a week string of the form yyyy-Www
    * @param the string to be parsed.

dom/html/test/forms/test_input_color_picker_datalist.html

@@ -14,9 +14,10 @@
   MockColorPicker.init(window);
 
   MockColorPicker.showCallback = (picker) => {
-    is(picker.defaultColors.length, 2);
+    is(picker.defaultColors.length, 3);
     is(picker.defaultColors[0], "#112233");
-    is(picker.defaultColors[1], "#00ffaa");
+    is(picker.defaultColors[1], "#000000");
+    is(picker.defaultColors[2], "#00ffaa");
 
     MockColorPicker.cleanup();
     SimpleTest.finish();
@@ -33,7 +34,7 @@
 <input type="color" list="color-list">
 <datalist id="color-list">
   <option value="#112233"></option>
-  <option value="black"></option> <!-- invalid -->
+  <option value="black"></option>
   <option value="#000000" disabled></option>
   <option value="#00FFAA"></option>
   <option></option>

dom/html/test/forms/test_input_sanitization.html

@@ -29,7 +29,7 @@
  * other actions here so that this test only tests the value sanitization
  * algorithm for the various input types.
  *
- * XXXjwatt splitting out testing of the value sanitization algorithm and 
+ * XXXjwatt splitting out testing of the value sanitization algorithm and
  * "other things" that affect .value makes it harder to know what we're testing
  * and what we've missed, because what's included in the value sanitization
  * algorithm and what's not is different from input type to input type. It
@@ -280,6 +280,10 @@
     case "datetime-local":
       return sanitizeDateTimeLocal(aValue);
     case "color":
+      switch (aValue) {
+        case "red": return "#ff0000";
+        case "#0f0": return "#00ff00";
+      }
       return /^#[0-9A-Fa-f]{6}$/.exec(aValue) ? aValue.toLowerCase() : "#000000";
     default:
       return aValue;

layout/inspector/InspectorUtils.cpp

@@ -749,7 +749,7 @@ void InspectorUtils::RgbToColorName(GlobalObject&, uint8_t aR, uint8_t aG,
 void InspectorUtils::ColorToRGBA(GlobalObject& aGlobal,
                                  const nsACString& aColorString,
                                  Nullable<InspectorRGBATuple>& aResult) {
-  auto* styleSet = [&]() -> ServoStyleSet* {
+  const auto* styleData = [&]() -> const StylePerDocumentStyleData* {
     nsCOMPtr<nsIGlobalObject> global =
         do_QueryInterface(aGlobal.GetAsSupports());
     if (!global) {
@@ -767,11 +767,11 @@ void InspectorUtils::ColorToRGBA(GlobalObject& aGlobal,
     if (!ps) {
       return nullptr;
     }
-    return ps->StyleSet();
+    return ps->StyleSet()->RawData();
   }();
 
   nscolor color = NS_RGB(0, 0, 0);
-  if (!ServoCSSParser::ComputeColor(styleSet, NS_RGB(0, 0, 0), aColorString,
+  if (!ServoCSSParser::ComputeColor(styleData, NS_RGB(0, 0, 0), aColorString,
                                     &color)) {
     aResult.SetNull();
     return;

layout/style/ServoCSSParser.cpp

@@ -22,16 +22,27 @@ bool ServoCSSParser::IsValidCSSColor(const nsACString& aValue) {
 }
 
 /* static */
-bool ServoCSSParser::ComputeColor(ServoStyleSet* aStyleSet,
+bool ServoCSSParser::ComputeColor(const StylePerDocumentStyleData* aStyleData,
                                   nscolor aCurrentColor,
                                   const nsACString& aValue,
                                   nscolor* aResultColor, bool* aWasCurrentColor,
                                   css::Loader* aLoader) {
-  return Servo_ComputeColor(aStyleSet ? aStyleSet->RawData() : nullptr,
-                            aCurrentColor, &aValue, aResultColor,
+  return Servo_ComputeColor(aStyleData, aCurrentColor, &aValue, aResultColor,
                             aWasCurrentColor, aLoader);
 }
 
+/* static */
+Maybe<StyleAbsoluteColor> ServoCSSParser::ComputeColorWellControlColor(
+    const StylePerDocumentStyleData* aStyleData, const nsACString& aValue,
+    StyleColorSpace aToColorSpace) {
+  StyleAbsoluteColor color{};
+  if (Servo_ComputeColorWellControlColor(aStyleData, &aValue, aToColorSpace,
+                                         &color)) {
+    return Some(color);
+  }
+  return Nothing();
+}
+
 /* static */
 bool ServoCSSParser::ColorTo(const nsACString& aFromColor,
                              const nsACString& aToColorSpace,

layout/style/ServoCSSParser.h

@@ -25,13 +25,16 @@ namespace mozilla {
 struct AnimatedPropertyID;
 class ServoStyleSet;
 struct URLExtraData;
+struct StyleAbsoluteColor;
 struct StyleFontFamilyList;
 struct StyleFontStretch;
 struct StyleFontWeight;
 struct StyleFontStyle;
 struct StyleLockedDeclarationBlock;
 struct StyleParsingMode;
+struct StylePerDocumentStyleData;
 union StyleComputedFontStyleDescriptor;
+enum class StyleColorSpace : uint8_t;
 
 template <typename Integer, typename Number, typename LinearStops>
 struct StyleTimingFunction;
@@ -62,8 +65,8 @@ class ServoCSSParser {
   /**
    * Computes an nscolor from the given CSS <color> value.
    *
-   * @param aStyleSet The style set whose nsPresContext will be used to
-   *   compute system colors and other special color values.
+   * @param aStyleData The style data to compute system colors and other special
+   *   color values.
    * @param aCurrentColor The color value that currentcolor should compute to.
    * @param aValue The CSS <color> value.
    * @param aResultColor The resulting computed color value.
@@ -74,11 +77,28 @@ class ServoCSSParser {
    *   won't be reported to the console.
    * @return Whether aValue was successfully parsed and aResultColor was set.
    */
-  static bool ComputeColor(ServoStyleSet* aStyleSet, nscolor aCurrentColor,
-                           const nsACString& aValue, nscolor* aResultColor,
+  static bool ComputeColor(const StylePerDocumentStyleData* aStyleData,
+                           nscolor aCurrentColor, const nsACString& aValue,
+                           nscolor* aResultColor,
                            bool* aWasCurrentColor = nullptr,
                            css::Loader* aLoader = nullptr);
 
+  /**
+   * Computes a StyleAbsoluteColor from the given CSS <color> value, following
+   * the HTML spec:
+   * https://html.spec.whatwg.org/#update-a-color-well-control-color
+   *
+   * @param aStyleData The style data to compute system colors and other special
+   *   color values.
+   * @param aValue The CSS <color> value.
+   * @param aToColorSpace The color space to convert the color into.
+   * @return The resulting computed color value. For invalid color value,
+   *   Nothing() will be returned.
+   */
+  static Maybe<StyleAbsoluteColor> ComputeColorWellControlColor(
+      const StylePerDocumentStyleData* aStyleData, const nsACString& aValue,
+      StyleColorSpace aToColorSpace);
+
   /**
   * Takes a CSS <color> and convert it to another color space.
   *

servo/ports/geckolib/glue.rs

@@ -8371,15 +8371,17 @@ pub unsafe extern "C" fn Servo_IsValidCSSColor(value: &nsACString) -> bool {
     specified::Color::is_valid(&context, &mut input)
 }
 
-#[no_mangle]
-pub unsafe extern "C" fn Servo_ComputeColor(
+struct ComputeColorResult {
+    result_color: AbsoluteColor,
+    was_current_color: bool,
+}
+
+unsafe fn compute_color(
     raw_data: Option<&PerDocumentStyleData>,
-    current_color: structs::nscolor,
+    current_color: &AbsoluteColor,
     value: &nsACString,
-    result_color: &mut structs::nscolor,
-    was_current_color: *mut bool,
     loader: *mut Loader,
-) -> bool {
+) -> Option<ComputeColorResult> {
     let mut input = ParserInput::new(value.as_str_unchecked());
     let mut input = Parser::new(&mut input);
     let reporter = loader.as_mut().and_then(|loader| {
@@ -8407,21 +8409,55 @@ pub unsafe extern "C" fn Servo_ComputeColor(
         None => None,
     };
 
-    let computed = match specified::Color::parse_and_compute(&context, &mut input, device) {
-        Some(c) => c,
-        None => return false,
-    };
+    let computed = specified::Color::parse_and_compute(&context, &mut input, device)?;
 
+    let result_color = computed.resolve_to_absolute(current_color);
+    let was_current_color = computed.is_currentcolor();
+
+    Some(ComputeColorResult {
+        result_color,
+        was_current_color,
+    })
+}
+
+#[no_mangle]
+pub unsafe extern "C" fn Servo_ComputeColor(
+    raw_data: Option<&PerDocumentStyleData>,
+    current_color: structs::nscolor,
+    value: &nsACString,
+    result_color: &mut structs::nscolor,
+    was_current_color: *mut bool,
+    loader: *mut Loader,
+) -> bool {
     let current_color = style::gecko::values::convert_nscolor_to_absolute_color(current_color);
+    let Some(result) = compute_color(raw_data, &current_color, value, loader) else {
+        return false;
+    };
+
+    *result_color = style::gecko::values::convert_absolute_color_to_nscolor(&result.result_color);
     if !was_current_color.is_null() {
-        *was_current_color = computed.is_currentcolor();
+        *was_current_color = result.was_current_color
     }
-
-    let rgba = computed.resolve_to_absolute(&current_color);
-    *result_color = style::gecko::values::convert_absolute_color_to_nscolor(&rgba);
     true
 }
 
+// This implements https://html.spec.whatwg.org/#update-a-color-well-control-color,
+// except the actual serialization steps in step 6 of "serialize a color well control color".
+#[no_mangle]
+pub unsafe extern "C" fn Servo_ComputeColorWellControlColor(
+    raw_data: Option<&PerDocumentStyleData>,
+    value: &nsACString,
+    to_color_space: ColorSpace,
+    result_color: &mut AbsoluteColor,
+) -> bool {
+    if let Some(color) = compute_color(raw_data, &AbsoluteColor::BLACK, value, ptr::null_mut()) {
+        *result_color = color.result_color.to_color_space(to_color_space);
+        true
+    } else {
+        false
+    }
+}
+
 #[no_mangle]
 pub unsafe extern "C" fn Servo_ColorTo(
     from_color: &nsACString,