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

SVG path segments.

Fixes #5674

Author: noamr

css-shapes-1/Overview.bs

@@ -449,7 +449,7 @@ Supported Shapes</h3>
 
 		</dd>
 		<dt><dfn>path()</dfn> = 
-			path( [<<'fill-rule'>>,]? <<string>> )
+			path( [<<'fill-rule'>>,]? <<string>>)
 		</dt>
 		<dd dfn-type=value dfn-for="path()">
 			<ul>
@@ -480,11 +480,33 @@ Supported Shapes</h3>
 			if it is not present in the string 
 			for properties that require a closed loop 
 			(such as 'shape-outside' and 'clip-path').
+		<dt><dfn>draw()</dfn> = 
+			draw( [<<'fill-rule'>>,]? from <<coordinate-pair>>, <<draw-segment>>#])
+		</dt>
+		<dd dfn-type=value dfn-for="shape()">
+			<ul>
+				<li>
+					<<'fill-rule'>> -
+					The filling rule used
+					to determine the interior
+					of the path.
+					See <a href="https://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a> property
+					in SVG for details.
+					Possible values are ''nonzero''
+					or ''evenodd''.
+					Default value when omitted is ''nonzero''.
+				<li>
+					The <<coordinate-pair>> represents the initial point of the path.
+				<li>
+					The sequence of <dfn><<draw-segment>></dfn>s represent segments of an <a href="https://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path</a>.
+			</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><<shape-radius>></dfn> = <<length-percentage>> | closest-side | farthest-side
 		<dd>
 			Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.
@@ -512,10 +534,62 @@ Supported Shapes</h3>
 					this is the farthest side
 					in the radius dimension.
 			</ul>
-	</dl>
+		<dt><dfn><<draw-segment>></dfn> = <<move-segment>> | <<line-segment>> | <<perpendicular-line-segment>> | 
+                    					  <<curve-segment>> | <<smooth-segment>> | <<arc-segment>> | close
+		<dd>
+			Defines a single path segment. Every path segment corresponds to an SVG path segment.
+		<dt><dfn><<segment-offset-reference>></dfn> = to | by
+		<dd>
+			Represents the reference from which offsets are computed in <<draw-segment>>s.
+			When ''to'' is present, the coordinates are relative to the top-left origin of the <a>reference box</a>.
+			Otherwise ''by'' is present, the coordinates are relative to the end position of the previous segment.
+
+			Note:
+			<<percentage>> values are always computed relative to the <a>reference box</a>, regardless of how offsets are computed.
+		<dd>
 
-<h3 id='basic-shape-computed-values'>
-Computed Values of Basic Shapes</h3>
+		<dt><dfn><<move-segment>></dfn> = move <<segment-offset-reference>> <<coordinate-pair>>
+		<dd>
+			Corresponds to a <a href="">moveto</a> segment.
+		<dt><dfn><<line-segment>></dfn> = line <<segment-offset-reference>> <<coordinate-pair>>
+		<dd>
+			Corresponds to a <a href="">lineto</a> segment.
+		<dt><dfn><<perpendicular-line-segment>></dfn> = [horizontal|vertical] <<segment-offset-reference>> <<length-percentage>>
+		<dd>
+			Corresponds to a <a href="">horizontal</a> or <a href="">vertical</a> segment.
+		<dt><dfn><<curve-segment>></dfn> = curve <<segment-offset-reference>> <<coordinate-pair>> via <<coordinate-pair>>{1,2}
+		<dd>
+			Corresponds to a <a href="">quadratic curve</a> segment if one <<coordinate-pair>> is provided,
+			otherwise corresponds to a <a href="">cubic curve</a> segment.
+		<dt><dfn><<smooth-segment>></dfn> = smooth <<segment-offset-reference>> <<coordinate-pair>> [via <<coordinate-pair>>]?
+		<dd>
+			Corresponds to a <a href="">smooth cubic curve</a> segment if a <<coordinate-pair>> is provided,
+			otherwise corresponds to a <a href="">smooth quadratic curve</a> segment.
+		<dt><dfn><<arc-segment>></dfn> =  arc <<segment-offset-reference>> <<coordinate-pair>> [[radius <<length-percentage>>{1,2}] && <<arc-large>> && <<arc-sweep>> && <<angle>>?]
+		<dd>
+			Corresponds to an <a href="">arc</a> segment, with a given radius, x-axis rotation <<angle>>, <a href="">large</a> and <a href="">sweep</a> 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="">closepath</a> segment.
+	</dl>
+<h3 id='basic-shape-computed-values'>Closing paths</h3>
+	For ''path()'' and ''draw()'' shapes, the UA must close the derived path 
+	with an implicit closepath command ("z" or "Z") 
+	if it is not present in the path segments or string 
+	for properties that require a closed loop 
+	(such as 'shape-outside' and 'clip-path').
+
+<h3 id='basic-shape-computed-values'>Computed Values of Basic Shapes</h3>
 
 	The values in a <<basic-shape>> function are computed as specified, with these exceptions: