[css-borders-4] Define border/shadow rendering

Author: noamr

css-borders-4/Overview.bs

@@ -361,7 +361,74 @@ as well as account for sharp edges and overlaps.
 Issue: 'border-radius' already handles *adjacent* corners overlapping by shrinking the radiuses proportionally.
 A negative ''superellipse()'' parameter allows for *opposite* corners to sometimes overlap, and needs additional restrictions defined.
 
-Issue <a href="https://github.com/w3c/csswg-drafts/issues/11610">#11610</a>: check if we need additional rendering restrictions.
+<h5 id=corner-shape-border-rendering>
+Effect of 'corner-shape' on border rendering</h5>
+
+When rendering a [=border=] for a box that has a 'border-radius' and a 'corner-shape'
+the inner border follows the curve of the outer shape, with a nearly consistent distance from the outer path throughout,
+or a linearly increasing distance if the 'border-width' at the different edges is different.
+
+<div algorithm="adjust-border-inner-path-for-corner-shape">
+To compute the <dfn>adjusted untrimmed inner top-left corner starting point</dfn>:
+
+	1. Let |s| be the [=superellipse parameter=] of the element's 'corner-top-left-shape'.
+	1. Let |w| be the [=used value=] of the element's 'border-left-width'.
+	1. If |s| is equal or greater than 1, return <code>|w|, 0</code>.
+	1. If |s| is equal or less than -1, return <code>0, -|w|</code>.
+	1. Let |k| be <code>0.5<sup>|s|</sup></code>.
+	1. Let |normalizedHalfCorner| be <code>0.5<sup>|k|</sup></code>.
+	1. Let |offset| be <code>2 - &radic;2</code>.
+	1. Let |adjustedX| be <code>max(0, 2 * |normalizedHalfCorner| - |offset|)</code>.
+	1. Let |adjustedY| be <code>max(0, 2 * (1 - |normalizedHalfCorner|) - |offset|)</code>.
+	1. Return <code>|adjustedX|, |adjustedY|</code>.
+</div>
+
+<div algorithm="corner-shape-path">
+To compute the inner path of a corner:
+
+	1. Let |adjustedX|, |adjustedY| be the result of the [=adjusted untrimmed inner top-left corner starting point=] steps,
+		modified to consider the corresponding 'border-width' and 'corner-shape' values at the start and end of a path`.
+	1. Create a path based on the [=canonical superellipse formula=], with the outer corner as the center, starting from |adjustedX| and ending at |adjustedY|.
+		User agents MAY create an approximation of this path rather than try to follow the formula precisely, for performance reasons.
+	1. Trim the resulting path so that it starts at a point that has a 'border-width' distance from the outer.
+</div>
+
+<div class=note>
+The superellipse quadrant is scaled so that:
+	* Its center stays at the outer corner.
+	* Its start and end point are perpendicular to the outer starting point.
+	* Its distance from the outer curve is the corresponding 'border-width'.
+
+This is illustrated in the following chart:
+<figure>
+	<img src="images/corner-shape-border.svg"
+		width="840" height="840"
+		style="background: white; padding: 8px;"
+		title="Border rendering with corner-shape"
+		alt="Border rendering with corner-shape">
+	<figcaption>Illustration of border path computation based on 'corner-shape'.
+	</figcaption>
+</figure>
+
+</div>
+
+<h5 id=corner-shape-border-rendering>
+Effect of 'corner-shape' on 'box-shadow' rendering</h5>
+
+When rendering the 'box-shadow' of an element that has a 'corner-shape', the 'border-radius' of the rendered shadow is adjusted to account for the spread.
+The resulting shape looks like a scaled version of the original shape, as if the shadow is at a distance in the z direction.
+This is accomplished by computing the per-dimension scale given the spread, and applying that scale on each of radii separately.
+
+<div algorithm="corner-shape-box-shadow-adjustment">
+To scale the 'border-radius' value based on the 'box-shadow' |spread|:
+	1. Let |width| be the element's [=border box=]'s width.
+	1. Let |height| be the element's [=border box=]'s height.
+	1. Let |newWidth| be <code>|width| + |spread| * 2</code>.
+	1. Let |newHeight| be <code>|height| + |spread| * 2</code>.
+	1. Let |horizontalScale| be |newWidth|/|width|.
+	1. Let |verticalScale| be |newHeight|/|height|.
+	1. Scale the 'border-radius' values by |horizontalScale|, |verticalScale|.
+</div>
 
 <h4 id=corner-shape-value>
 'corner-shape' values</h4>
@@ -415,10 +482,10 @@ Issue <a href="https://github.com/w3c/csswg-drafts/issues/11610">#11610</a>: che
 
 		<figure>
 			<img src="images/superellipse-param.svg"
-			     width="320" height="240"
-			     style="background: white; padding: 8px;"
-			     title="rendering of different superellipse parameter values"
-			     alt="Rendering of different superellipse parameter values.">
+				width="320" height="240"
+				style="background: white; padding: 8px;"
+				title="rendering of different superellipse parameter values"
+				alt="Rendering of different superellipse parameter values.">
 			<figcaption>
 				Rendering examples of different ''superellipse()'' values.
 			</figcaption>