[css-shapes-2] Add a shape() syntax, which accepts shape-segments equ…

…ivalent to SVG path (#5711)
w3c · Jan 7, 2021 · e8404d1 · e8404d1
1 parent f68bcc7
commit e8404d1
Showing 1 changed file with 76 additions and 0 deletions.
diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
@@ -18,6 +18,9 @@ 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>
+spec:css-writing-modes-4; type:concept; text:physical
+spec:css-writing-modes-4; type:concept; text:"writing mode"
 </pre>
 
 <style type="text/css">
@@ -165,6 +168,79 @@ Supported Shapes</h3>
 					in the path string.
 					For the initial direction follow SVG 1.1.
 			</ul>
+		<dt>
+			<pre class=prod>
+				<dfn>shape()</dfn> = shape( [<<fill-rule>>]? from <<coordinate-pair>>, <<draw-command>>#)
+			</pre>
+		<dd dfn-type=value dfn-for="shape()">
+			<ul>
+				<li>
+					The <<coordinate-pair>> represents the starting point for the first draw-command,
+					in physical coordinates.
+				<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>
+	</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>> | <<hv-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.
+			If '''x''' or '''y''' are present instead of a <<length-percentage>>, the line will be horizontal or vertical, respectively.
+		<dt><dfn><<hv-line-command>></dfn> = [hline | vline] <<by-to>> <<length-percentage>>
+		<dd>
+			Corresponds to a horizontal or vertical <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</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 second <<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>> <<arc-radius>> || <<arc-sweep>> || <<arc-large>> || <<angle>>]
+		<dd>
+			Corresponds to an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">arc</a> command.
+		<dt><dfn><<arc-radius>></dfn> = of <<length-percentage>>{1, 2}
+		<dd>
+			Corresponds to the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">radius</a>.
+			If only one <<length-percentage>> is present, that value will be used for both '''rx''' and '''ry'''.
+		<dt><dfn><<arc-sweep>></dfn> = [cw | ccw]?
+		<dd>
+			If ''ccw'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">sweep</a> flag is set to 0.
+			If ''cw'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">sweep</a> flag is set to 1.
+			If it is not set, the automatic value is used.
+		<dt><dfn><<arc-large>></dfn> = [large | small]?
+		<dd>
+			If ''large'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">large</a> flag is set to 1.
+			If ''small'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">large</a> flag is set to 0.
+			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">