Add a draw() shape syntax, which accepts shape-segments equivalent to

SVG path segments.

Fixes #5674

Author: noamr

css-shapes-2/Overview.bs

@@ -18,6 +18,7 @@ spec:css-masking-1; type: value
 	text: nonzero
 	text: evenodd
 spec:css-shapes-1; type:property; text:shape-margin
+spec:css-shapes-2; type:type; text:<uri>
 </pre>
 
 <style type="text/css">
@@ -139,6 +140,19 @@ Supported Shapes</h3>
 	section, with the following integrated.
 
 	<dl>
+		<dt>
+			<pre class=prod>
+				<dfn>draw()</dfn> = draw( [<<fill-rule>>,]? from <<coordinate-pair>>, <<draw-command>>#])
+			</pre>
+		</dt>
+		<dd dfn-type=value dfn-for="draw()">
+			<ul>
+				<li>
+					The <<coordinate-pair>> represents the initial point of the path.
+				<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>.
+			</ul>
 		<dt>
 			<pre class=prod>
 				<dfn>path()</dfn> = path( [<<fill-rule>>,]? <<string>> )
@@ -166,6 +180,60 @@ Supported Shapes</h3>
 					For the initial direction follow SVG 1.1.
 			</ul>
 	</dl>
+	
+	The arguments not defined above are defined as follows:
+
+	<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>> | <<perpendicular-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
+		<dd>
+			Represents the reference from which offsets are computed in <<draw-command>>s.
+			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.
+		<dd>
+
+		<dt><dfn><<move-command>></dfn> = move <<by-to>> <<coordinate-pair>>
+		<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>>
+		<dd>
+			Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
+		<dt><dfn><<perpendicular-line-command>></dfn> = [horizontal|vertical] <<by-to>> <<length-percentage>>
+		<dd>
+			Corresponds to a horizontal or vertical <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineo</a> command.
+		<dt><dfn><<curve-command>></dfn> = curve <<by-to>> <<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,
+			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>>]?
+		<dd>
+			Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands">smooth cubic curve</a> command if a <<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>> [[radius <<length-percentage>>{1,2}] && <<arc-large>> && <<arc-sweep>> && <<angle>>?]
+		<dd>
+			Corresponds to an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">arc</a> command, with a given radius, x-axis rotation <<angle>>, ''large'' and ''sweep'' flags.
+		<dt><dfn><<arc-large>></dfn> = [large | small]?
+		<dd>
+			If ''small'' is set, the arc's <a href="">large</a> flag is set to 0.
+			If ''large'' is set, the arc's <a href="">large</a> flag is set to 1.
+			If it is not set, the automatic value is used.
+		<dt><dfn><<arc-sweep>></dfn> = [cw | ccw]?
+		<dd>
+			If ''ccw'' is set, the arc's <a href="">sweep</a> flag is set to 0.
+			If ''cw'' is set, the arc's <a href="">sweep</a> flag is set to 1.
+			If it is not set, the automatic value is used.
+		<dt>close
+		<dd>
+			Corrsepponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand">closepath</a> command.
+	</dl>
 
 	<div class="issue-marker wrapper">
 		<div class="issue-marker" data-bug_id="16448" data-bug_status="ASSIGNED">