Bug: color(... alpha(...))

[jasonkuhrt]

Maybe I am misunderstanding the spec but I'm pretty sure this is incorrect on rework-color-function's part:

:root {
  --purple: hsla(285, 97%, 25%, 1);
}

.Button {
  background: color(var(--purple) alpha(10%));
}

Expect:

.Button {
    background-color: hsla(285, 97%, 25%, 0.1)
}

Actual:

.Button {
    background-color: hsla(0, 0%, 0%, 0.1)
}

[ianstormtaylor]

Looks like it's not properly parsing the HSLA, I think it defaults to black if it misparses (whatever dep I was using)

[jasonkuhrt]

@ianstormtaylor So I've narrowed the issue. This works:

...
  color(var(--purple) alpha(0.1))
...

So you're supporting floats but not %. I think this is incorrect spec-wise, no?:

http://dev.w3.org/csswg/css-color/#modifying-colors

[red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] ) |

And then for <percentage>

A percentage value is denoted by , and consists of a immediately followed by a percent sign %. It corresponds to the production in the CSS Syntax Module [CSS3SYN].

Hm does <number> imply that float OR % should work? Or is <number> referring to values used on the actual RGB hues?

[ianstormtaylor]

Spec-lyfe. Honestly, no idea :)

[jasonkuhrt]

In any case we can probably agree that xx% should be supported. Shall I rename the issue to be that?

[ianstormtaylor]

Would be good to get confirmation on what the spec meant, so we don't add something that breaks when ripped out, but sure

[jasonkuhrt]

Would be good to get confirmation on what the spec meant

Yeah agreed if you're not sure yourself. So mental note to self to review the spec very closely and if needed, likely, harass @tabatkins to get an answer.

[tabatkins]

<number> is just numbers, no unit or percentage. The spec, however, explicitly lists both <number> and <percentage>.

I'm not entirely clear on what the question is - the spec's grammar appears to be clear: alpha(10%) is allowed and has the expected meaning (identical to alpha(.1)).

[jasonkuhrt]

@tabatkins Thanks for confirming, that the spec supports alpha(10%) is clear I think, just wanted to be careful if @ianstormtaylor had doubts since this is his project.

@tabatkins Slightly OT but while you're here... when using <number> the valid range when dealing with color(... alpha(...)) is 0-1, no?

[tabatkins]

Yes, alpha is 0-1, while the other channels are 0-255. However, going outside that range isn't invalid. Alpha just gets clamped, while the other channels can always validly be outside that range (as the sRGB gamut is not absolute, and many devices have wider gamuts than what it can naively represent).

[MoOx]

FYI guys, alpha(%) is working as expected for me (I'm using it for a month). So the issue might be somewhere else.

[jasonkuhrt]

@MoOx Thanks for that info. Will have to try again someone time soon.