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

Status: RESOLVED FIXED

(Core :: DOM: Forms, enhancement)

Description

[Anne (:annevk)]

As per https://github.com/whatwg/html/pull/10456

Comment 1

[Simon Pieters [:zcorpan]]

The spec PR has been merged.

This is needed to be able to pick display-p3 colors with the eyedropper as <input> proposal.

Comment 2

[Calixte Denizet (:calixte)]

:hsinyi, do you have any idea when this feature will be available ?

Comment 3

[Kagami Rosylight [:saschanaz] (they/them)]

We need bug 1629388 to have some control over color picker.

Comment 4

[Hsin-Yi Tsai (she/her)[:hsinyi]]

(I didn't mean to clear my NI)

Comment 5

[Hsin-Yi Tsai (she/her)[:hsinyi]]

Bug 1629388 is in progress.

Comment 6

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: WIP: Bug 1919718 - Part 1: Pass colorspace to color picker

Comment 7

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: WIP: Bug 1919718 - Part 2: Pass alpha to color picker

Comment 8

[Kagami Rosylight [:saschanaz] (they/them)]

Removing some dependencies:

1. The graphic dependency is about picker but we can still implement the attribute without actually having P3 picker. We can convert sRGB value from picker to P3 representation to fulfill the spec requirements. Users would still be only able to choose within sRGB range though. Using P3 for the picker is straightforward but right now doing so is no-op, as it turns out that we don't do color mapping - gradient in P3 white-to-red looks exactly same to sRGB white-to-red even on MacBook P3 display.
2. In the same way, technically we don't have to fix the Android color picker to implement this. Alpha should be disabled until Android gets the picker support though, for feature detection purpose. The Android work would need some actual Android person to take. (gamut detection is possible through matchMedia("(color-gamut: p3)").matches.)

Comment 9

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: Bug 1919718 - Part 1: Implement HTMLInputElement.colorSpace r=emilio

Comment 10

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: Bug 1919718 - Part 2: Implement HTMLInputElement.alpha r=emilio

Comment 11

[Kagami Rosylight [:saschanaz] (they/them)]

note: there should be tests to ensure that setting colorspace/alpha HTML attributes via setAttribute also runs value sanitization.

Comment 12

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: Bug 1919718 - Part 3: Update color on AfterSetAttr and add tests r=emilio

I realized that this should not be specific to IDL setter.

Comment 13

[Kagami Rosylight [:saschanaz] (they/them)]

Release Note Request (optional, but appreciated)
[Why is this notable]: Implementing extra attributes for input element
[Affects Firefox for Android]: Yes
[Suggested wording]: Adding colorspace HTML attributes for <input type=color> elements will now affect the value to be expressed in the requested colorspace and/or with alpha. They do not affect the color picker behavior yet, but it's coming in bug 2007532. alpha is Nightly only for now.
[Links (documentation, blog post, etc)]:

Comment 14

[Kagami Rosylight [:saschanaz] (they/them)]

For MDN/BCD purpose, we currently mark it incomplete for color() syntax support in HTML input element. We can mark it complete. The alpha value will be filtered out until it's enabled in stable...

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/609b28f0524d
https://hg.mozilla.org/integration/autoland/rev/c52d389d509c
Part 1: Implement HTMLInputElement.colorSpace r=emilio,webidl,firefox-style-system-reviewers
https://github.com/mozilla-firefox/firefox/commit/7a1ca0d96275
https://hg.mozilla.org/integration/autoland/rev/41a26d645bb8
Part 2: Implement HTMLInputElement.alpha r=emilio,webidl,firefox-style-system-reviewers,layout-reviewers
https://github.com/mozilla-firefox/firefox/commit/ff457f98ede7
https://hg.mozilla.org/integration/autoland/rev/e6aa853d3637
Part 3: Update color on AfterSetAttr and add tests r=emilio

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/57187 for changes under testing/web-platform/tests

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/a05a9aa240ad
https://hg.mozilla.org/integration/autoland/rev/817663099fc3
Revert "Bug 1919718 - Part 3: Update color on AfterSetAttr and add tests r=emilio" for causing reftest failures @transformations-1.html.

Comment 18

[agoloman]

Backed out for causing reftest failures @transformations-1.html.

• Backout link
• Push with failures
• Failure Log

Comment 19

[Kagami Rosylight [:saschanaz] (they/them)]

Huh? How come is this Android specific?

Comment 20

[agoloman]

It also fails on linux.

Comment 21

[Kagami Rosylight [:saschanaz] (they/them)]

Thanks, then it makes much more sense.

Comment 22

[Kagami Rosylight [:saschanaz] (they/them)]

(But it doesn't fail locally, it even gives 0 pixel difference. 🤔)

Comment 23

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 24

[Luke Warlow]

Just want to point out that the current plan to ship the attributes without the picker behaviour does mean that feature detection is effectively impossible. I think it's less important for color space but for alpha especially it seems problematic to advertise support when you don't have it. If I wanted to decide whether to show a custom picker or use the default browsers one this means I can't do that.

At the very least it would seem good if alpha was wired up to the platform pickers where possible before the web picker ships (macOS's and GTKs definitely support it).

Comment 25

[Kagami Rosylight [:saschanaz] (they/them)]

I thought about not shipping alpha, but changed my mind after realizing that alpha does affect the value too and is not fully unusable without alpha slider... But probably alpha should be behind pref for now, yeah. Thank for the feedback.

Comment 26

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ddddc40e0fd5
https://hg.mozilla.org/integration/autoland/rev/adbed6a1d5fb
Part 1: Implement HTMLInputElement.colorSpace r=emilio,webidl,firefox-style-system-reviewers
https://github.com/mozilla-firefox/firefox/commit/43f88cf6a158
https://hg.mozilla.org/integration/autoland/rev/1a3672c20420
Part 2: Implement HTMLInputElement.alpha r=emilio,webidl,firefox-style-system-reviewers,layout-reviewers
https://github.com/mozilla-firefox/firefox/commit/819e12e9bebe
https://hg.mozilla.org/integration/autoland/rev/dcf5f918e1fc
Part 3: Update color on AfterSetAttr and add tests r=emilio

Comment 27

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/57212 for changes under testing/web-platform/tests

Comment 28

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/adbed6a1d5fb
https://hg.mozilla.org/mozilla-central/rev/1a3672c20420
https://hg.mozilla.org/mozilla-central/rev/dcf5f918e1fc

Comment 29

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 30

[Pascal Chevrel:pascalc]

Added with this wording::

You can now set specific color spaces and transparency (alpha) on <input type="color"> elements, with alpha support currently exclusive to Firefox Nightly. While the visual picker hasn't changed yet (tracked in Bug 2007532), it will now output values in your requested format.

The note will be part of the Nightly release notes for 3 cycles (149-151).
When we extend the support to the release channel, a new release note request will be needed.

Comment 31

[Dave Letorey]

Related issues and pull requests

• BCD PR
• Firefox Release PR

Comment 32

[Ryan VanderMeulen [:RyanVM]]

Removed from the Nightly 152 release notes per comment 30.