Allow <<position>>

Author: noamr

css-shapes-2/Overview.bs

@@ -170,13 +170,12 @@ Supported Shapes</h3>
 			</ul>
 		<dt>
 			<pre class=prod>
-				<dfn>shape()</dfn> = shape( [<<fill-rule>>]? from <<coordinate-pair>>, <<draw-command>>#)
+				<dfn>shape()</dfn> = shape( [<<fill-rule>>]? from <<position>>, <<draw-command>>#)
 			</pre>
 		<dd dfn-type=value dfn-for="shape()">
 			<ul>
 				<li>
-					The <<coordinate-pair>> represents the starting point for the first draw-command,
-					in physical coordinates.
+					The <<position>> represents the starting point for the first draw-command.
 				<li>
 					The sequence of <dfn><<draw-command>></dfn>s represent commands of an
 					<a href="https://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path</a>.
@@ -187,41 +186,55 @@ Supported Shapes</h3>
 
 	<dl>
 		<dt><dfn><<coordinate-pair>></dfn> = <<length-percentage>>{2}
-		<dd>Defines a pair of coordinates x & y.
-
-		<dt><dfn><<draw-command>></dfn> = <<move-command>> | <<line-command>> | <<hv-line-command>> |
-			<<curve-command>> | <<smooth-command>> | <<arc-command>> | close
 		<dd>
-			Defines a single draw command, equivalent to an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation">SVG draw command</a>.
-		<dt><dfn><<by-to>></dfn> = by | to
+			Defines a pair of coordinates x & y.
+		<dt><dfn><<target-position>></dfn> = by <<coordinate-pair>> | to <<position>>
 		<dd>
-			Represents the reference from which offsets are computed in <<draw-command>>s.
+			Defines the end coordinates of a shape command.
 			When ''to'' is present, the coordinates are relative to the top-left origin of the reference box.
 			Otherwise ''by'' is present, the coordinates are relative to the end position of the previous command.
 
 			Note:
 			<<percentage>> values are always computed relative to the reference box regardless of how offsets are computed.
+
+		<dt><dfn><<target-length-percentage>></dfn> = by <<coordinate-pair>> | to <<position>>
+		<dd>
+			Represents the reference from which offsets are computed in <<draw-command>>s.
+		<dt><dfn><<draw-command>></dfn> = <<move-command>> | <<line-command>> | <<hline-command>> |
+			<<vline-command>> | <<curve-command>> | <<smooth-command>> | <<arc-command>> | close
 		<dd>
+			Defines a single draw command, equivalent to an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation">SVG draw command</a>.
 
-		<dt><dfn><<move-command>></dfn> = move <<by-to>> <<coordinate-pair>>
+		<dt><dfn><<move-command>></dfn> = move <<target-position>>
 		<dd>
 			Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands">moveto</a> command.
-		<dt><dfn><<line-command>></dfn> = line <<by-to>> <<coordinate-pair>>
+		<dt><dfn><<line-command>></dfn> = line <<target-position>>
 		<dd>
 			Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
 			If '''x''' or '''y''' are present instead of a <<length-percentage>>, the line will be horizontal or vertical, respectively.
-		<dt><dfn><<hv-line-command>></dfn> = [hline | vline] <<by-to>> <<length-percentage>>
+		<dt><dfn><<hline-command>></dfn> = hline [[by <<length-percentage>>] | [to [<<length-percentage>> | left | center | right]]]
+		<dd>
+			Corresponds to a horizontal or <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
+
+			The coordinates are computed in the same manner as <<target-position>>.
+		<dt><dfn><<vline-command>></dfn> = vline [[by <<length-percentage>>] | [to [<<length-percentage>> | top | center | bottom]]]
 		<dd>
-			Corresponds to a horizontal or vertical <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
-			<dt><dfn><<curve-command>></dfn> = curve <<by-to>> <<coordinate-pair>> via <<coordinate-pair>>{1,2}
+			Corresponds to a vertical <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
+
+			The coordinates are computed in the same manner as <<target-position>>.
+		<dt><dfn><<curve-command>></dfn> = curve [[to <<position>> via <<position>>{1,2}] | [by <<coordinate-pair>> via <<coordinate-pair>>{1, 2}]]
 		<dd>
-			Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">quadratic curve</a> command if one <<coordinate-pair>> is provided,
+			Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">quadratic curve</a> command if one set of coordinats is provided,
 			otherwise corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands">cubic curve</a> command.
-		<dt><dfn><<smooth-command>></dfn> = smooth <<by-to>> <<coordinate-pair>> [via <<coordinate-pair>>]?
+
+			The coordinates are computed in the same manner as <<target-position>>.
+		<dt><dfn><<smooth-command>></dfn> = smooth [[to <<position>> [via <<position>>]?] | [[by <<coordinate-pair>> [via <<coordinate-pair>>]?]]
 		<dd>
 			Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands">smooth cubic curve</a> command if a second <<coordinate-pair>> is provided,
 			otherwise corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">smooth quadratic curve</a> command.
-		<dt><dfn><<arc-command>></dfn> = arc [<<by-to>> <<coordinate-pair>> <<arc-radius>> || <<arc-sweep>> || <<arc-large>> || <<angle>>]
+
+			The coordinates are computed in the same manner as <<target-position>>.
+		<dt><dfn><<arc-command>></dfn> = arc [<<target-position>> ||  <<arc-radius>> || <<arc-sweep>> || <<arc-large>> || <<angle>>]
 		<dd>
 			Corresponds to an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">arc</a> command.
 		<dt><dfn><<arc-radius>></dfn> = of <<length-percentage>>{1, 2}