Re: [csswg-drafts] [css-color-5] relative color syntax: numbers vs. percentages in `calc()` (#9759)

_Commenting in haste; I am on vacation and with an unreliable internet connection._

The relevant parts of the spec are [this](https://drafts.csswg.org/css-color-5/#relative-colors):

> The [channel keywords](https://drafts.csswg.org/css-color-5/#channel-keyword) return a [<number>](https://drafts.csswg.org/css-values-4/#number-value); if they were originally specified as a [<percentage>](https://drafts.csswg.org/css-values-4/#percentage-value) or an [<angle>](https://drafts.csswg.org/css-values-4/#angle-value), that <percentage> is resolved to a <number> and the <angle> is resolved to a <number> of degrees (which is the [canonical unit](https://drafts.csswg.org/css-values-4/#canonical-unit)) in the range [0, 360].

and also 

> Beware when using components outside their normal position; when percentages are resolved to numbers, there is no "magic scaling" to account for the changed position if those numbers are used in a different place.

followed by [this example](https://drafts.csswg.org/css-color-5/#ex-no-percentage-magic)

> For example,

> `color: color(from color(srgb 0 0 0 / 60%) srgb alpha 0.6 0.6 / 0.9);`

> The alpha component is resolved as a [`<number>`](https://drafts.csswg.org/css-values-4/#number-value), giving 0.6; thus the resulting color is `color(srgb 0.6 0.6 0.6 / 0.9)`.

> However, in this second example, again the alpha resolves to 0.6, giving a very different color due to the color component range of 0 to 255 in `rgb()` syntax:

> `color: rgb(from rgb(0 0 0 / 60%) alpha 153 153 / 0.9);`

> which results in `rgb(0.6 153 153 / 0.9)` and not `rgb(153 153 153 / 0.9)`.

The mixing of number and percentage is from an earlier, and incorrect, version of the spec where channel keywords could resolve to either number or percentage as desired. Now the spec is corrected to say that they all resolve to number.

The magical scaling of numbers by 255 was never in the specification; Chrome was incorrect to add it to their implementation.

_I don't have time right now to dig up the issues where this was decided, sorry. Will come back to this once I am back at work._

Adding more WPT would be wonderful. Feel free to ping me for a review.


-- 
GitHub Notification of comment by svgeesus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9759#issuecomment-1874331009 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 2 January 2024 17:32:57 UTC