[css-shapes-1] Move the grammar definitions of basic-shapes into a <pre class=prod>

Author: tabatkins

css-shapes-1/Overview.bs

@@ -322,16 +322,48 @@ Basic Shapes</h2>
 <h3 id="supported-basic-shapes">
 Supported Shapes</h3>
 
-	The following shapes are supported.
-	All <<basic-shape>> values use
-	<a href="https://www.w3.org/TR/css3-values/#functional-notation">functional notation</a>
-	and are defined here using the
-	<a href="https://www.w3.org/TR/css3-values/#value-defs">Value Definition Syntax</a>.
+	The <<basic-shape>> functions are:
+
+	<pre class=prod>
+		<<inset()>> = inset(
+			<<length-percentage>>{1,4}
+			[ round <<'border-radius'>> ]?
+		)
+
+		<<xywh()>> = xywh(
+			<<length-percentage>>{2} <<length-percentage [0, ∞]>>{2}
+			[ round <<'border-radius'>> ]?
+		)
+
+		<<rect()>> = rect(
+			[ <<length-percentage>> | auto ]{4}
+			[ round <<'border-radius'>> ]?
+		)
+
+		<<circle()>> = circle(
+			<<shape-radius>>?
+			[ at <<position>> ]?
+		)
+
+		<<ellipse()>> = ellipse(
+			<<shape-radius>>{2}?
+			[ at <<position>> ]?
+		)
+
+		<<polygon()>> = polygon(
+			<<'fill-rule'>>? ,
+			[<<length-percentage>> <<length-percentage>>]#
+		)
+
+		<<path()>> = path(
+			<<'fill-rule'>>? ,
+			<<string>>
+		)
+	</pre>
+
 
 	<dl dfn-for="<basic-shape>">
-		<dt><dfn>inset()</dfn> =
-			inset( <<length-percentage>>{1,4} [ round <<'border-radius'>> ]? )
-		</dt>
+		<dt><dfn>inset()</dfn>
 		<dd>
 			Defines an inset rectangle
 			via insets from each edge of the [=reference box=].
@@ -364,8 +396,7 @@ Supported Shapes</h3>
 			define rounded corners for the rectangle
 			using the 'border-radius' shorthand syntax.
 
-		<dt><dfn>xywh()</dfn> =
-			xywh( <<length-percentage>>{2} <<length-percentage [0, ∞]>>{2} [ round <<'border-radius'>> ]? )
+		<dt><dfn>xywh()</dfn>
 		<dd>
 			Defines a rectangle
 			via offsets from the top and left edge of the [=reference box=],
@@ -385,7 +416,6 @@ Supported Shapes</h3>
 			using the 'border-radius' shorthand syntax.
 
 		<dt><dfn>rect()</dfn> =
-			rect( [ <<length-percentage>> | auto ]{4} [ round <<'border-radius'>> ]? )
 		<dd>
 			Defines a rectangle
 			via insets from the top and left edges of the [=reference box=].
@@ -425,9 +455,7 @@ Supported Shapes</h3>
 			define rounded corners for the rectangle
 			using the 'border-radius' shorthand syntax.)
 
-		<dt><dfn>circle()</dfn> =
-			circle( <<shape-radius>>? [ at <<position>> ]? )
-		</dt>
+		<dt><dfn>circle()</dfn>
 		<dd>
 			<ul>
 				<li>
@@ -447,10 +475,8 @@ Supported Shapes</h3>
 					this defaults to <css>center</css> if omitted.
 				</li>
 			</ul>
-		</dd>
-		<dt><dfn>ellipse()</dfn> =
-			ellipse( [ <<shape-radius>>{2} ]? [ at <<position>> ]? )
-		</dt>
+
+		<dt><dfn>ellipse()</dfn>
 		<dd>
 			<ul>
 				<li>
@@ -473,10 +499,8 @@ Supported Shapes</h3>
 					this defaults to <css>center</css> if omitted.
 				</li>
 			</ul>
-		</dd>
-		<dt><dfn>polygon()</dfn> =
-			polygon( <<'fill-rule'>>? , [<<length-percentage>> <<length-percentage>>]# )
-		</dt>
+
+		<dt><dfn>polygon()</dfn>
 		<dd>
 			<ul>
 				<li>
@@ -499,9 +523,7 @@ Supported Shapes</h3>
 			by connecting the last vertex
 			with the first vertex of the list.
 
-		</dd>
-		<dt><dfn>path()</dfn> = 
-			path( <<'fill-rule'>>? , <<string>> )
+		<dt><dfn>path()</dfn>
 		</dt>
 		<dd dfn-type=value dfn-for="path()">
 			<ul>