[css-borders-4] Specify corner-shape based on superellipse (#11606)

* [css-borders-4] Specify `corner-shape` based on superellipse

This specifies the `corner-shape` group, including:
- general description and interaction with border-radius
- all the individual corners, side shorthands, and overall shorthand
- multiple keywords, and how they translate to a `superellipse()`
- The superellipse formula, and how it is rendered
- How the exponent of the superellipse interpolates

Open issues (will open separately):
- Add a few examples
- Resolve on "straight" vs "none" for the convex angle.
- Resolve on the exact interpolation formula
- Define restrictions for border rendering

Closes #10993
Based on resolution #10993 (comment)

Co-authored-by: Tab Atkins Jr. 

Author: noamr

css-borders-4/Overview.bs

@@ -336,29 +336,168 @@ The 'border-radius' shorthand
 	See [[CSS3BG]].
 
 
-Corner Shaping: the 'corner-shape' property
+Corner Shaping
+
+By default, non-zero border-radii define a quarter-ellipse that rounds the affected corners.
+However in some cases, other corner shapes are desired.
+The 'corner-shape' property group specifies a reinterpretation of the radii to define other corner shapes.
+
+The different shapes applicable to 'corner-shape' can be expressed as different parameters to a superellipse.
+A superellipse is a closed curve resembling an ellipse, and based on its `k` parameter can express all the shapes between a square, an ellipse, and a notch.
+
+To allow full expression as well as interpolation, the 'corner-shape' properties can provide its own superellipse parameter using the 'superellipse()' function,
+or use one of the supplied keywords which represent commonly used parameters. See the <> definition for details.
+
+
+Rendering 'corner-shape'
+'corner-shape' works alongside 'border-radius', and does not have any visual effect with a 'border-radius' of 0.
+It acts as an alteration on top of the default round 'border-radius', and thus can be used as progressive enhancement.
+
+Like 'border-radius', 'corner-shape' clips elements according to the [=overflow=] rules, and applies to the rendering of the border.
+Since stroking a superellipse accurately may be computationally intensive, user agents may approximate the path using bezier curves,
+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 #11610: check if we need additional rendering restrictions.
+
+
+'corner-shape' values
+
+	
+		<> = ''round'' | ''scoop'' | ''bevel'' | ''notch'' | ''straight'' | ''squircle'' | superellipse(<>)
+	
+
+	
+		round
+		
+			Border radii define a convex elliptical curve at the corner. Equivalent to superellipse(2).
+
+			Note: this is the initial value of 'corner-shape' properties, as elements with 'border-radius' would be rounded.
+
+		scoop
+		Border radii define a concave elliptical curve at the corner. Equivalent to superellipse(0.5).
+		bevel
+		Border radii define a diagonal slice at the corner. Equivalent to superellipse(1).
+		notch
+		Border radii define a concave 90deg angle at the corner. Equivalent to superellipse(0).
+		straight
+		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 superellipse(infinity).
+		squircle
+		Border radii define a convex curve between an ellipse and an convex angle, equivalent to superellipse(4).
+	
+
+	Issue #11607: resolve on ''straight'' vs none.
+
+	The superellipse( <> | infinity ) function describes the curvature of the corner.
+	It accepts a superellipse exponent, 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 infinity (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 a is the horizontal ''border-radius''
+	b is the vertical ''border-radius'', and k is the [=superellipse exponent=]:
+
+	
+		|x/a|^k + |y/b|^k = 1
+	
+
+
+Corner Shaping: the 'corner-shape' and 'corner-*-shape' properties
 
 	
 		Name: corner-shape
-		Value: [ round | angle ]{1,4}
+		Value: <>{1,2} / [ <>{1,2} ]?
 		Initial: round
-		Applies to: all elements, except table element when 'border-collapse' is ''collapse''
+		Applies to: all elements where 'border-radius' can apply
 		Inherited: no
-		Animation type: discrete
+		Animation type: see individual properties
 	
 
-	By default, non-zero border-radii define
-	a quarter-ellipse that rounds the affected corners.
-	However in some cases, other corner shapes are desired.
-	The 'corner-shape' property specifies a reinterpretation of the radii
-	to define other corner shapes.
-
-	
-		''round''
-		Border radii define a convex elliptical curve at the corner.
-		''angle''
-		Border radii define a diagonal slice at the corner.
-	
+	Applies the shape to all corners, following the same rules as ''border-radius''.
+
+	
+	Name: corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape, corner-start-start-shape, corner-start-end-shape, corner-end-start-shape, corner-end-end-shape
+	Value: <>
+	Initial: round
+	Applies to: all elements where 'border-radius' can apply
+	Inherited: no
+	Logical property group: corner-shape
+	Computed value: the corresponding ''superellipse()'' value
+	Animation Type: see [=superellipse interpolation=]
+	
+
+	The [=flow-relative=] properties
+	'corner-start-start-shape',
+	'corner-start-end-shape',
+	'corner-end-start-shape',
+	and 'corner-end-end-shape'
+	correspond to the [=physical=] properties
+	'corner-top-left-shape',
+	'corner-bottom-left-shape',
+	'corner-top-right-shape',
+	and 'corner-bottom-right-shape'.
+	The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation',
+	with the first start/end giving the block axis side,
+	and the second the inline-axis side
+	(i.e. patterned as 'corner-block-inline-shape').
+
+	
+		Name: corner-top-shape, corner-right-shape, corner-bottom-shape, corner-left-shape,
+			corner-block-start-shape, corner-block-end-shape, corner-inline-start-shape, corner-inline-end-shape
+		Value: <> [ / <> ]
+		Initial: round
+		Applies to: all elements where 'border-radius' can apply
+		Inherited: no
+		Computed value: see individual properties
+		Animation type: see individual properties
+	
+
+	The 'corner-*-shape' shorthands set the two 'corner-*-*-shape'
+	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 'corner-top-shape',
+	top-right, bottom-right for 'corner-right-shape',
+	bottom-left, bottom-right for 'corner-bottom-shape',
+	top-left, bottom-left for 'corner-left-shape',
+	start-start, start-end for 'corner-block-start-shape',
+	end-start, end-end for 'corner-block-end-shape'
+	start-start, end-start for 'corner-inline-start-shape',
+	and start-end, end-end for 'corner-inline-end-shape'.
+	If the second value is omitted it is copied from the first.
+
+
+
+Interpolating corner shapes
+
+Since a <> can always be expressed by a ''superellipse()'' with an [=superellipse exponent=] variable, interpolating between two
+<>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 superellipse interpolation formula describes how a [=superellipse exponent=] is converted to a value between 0 and 1, and vice versa:
+
+
+To interpolate a <> |exponent| to an interpolation value between 0 and 1:
+	1. If |exponent| is 0, return 0.
+	1. If |exponent| is ∞, return 1.
+	1. Return 1/(2^(1/|exponent|)).
+
+To convert a <> |interpolationValue| back to a [=superellipse exponent=]:
+	1. If |interpolationValue| is 0, return 0.
+	1. If |interpolationValue| is 1, return ∞.
+	1. Return ln(0.5)/ln(|interpolationValue|).
+
+
+Issue #11608: resolve on this or another interpolation formula.
+
+
+
+
 
 
 		For example, the following declarations create a right-pointing next button.
@@ -398,33 +537,6 @@ Corner Shaping: the 'corner-shape' property
 		How to allow custom corners? Perhaps a ''path()'' function? Or a ''cubic-bezier()''?
 		Something else?
 
-
-Corner Shape and Size: the 'corners' shorthand
-
-	
-		Name: corners
-		Value: <<'corner-shape'>> || <<'border-radius'>>
-	
-
-	The 'corners' shorthand sets 'corner-shape' and 'border-radius' in the same declaration.
-	If either is omitted, it is reset to its initial value.
-
-
-		For example, the following declaration creates a diamond shape.
-		corners: angle 50%;
-		In UAs that don't support 'corner-shape', the declaration is ignored
-		(falls back to a rectangle).
-	
-
-
-		In this example, the first declaration creates tabs with vertical sides and rounded corners using 'border-radius',
-		while the second example makes them trapezoid-shaped in UAs that support 'corners'.
-		
-			border-radius: 0.25em 0.25em 0 0;
-			corners: angle 0.25em 0.25em 0 0 / 50% 50% 0 0;
-		
-	
-
 
 Partial borders