[css-color-4] `<hue> | none` is redundant

[GPHemsley]

The definition of <hue> is given as:

<hue> = <number> | <angle> | none

However, most other definitions that make use of <hue> are specified as [<hue> | none].

The only one that isn't specified that way is the one describing the legacy color syntax of hsl(), in which none was not originally available—except it my understanding that none is now available even with legacy color syntax.

Which is correct? (It matters for the purposes of reusing definitions/code.)

[GPHemsley]

In contrast, note that the definition of <alpha-value> is not written that way:

<alpha-value> = <number> | <percentage>

This, I presume, is at least in part because <alpha-value> is the value of the opacity property and opacity: none is invalid.

Thus, all the definitions that use [<alpha-value> | none] are accurate.

[svgeesus]

Thanks for raising this. Looks like we need to rationalize defined terms so that legacy formats don't end up getting unintended new features.

This, I presume, is at least in part because <alpha-value> is the value of the opacity property and opacity: none is invalid.

I don't think that was the reason but yes, we again need check that opacity doesn't end up getting unintended new features.

[GPHemsley]

Thanks for raising this. Looks like we need to rationalize defined terms so that legacy formats don't end up getting unintended new features.

I'm not sure what you mean by rationalizing in this context, but speaking of adding new features to legacy formats: is none allowed in legacy color syntax? Different sections of the spec seem to contradict on this point.

[cdoublev]

except it my understanding that none is now available even with legacy color syntax.

This is not what I understood from #7137. What is the change referring to this?

[svgeesus]

none is not allowed in legacy (comma) syntax, but is allowed in modern (no comma, alpha has /) syntax. So:

.correct {
  color: hsl(none 100% 50%)
}
.incorrect  { 
  color: hsl(none, 100%, 50%)
}

Here is a test

Chrome stable 105: Fail
Chrome beta 107: Pass
Firefox nightly 107a1: Fail
Safari TP 145: Pass

[svgeesus]

There are no tests for this in WPT:

chris@SuperNomad:/mnt/c/Users/chris/Documents/GitHub/wpt/css/css-color$ grep hsl\( hsl*.*
hsl-001.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsl-001.html:<meta name="assert" content="hsl() with number and no alpha, also no comma">
hsl-001.html:    .test { background-color: hsl(120 100% 25%)}
hsl-002.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsl-002.html:<meta name="assert" content="hsl() with angle and no alpha, also no comma">
hsl-002.html:    .test {background-color: hsl(120deg 100% 25%)}
hsl-003.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsl-003.html:<meta name="assert" content="hsl() with number and numeric alpha, also no comma">
hsl-003.html:    .test {background-color: hsl(120 100% 25% / 1.0)}
hsl-004.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsl-004.html:<meta name="assert" content="hsl() with angle and numeric alpha, also no comma">
hsl-004.html:    .test { background-color: hsl(120deg 100% 25% / 1)}
hsl-005.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsl-005.html:<meta name="assert" content="hsl() with number and percent alpha, also no comma">
hsl-005.html:    .test { background-color: hsl(120 100% 25% / 100%)}
hsl-006.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsl-006.html:<meta name="assert" content="hsl() with angle and percent alpha, also no comma">
hsl-006.html:    .test { background-color: hsl(120deg 100% 25% / 100%)}
hsl-007.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsl-007.html:<meta name="assert" content="legacy hsl() with number and percent alpha, and commas">
hsl-007.html:    .test { background-color: hsl(120, 100%, 25%, 100%)}
hsl-008.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsl-008.html:<meta name="assert" content="legacy hsl() with angle and percent alpha, with commas">
hsl-008.html:    .test { background-color: hsl(120deg, 100%, 25%, 100%)}
hsla-001.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsla-002.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsla-003.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsla-004.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsla-005.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsla-006.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsla-007.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>
hsla-008.html:<title>CSS Color 4: HSL functions hsl() and hsla()</title>

[svgeesus]

Fixed by removing none from the definition of <hue>

[GPHemsley]

except it my understanding that none is now available even with legacy color syntax.

This is not what I understood from #7137. What is the change referring to this?

I think I was misled by this (the section I was reading at the time):

All color functions allow any of their components to be specified as none.

It seems that could benefit from an "(except with legacy color syntax)" caveat.

[GPHemsley]

There are no tests for this in WPT:

There are some, but they're sort of hiding:

color-invalid.html:test_invalid_value("color", "rgb(none, none, none)");
color-invalid.html:test_invalid_value("color", "rgba(none, none, none, none)");
color-invalid.html:test_invalid_value("color", "rgb(128, 0, none)");
color-invalid.html:test_invalid_value("color", "rgb(255, 255, 255, none)");
color-invalid.html:test_invalid_value("color", "hsl(none, none, none)");
color-invalid.html:test_invalid_value("color", "hsla(none, none, none, none)");
color-invalid.html:test_invalid_value("color", "hsl(none, 100%, 50%)");
color-invalid.html:test_invalid_value("color", "hsla(120, 100%, 50%, none)");