Skip to content

[css-images-4][css-shapes-1] Elliptical shape defined with a single <length-percentage> #9730

Closed
@cdoublev

Description

@cdoublev

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions