[css-shapes-2]: shape(): using instead of via, allow any order in a…

…rcs/curves

Closes w3c#5841

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,