csswg-drafts icon indicating copy to clipboard operation
csswg-drafts copied to clipboard

[css-images-4][css-shapes-1] Allow mixing `<radial-extent>` and `<length-percentage>` in `<radial-size>`

Open cdoublev opened this issue 2 years ago • 1 comments

Two <radial-extent> keywords can now be specified for ellipse() or an elliptical radial-gradient(), thanks to https://github.com/w3c/csswg-drafts/commit/351600a57424296b9616cb701dd95d4533e4b638.

For example, radial-gradient(farthest-corner closest-side, yellow, magenta) is now valid.

This was proposed in #824 but @astearns also suggested a syntax that allows mixing <radial-extent> and <length-percentage>.

For example, radial-gradient(farthest-corner 100%, yellow, magenta) would be valid.

But the current syntax does not allow it:

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

Is this an oversight or is there a reason to not use [ <radial-extent> | <length-percentage [0,∞]> ]{1,2}?

cdoublev avatar Dec 20 '23 10:12 cdoublev

To add to this, mixing is required to maintain backwards compatibility with the syntax of ellipse() as it existed before b3f7bc6:

<ellipse()> = ellipse(
	<shape-radius>{2}?
	[ at <position> ]?
)

<shape-radius> = <length-percentage [0,∞]> | closest-side | farthest-side

Calme1709 avatar Dec 10 '25 23:12 Calme1709