From 30027548290212fd1e4225ba18ce27f8c92e6b79 Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noam@webkit.org>
Date: Tue, 10 Nov 2020 15:13:33 +0200
Subject: [PATCH 01/10] Add a draw() shape syntax, which accepts shape-segments
 equivalent to SVG path segments.

Fixes #5674
---
 css-shapes-2/Overview.bs | 68 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index 7754e70e087..da942d91015 100644
--- a/css-shapes-2/Overview.bs
+++ b/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">

From 7998c5e85c90c26f708ac59ce0fc38c0d6e76a39 Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noam@webkit.org>
Date: Tue, 10 Nov 2020 19:04:04 +0200
Subject: [PATCH 02/10] Move to css-shapes-2

---
 css-shapes-2/Overview.bs | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index da942d91015..a0bd54f52fc 100644
--- a/css-shapes-2/Overview.bs
+++ b/css-shapes-2/Overview.bs
@@ -140,19 +140,6 @@ 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>> )
@@ -179,6 +166,18 @@ Supported Shapes</h3>
 					in the path string.
 					For the initial direction follow SVG 1.1.
 			</ul>
+		<dt>
+			<pre class=prod>
+				<dfn>draw()</dfn> = draw( [<<fill-rule>>,]? from <<coordinate-pair>>, <<draw-command>>#)
+			</pre>
+		<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>
 	</dl>
 	
 	The arguments not defined above are defined as follows:
@@ -187,7 +186,7 @@ Supported Shapes</h3>
 		<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
+			<<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

From d916425a50ab75dfbfcaa7c63613e67681b2c62f Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noam@webkit.org>
Date: Sat, 14 Nov 2020 17:36:40 +0200
Subject: [PATCH 03/10] Amendments

---
 css-shapes-2/Overview.bs | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index a0bd54f52fc..c9c84497579 100644
--- a/css-shapes-2/Overview.bs
+++ b/css-shapes-2/Overview.bs
@@ -185,7 +185,7 @@ Supported Shapes</h3>
 	<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>> | 
+		<dt><dfn><<draw-command>></dfn> = <<move-command>> | <<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>.
@@ -202,32 +202,34 @@ Supported Shapes</h3>
 		<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>>
+		<dt><dfn><<line-command>></dfn> = line <<by-to>> [<<length-percentage>> | x | y] <<length-percentage>>
 		<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.
+			If '''x''' or '''y''' are present instead of a <<length-percentage>>, the line will be horizontal or vertical, respectively.
 		<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,
+			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>> [[radius <<length-percentage>>{1,2}] && <<arc-large>> && <<arc-sweep>> && <<angle>>?]
+		<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, with a given radius, x-axis rotation <<angle>>, ''large'' and ''sweep'' flags.
-		<dt><dfn><<arc-large>></dfn> = [large | small]?
+			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>
-			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.
+			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="">sweep</a> flag is set to 0.
-			If ''cw'' is set, the arc's <a href="">sweep</a> flag is set to 1.
+			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>

From bffdc4644c15805bbcb0198c82d96b10f6a6a270 Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noam@webkit.org>
Date: Sat, 14 Nov 2020 17:39:33 +0200
Subject: [PATCH 04/10] Amendments

---
 css-shapes-2/Overview.bs | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index c9c84497579..a7b0ec98687 100644
--- a/css-shapes-2/Overview.bs
+++ b/css-shapes-2/Overview.bs
@@ -185,7 +185,7 @@ Supported Shapes</h3>
 	<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>> |
+		<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>.
@@ -202,10 +202,13 @@ Supported Shapes</h3>
 		<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>> [<<length-percentage>> | x | y] <<length-percentage>>
+		<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><<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,

From 54bdc2904f6b8e554d0a604fffff5f687511ff59 Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noam@webkit.org>
Date: Tue, 17 Nov 2020 14:40:45 +0200
Subject: [PATCH 05/10] Switched back to shape, and allow logical coordinates

---
 css-shapes-2/Overview.bs | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index a7b0ec98687..3e56d0aeba2 100644
--- a/css-shapes-2/Overview.bs
+++ b/css-shapes-2/Overview.bs
@@ -19,6 +19,8 @@ spec:css-masking-1; type: value
 	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">
@@ -168,12 +170,14 @@ Supported Shapes</h3>
 			</ul>
 		<dt>
 			<pre class=prod>
-				<dfn>draw()</dfn> = draw( [<<fill-rule>>,]? from <<coordinate-pair>>, <<draw-command>>#)
+				<dfn>shape()</dfn> = shape( [<<fill-rule>>,]? [<<corner>>, ]? <<draw-command>>#)
 			</pre>
-		<dd dfn-type=value dfn-for="draw()">
+		<dd dfn-type=value dfn-for="shape()">
 			<ul>
 				<li>
-					The <<coordinate-pair>> represents the initial point of the path.
+					The <<corner>> represents the starting point for the first draw-command, as well as the coordinate system
+					to use for all the draw commands.
+					Default value when omittted is '''left top'''.
 				<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>.
@@ -185,6 +189,11 @@ Supported Shapes</h3>
 	<dl>
 		<dt><dfn><<coordinate-pair>></dfn> = <<length-percentage>>{2}
 		<dd>Defines a pair of coordinates x & y.
+		<dt><dfn><<shape-origin>></dfn> = [ [left | right] && [top | bottom] ] | [ [inline-start | inline-end] && [block-start | block-end ] ]
+		<dd>
+			Defines the origin point (0, 0) of the shape's coordinate system. All coordinates in the shape will be computed relatively
+			to the specified point, based on the <a>writing mode</a> of the element's <a>containing block</a>.
+
 		<dt><dfn><<draw-command>></dfn> = <<move-command>> | <<line-command>> | <<hv-line-command>> |
 			<<curve-command>> | <<smooth-command>> | <<arc-command>> | close
 		<dd>
@@ -206,10 +215,10 @@ Supported Shapes</h3>
 		<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><<line-command>></dfn> = [hline | vline] <<by-to>> <<length-percentage>>
+		<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}
+	n		<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.

From d48d769c0389848aa08743c3c10743cbdceee35a Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noam@webkit.org>
Date: Wed, 2 Dec 2020 12:25:28 +0200
Subject: [PATCH 06/10] Ditch logical coordinates for now

---
 css-shapes-2/Overview.bs | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index 3e56d0aeba2..b7afcd52bdc 100644
--- a/css-shapes-2/Overview.bs
+++ b/css-shapes-2/Overview.bs
@@ -170,14 +170,13 @@ Supported Shapes</h3>
 			</ul>
 		<dt>
 			<pre class=prod>
-				<dfn>shape()</dfn> = shape( [<<fill-rule>>,]? [<<corner>>, ]? <<draw-command>>#)
+				<dfn>shape()</dfn> = shape( [<<fill-rule>>,]? from <<coordinate-pair>>, <<draw-command>>#)
 			</pre>
 		<dd dfn-type=value dfn-for="shape()">
 			<ul>
 				<li>
-					The <<corner>> represents the starting point for the first draw-command, as well as the coordinate system
-					to use for all the draw commands.
-					Default value when omittted is '''left top'''.
+					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>.
@@ -189,10 +188,6 @@ Supported Shapes</h3>
 	<dl>
 		<dt><dfn><<coordinate-pair>></dfn> = <<length-percentage>>{2}
 		<dd>Defines a pair of coordinates x & y.
-		<dt><dfn><<shape-origin>></dfn> = [ [left | right] && [top | bottom] ] | [ [inline-start | inline-end] && [block-start | block-end ] ]
-		<dd>
-			Defines the origin point (0, 0) of the shape's coordinate system. All coordinates in the shape will be computed relatively
-			to the specified point, based on the <a>writing mode</a> of the element's <a>containing block</a>.
 
 		<dt><dfn><<draw-command>></dfn> = <<move-command>> | <<line-command>> | <<hv-line-command>> |
 			<<curve-command>> | <<smooth-command>> | <<arc-command>> | close
@@ -218,7 +213,7 @@ Supported Shapes</h3>
 		<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.
-	n		<dt><dfn><<curve-command>></dfn> = curve <<by-to>> <<coordinate-pair>> via <<coordinate-pair>>{1,2}
+			<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.

From 2e8b244bd4b19eafaef356a3f9e701de7771a49b Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noam@webkit.org>
Date: Wed, 2 Dec 2020 13:37:24 +0200
Subject: [PATCH 07/10] Make arc parameters order independent

---
 css-shapes-2/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index b7afcd52bdc..875f8b81e2e 100644
--- a/css-shapes-2/Overview.bs
+++ b/css-shapes-2/Overview.bs
@@ -221,7 +221,7 @@ Supported Shapes</h3>
 		<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>>?
+		<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}

From 5f4b6d56a5adb5966dceaac55b4c9278437c8c54 Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noam@webkit.org>
Date: Wed, 9 Dec 2020 18:43:58 +0200
Subject: [PATCH 08/10] Minor spec changes

---
 css-shapes-2/Overview.bs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index 875f8b81e2e..91b8cdd852e 100644
--- a/css-shapes-2/Overview.bs
+++ b/css-shapes-2/Overview.bs
@@ -170,7 +170,7 @@ Supported Shapes</h3>
 			</ul>
 		<dt>
 			<pre class=prod>
-				<dfn>shape()</dfn> = shape( [<<fill-rule>>,]? from <<coordinate-pair>>, <<draw-command>>#)
+				<dfn>shape()</dfn> = shape( [<<fill-rule>>]? from <<coordinate-pair>>, <<draw-command>>#)
 			</pre>
 		<dd dfn-type=value dfn-for="shape()">
 			<ul>
@@ -221,7 +221,7 @@ Supported Shapes</h3>
 		<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>>]
+		<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}

From ec435e7a7fce6b943ce088a43d2ef95a0b9cce0e Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noam@webkit.org>
Date: Wed, 9 Dec 2020 20:43:59 +0200
Subject: [PATCH 09/10] Allow <<position>>

---
 css-shapes-2/Overview.bs | 49 +++++++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index 91b8cdd852e..ef142b15821 100644
--- a/css-shapes-2/Overview.bs
+++ b/css-shapes-2/Overview.bs
@@ -170,13 +170,12 @@ Supported Shapes</h3>
 			</ul>
 		<dt>
 			<pre class=prod>
-				<dfn>shape()</dfn> = shape( [<<fill-rule>>]? from <<coordinate-pair>>, <<draw-command>>#)
+				<dfn>shape()</dfn> = shape( [<<fill-rule>>]? from <<position>>, <<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.
+					The <<position>> represents the starting point for the first draw-command.
 				<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>.
@@ -187,41 +186,55 @@ Supported Shapes</h3>
 
 	<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
+			Defines a pair of coordinates x & y.
+		<dt><dfn><<target-position>></dfn> = by <<coordinate-pair>> | to <<position>>
 		<dd>
-			Represents the reference from which offsets are computed in <<draw-command>>s.
+			Defines the end coordinates of a shape command.
 			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.
+
+		<dt><dfn><<target-length-percentage>></dfn> = by <<coordinate-pair>> | to <<position>>
+		<dd>
+			Represents the reference from which offsets are computed in <<draw-command>>s.
+		<dt><dfn><<draw-command>></dfn> = <<move-command>> | <<line-command>> | <<hline-command>> |
+			<<vline-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><<move-command>></dfn> = move <<by-to>> <<coordinate-pair>>
+		<dt><dfn><<move-command>></dfn> = move <<target-position>>
 		<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>>
+		<dt><dfn><<line-command>></dfn> = line <<target-position>>
 		<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>>
+		<dt><dfn><<hline-command>></dfn> = hline [[by <<length-percentage>>] | [to [<<length-percentage>> | left | center | right]]]
+		<dd>
+			Corresponds to a horizontal or <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
+
+			The coordinates are computed in the same manner as <<target-position>>.
+		<dt><dfn><<vline-command>></dfn> = vline [[by <<length-percentage>>] | [to [<<length-percentage>> | top | center | bottom]]]
 		<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}
+			Corresponds to a vertical <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
+
+			The coordinates are computed in the same manner as <<target-position>>.
+		<dt><dfn><<curve-command>></dfn> = curve [[to <<position>> via <<position>>{1,2}] | [by <<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,
+			Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">quadratic curve</a> command if one set of coordinats 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>>]?
+
+			The coordinates are computed in the same manner as <<target-position>>.
+		<dt><dfn><<smooth-command>></dfn> = smooth [[to <<position>> [via <<position>>]?] | [[by <<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>>]
+
+			The coordinates are computed in the same manner as <<target-position>>.
+		<dt><dfn><<arc-command>></dfn> = arc [<<target-position>> ||  <<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}

From e2a14d6fc08c123925775b41de8571e1fa8741b3 Mon Sep 17 00:00:00 2001
From: Noam Rosenthal <noam@webkit.org>
Date: Sat, 12 Dec 2020 18:28:10 +0200
Subject: [PATCH 10/10] Revert "Allow <<position>>"

This reverts commit ec435e7a7fce6b943ce088a43d2ef95a0b9cce0e.
---
 css-shapes-2/Overview.bs | 49 +++++++++++++++-------------------------
 1 file changed, 18 insertions(+), 31 deletions(-)

diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index ef142b15821..91b8cdd852e 100644
--- a/css-shapes-2/Overview.bs
+++ b/css-shapes-2/Overview.bs
@@ -170,12 +170,13 @@ Supported Shapes</h3>
 			</ul>
 		<dt>
 			<pre class=prod>
-				<dfn>shape()</dfn> = shape( [<<fill-rule>>]? from <<position>>, <<draw-command>>#)
+				<dfn>shape()</dfn> = shape( [<<fill-rule>>]? from <<coordinate-pair>>, <<draw-command>>#)
 			</pre>
 		<dd dfn-type=value dfn-for="shape()">
 			<ul>
 				<li>
-					The <<position>> represents the starting point for the first draw-command.
+					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>.
@@ -186,55 +187,41 @@ Supported Shapes</h3>
 
 	<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 pair of coordinates x & y.
-		<dt><dfn><<target-position>></dfn> = by <<coordinate-pair>> | to <<position>>
+			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>
-			Defines the end coordinates of a shape command.
+			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.
-
-		<dt><dfn><<target-length-percentage>></dfn> = by <<coordinate-pair>> | to <<position>>
-		<dd>
-			Represents the reference from which offsets are computed in <<draw-command>>s.
-		<dt><dfn><<draw-command>></dfn> = <<move-command>> | <<line-command>> | <<hline-command>> |
-			<<vline-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><<move-command>></dfn> = move <<target-position>>
+		<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 <<target-position>>
+		<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><<hline-command>></dfn> = hline [[by <<length-percentage>>] | [to [<<length-percentage>> | left | center | right]]]
-		<dd>
-			Corresponds to a horizontal or <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
-
-			The coordinates are computed in the same manner as <<target-position>>.
-		<dt><dfn><<vline-command>></dfn> = vline [[by <<length-percentage>>] | [to [<<length-percentage>> | top | center | bottom]]]
+		<dt><dfn><<hv-line-command>></dfn> = [hline | vline] <<by-to>> <<length-percentage>>
 		<dd>
-			Corresponds to a vertical <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
-
-			The coordinates are computed in the same manner as <<target-position>>.
-		<dt><dfn><<curve-command>></dfn> = curve [[to <<position>> via <<position>>{1,2}] | [by <<coordinate-pair>> via <<coordinate-pair>>{1, 2}]]
+			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 set of coordinats is provided,
+			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.
-
-			The coordinates are computed in the same manner as <<target-position>>.
-		<dt><dfn><<smooth-command>></dfn> = smooth [[to <<position>> [via <<position>>]?] | [[by <<coordinate-pair>> [via <<coordinate-pair>>]?]]
+		<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.
-
-			The coordinates are computed in the same manner as <<target-position>>.
-		<dt><dfn><<arc-command>></dfn> = arc [<<target-position>> ||  <<arc-radius>> || <<arc-sweep>> || <<arc-large>> || <<angle>>]
+		<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}