[css-shapes][css-images-3] `<radial-size>` syntax seems incorrect

[romainmenke]

https://drafts.csswg.org/css-images-3/#typedef-radial-size

<radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}

This syntax does not allow this:

clip-path: ellipse(closest-side closest-side at 5rem 6rem);

Despite that being the implemented feature: https://codepen.io/romainmenke/pen/PordyZx

I think this was a regression in https://github.com/w3c/csswg-drafts/pull/9723

Grouping it seems to resolve the issue:

<radial-size> = [ <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]> ]{2}

But I am not that familiar with the feature, so my suggestion might be incorrect.

---

Edit:

The suggested edit would break circle(). I think that that might be the root cause.

That both circle() and ellipse() are defined with <radial-size> while they should be different.

This might work though:

https://drafts.csswg.org/css-images-3/#typedef-radial-size

- <radial-size> = [ <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]> ]{2}
+ <radial-size> = [ <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]> ]

https://drafts.csswg.org/css-shapes/#funcdef-basic-shape-ellipse

- <ellipse()> = ellipse( <radial-size>? [ at <position> ]? )
+ <ellipse()> = ellipse( [ <radial-size>{2} ]? [ at <position> ]? )

[cdoublev]

I think you missed the extension in CSS Images 4.

But I would also prefer (y)our suggested syntax (#9730).

[romainmenke]

Aha, I wasn't aware of the prose in that section. Thank you for finding this 🙇

Unfortunately we can't parse prose 😛

Two-component values remain invalid when specifying circle as the <radial-shape>, and otherwise indicate the horizontal (first) and vertical (second) radii of the ellipse.

(Working on a CSS declaration linter that uses @webref/css as the source of truth.)

[cdoublev]

I closed #9730 in favor of this issue, to rephrase my questions about the <radial-size> extension in CSS Images 4.

As noted in the comments above, it would be great if the restriction to a single component value for circle() and a circle gradient shape could be hardcoded into the syntax.

Before this extension:

• circle() could be specified with one <radial-extent> (restricted to *-side) or <length-percentage>
• a circle gradient shape could be specified with one <radial-extent> or <length>
• ellipse() could be specified with two <radial-extent>s (restricted to *-side) or <length-percentage>s
• a ellipse gradient shape could be specified with one <radial-extent> or two <length-percentage>s

Now:

• circle() and circle gradient shape can be specified with one <radial-extent> or <length-percentage>
• ellipse() and ellipse gradient shape can be specified with one or two <radial-extent>s or <lenth-percentage>s (possibly mixed, cf. #9729)

Now for ellipse() and ellipse gradient shape, reading #824, it is not clear whether accepting a single component value was intentional, what the default value (if any) of the second component value and the shortest serialization should be when omitted.

I suspect it should default to the first component value, except when the first is *-corner.

Since a single <length> (or <percentage>, presumably) indicates a circle gradient shape, how would you serialize ellipse 1px or ellipse 1px 1px:

1. ellipse 1px
2. 1px 1px

Or maybe it is fine to serialize 1px? Would it mean that ellipse(1px) should serialize as circle(1px)?

[romainmenke]

FWIW I am now using:

<radial-size> = <radial-extent>{1,2} | <length [0,∞]> | <length-percentage [0,∞]>{2}

circle() = circle( [ <radial-extent> | <length-percentage [0,∞]> ]? [ at <position> ]? )