Skip to content

Commit

Permalink
[css-shapes-1] Rebase ellipse()/circle() definitions on top of <radia…
Browse files Browse the repository at this point in the history 
…l-size> from Images, per #824
  • Loading branch information
@tabatkins @astearns
tabatkins authored and astearns committed Dec 19, 2023
1 parent 04ae970 commit b3f7bc6
Showing 1 changed file with 49 additions and 121 deletions.
170 changes: 49 additions & 121 deletions css-shapes-1/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,13 +340,15 @@ Supported Shapes</h3>
[ round <<'border-radius'>> ]?
)
<dfn>&lt;basic-shape-rect></dfn> = <<inset()>> | <<rect()>> | <<xywh()>>
<<circle()>> = circle(
<<shape-radius>>?
<<radial-size>>?
[ at <<position>> ]?
)
<<ellipse()>> = ellipse(
<<shape-radius>>{2}?
<<radial-size>>?
[ at <<position>> ]?
)
Expand Down Expand Up @@ -457,98 +459,62 @@ Supported Shapes</h3>

<dt><dfn>circle()</dfn>
<dd>
<ul>
<li>
The shape-radius argument represents
<strong>r</strong>, the radius
of the circle.
Negative values are invalid.
A percentage value here
is resolved from the used width and height
of the <a>reference box</a> as <br>
<code>sqrt(<em>width</em><sup>2</sup>+<em>height</em><sup>2</sup>)/sqrt(2)</code>.
</li>
<li>
The <<position>> argument defines
the center of the circle.
Unless otherwise specified,
this defaults to <css>center</css> if omitted.
</li>
</ul>
* The <<radial-size>> argument defines
the circle's radius.
Rather than referring to the [=gradient box=],
values are resolved against the [=<basic-shape>/reference box=].

* Two <<length-percentage>> values are invalid.

The <<position>> argument defines
the center of the circle.
Unless otherwise specified,
this defaults to <css>center</css> if omitted.

<dt><dfn>ellipse()</dfn>
<dd>
<ul>
<li>
The shape-radius arguments represent
<strong>rx</strong> and
<strong>ry</strong>,
the x-axis and y-axis radii
of the ellipse,
in that order.
Negative values for either radius are invalid.
Percentage values here are resolved
against the used width (for the rx value)
and the used height (for the ry value)
of the reference box.
</li>
<li>
The <<position>> argument defines
the center of the ellipse.
Unless otherwise specified,
this defaults to <css>center</css> if omitted.
</li>
</ul>
* The <<radial-size>> argument defines
the horizontal and vertical radiuses of the ellipse.
Rather than referring to the [=gradient box=],
values are resolved against the [=<basic-shape>/reference box=].

* The <<position>> argument defines
the center of the ellipse.
Unless otherwise specified,
this defaults to <css>center</css> if omitted.

<dt><dfn>polygon()</dfn>
<dd>
<ul>
<li>
<<'fill-rule'>> -
The filling rule used
to determine the interior
of the polygon.
See <a href="https://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a> property
in SVG for details.
Possible values are ''nonzero''
or ''evenodd''.
Default value when omitted is ''nonzero''.</li>
<li>
Each pair argument in the list represents <strong>x<sub>i</sub></strong> and <strong>y<sub>i</sub></strong> -
the <strong>x</strong> and <strong>y</strong> axis coordinates of the i-th vertex of the polygon.
</li>
</ul>
* The <<'fill-rule'>> specifies the filling rule used
to determine the interior
Defaults to ''nonzero'' if omitted.

* Each <<length-percentage>> pair
specifies a vertex of the polygon,
as a horizontal and vertical offset
from the left and top edges of the [=<basic-shape>/reference box=].

The UA must close a polygon
by connecting the last vertex
with the first vertex of the list.

<dt><dfn>path()</dfn>
</dt>
<dd dfn-type=value dfn-for="path()">
<ul>
<li>
<<'fill-rule'>> -
The filling rule used
to determine the interior
of the path.
See <a href="https://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a> property
in SVG for details.
Possible values are ''nonzero''
or ''evenodd''.
Default value when omitted is ''nonzero''.
<li>
The <dfn><<string>></dfn> represents an
<a href="https://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path data string</a>.
A path data string that does not conform to the
to the grammar and parsing rules of SVG 1.1,
or that does conform but defines an empty path,
is [=invalid=] and causes the entire ''path()'' to be [=invalid=].
The initial position is defined
by the first “move to” argument
in the path string.
For the initial direction follow SVG 1.1.
</ul>
* The <<'fill-rule'>> specifies the filling rule used
to determine the interior
Defaults to ''nonzero'' if omitted.

* The <<string>> represents an
<a href="https://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path data string</a>.
A path data string that does not conform to the
to the grammar and parsing rules of SVG 1.1,
or that does conform but defines an empty path,
is [=invalid=] and causes the entire ''path()'' to be [=invalid=].

The initial position is defined
by the first “move to” argument
in the path string.
For the initial direction follow SVG 1.1.

The UA must close a path
with an implicit
Expand All @@ -558,44 +524,6 @@ Supported Shapes</h3>
(such as 'shape-outside' and 'clip-path').
</dl>

The arguments not defined above are defined as follows:

<dl>
<dt><dfn><<shape-radius>></dfn> = <<length-percentage [0,∞]>> | closest-side | farthest-side
<dd>
Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.
<ul>
<li>
<dfn>closest-side</dfn>
uses the length from the center
of the shape to the closest side
of the <a>reference box</a>.
For circles,
this is the closest side
in any dimension.
For ellipses,
this is the closest side
in the radius dimension.
<li>
<dfn>farthest-side</dfn>
uses the length from the center
of the shape to the farthest side
of the <a>reference box</a>.
For circles,
this is the farthest side
in any dimension.
For ellipses,
this is the farthest side
in the radius dimension.
</ul>
</dl>

Additionally, the three rectangular shape functions
are grouped into a production for convenience:

<pre class=prod>
<dfn>&lt;basic-shape-rect></dfn> = <<inset()>> | <<rect()>> | <<xywh()>>
</pre>

<h3 id='basic-shape-computed-values'>
Computed Values of Basic Shapes</h3>
Expand Down Expand Up @@ -695,8 +623,8 @@ Interpolation of Basic Shapes</h3>
<li>
If both shapes are the same type,
that type is ''ellipse()'' or ''circle()'',
and none of the radii use
the <a href="#closest-side">''closest-side''</a> or <a href="#farthest-side">''farthest-side''</a> keywords,
and the radiuses are specified as <<length-percentage>>
(rather than keywords),
interpolate between each value
in the shape functions.
</li>
Expand Down

0 comments on commit b3f7bc6

Please sign in to comment.