[css-shapes] ellipse with single <shape-radius>

[ewilligers]

The ellipse shape used by clip-path, shape-outside, offset-path is defined to accept <shape-radius>{2}, i.e. two <shape-radius> values.

However, Safari also accepts a single <shape-radius> for shape-outside, and Blink also accepts a single <shape-radius> for clip-path and shape-outside.

[ewilligers]

I just noticed

<shape-radius> = ...
... If omitted it defaults to closest-side.

This may be the justification for accepting one radius value, but I suspect

ellipse( <shape-radius>{1,2}? [ at <position> ]? ) would be clearer.

[fantasai]

@ewilligers If we're using the “If omitted it defaults to closest-side” clause to justify the singe <shape-radius> case, then it would mean a single <shape-radius> expands to that in one axis and closest-side in the other. Then it's unspecified which side, but also it's inconsistent with how CSS works, where an omitted second value is doubled.

So clearly something needs to be fixed in the spec here! What's the implemented behavior so far? :)

[ewilligers]

Both Blink and Webkit treat ellipse(20% at 30% 40%) as ellipse(20% closest-side at 30% 40%). Further, they serialize each as ellipse(20% at 30% 40%).

Edge and Firefox don't support basic shapes.

[upsuper]

Edge and Firefox don't support basic shapes.

Firefox supports basic shapes in clip-path, and shape-outside is currently behind pref layout.css.shape-outside.enabled because there are still something not fully implemented.

[svgeesus]

I suspect ellipse( <shape-radius>{1,2}? [ at <position> ]? ) would be clearer.
I agree, that makes it clear that either one or two radii can be specified.

However, it is still odd that ellipse(20% closest-side ...) has a handy shortcut while ellipse(closest-side 20% ...) does not.

[AmeliaBR]

As a CSS author, I would expect that ellipse(50px at center) would expand to ellipse(50px 50px at center).

If the Blink/WebKit behavior is adopted instead, I definitely don't think that the serialization should drop closest-side when specified as the second radius value.

[svgeesus]

As a CSS author, I would expect that ellipse(50px at center) would expand to ellipse(50px 50px at center).

To be honest that is what I would expect, also.

[smfr]

https://bugs.webkit.org/show_bug.cgi?id=181745