[css-background-3] Adjust border-radius outset correction (#12896)

* [css-background-3] Adjust border-radius outset adjustment

The new adjustment makes the radius reduction factor in the
minimum radius percentage of the corner, making it less pronounced
the closer the corner's border-radius gets to 50%.

Closes #7103
Resolution: #7103 (comment)

* Also apply to margin-box

* Adjust variable names

* Apply new algo to corner-shape as well

* Update css-backgrounds-3/Overview.bs

---------

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

Author: noamr

css-backgrounds-3/Overview.bs

@@ -2453,13 +2453,30 @@ Corner Shaping</h3>
 
 	The [=margin edge=], being outside the [=border edge=],
 	calculates its radius by <em>adding</em> the corresponding margin thickness
-	to each border radius.
-	However, in order to create a sharper corner when the border radius is small
-	(and thus ensure continuity between round and sharp corners),
-	when the [=border radius=] is less than the margin,
-	the margin is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>,
-	where <var>r</var> is the ratio of the border radius to the margin,
-	in calculating the corner radii of the margin box shape.
+	to each border radius, with the corresponding [=outset-adjusted border radius=] applied.
+
+<div algorithm="border-radius-outset">
+
+	When expanding an [=edge=] that has a [=border radius=], e.g. for computing the [=margin edge=], 'box-shadow' spread, or 'overflow-clip-margin',
+	the different [=border radius=] values are adjusted so that a small rounded corner with a big outset does not appear to be disproportionally round.
+
+	This is done by computing the corresponding [=outset-adjusted border radius=].
+
+	To compute the <dfn export>outset-adjusted border radius</dfn> given the 2-dimensional [=size=]s |edge|, |radius|, and |outset|:
+		1. Let |coverage| be <code>2 * min(|radius|'s [=width=] / |edge|'s [=width=], |radius|'s [=height=] / |edge|'s [=height=])</code>.
+		1. Let |adustedRadiusWidth| be the [=adjusted radius dimension=] given |coverage|, |radius|'s [=width=], and |outset|'s [=width=].
+		1. Let |adustedRadiusHeight| be the [=adjusted radius dimension=] given |coverage|, |radius|'s [=height=], and |outset|'s [=height=].
+		1. Return (|adustedRadiusWidth|, |adustedRadiusHeight|).
+
+	To compute the <dfn>adjusted radius dimension</dfn> given numbers |coverage|, |radius|, and |outset|:
+		1. If |radius| is greater than |spread|, or if |coverage| is greater than 1, then return <code>|radius| + |outset|</code>.
+		1. Let |ratio| be <code>|radius| / |outset|</code>.
+		1. Return <code>|radius| + |outset| * (1 - (1 - |ratio|)<sup>3</sup> * (1 - |coverage|<sup>3</sup>))</code>.
+
+		Note: this algorithm is designed to reduce the effect of the |outset| (or spread) on the shape of the corner.
+		The |coverage| factor makes this reduction more pronounced for rectangular shapes (where the [=border-radius=] is close to 0),
+		and less pronounced for elliptical shapes (where the [=border-radius=] is close to 50%).
+</div>
 
 
 <h3 id="corner-clipping">
@@ -3544,19 +3561,8 @@ Shadow Shape, Spread, and Knockout</h4>
 	the corner radii of the shadow are also increased (decreased, for inner shadows)
 	from the border-box (padding-box) radii by adding (subtracting)
 	the [=spread distance=] (and flooring at zero).
-	However, in order to create a sharper corner when the border radius is small
-	(and thus ensure continuity between round and sharp corners),
-	when the [=border radius=] is less than the [=spread distance=]
-	(or in the case of an inner shadow,
-	less than the absolute value of a negative [=spread distance=]),
-	the [=spread distance=]
-	is first multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>,
-	where <var>r</var> is the ratio of the border radius to the [=spread distance=],
-	in calculating the corner radii of the spread shadow shape.
-	For example, if the border radius is 10px and the [=spread distance=] is 20px (<var>r</var> = .5),
-	the corner radius of the shadow shape will be 10px + 20px × (1 + (.5 - 1)<sup>3</sup>) = 27.5px
-	rather than 30px.
-	This adjustment is applied independently to the radii in each dimension.
+	For outer shadows, the [=border-radius=] is then [=outset-adjusted border radius|adjusted=], independently in each dimension,
+	to preseve the sharpness of rounded corners.
 
 	The 'border-image' does not affect the shape of the box-shadow.
 

css-borders-4/Overview.bs

@@ -1432,10 +1432,10 @@ Each shadow of [=/element=]'s 'box shadow' is shaped by the [=border contour pat
 
 <div algorithm="adjust-border-inner-path-for-corner-shape">
 To compute an [=/element=] |element|'s <dfn>border contour path</dfn> given an [=edge=] |targetEdge| and an optional number |spread| (default 0):
-	1. Let |outerLeft|, |outerTop|, |outerRight|, |outerBottom| be |element|'s [=unshaped edge|unshaped=] [=border edge=].
+	1. Let |outerLeft|, |outerTop|, |outerRight|, |outerBottom| be |element|'s [=unshaped edge|unshaped=] [=border edge=], outset by |spread|.
 	1. Let |topLeftHorizontalRadius|, |topLeftVericalRadius|, |topRightHorizontalRadius|, |topRightVerticalRadius|, |bottomRightHorizontalRadius|,
 		|bottomRightVerticalRadius|, |bottomLeftHorizontalRadius|, and |bottomLeftVerticalRadius| be |element| [=border edge=]'s radii,
-		scaled by |element|'s [=opposite corner scale factor=].
+		scaled by |element|'s [=opposite corner scale factor=] and [=outset-adjusted border radius|outset-adjusted=].
 	1. Let |topLeftShape|, |topRightShape|, |bottomRightShape|, and |bottomLeftShape| be |element|'s [=computed value|computed=] 'corner-*-shape' values.
 	1. Let |targetLeft|, |targetTop|, |targetRight|, |targetBottom| [=unshaped edge|unshaped=] |targetEdge|.
 	1. Let |path| be a new path [[SVG2]].
@@ -1451,11 +1451,6 @@ To compute an [=/element=] |element|'s <dfn>border contour path</dfn> given an [
 	1. [=Add corner to path=] given |path|,
 		the [=rectangle=] <code>(|outerLeft|, |outerTop|, |topLeftHorizontalRadius|, |topLeftVericalRadius|)</code>, |targetEdge|,
 		3, |targetLeft| - |outerLeft|, |targetTop| - |outerTop|, and |topLeftShape|.
-	1. If |spread| is not 0, then:
-		1. Scale |path| by <code>1 + (|spread| * 2) / (|targetEdge|'s [=width dimension|width=]), 1 + (|spread| * 2) / (|targetEdge|'s [=height dimension|height=])</code>.
-		1. Translate |path| by <code>-|spread|, -|spread|</code>.
-
-		Note: this creates an effect where the resulting path has the same shape as the original path, but scaled to fit the given spread.
 	1. Return |path|.
 
 To <dfn>add corner to path</dfn> given a path |path|, a rectangle |cornerRect|, a rectangle |trimRect|,

css-shapes-1/Overview.bs

@@ -1371,10 +1371,7 @@ Shapes from Box Values</h2>
 	or margin is negative or zero, 
 	then the margin box corner radius is
 	<code>max(border-radius + margin, 0)</code>.
-	If the ratio of <code>border-radius/margin</code> is less than 1,
-	and margin is positive, 
-	then the margin box corner radius is
-	<code>border-radius + margin * (1 + (ratio-1)^3)</code>.
+	The margin box's corners are [=outset-adjusted border radius|outset-adjusted=] given the element's [=border box=], 'border-radius', and the margin.
 
 	The <dfn value for="<shape-box>, shape-outside">border-box</dfn> value defines the shape
 	enclosed by the outside border edge.