Description
In CSS Images 3, a non-normative note restricts the syntax of radial-gradient()
: ellipse
can be used only with a single <radial-extent>
keyword or two <length-percentage>
s. In prose, this restriction is not very clear: one may think it could use a single <length>
, but browsers actually do not allow this, and implements the syntax defined in the non-normative note.
CSS Images 4 now seems to allow using two <radial-extent>
keywords or a single <length-percentage>
for an elliptical radial-gradient()
or for ellipse()
(CSS Shapes).
Is this an oversight? If so, I suggest to hardcode these restrictions in the syntax:
<circle()> = circle( <radial-size>? [ at <position> ]?)
<ellipse()> = ellipse( [ <radial-size>{2} ]? [ at <position> ]?)>
<radial-gradient-syntax> = <radial-shape>? [ at <position> ]? , <color-stop-list>
<radial-shape> = [ circle || <radial-size> ] | [ ellipse || <radial-size>{2} ]
<radial-size> = <radial-extent> | <length-percentage [0,∞]>
If this is deliberate, can you please clarify how to serialize ellipse 1px
, assuming the second component value should default to farthest-corner
? Should it be ellipse 1px
or 1px farthest-corner
?
Specified | Serialized |
---|---|
farthest-corner |
omitted |
farthest-corner farthest-corner |
omitted |
closest-corner |
closest-corner |
closest-corner closest-corner |
closest-corner closest-corner |
closest-corner farthest-corner |
closest-corner |
circle |
circle |
circle 1px |
1px |
circle closest-corner |
circle closest-corner |
circle farthest-corner |
circle |
ellipse |
omitted |
ellipse 1px |
? |
ellipse 1px 1px |
1px 1px |
Edit: updated the default value of the second component value, which I think should be farthest-corner
instead of the first component.