From 6ad3fe976eb5001016c1627ad1810eea6a45ff6f Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noamr@users.noreply.github.com>
Date: Mon, 15 Jan 2024 13:22:41 +0000
Subject: [PATCH] [css-shapes-2]: `shape()`: using instead of via, allow any
 order in arcs/curves

Closes #5841
---
 css-shapes-2/Overview.bs | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index 326c3a73c19..bfa2631bb7e 100644
--- a/css-shapes-2/Overview.bs
+++ b/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,