Apply the range definition notation

[cdoublev]

I would like the range definition notation to be applied to value definitions whose interval is currently defined in prose. I can make pull request (a single or one per spec) if it helps to get this change sooner. The motivation is automatic parsing of value definition.

At least, the lists below can serve as a reference for the spec authors to update their definitions.

CSS property values

I excluded CSS 2 from my search.

• [css-align-3] row-gap, column-gap: normal | <length-percentage [0,∞]>
• [css-animations-1] animation-duration: <time [0,∞]>#
• [css-animations-1] <single-animation-iteration-count>: infinite | <number [0,∞]>
• [css-box-3][css-box-4] padding-top, padding-right, padding-bottom, padding-left: <length-percentage [0,∞]>
• [css-break-3][css-break-4] orphans, widows: <integer [1,∞]>
• [css-content-3] bookmark-level: none | <integer [1,∞]>
• [css-egg-1] <double-rainbow()>: double-rainbow(<position> [, [<extent> | <length [0,∞]> | <percentage [0,∞]>]]?)
• [css-fonts-4] font-stretch: normal | <percentage [0,∞]> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
• [css-fonts-4] font-style: normal | italic | oblique <angle [-90,90]>?
• [css-fonts-4] font-size: <absolute-size> | <relative-size> | <length-percentage [0,∞]> | math
• [css-fonts-4] font-size-adjust: none | <number [0,∞]>
• [css-grid-1][css-grid-2] <grid-line>: auto | <custom-ident> | [<integer> && <custom-ident>?] | [span && [ <integer [1,∞]> || <custom-ident>]]
• [css-images-3] <size>: <extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}
• [css-images-4] <cf-image>: <percentage [0,100]>? && [<image> | <color>]
• [css-inline-3] initial-letter: normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [drop | raise]?
• [css-overflow-3] max-lines: none | <integer [1,∞]>
• [css-rythm-1] block-step-size: none | <length [0,∞]>
• [css-rythm-1] line-height-step: <length [0,∞]>
• [css-scroll-snap-1] scroll-padding: [auto | <length-percentage [0,∞]>]{1,4}
• [css-scroll-snap-1] scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left, scroll-padding-inline-start, scroll-padding-block-start, scroll-padding-inline-end, scroll-padding-block-end: auto | <length-percentage [0,∞]>
• [css-scroll-snap-1] scroll-padding-block, scroll-padding-inline: [auto | <length-percentage [0,∞]>]{1,2}
• [css-scroll-snap-2] scroll-start: [auto | start | end | center | left | right | top | bottom | <length-percentage [0,∞]>]{1,2}
• [css-scroll-snap-2] scroll-start, scroll-start-x, scroll-start-y, scroll-start-block, scroll-start-inline: auto | start | end | center | <length-percentage [0,∞]>
• [css-shapes-1] <shape-radius>: <length-percentage [0,∞]> | closest-side | farthest-side
• [css-size-adjust-1] text-size-adjust: auto | none | <percentage [0,∞]>
• [css-sizing-3] width, min-width, height, min-height: auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)
• [css-sizing-3] max-width, max-height: none | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)
• [css-transitions-1] transition-duration: <time [0,∞]>#
• [css-writing-modes-4] text-combine-upright: none | all | [ digits <integer [2,4]>? ]

Other CSS values

As noted in #7140, the range definition notation would need to be generalized in order to apply to a descriptor value or a value in a rule's prelude. I think it can be achieved with this change in CSS Syntax 3:

 Just like in property grammars, the notation `<foo>` refers to the "foo" grammar term, assumed to be defined elsewhere. Substituting the `<foo>` for its definition results in a semantically identical grammar.

+ For numeric data types, this type notation can annotate any range restrictions using the bracketed range notation described in [CSS Values](https://drafts.csswg.org/css-values-4/#numeric-ranges).

• [css-animations-1] <keyframe-selector>: from | to | <percentage [0,100]>
• [css-fonts-4][css-fonts-5] ascent-override, descent-override, line-gap-override: normal | <percentage [0,∞]>
• [mediaqueries-4][mediaqueries-5] <mq-boolean>: <integer [0,1]>

Multiple interval syntax

Some range definitions cannot be defined with the current notation because they have multiple intervals. It was not discussed in #355, where this notation comes from. I'm thinking of [x1,x2] [x3,x4] for this, which is similar but simpler than [x1,x2] ∪ [x3,x4] (union).

I thought there was a few more cases but I only found this one, so I guess I can live without this notation and implement a specific validation function for it.

• [css-grid-1][css-grid-2] <grid-line>: auto | <custom-ident> | [<integer [-∞,-1] [1,∞]> && <custom-ident>?] | [span && [ <integer [1,∞]> || <custom-ident>]]

[dbaron]

• [css-fonts-4] font-style: normal | italic | oblique <angle [-90,90]>?

I think this requires units, i.e., <angle [-90deg,90deg]>

• [css-animations-1] animation-duration: <time [0,∞]>#
• [css-animations-1] animation-iteration-count: <time [0,∞]>#
• [css-transitions-1] transition-duration: <time [0,∞]>#

Likewise, I think these three require units since 0 is not a valid <time>, so they should be <time [0s,∞]>.

• [css-images-4] <cf-image>: <percentage [0,100]>? && [<image> | <color>]

I think we should probably also use units for percentages, although I'm less confident of that. That is, <percentage [0%,100%]>.

Multiple interval syntax

• [css-grid-1][css-grid-2] <grid-line>: auto | <custom-ident> | [<integer [-∞,-1] [1,∞]> && <custom-ident>?] | [span && [ <integer [1,∞]> || <custom-ident>]]

I think you could write [ <integer [-∞,-1]> | <integer [1,∞]> ] for this one case.

[tabatkins]

+1 to all the feedback from dbaron.

I'm fine with this all being one big PR.

[cdoublev]

Below are all the existing ranges:

Production	Ranges
<length-percentage>	[0,∞]
<length>	[0,∞]
<number>	[0,∞], [1,∞], [0,1], [1,1000]
<integer>	[0,∞], [1,∞], [0,10]
<percentage>	[0,∞], [0,Infinity], [0,100]

It seems clearer to not omit the canonical unit. Unitless 0 for <length> and <angle> is more concise. It is forbidden in math functions but there are currently none that have a range constraint. ∞px or ∞% would be weird.

<length-percentage [0,∞]> looks problematic to me. CSS authors might think that unitless 0 for <percentage> is allowed.

The only alternative I see would be to define that the range applies to the numeric part of the component value, canonicalized in the case of a dimension.

I think that Infinity could be normalized to ∞ for consistency and conciseness.

[tabatkins]

So long as it's clear, I think the range limitation is fine without units, yeah. 0 and infinity are always clear; numbers/integers are correct anyway, and percentage has a single possible unit so non-zero values are clear too.