[css-shapes-2]: shape(): using instead of via, allow any order in arcs/curves (#9797)

Closes #5841

Author: noamr

css-shapes-2/Overview.bs

@@ -168,10 +168,10 @@ The ''shape()'' Function</h4>
 		<<move-command>> = move <<by-to>> <<coordinate-pair>>
 		<<line-command>> = line <<by-to>> <<coordinate-pair>>
 		<<hv-line-command>> = [hline | vline] <<by-to>> <<length-percentage>>
-		<<curve-command>> = curve <<by-to>> <<coordinate-pair>> via <<coordinate-pair>>{1,2}
-		<<smooth-command>> = smooth <<by-to>> <<coordinate-pair>> [via <<coordinate-pair>>]?
-		<<arc-command>> = arc <<by-to>> <<coordinate-pair>> of <<length-percentage>>{1,2}
-		                    [ <<arc-sweep>> || <<arc-size>> || rotate <<angle>> ]?
+		<<curve-command>> = curve [<<by-to>> <<coordinate-pair>> using <<coordinate-pair>>{1,2}]
+		<<smooth-command>> = smooth [[<<by-to>> <<coordinate-pair>>] || [using <<coordinate-pair>>]?]
+		<<arc-command>> = arc [[<<by-to>> <<coordinate-pair>>] || [of <<length-percentage>>{1,2}] ||
+		                        <<arc-sweep>>? || <<arc-size>>? || [rotate <<angle>>]?]
 		<<arc-sweep>> = cw | ccw
 		<<arc-size>> = large | small
 	</pre>
@@ -227,23 +227,23 @@ The ''shape()'' Function</h4>
 			of the <<coordinate-pair>>,
 			and the other component specified appropriately to make the line horizontal or vertical.
 
-		<dt><dfn><<curve-command>></dfn> = <dfn value>curve</dfn> <<by-to>> <<coordinate-pair>> via <<coordinate-pair>>{1,2}
+		<dt><dfn><<curve-command>></dfn> = <dfn value>curve</dfn> [[<<by-to>> <<coordinate-pair>>] || [using <<coordinate-pair>>{1,2}]]
 		<dd>
 			Adds a Bézier curve command to the list of path data commands,
 			ending at the point specified by the first <<coordinate-pair>>.
 
-			The <css>via</css> component specifies control points for the curve:
+			The <css>using</css> component specifies control points for the curve:
 			if a single <<coordinate-pair>> is provided,
 			the command specifies a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">quadratic curve</a>;
 			if two <<coordinate-pair>>s are provided,
 			it specifies a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands">cubic curve</a>.
 
-		<dt><dfn><<smooth-command>></dfn> = <dfn value>smooth</dfn> <<by-to>> <<coordinate-pair>> [via <<coordinate-pair>>]?
+		<dt><dfn><<smooth-command>></dfn> = <dfn value>smooth</dfn> [[<<by-to>> <<coordinate-pair>>] || [using <<coordinate-pair>>]?]
 		<dd>
 			Adds a smooth Bézier curve command to the list of path data commands,
 			ending at the point specified by the first <<coordinate-pair>>.
 
-			The <css>via</css> component specifies control points for the curve:
+			The <css>using</css> component specifies control points for the curve:
 			if it's omitted,
 			the command specifies a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">smooth quadratic curve</a>;
 			if it's provided,
@@ -258,7 +258,7 @@ The ''shape()'' Function</h4>
 			so the curve appears to smoothly continue from the previous command,
 			rather than possibly making a sudden direction change.
 
-		<dt><dfn><<arc-command>></dfn> = <dfn value>arc</dfn> <<by-to>> <<coordinate-pair>> of <<length-percentage>>{1,2} [ <<arc-sweep>> || <<arc-size>> || rotate <<angle>> ]
+		<dt><dfn><<arc-command>></dfn> = <dfn value>arc</dfn> [[<<by-to>> <<coordinate-pair>>] || [of <<length-percentage>>{1,2}] || <<arc-sweep>>? || <<arc-size>>?|| rotate <<angle>>? ]
 		<dd>
 			Add an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">elliptical arc</a> command
 			to the list of path data commands,