Enhanced <input type=color>: infrastructure for alpha and colorspace …

…attributes

https://bugs.webkit.org/show_bug.cgi?id=281213
rdar://137663314

Reviewed by Sam Weinig.

Add the necessary infrastructure for
whatwg/html#10456. In particular:

- Support the alpha and colorspace attributes behind a preference.
- When the preference is enabled vastly expand the CSS color parsing
  and serialization capabilities of <input type=color>.

Future changes will adjust the UI accordingly.

Tests are upstreamed here:
web-platform-tests/wpt#48630

* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color-attributes.window-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color-attributes.window.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color-attributes.window.js: Added.
(test):
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.tentative-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color-expected.txt.
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.tentative.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.html.
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.window-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.window.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.window.js: Added.
(const.assert_colors.set_up_fuzzy_color_test):
(forEach):
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/w3c-import.log:
* LayoutTests/platform/glib/TestExpectations:
* LayoutTests/platform/mac-wk1/TestExpectations:
* LayoutTests/platform/wpe/TestExpectations:
* Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml:
* Source/WebCore/html/ColorInputType.cpp:
(WebCore::colorParsingParameters):
(WebCore::parseColorValue):
(WebCore::serializeColorValue):
(WebCore::ColorInputType::fallbackValue const):
(WebCore::ColorInputType::sanitizeValue const):
(WebCore::ColorInputType::valueAsColor const):
(WebCore::ColorInputType::typeMismatchFor const):
(WebCore::ColorInputType::didChooseColor):
(WebCore::ColorInputType::suggestedColors const):
(WebCore::ColorInputType::selectColor):
* Source/WebCore/html/HTMLAttributeNames.in:
* Source/WebCore/html/HTMLInputElement.cpp:
(WebCore::HTMLInputElement::attributeChanged):
(WebCore::HTMLInputElement::alpha):
(WebCore::HTMLInputElement::colorSpace):
(WebCore::HTMLInputElement::setColorSpace):
* Source/WebCore/html/HTMLInputElement.h:
* Source/WebCore/html/HTMLInputElement.idl:

Canonical link: https://commits.webkit.org/285322@main

LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color-attributes.window-expected.txt

@@ -0,0 +1,4 @@
+
+PASS <input type=color>: alpha attribute
+PASS <input type=color>: colorspace attribute
+

LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color-attributes.window.html

@@ -0,0 +1 @@
+<!-- This file is required for WebKit test infrastructure to run the templated test --><!-- webkit-test-runner [ InputTypeColorEnhancementsEnabled=true ] -->

LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color-attributes.window.js

@@ -0,0 +1,29 @@
+test(() => {
+  const input = document.createElement("input");
+  input.type = "color";
+  input.setAttribute("alpha", "blah");
+  assert_equals(input.getAttribute("alpha"), "blah");
+  assert_true(input.alpha);
+  input.alpha = false;
+  assert_false(input.hasAttribute("alpha"));
+  input.alpha = "blah";
+  assert_true(input.alpha);
+  assert_equals(input.getAttribute("alpha"), "");
+}, "<input type=color>: alpha attribute");
+
+test(() => {
+  const input = document.createElement("input");
+  input.type = "color";
+  input.setAttribute("colorspace", "blah");
+  assert_equals(input.getAttribute("colorspace"), "blah");
+  assert_equals(input.colorSpace, "limited-srgb");
+  input.colorSpace = null;
+  assert_equals(input.getAttribute("colorspace"), "null");
+  assert_equals(input.colorSpace, "limited-srgb");
+  input.colorSpace = "DISPLAY-P3";
+  assert_equals(input.getAttribute("colorspace"), "DISPLAY-P3");
+  assert_equals(input.colorSpace, "display-p3");
+  input.colorSpace = "DıSPLAY-P3";
+  assert_equals(input.getAttribute("colorspace"), "DıSPLAY-P3");
+  assert_equals(input.colorSpace, "limited-srgb");
+}, "<input type=color>: colorspace attribute");

LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.html → LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.tentative.html

@@ -1,4 +1,5 @@
-<!DOCTYPE html>
+<!DOCTYPE html><!-- webkit-test-runner [ InputTypeColorEnhancementsEnabled=false ] -->
+<!-- This test can be removed once all browsers support the alpha and colorspace attributes. -->
 <meta charset=utf-8>
 <title>Form input type=color</title>
 <link rel="author" title="Denis Ah-Kang" href="mailto:[email protected]">

LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.window.html

@@ -0,0 +1 @@
+<!-- This file is required for WebKit test infrastructure to run the templated test --><!-- webkit-test-runner [ InputTypeColorEnhancementsEnabled=true ] -->

LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.window.js

@@ -0,0 +1,254 @@
+// META: script=/css/support/color-testcommon.js
+
+// While assert_equals is fine for hex, it's not for hexalpha, p3, and p3alpha. We use the default
+// epsilon of 0.0001.
+const assert_colors = set_up_fuzzy_color_test();
+
+[
+  {
+    value: "",
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0)"
+  },
+  {
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0)"
+  },
+  {
+    value: "#ffffff",
+    hex: "#ffffff",
+    hexalpha: "color(srgb 1 1 1)",
+    p3: "color(display-p3 1 1 1)",
+    p3alpha: "color(display-p3 1 1 1)"
+  },
+  {
+    value: "#ffffff08",
+    hex: "#ffffff",
+    hexalpha: "color(srgb 1 1 1 / 0.031373)",
+    p3: "color(display-p3 1 1 1)",
+    p3alpha: "color(display-p3 1 1 1 / 0.031373)"
+  },
+  {
+    value: "#FFFFFF",
+    hex: "#ffffff",
+    hexalpha: "color(srgb 1 1 1)",
+    p3: "color(display-p3 1 1 1)",
+    p3alpha: "color(display-p3 1 1 1)"
+  },
+  {
+    value: "#0F0F0F",
+    hex: "#0f0f0f",
+    hexalpha: "color(srgb 0.058824 0.058824 0.058824)",
+    p3: "color(display-p3 0.058824 0.058824 0.058824)",
+    p3alpha: "color(display-p3 0.058824 0.058824 0.058824)"
+  },
+  {
+    value: "#fff",
+    hex: "#ffffff",
+    hexalpha: "color(srgb 1 1 1)",
+    p3: "color(display-p3 1 1 1)",
+    p3alpha: "color(display-p3 1 1 1)"
+  },
+  {
+    value: "fffffff",
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0)"
+  },
+  {
+    value: "#gggggg",
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0)"
+  },
+  {
+    value: "foobar",
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0)"
+  },
+  {
+    value: "#ffffff\u0000",
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0)"
+  },
+  {
+    value: "#ffffff;",
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0)"
+  },
+  {
+    value: " #ffffff",
+    hex: "#ffffff",
+    hexalpha: "color(srgb 1 1 1)",
+    p3: "color(display-p3 1 1 1)",
+    p3alpha: "color(display-p3 1 1 1)"
+  },
+  {
+    value: "#ffffff ",
+    hex: "#ffffff",
+    hexalpha: "color(srgb 1 1 1)",
+    p3: "color(display-p3 1 1 1)",
+    p3alpha: "color(display-p3 1 1 1)"
+  },
+  {
+    value: " #ffffff ",
+    hex: "#ffffff",
+    hexalpha: "color(srgb 1 1 1)",
+    p3: "color(display-p3 1 1 1)",
+    p3alpha: "color(display-p3 1 1 1)"
+  },
+  {
+    value: "crimson",
+    hex: "#dc143c",
+    hexalpha: "color(srgb 0.862745 0.078431 0.235294)",
+    p3: "color(display-p3 0.791711 0.191507 0.257367)",
+    p3alpha: "color(display-p3 0.791711 0.191507 0.257367)"
+  },
+  {
+    value: "bisque",
+    hex: "#ffe4c4",
+    hexalpha: "color(srgb 1 0.894118 0.768627)",
+    p3: "color(display-p3 0.982297 0.8979 0.783276)",
+    p3alpha: "color(display-p3 0.982297 0.8979 0.783276)"
+  },
+  {
+    value: "currentColor",
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0)"
+  },
+  {
+    value: "transparent",
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0 / 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0 / 0)"
+  },
+  {
+    value: "inherit",
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0)"
+  },
+  {
+    value: "rgb(1,1,1)",
+    hex: "#010101",
+    hexalpha: "color(srgb 0.003922 0.003922 0.003922)",
+    p3: "color(display-p3 0.003922 0.003922 0.003922)",
+    p3alpha: "color(display-p3 0.003922 0.003922 0.003922)"
+  },
+  {
+    value: "rgb(1,1,1,1)",
+    hex: "#010101",
+    hexalpha: "color(srgb 0.003922 0.003922 0.003922)",
+    p3: "color(display-p3 0.003922 0.003922 0.003922)",
+    p3alpha: "color(display-p3 0.003922 0.003922 0.003922)"
+  },
+  {
+    value: "rgb(1,1,1,0.5)",
+    hex: "#010101",
+    hexalpha: "color(srgb 0.003922 0.003922 0.003922 / 0.501961)",
+    p3: "color(display-p3 0.003922 0.003922 0.003922)",
+    p3alpha: "color(display-p3 0.003922 0.003922 0.003922 / 0.501961)"
+  },
+  {
+    value: "#FFFFF\u1F4A9",
+    hex: "#000000",
+    hexalpha: "color(srgb 0 0 0)",
+    p3: "color(display-p3 0 0 0)",
+    p3alpha: "color(display-p3 0 0 0)"
+  }
+].forEach(({ value, hex, hexalpha, p3, p3alpha }) => {
+  ["limited-srgb", "display-p3"].forEach(colorSpace => {
+    [false, true].forEach(alpha => {
+      const nameValue = value === "" ? "the empty string" : value === undefined ? "no value" : "'" + value + "'";
+      test(() => {
+        const input = document.createElement("input");
+        input.type = "color";
+        if (value !== undefined) {
+          input.setAttribute("value", value);
+        }
+        assert_equals(input.value, hex, "value is hex");
+        input.colorSpace = colorSpace;
+        assert_equals(input.colorSpace, colorSpace, "color space");
+        if (colorSpace === "limited-srgb") {
+          assert_equals(input.value, hex, "value is hex");
+        } else {
+          assert_colors(input.value, p3);
+        }
+        input.alpha = alpha;
+        assert_equals(input.alpha, alpha, "alpha");
+        if (colorSpace === "limited-srgb" && !alpha) {
+          assert_equals(input.value, hex, "value is hex");
+        } else if (colorSpace === "limited-srgb" && alpha) {
+          assert_colors(input.value, hexalpha);
+        } else if (colorSpace === "display-p3" && !alpha) {
+          assert_colors(input.value, p3);
+        } else {
+          assert_colors(input.value, p3alpha);
+        }
+      }, `Testing ${nameValue} with color space '${colorSpace}' and ${alpha ? 'with' : ' without'} alpha (setAttribute("value"))`);
+
+      test(() => {
+        const input = document.createElement("input");
+        input.type = "color";
+        // In this test we set alpha before we set value to avoid the value sanitization algorithm
+        // taking away the alpha channel from the input.
+        input.alpha = true;
+        if (value !== undefined) {
+          input.value = value;
+        }
+        assert_colors(input.value, hexalpha);
+        input.colorSpace = colorSpace;
+        assert_equals(input.colorSpace, colorSpace, "color space");
+        if (colorSpace === "limited-srgb") {
+          assert_colors(input.value, hexalpha);
+        } else {
+          assert_colors(input.value, p3alpha);
+        }
+        input.alpha = alpha;
+        assert_equals(input.alpha, alpha, "alpha");
+        if (colorSpace === "limited-srgb" && !alpha) {
+          assert_equals(input.value, hex, "value is hex");
+        } else if (colorSpace === "limited-srgb" && alpha) {
+          assert_colors(input.value, hexalpha);
+        } else if (colorSpace === "display-p3" && !alpha) {
+          assert_colors(input.value, p3);
+        } else {
+          assert_colors(input.value, p3alpha);
+        }
+      }, `Testing ${nameValue} with color space '${colorSpace}' and ${alpha ? 'with' : ' without'} alpha (value)`);
+    });
+  });
+});
+
+test(() => {
+  const input = document.createElement("input");
+  input.type = "color";
+  assert_equals(input.value, "#000000");
+  input.value = "ActiveBorder";
+  assert_not_equals(input.value, "#000000");
+}, "System colors are parsed");
+
+test(() => {
+  const input = document.createElement("input");
+  input.type = "color";
+  input.alpha = true;
+  input.colorSpace = "display-p3";
+  input.value = "color(display-p3 3 none .2 / .6)";
+  assert_equals(input.value, "color(display-p3 3 0 0.2 / 0.6)");
+}, "Display P3 colors can be out-of-bounds");

LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/w3c-import.log

@@ -25,7 +25,9 @@ List of files:
 /LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/click-user-gesture.html
 /LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/clone.html
 /LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/cloning-steps.html
-/LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.html
+/LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color-attributes.window.js
+/LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.tentative.html
+/LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.window.js
 /LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/date.html
 /LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/datetime-local-trailing-zeros.html
 /LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/datetime-local.html

LayoutTests/platform/glib/TestExpectations

@@ -157,6 +157,10 @@ fast/history/page-cache-indexed-closed-db.html [ Pass ]
 
 fast/multicol/multicol-with-child-renderLayer-for-input.html [ Pass ]
 
+# Enhanced <input type=color>
+imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color-attributes.window.html [ Skip ]
+imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.window.html [ Skip ]
+
 # permessage-deflate WebSocket extension.
 http/tests/websocket/tests/hybi/imported/blink/permessage-deflate-comp-bit-onoff.html [ Pass ]
 http/tests/websocket/tests/hybi/imported/blink/permessage-deflate-parameter.html [ Pass ]

LayoutTests/platform/mac-wk1/TestExpectations

@@ -1120,7 +1120,9 @@ editing/pasteboard/drag-and-drop-color-input.html [ Skip ]
 fast/css/pseudo-visited-background-color-on-input.html [ ImageOnlyFailure ]
 fast/css/read-only-read-write-input-basics.html [ ImageOnlyFailure ]
 fast/forms/color [ Skip ]
-imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.html [ Skip ]
+imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color-attributes.window.html [ Skip ]
+imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.tentative.html [ Skip ]
+imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.window.html [ Skip ]
 imported/w3c/web-platform-tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-color-001.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-size-001.html [ ImageOnlyFailure ]
 

LayoutTests/platform/wpe/TestExpectations

@@ -956,7 +956,8 @@ webkit.org/b/186262 imported/w3c/web-platform-tests/css/css-text/word-break/word
 webkit.org/b/186262 imported/w3c/web-platform-tests/css/css-text/word-break/word-break-normal-lo-000.html [ ImageOnlyFailure ]
 
 webkit.org/b/180645 imported/w3c/web-platform-tests/html/semantics/forms/textfieldselection/selection-not-application.html [ Failure ]
-webkit.org/b/180645 imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.html [ Failure ]
+webkit.org/b/180645 imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/color.tentative.html [ Failure ]
+
 webkit.org/b/180645 imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/valueMode.html [ Failure ]
 webkit.org/b/180645 accessibility/color-input-value-changes.html [ Timeout ]
 

Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml

@@ -3582,6 +3582,21 @@ InputTypeColorEnabled:
       default: false
   sharedPreferenceForWebProcess: true
 
+InputTypeColorEnhancementsEnabled:
+  type: bool
+  status: unstable
+  category: html
+  condition: ENABLE(INPUT_TYPE_COLOR)
+  humanReadableName: "HTML alpha and colorspace attribute support for color inputs"
+  humanReadableDescription: "Enable HTML alpha and colorspace attribute support for input elements of type color"
+  defaultValue:
+    WebKitLegacy:
+      default: false
+    WebKit:
+      default: false
+    WebCore:
+      default: false
+
 InputTypeDateEnabled:
   type: bool
   status: embedder