Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

annevk
Copy link
Member

@annevk annevk commented Jul 3, 2024

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.


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
    • Maybe Chromium given Tab's participation in the issue?
  • Tests are written and can be reviewed and commented upon at:
  • Implementation bugs are filed:
    • Chromium: …
    • Gecko: …
    • WebKit: …
  • MDN issue is filed: …
  • 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 )
/input.html ( diff )

@annevk 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 annevk force-pushed the annevk/color-input-improvements branch from a48f1e6 to 1ea2ca0 Compare July 3, 2024 14:55
source Show resolved Hide resolved
source Outdated Show resolved Hide resolved
source Show resolved Hide resolved
source Show resolved Hide resolved
source Show resolved Hide resolved
source Outdated Show resolved Hide resolved
source Outdated Show resolved Hide resolved
source Show resolved Hide resolved
source Show resolved Hide resolved
in the <span data-x="attr-input-colorspace-hexadecimal-state">Hexadecimal</span> state:

<ol>
<li><p>Set <var>color</var> to <var>color</var> converted to the <span>'srgb'</span> color
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we link to a colorspace conversion algorithm here?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member Author

@annevk annevk Jul 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems reasonable, but we'd also need to change existing 2D canvas text: #10481. If that PR looks good I can apply that here as well.

@past past removed the agenda+ To be discussed at a triage meeting label Jul 11, 2024
@annevk
Copy link
Member Author

annevk commented Jul 11, 2024

@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.

Copy link
Member

@domenic domenic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

source Outdated Show resolved Hide resolved
source Show resolved Hide resolved
@josepharhar
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor

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

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addition/proposal New features or enhancements impacts documentation Used by documentation communities, such as MDN, to track changes that impact documentation topic: forms
Development

Successfully merging this pull request may close these issues.

Allow <input type="color"> to give an alpha channel and/or colors beyond sRGB?
6 participants