Closed Bug 1613301 Opened 5 years ago Closed 5 years ago

<input type=color> has no way to choose transparent, nor transparency

Categories

(Core :: Layout: Form Controls, defect)

73 Branch
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: v+mozbug, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

Clicked on <input type=color> element

Actual results:

Got a color picker

Expected results:

Color picker has no options to choose "transparent" color, nor any level of transparency. It seems to deal only in 6 digit colors, not 8 digit colors.

I think that this is invalid because value of <input type="color"> must be #RRGGBB so that even if browsers use their own color picker, they cannot represent the transparency with HTMLInputElement interface.

Component: DOM: Core & HTML → Layout: Form Controls

Hmm. I was recalling reading in one of the spec updates that "transparent" was now a "color name" rather than its former status as a keyword, when specified in various CSS rules... and so I figured there should be some what to specify it from a color picker.

From MDN https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Historical note: transparent wasn't a true color in CSS Level 2 (Revision 1). It was a special keyword that could be used instead of a regular <color> value on two CSS properties: background and border. It was essentially added to allow developers to override an inherited solid color. With the advent of alpha channels in CSS Colors Level 3, transparent was redefined as a true color. It can now be used wherever a <color> value can be used.

From CSS level 3 https://www.w3.org/TR/css-color-3/#transparent

4.2.3. ‘transparent’ color keyword

CSS1 introduced the ‘transparent’ value for the background-color property. CSS2 allowed border-color to also accept the ‘transparent’ value. The Open eBook(tm) Publication Structure 1.0.1 [OEB101] extended the ‘color’ property to also accept the ‘transparent’ keyword. CSS3 extends the color value to include the ‘transparent’ keyword to allow its use with all properties that accept a <color> value. This simplifies the definition of those properties in CSS3.

transparent
Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

But your reference to the whatwg spec (and I confirmed it is in the w3c HTML5 spec also) does make my expectation of being able to select transparent and transparency from the color picker to be invalid. However, that points out a seeming inconsistency between the HTML5 and CSS3 specifications.

The CSS3 does mention that HTML doesn't accept all color keyword names. I didn't find a particular references to the idea that the <input type=color> was more limited the the current CSS3 color repertoire, but from the HTML spec, it appears that it is.

So my conclusion is that this is an HTML spec issue, not a Firefox issue. Thanks for the reference.

So this discussion to extend HTML was started at W3C github, but the "conclusion" was that the discussion should be continued elsewhere
https://github.com/w3c/html/issues/1422

I couldn't find a specific continuation of that discussion, but did find https://github.com/whatwg/html/issues/3400 which seems to have happened in parallel, but hasn't gotten much discussion.

(In reply to Glenn Linderman from comment #2)

So my conclusion is that this is an HTML spec issue, not a Firefox issue. Thanks for the reference.

For now, I think that means we can close this as "invalid", as a Firefox bug, since we're doing what the spec requires.

If/when there's spec text on how this should work, feel free to reopen (or file a new bug at that point).

Also: for what it's worth, from a compatibility-with-other-browsers perspective -- I just tested Chrome, and they've got the same behavior as we do here -- a color-picker with RGB output (or HSL if you click through their UI). They don't have a way to set alpha (transparency).

Status: UNCONFIRMED → RESOLVED
Closed: 5 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.