[css-color-5] Examples 11, 20, 24, ... mix deg and number values

[romainmenke]

https://drafts.csswg.org/css-color-5/#example-4889a5cd

html { --base:  oklch(52.6% 0.115 44.6deg) }
.summary {
  background:  oklch(from var(--base) l c  calc(h + 90));
}

The calc expression is calc(44.6deg + 90) which is not valid as far as I know.

90 and 90deg are both valid <angle> values but I don't think these can be added in calc

---

https://drafts.csswg.org/css-color-5/#example-c4b276dd

--accent:  lightseagreen;
--complement:   hsl(from var(--accent) calc(h + 180) s l);

---

https://drafts.csswg.org/css-color-5/#example-fb53cf30

--accent:  lightseagreen;
--complement:   lch(from var(--accent) l c calc(h + 180));

---

there might be more examples

---

@svgeesus is the example incorrect or am I overlooking something?

[svgeesus]

Yeah that is incorrect. Hue angles in CSS are of type <angle> and their canonical unit is degrees, so in RCH h will resolved to an angle in degrees.

Angles in different units can be combined in calc() so you can add 37deg and 0.2turn for example.

Bare numbers (while allowed in CSS Color syntax, where they mean degrees) will resolve to an angle in deg when the h is used in RCS.

Sadly, bare numbers apart from 0 are not allowed in calc() as degrees. So yes the examples are incorrect.

[svgeesus]

But wait: the spec says:

and the <<angle>> is resolved to a <<number>> of degrees
(which is the [=canonical unit=])
in the range [0, 360]

so the calc is adding the hue angle resolved to a number (of degrees). Which is also explicitly stated:

Had the origin color hue <<angle>> been specified in another unit,
such as radians or turns,
still the resolved <<number>> would be the number of degrees.

[svgeesus]

@romainmenke so now, on reflection, I think the examples are correct.

[romainmenke]

🤔 I need to check why my implementation works the way it does and why it matches WebKit.

Maybe a simple misreading of :

is resolved to a <<number>> of degrees
(which is the [=canonical unit=])

https://drafts.csswg.org/css-values-4/#angles

All units are compatible, and deg is their canonical unit.

---

Could it be an issue that the canonical form of hue, which is of type <angle>, is a number with an implied unit of degrees?

The type <angle> itself has a canonical unit of degrees.

I might be thinking too much in terms of CSS as a source code.
Maybe this isn't an issue in actual engines.

[romainmenke]

Does that imply that this is valid?

hsl(from rebeccapurple h h h / h)

https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-relative-color.html#L41

Is h a number with value 270 that can also be used any place any number can be used?

[svgeesus]

I think that test predates (or does not take into account) the CSS WG resolution.

RESOLVED: keywords with multiple specified types result in number

As @LeaVerou said:

The rule we are discussing is "RCS keywords return <number> if <number> is one of the accepted input types for the component"

So yeah, that test is wrong and 270 is a number.

In general calc() gets more complicated when units are involved, much easier to do math on numbers.

[svgeesus]

I see that you already commented that the tests need to be updated following that resolution

[romainmenke]

keywords with multiple specified types result in number

Ah, yes, I somehow didn't think about that when considering angles, only percentages.
Makes sense!

So, this is good to close as it's basically a duplicate?

[svgeesus]

I believe so (thanks once again for your careful review and thoughtful questions)