[css-borders-4] Specify how borders are rendered for `corner-shape`

[noamr]

Follow-up on #10993

corner-shape cannot be naturally stroked in the same way as ordinary rounded corners or a stroke path, and some details need to be defined.

For example, how should stroking bevel/notch look like? Do the inner border collapse into each other, or stay confined within the corner?

[noamr]

I created a codepen that renders corner-shape using @fserb's formula to approximate superellipses (more on that later), and shows how I think the borders should work:
https://codepen.io/noamr/pen/WbNQEvP?editors=1111

Basically, to achieve the effect where the thickness of the border is equal to the relevant border-width, while painting within the corner bounds, the outer radius as to be lower than the inner radius for curvatures more concave than round.

This becomes very apparent with notch:

And also with bevel

Or scoop:

In the prototype, the outer radius is reduced in a number that's a function of the corresponding border and the curvature.
The offset would be an intercept for a parallel line to the tangent of the curve at a (border-width) distance.

(It still looks a bit off at around scoop though, so we're not done with the formula)

[jsnkuhn]

I have a hand full of examples of partial bordered corner-shape like examples that might be worth taking a look at here:

#9072

and a couple of others from the giant use case thread:

#6980 (comment)
#6980 (comment)

[noamr]

I have a hand full of examples of partial bordered corner-shape like examples that might be worth taking a look at here:

#9072

and a couple of others from the giant use case thread:

#6980 (comment) #6980 (comment)

Thanks, I wonder how these use case translate to the specifics of border rendering?
Some of these seem to be semi-rounded notches which we've been discussing on a different thread.

[jsnkuhn]

In this example I notice that the thicker right border's width is maintained through the entirety of the top-right angled corner. The width of the drawn border does not transition from the border-top-width to the border-right-width like in the codepen. Or is there a way to accomplish this that I'm not seeing?

[noamr]

In this example I notice that the thicker right border's width is maintained through the entirety of the top-right angled corner. The width of the drawn border does not transition from the border-top-width to the border-right-width like in the codepen. Or is there a way to accomplish this that I'm not seeing?

There is no current semantic for defining where the corner gets the border-width from, so it interpolates between the two sides... A corner like in the picture would only be available with border-shape ATM.

[smfr]

I've drawn up some diagrams of how I think bevel and scoop should be rendered. Note that with uneven border widths, you can't think of rendering the border as stroking a path; it has to be inner and outer paths computed separately.

Bevel

The goal is to have the bevel section maintain the border width. Naively joining the points you'd use for round result in a thinner diagonal.

Proposed algorithm for computing the inner border edge:

1. Take the points where the outer border bevel corners are
2. From each, compute a line perpendicular to the the bevel, with a length given by the border width on that side (w1, w2)
3. Compute a line that intersects the inner ends of the lines from step 2
4. Compute where that line intersects the two inner border sides

Scoop

The goal here again is to maintain the width of the scoop section, and also to have the inner scoop edge prescribe an ellipse around the outer box corner (this looks better than perpendicular joins at the inner edges).

Proposed algorithm for computing the inner border edge:

1. Compute an ellipse whose center is the outer corner, whose x radius is the (border-radius width + border width on the horizontal side) and whose y radius is (border-radius height + border width on the vertical side)
2. Compute the intersections of the relevant ellipse quadrant with the inner border edges

[noamr]

The formula in the codepen is sort of what you wrote for bevel. It's equivalent to reducing the outer radius by border-width*sqrt(2)-1, for the width relevant to the side of the corner the path is at. A similar formula is applied to scoop and all the other superellipses so that's probably why it doesn't look great there.