[css-shapes-1] Rebase ellipse()/circle() definitions on top of <radial-size> from Images, per #824

Author: tabatkins

css-shapes-1/Overview.bs

@@ -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>> ]?
 		)
 
@@ -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 
@@ -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>
@@ -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>