From 8e30b61a77f4c7db0774bf4cd8c2822fd55068a4 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Tue, 6 Sep 2022 23:07:00 +0200
Subject: [PATCH 1/5] [css-backgrounds-4] Added `border-*-radius` shorthands

Defined the page-relative shorthand properties `border-top-radius`, `border-right-radius`, `border-bottom-radius`, and `border-left-radius` and the flow-relative shorthand properties `border-block-start-radius`, `border-block-end-radius`, `border-inline-start-radius`, `border-inline-end-radius`.
---
 css-backgrounds-4/Overview.bs | 65 +++++++++++++++++++++++++++++++++--
 1 file changed, 63 insertions(+), 2 deletions(-)

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index 2fe11932092..36bfd0e85b7 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -242,8 +242,69 @@ Painting Area: the 'background-clip' property</h3>
 <h2 id="corners">
 Corners</h2>
 
-<h3 id=corner-sizing>
-Corner Sizing: the 'border-radius' property</h3>
+<h3 id="corner-sizing">
+Corner Sizing: the 'border-radius' and 'border-*-radius' shorthand properties</h3>
+
+<h4 id="page-relative-corner-sizing">
+Page-Relative (Physical) Corner Sizing:
+The 'border-top-radius', 'border-right-radius', 'border-bottom-radius', 'border-left-radius' shorthands</h4>
+
+	<pre class=propdef>
+		Name: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius
+		Value: <<length-percentage [0,&infin;]>>{1,2} [ / <<length-percentage [0,&infin;]>>{1,2} ]?
+		Initial: 0
+		Applies to: all elements (but see prose)
+		Inherited: no
+		Percentages: Refer to corresponding dimension of the <a>border box</a>.
+		Computed value: see individual properties
+		Animatable: see individual properties
+	</pre>
+
+	<p>The 'border-*-radius' shorthands set the two 'border-*-*-radius'
+	longhand properties of the related side. If values are given before
+	and after the slash, then the values before the slash set the
+	horizontal radius and the values after the slash set the vertical radius.
+	If there is no slash, then the values set both radii equally.
+	The two values for the radii are given in the order
+	top-left, top-right for 'border-top-radius',
+	top-right, bottom-right for 'border-right-radius'
+	bottom-left, bottom-right for 'border-bottom-radius',
+	and top-left, bottom-left for 'border-left-radius'.
+	If the second value is omitted it is copied from the first.
+
+<h4 id="flow-relative-corner-sizing">
+Flow-Relative Corner Sizing:
+the 'border-start-start-radius', 'border-start-end-radius',
+'border-end-start-radius', 'border-end-end-radius' properties</h4>
+
+	<pre class=propdef>
+		Name: border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius
+		Value: <<length-percentage [0,&infin;]>>{1,2} [ / <<length-percentage [0,&infin;]>>{1,2} ]?
+		Initial: 0
+		Applies to: all elements (but see prose)
+		Inherited: no
+		Percentages: Refer to corresponding dimension of the <a>border box</a>.
+		Computed value: see individual properties
+		Animatable: see individual properties
+	</pre>
+
+	<p>These properties correspond to the 'border-top-radius',
+	'border-right-radius', 'border-bottom-radius', and 'border-left-radius'
+	shorthand properties.
+	The mapping depends on the element’s 'writing-mode', 'direction',
+	and 'text-orientation',
+	with start/end referring to the axis orthogonal to the one given
+	by the first part of the name
+	(i.e. patterned as 'border-block-<i>inline</i>-radius' and
+	'border-inline-<i>block</i>-radius')
+	If values are given before and after the slash,
+	then the values before the slash set the
+	horizontal radius and the values after the slash set the vertical radius
+	like for the page-relative properties.
+
+<h4 id="corner-sizing-shorthand">
+Sizing All Corners At Once:
+The 'border-radius' shorthand</h4>
 
 	<pre class="propdef">
 		Name: border-radius

From 7215ec8be0d45edb47cd4a2e4a2c0b4f166b8c31 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 7 Sep 2022 21:20:30 +0200
Subject: [PATCH 2/5] [css-backgrounds-4] Replaced "flow-relative" by
 "physical" and mentioned that new `border-*-radius` properties are _side_
 shorthands

---
 css-backgrounds-4/Overview.bs | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index 36bfd0e85b7..8f4819b8f3a 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -245,9 +245,10 @@ Corners</h2>
 <h3 id="corner-sizing">
 Corner Sizing: the 'border-radius' and 'border-*-radius' shorthand properties</h3>
 
-<h4 id="page-relative-corner-sizing">
-Page-Relative (Physical) Corner Sizing:
-The 'border-top-radius', 'border-right-radius', 'border-bottom-radius', 'border-left-radius' shorthands</h4>
+<h4 id="physical-corner-sizing">
+Physical Corner Sizing:
+The 'border-top-radius', 'border-right-radius',
+'border-bottom-radius', 'border-left-radius' side shorthands</h4>
 
 	<pre class=propdef>
 		Name: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius
@@ -274,8 +275,8 @@ The 'border-top-radius', 'border-right-radius', 'border-bottom-radius', 'border-
 
 <h4 id="flow-relative-corner-sizing">
 Flow-Relative Corner Sizing:
-the 'border-start-start-radius', 'border-start-end-radius',
-'border-end-start-radius', 'border-end-end-radius' properties</h4>
+The 'border-block-start-radius', 'border-block-end-radius',
+'border-inline-start-radius', and 'border-inline-end-radius' side shorthands</h4>
 
 	<pre class=propdef>
 		Name: border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius
@@ -299,8 +300,8 @@ the 'border-start-start-radius', 'border-start-end-radius',
 	'border-inline-<i>block</i>-radius')
 	If values are given before and after the slash,
 	then the values before the slash set the
-	horizontal radius and the values after the slash set the vertical radius
-	like for the page-relative properties.
+	horizontal radius and the values after the slash set the vertical radius,
+	like for the physical properties.
 
 <h4 id="corner-sizing-shorthand">
 Sizing All Corners At Once:

From 0b8fd970c2aa1b5a643d6117a2672431e8bd2e4b Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Mon, 3 Oct 2022 21:21:07 +0200
Subject: [PATCH 3/5] [css-backgrounds-4] Let logical `border-*-radius`
 shorthands expand to longhands

Obviously, shorthands must be expanded into longhands at parse time, while logical-to-physical mapping happens at computed-value time. So we can't have logical shorthands mapping into physical shorthands.
---
 css-backgrounds-4/Overview.bs | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index 8f4819b8f3a..c12855bec47 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -289,15 +289,14 @@ The 'border-block-start-radius', 'border-block-end-radius',
 		Animatable: see individual properties
 	</pre>
 
-	<p>These properties correspond to the 'border-top-radius',
-	'border-right-radius', 'border-bottom-radius', and 'border-left-radius'
-	shorthand properties.
-	The mapping depends on the element’s 'writing-mode', 'direction',
-	and 'text-orientation',
-	with start/end referring to the axis orthogonal to the one given
-	by the first part of the name
-	(i.e. patterned as 'border-block-<i>inline</i>-radius' and
-	'border-inline-<i>block</i>-radius')
+	<p>These properties correspond to the 'border-start-start-radius',
+	'border-start-end-radius', 'border-end-start-radius',
+	and 'border-end-end-radius'	longhand properties.
+	The start/end refers to the axis given by the first part of the name
+	(i.e. 'border-start-<i>inline</i>-radius' for 'border-block-start-radius`,
+	'border-end-<i>inline</i>-radius' for 'border-block-end-radius',
+	'border-<i>block</i>-start-radius' for 'border-inline-start-radius', and
+	'border-<i>block</i>-end-radius' for 'border-inline-end-radius')
 	If values are given before and after the slash,
 	then the values before the slash set the
 	horizontal radius and the values after the slash set the vertical radius,

From 3be3250655a2e15f760611688b0f48a58cd4c913 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Mon, 3 Oct 2022 21:41:04 +0200
Subject: [PATCH 4/5] [css-backgrounds-4] Added issue for `border-*-radius`
 value order

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

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index c12855bec47..b21ce9d82fc 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -273,6 +273,10 @@ The 'border-top-radius', 'border-right-radius',
 	and top-left, bottom-left for 'border-left-radius'.
 	If the second value is omitted it is copied from the first.
 
+	<p class="issue">
+		Should the values be defined as left to right and top to bottom
+		or should they follow the clockwise order of ''border-radius''?
+
 <h4 id="flow-relative-corner-sizing">
 Flow-Relative Corner Sizing:
 The 'border-block-start-radius', 'border-block-end-radius',

From b8ad9b20857b55c8224cac2fee38333805bd178b Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Sun, 9 Oct 2022 20:40:06 +0200
Subject: [PATCH 5/5] [css-backgrounds-4] Merged physical and logical
 border-*-radius shorthands

---
 css-backgrounds-4/Overview.bs | 51 +++++++++++------------------------
 1 file changed, 15 insertions(+), 36 deletions(-)

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index b21ce9d82fc..3259711000a 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -245,13 +245,16 @@ Corners</h2>
 <h3 id="corner-sizing">
 Corner Sizing: the 'border-radius' and 'border-*-radius' shorthand properties</h3>
 
-<h4 id="physical-corner-sizing">
-Physical Corner Sizing:
+<h4 id="corner-sizing-side-shorthands">
+Sizing The Corners Of One Side:
 The 'border-top-radius', 'border-right-radius',
-'border-bottom-radius', 'border-left-radius' side shorthands</h4>
+'border-bottom-radius', 'border-left-radius',
+'border-block-start-radius', 'border-block-end-radius',
+'border-inline-start-radius', 'border-inline-end-radius' shorthands</h4>
 
 	<pre class=propdef>
-		Name: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius
+		Name: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius,
+			border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius
 		Value: <<length-percentage [0,&infin;]>>{1,2} [ / <<length-percentage [0,&infin;]>>{1,2} ]?
 		Initial: 0
 		Applies to: all elements (but see prose)
@@ -268,44 +271,20 @@ The 'border-top-radius', 'border-right-radius',
 	If there is no slash, then the values set both radii equally.
 	The two values for the radii are given in the order
 	top-left, top-right for 'border-top-radius',
-	top-right, bottom-right for 'border-right-radius'
+	top-right, bottom-right for 'border-right-radius',
 	bottom-left, bottom-right for 'border-bottom-radius',
-	and top-left, bottom-left for 'border-left-radius'.
+	top-left, bottom-left for 'border-left-radius',
+	start-start, start-end for 'border-block-start-radius',
+	end-start, end-end for 'border-block-end-radius'
+	start-start, end-start for 'border-inline-start-radius',
+	and start-end, end-end for 'border-inline-end-radius'.
 	If the second value is omitted it is copied from the first.
 
 	<p class="issue">
-		Should the values be defined as left to right and top to bottom
+		Should the physical values all be defined as left to right and top to bottom
+		and the logical ones as start to end
 		or should they follow the clockwise order of ''border-radius''?
 
-<h4 id="flow-relative-corner-sizing">
-Flow-Relative Corner Sizing:
-The 'border-block-start-radius', 'border-block-end-radius',
-'border-inline-start-radius', and 'border-inline-end-radius' side shorthands</h4>
-
-	<pre class=propdef>
-		Name: border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius
-		Value: <<length-percentage [0,&infin;]>>{1,2} [ / <<length-percentage [0,&infin;]>>{1,2} ]?
-		Initial: 0
-		Applies to: all elements (but see prose)
-		Inherited: no
-		Percentages: Refer to corresponding dimension of the <a>border box</a>.
-		Computed value: see individual properties
-		Animatable: see individual properties
-	</pre>
-
-	<p>These properties correspond to the 'border-start-start-radius',
-	'border-start-end-radius', 'border-end-start-radius',
-	and 'border-end-end-radius'	longhand properties.
-	The start/end refers to the axis given by the first part of the name
-	(i.e. 'border-start-<i>inline</i>-radius' for 'border-block-start-radius`,
-	'border-end-<i>inline</i>-radius' for 'border-block-end-radius',
-	'border-<i>block</i>-start-radius' for 'border-inline-start-radius', and
-	'border-<i>block</i>-end-radius' for 'border-inline-end-radius')
-	If values are given before and after the slash,
-	then the values before the slash set the
-	horizontal radius and the values after the slash set the vertical radius,
-	like for the physical properties.
-
 <h4 id="corner-sizing-shorthand">
 Sizing All Corners At Once:
 The 'border-radius' shorthand</h4>