[css-borders-4] Apply corner-shape syntax resolutions (#12033)

* [css-borders-4] Apply corner-shape syntax resolutions

- Use `square` instead of `straight`
- Use the log2 version for the `superellipse()` parameter
- Interpolate symetrically from the middle.

Closes #11607
Closes #11608
Closes #11609

* Remove cruft

* Fix math

* small fix

* small fix

* nits

* add note about symmetry

* Add some example for rendering

* Add figure

* Update css-borders-4/Overview.bs

* nits

---------

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

Author: noamr

css-borders-4/Overview.bs

@@ -367,45 +367,69 @@ Issue <a href="https://github.com/w3c/csswg-drafts/issues/11610">#11610</a>: che
 'corner-shape' values</h4>
 
 	<pre class=prod>
-		<dfn><<corner-shape-value>></dfn> = <l>''round''</l> | <l>''scoop''</l> | <l>''bevel''</l> | <l>''notch''</l> | <l>''straight''</l> | <l>''squircle''</l> | superellipse(<<number [0,&infin;]>> | infinity)
+		<dfn><<corner-shape-value>></dfn> = <l>''round''</l> | <l>''scoop''</l> | <l>''bevel''</l> | <l>''notch''</l> | <l>''<corner-shape-value>/square''</l> | <l>''squircle''</l> |
+											superellipse(<<number [-&infin;,&infin;]>> | infinity | -infinity)
 	</pre>
 
 	<dl dfn-type="value" dfn-for="<corner-shape-value>">
 		<dt><dfn>round</dfn>
 		<dd>
-			Border radii define a convex elliptical curve at the corner. Equivalent to <css>superellipse(2)</css>.
+			Border radii define a convex elliptical curve at the corner. Equivalent to <css>superellipse(1)</css>.
 
 			Note: this is the initial value of 'corner-shape' properties, as elements with 'border-radius' would be rounded.
 
 		<dt><dfn>scoop</dfn>
-		<dd>Border radii define a concave elliptical curve at the corner. Equivalent to <css>superellipse(0.5)</css>.
+		<dd>Border radii define a concave elliptical curve at the corner. Equivalent to <css>superellipse(-1)</css>.
 		<dt><dfn>bevel</dfn>
-		<dd>Border radii define a diagonal slice at the corner. Equivalent to <css>superellipse(1)</css>.
+		<dd>Border radii define a diagonal slice at the corner. Equivalent to <css>superellipse(0)</css>.
 		<dt><dfn>notch</dfn>
-		<dd>Border radii define a concave 90deg angle at the corner. Equivalent to <css>superellipse(0)</css>.
-		<dt><dfn>straight</dfn>
+		<dd>Border radii define a concave 90deg angle at the corner. Equivalent to <css>superellipse(-infinity)</css>.
+		<dt><dfn>square</dfn>
 		<dd>Border radii define a convex 90deg angle at the corner.
 			This would have the same visual effect as a 'border-radius' of 0. This is different from having a 'border-radius' of 0 when animating.
 			Equivalent to <css>superellipse(infinity)</css>.
 		<dt><dfn>squircle</dfn>
-		<dd>Border radii define a convex curve between an ellipse and an convex angle, equivalent to <css>superellipse(4)</css>.
+		<dd>Border radii define a convex curve between an ellipse and an convex angle, equivalent to <css>superellipse(2)</css>.
 	</dl>
 
-	Issue <a href="https://github.com/w3c/csswg-drafts/issues/11607">#11607</a>: resolve on ''straight'' vs <css>none</css>.
+	The <dfn>superellipse( <<number>> | infinity | -infinity )</dfn> function describes the <dfn>superellipse parameter</dfn> of the corner.
+	It is a number between <css>-infinity</css> and <css>infinity</css>, with <css>-infinity</css> corresponding to a straight concave corner,
+	<css>infinity</css> corresponding to a square convex corner.
 
-	The <dfn>superellipse( <<number>> | infinity )</dfn> function describes the curvature of the corner.
-	It accepts a <dfn>superellipse exponent</dfn>, which defines the curvature of the corner, or the exponent of the formula.
-	The [=superellipse exponent=] accepts values between 0 (a straight concave angle) and <css>infinity</css> (a straight convex angle),
-	with the values in between representing the curvatures in between.
-
-	The ''superellipse()'' formula can be described in cartesian coordinates, as follows,
-	where <code>a</code> is the horizontal ''border-radius''
-	<code>b</code> is the vertical ''border-radius'', and <code>k</code> is the [=superellipse exponent=]:
+	The <dfn>canonical superellipse formula</dfn> can be described in Cartesian coordinates, as follows,
+	where <code>s</code> is the [=superellipse parameter=]:
 
 	<pre>
-		|x/a|^k + |y/b|^k = 1
+		k = 2<sup>abs(|s|)</sup>
+		x<sup>k</sup> + y<sup>k</sup> = 1
 	</pre>
 
+	The resulting |x| and |y| are later projected to CSS coordinates by scaling based on the 'border-radius' properties,
+	inversed if the [=superellipse parameter=] is negative. This creates symmetry between convex and concave shapes of the same absolute
+	[=superellipse parameter=].
+
+		<aside class=example>
+		The ''<self-position>/start'' and ''<self-position>/end'' keywords
+		are <a>flow-relative</a>:
+		they use the <a>writing mode</a> to determine which side to align to.
+
+		<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.">
+			<figcaption>
+				Rendering examples of different ''superellipse()'' values.
+			</figcaption>
+		</figure>
+		</aside>
+
+
+	<img src="images/superellipse-param.svg" alt="A diagram showing how superellipse values translate to curvature">
+
+
+
 <h4 id=corner-shape-shorthand>
 Corner Shaping: the 'corner-shape' and 'corner-*-shape' properties</h4>
 
@@ -474,66 +498,52 @@ Corner Shaping: the 'corner-shape' and 'corner-*-shape' properties</h4>
 <h4 id=corner-shape-interpolation>
 Interpolating corner shapes</h4>
 
-Since a <<corner-shape-value>> can always be expressed by a ''superellipse()'' with an [=superellipse exponent=] variable, interpolating between two
-<<corner-shape-value>>s is done by interpolating the [=superellipse exponent=] itself.
-Since it's an exponent, interpolating it linearly would result in an effect where concave corners interpolate at a much higher velocity than convex corners.
-To balance that, the <dfn>superellipse interpolation</dfn> formula describes how a [=superellipse exponent=] is converted to a value between 0 and 1, and vice versa:
-
-<div algorithm="superellipse-exponent-to-interpolation-value">
-To interpolate a <<number [0,&infin;]>> |exponent| to an interpolation value between 0 and 1:
-	1. If |exponent| is 0, return 0.
-	1. If |exponent| is &infin;, return 1.
-	1. Return <code>1/(2^(1/|exponent|))</code>.
-
-To convert a <<number [0,1]>> |interpolationValue| back to a [=superellipse exponent=]:
-	1. If |interpolationValue| is 0, return 0.
-	1. If |interpolationValue| is 1, return &infin;.
-	1. Return <code>ln(0.5)/ln(|interpolationValue|)</code>.
-</div>
+Since a <<corner-shape-value>> can always be expressed by a ''superellipse()'' with an [=superellipse parameter=] variable, interpolating between two
+<<corner-shape-value>>s is done by interpolating the [=superellipse parameter=] itself.
+Since it uses a <code>log2</code>, interpolating it linearly would result in an effect where concave corners interpolate at a much higher velocity than convex corners.
+To balance that, the <dfn>superellipse interpolation</dfn> formula describes how a [=superellipse parameter=] is converted to a value between 0 and 1, and vice versa:
 
-<a href="https://github.com/w3c/csswg-drafts/issues/11608">Issue #11608</a>: resolve on this or another interpolation formula.
+<div algorithm="superellipse-param-to-interpolation-value">
+To interpolate a <<number [-&infin;,&infin;]>> |s| to an interpolation value between 0 and 1, return the first matching statement, switch on |s|:
+<dl class=switch>
+	: -&infin;
+	:: Return 0.
 
-<pre>
+	: &infin;
+	:: Return 1.
 
-</pre>
+	: Otherwise
+	::
+		1. Let |k| be <code>0.5<sup>abs(|s|)</sup></code>.
+		1. Let |convexHalfCorner| be <code>0.5<sup>|k|</sup></code>.
+		1. If |param| is less than 0, return <code>1 - |convexHalfCorner|</code>.
+		1. Return |convexHalfCorner|.
 
-	<div class="example">
-		For example, the following declarations create a right-pointing next button.
-		<pre>
-			a {
-				border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
-				corner-shape: round angle angle round;
-				padding: .5em 1em .5em .5em;
-			}
-		</pre>
-		<div style='font: bold 200%/1 sans-serif;
-			width: 2.3em;
-			width: min-content;
-			white-space: nowrap;
-			padding: .5em 1.1em .5em .5em;
-			border-radius: .3em 0 0 .3em;
-			background: url(&apos;data:image/svg+xml,\
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 40">\
-			    <path d="m 0 0 h 65 l 10 20 l -10 20 h -65 z" fill="yellowgreen" />\
-			</svg>&apos;) no-repeat 0 / auto 100%'>
-			Next
-		</div>
-		As a fallback in UAs that don't support 'border-radius',
-		the right side would be rounded rather than pointy:
-		<div style='font: bold 200%/1 sans-serif;
-			width: 2.3em;
-			width: min-content;
-			white-space: nowrap;
-			padding: .5em 1em .5em .5em;
-			border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
-			background: yellowgreen'>
-			Next
-		</div>
-	</div>
+</dl>
 
-	<p class="issue">
-		How to allow custom corners? Perhaps a ''path()'' function? Or a ''cubic-bezier()''?
-		Something else?
+To convert a <<number [0,1]>> |interpolationValue| back to a [=superellipse parameter=], switch on |interpolationValue|:
+<dl class=switch>
+	: 0
+	:: Return -&infin;.
+
+	: 0.5
+	:: Return 0.
+
+	: 1
+	:: Return &infin;.
+
+	: Otherwise
+	::
+		1. Let |convexHalfCorner| be |interpolationValue|.
+		1. If |interpolationValue| is less than 0.5, set |convexHalfCorner| to 1 - |interpolationValue|.
+		1. Let |k| be <code>ln(0.5) / ln(|convexHalfCorner|)</code>.
+		1. Let |s| be <code>log2(|k|)</code>.
+		1. If |interpolationValue| is less than 0.5, return -|s|.
+		1. Return |s|.
+
+</dl>
+
+</div>
 
 <h2 id="partial-borders">
 Partial borders</h2>