Enhance <input type=color> with alpha and colorspace=display-p3 #10456

annevk · 2024-07-03T14:53:52Z

The new alpha and colorspace attributes give it parity with the 2D canvas API.

As part of this change we do away with the "simple color" concept as that has been replaced by CSS colors now.

WebKit can contribute tests as part of implementing this feature.

It would be great to get some help from @svgeesus @tabatkins and @LeaVerou on resolving #8917 so HTML can clearly link a way to serialize CSS color values (for the Hexadecimal state we can continue to maintain that ourselves). I think we have a plan there, but let me know if there's anything still unclear (prolly best in that issue).

At least two implementers are interested (and none opposed):
- WebKit
- Chromium
Tests are written and can be reviewed and commented upon at:
- HTML: alpha and colorspace attribute web-platform-tests/wpt#48630
Implementation bugs are filed:
- Chromium: https://issues.chromium.org/issues/368059226
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1919718
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=281284
MDN issue is filed: Document <input type=color alpha colorspace=display-p3> mdn/content#35953
The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

/common-microsyntaxes.html ( diff )
/index.html ( diff )
/indices.html ( diff )
/infrastructure.html ( diff )
/input.html ( diff )
/rendering.html ( diff )

source

annevk · 2024-07-11T09:15:45Z

@domenic observed that for <input type=color alpha> we do not have to set the proposed "HTMLCompatible" serialization parameter to true and could instead use the modern serialization. Which would mean instead of rgba(...) (that 2D canvas requires as discussed in #8917) you would get color(srgb ...) presumably. It would still be limited to 8-bits per color component, but it seems reasonable to me.

domenic

Editorially looking pretty good, although some questions in #3400 (comment) seem interesting as an uninformed-about-color person.

source

josepharhar · 2024-07-18T17:37:48Z

I think it would take us some time to upgrade the color picker popup in chromium (thanks @lukewarlow for mentioning that DevTools has a better one), but if we can just support serialization etc. in IDLs based on these new attributes in the meantime based on WPTs then that sounds good to me.

lukewarlow · 2024-07-18T17:44:19Z

I think it would be unfortunate to support the alpha attribute but not actually allow the user to select an alpha value? But not fully supporting picking display P3 but supporting the serialisation seems like it could be more acceptable?

josepharhar · 2024-07-22T17:22:05Z

Yeah I suppose we could easily and quickly add alpha, then hopefully follow up with display p3 later

annevk · 2024-09-19T08:53:55Z

I believe I have addressed the questions in #3400 and this is now rebased on top of #8917 so it's using all the latest terms. Marking agenda+ to double check on implementer interest, but if that can be provided out-of-band that would be swell as we've already discussed this a number of times.

svgeesus

Looks good

svgeesus

Looks good overall

svgeesus · 2024-09-19T17:09:31Z

source

-    <span data-x="named color">named colors</span>, then return the <span>simple color</span>
-    corresponding to that keyword. <ref>CSSCOLOR</ref></p>
+    <p>If <var>input</var> is an <span>ASCII case-insensitive</span> match for one of the <span
+    data-x="named color">named colors</span>, then return the CSS color corresponding to that


Suggest "CSS color" link to https://drafts.csswg.org/css-color-5/#typedef-color

I don't think that matches how we talk about "CSS color" in HTML. What we mean here is the parsed representation, the internal object if you will, not the syntax.

Ah okay. Perhaps the <color> type from CSS Typed OM, then?

https://drafts.css-houdini.org/css-typed-om-1/#reify-color

source

josepharhar · 2024-09-27T22:12:35Z

I just talked to @mfreed7 @dbaron and @fserb, and we think this is good, so this has chromium implementer interest.

lukewarlow · 2024-09-28T00:19:35Z

Having read through the spec one bit still feels slightly ambiguous to me, but this could just be that I'm missing something.

It seems that <input type="color" alpha> should serialize to something like color(srgb 0 0 0 / 1) (based on the description for the attribute) but https://whatpr.org/html/10456/input.html#serialize-a-color-well-control-color just calls to https://drafts.csswg.org/css-color/#serializing-color-values I read this to go down the serialization of sRGB values path, which would result in rgb(0, 0, 0)

Is there an obvious reason in the spec that it uses https://drafts.csswg.org/css-color/#serializing-color-function-values instead?

…ttributes https://bugs.webkit.org/show_bug.cgi?id=281213 rdar://137663314 Reviewed by NOBODY (OOPS!). 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>. A future change will adjust the UI accordingly and add the necessary tests. * 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::alpha): (WebCore::HTMLInputElement::colorSpace): (WebCore::HTMLInputElement::setColorSpace): * Source/WebCore/html/HTMLInputElement.h: * Source/WebCore/html/HTMLInputElement.idl:

…ttributes https://bugs.webkit.org/show_bug.cgi?id=281213 rdar://137663314 Reviewed by NOBODY (OOPS!). 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 and add the necessary tests. * 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::alpha): (WebCore::HTMLInputElement::colorSpace): (WebCore::HTMLInputElement::setColorSpace): * Source/WebCore/html/HTMLInputElement.h: * Source/WebCore/html/HTMLInputElement.idl:

Context: whatwg/html#10456.

…attributes https://bugs.webkit.org/show_bug.cgi?id=281213 rdar://137663314 Reviewed by NOBODY (OOPS!). 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:

The new alpha and colorspace attributes give it parity with the 2D canvas API. As part of this change we do away with the "simple color" concept as that has been replaced by CSS colors now. Fixes #3400.

annevk · 2024-10-16T20:14:01Z

Luke's issue has been discussed in w3c/csswg-drafts#11008 and I landed a minor fix for it in this PR. Tests are up as well now. I plan on landing this PR Monday.

…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

Context: whatwg/html#10456.

…testonly Automatic update from web-platform-tests HTML: alpha and colorspace attribute Context: whatwg/html#10456. -- wpt-commits: 05ae498a46fd05d85b867fb1457df94a10dc4bb4 wpt-pr: 48630

This is a start on whatwg/html#10456 but it turns out that our types don't work in a way that's compatible with this, so I'm leaving it for now.

annevk added addition/proposal New features or enhancements topic: forms impacts documentation Used by documentation communities, such as MDN, to track changes that impact documentation agenda+ To be discussed at a triage meeting labels Jul 3, 2024

annevk force-pushed the annevk/color-input-improvements branch from a48f1e6 to 1ea2ca0 Compare July 3, 2024 14:55

svgeesus mentioned this pull request Jul 5, 2024

Canvas 2D context color serialization #8917

Closed

svgeesus reviewed Jul 5, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

domenic reviewed Jul 8, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

past removed the agenda+ To be discussed at a triage meeting label Jul 11, 2024

past mentioned this pull request Jul 11, 2024

Upcoming WHATNOT meeting on 2024-07-11 #10463

Closed

annevk mentioned this pull request Jul 15, 2024

[css-color-4] HTML needs an html-compatible, hex serialization of 8 bit/component sRGB colors w3c/csswg-drafts#10550

Closed

domenic reviewed Jul 17, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

past mentioned this pull request Jul 18, 2024

Upcoming WHATNOT meeting on 2024-07-18 #10471

Closed

annevk force-pushed the annevk/color-input-improvements branch from 3c211f0 to 4da70fc Compare August 16, 2024 12:32

mfreed7 mentioned this pull request Aug 29, 2024

Incremental rollout plan for form controls w3c/csswg-drafts#10804

Open

annevk force-pushed the annevk/color-input-improvements branch from 4da70fc to 327b2ae Compare September 19, 2024 08:36

annevk mentioned this pull request Sep 19, 2024

Document <input type=color alpha colorspace=display-p3> mdn/content#35953

Open

annevk added the agenda+ To be discussed at a triage meeting label Sep 19, 2024

svgeesus reviewed Sep 19, 2024

View reviewed changes

domenic approved these changes Sep 20, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

annevk mentioned this pull request Oct 7, 2024

CSS color serialization and <input type=color> with alpha/colorspace w3c/csswg-drafts#11008

Open

annevk mentioned this pull request Oct 10, 2024

Enhanced <input type=color>: infrastructure for alpha and colorspace attributes WebKit/WebKit#34970

Merged

past removed the agenda+ To be discussed at a triage meeting label Oct 10, 2024

annevk mentioned this pull request Oct 11, 2024

<input type=color> enhancements w3c/html-aam#567

Closed

annevk mentioned this pull request Oct 11, 2024

Enhanced <input type=color>: support alpha picker on macOS WebKit/WebKit#35042

Merged

past mentioned this pull request Oct 12, 2024

Upcoming WHATNOT meeting on 2024-10-10 #10666

Closed

annevk added a commit to web-platform-tests/wpt that referenced this pull request Oct 15, 2024

HTML: alpha and colorspace attribute

c13111d

Context: whatwg/html#10456.

annevk mentioned this pull request Oct 15, 2024

HTML: alpha and colorspace attribute web-platform-tests/wpt#48630

Merged

annevk added 2 commits October 16, 2024 12:59

Enhance <input type=color> with alpha and colorspace=display-p3

2306677

The new alpha and colorspace attributes give it parity with the 2D canvas API. As part of this change we do away with the "simple color" concept as that has been replaced by CSS colors now. Fixes #3400.

Fix Luke's issue

298db78

annevk force-pushed the annevk/color-input-improvements branch from 264ac8e to 298db78 Compare October 16, 2024 20:06

annevk added a commit to web-platform-tests/wpt that referenced this pull request Oct 21, 2024

HTML: alpha and colorspace attribute

05ae498

Context: whatwg/html#10456.

annevk merged commit 19faae7 into main Oct 21, 2024
2 checks passed

annevk deleted the annevk/color-input-improvements branch October 21, 2024 15:22

YusukeHirao mentioned this pull request Oct 21, 2024

Supporting for alpha and colorspace attrs of the <input type=color> markuplint/markuplint#2152

Closed

AtkinsSJ mentioned this pull request Oct 31, 2024

LibWeb/HTML: Update legacy color parsing steps to match spec LadybirdBrowser/ladybird#2084

Merged

AtkinsSJ added a commit to AtkinsSJ/ladybird that referenced this pull request Oct 31, 2024

WIP: Add alpha parameter to color inputs

2d9b062

This is a start on whatwg/html#10456 but it turns out that our types don't work in a way that's compatible with this, so I'm leaving it for now.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhance <input type=color> with alpha and colorspace=display-p3 #10456

Enhance <input type=color> with alpha and colorspace=display-p3 #10456

annevk commented Jul 3, 2024 •

edited by pr-preview bot

Loading

annevk commented Jul 11, 2024

domenic left a comment

josepharhar commented Jul 18, 2024

lukewarlow commented Jul 18, 2024

josepharhar commented Jul 22, 2024

annevk commented Sep 19, 2024

svgeesus left a comment

svgeesus left a comment

svgeesus Sep 19, 2024

annevk Sep 19, 2024 •

edited

Loading

svgeesus Sep 23, 2024

josepharhar commented Sep 27, 2024

lukewarlow commented Sep 28, 2024 •

edited

Loading

annevk commented Oct 16, 2024

Enhance <input type=color> with alpha and colorspace=display-p3 #10456

Enhance <input type=color> with alpha and colorspace=display-p3 #10456

Conversation

annevk commented Jul 3, 2024 • edited by pr-preview bot Loading

annevk commented Jul 11, 2024

domenic left a comment

Choose a reason for hiding this comment

josepharhar commented Jul 18, 2024

lukewarlow commented Jul 18, 2024

josepharhar commented Jul 22, 2024

annevk commented Sep 19, 2024

svgeesus left a comment

Choose a reason for hiding this comment

svgeesus left a comment

Choose a reason for hiding this comment

svgeesus Sep 19, 2024

Choose a reason for hiding this comment

annevk Sep 19, 2024 • edited Loading

Choose a reason for hiding this comment

svgeesus Sep 23, 2024

Choose a reason for hiding this comment

josepharhar commented Sep 27, 2024

lukewarlow commented Sep 28, 2024 • edited Loading

annevk commented Oct 16, 2024

annevk commented Jul 3, 2024 •

edited by pr-preview bot

Loading

annevk Sep 19, 2024 •

edited

Loading

lukewarlow commented Sep 28, 2024 •

edited

Loading