[css-borders-4] Handle rectangle, self-intersecting, and non-uniform outset corners in the contoured path algorithm

[sb3nder]

• Refactored border-aligned corner clip-out path to:

  • Handle non-square corners by scaling the "normal" vectors.
  • Fix when the miter degenerates and self-intersects for concave corners. Fixed by calculating the miter lines as perpendicular to the "normal" vectors (AKA "tangent").
    (note: in square corners this results in the same miter points as the control-point method. When the corner is not square: in concave corners the miter points diverge from the control-point method, in convex corners the miter points are almost the same as the control-point method.)
  • Fix non uniform outset corners and mixed-inset-sign corners, by computing bevel corners as the tangent to 2 circles with center at corner-start and corner-end, and radius the 2 signed insets. All other intermediary corner shapes are adjusted accordingly and are also fixed.

• Refactored Computing a contoured path to:

  • Respect the outset-adjusted border radius for round corner compat.

    • Fixed by substituting the following algorithm:

      4. Let adjustedRadiusInOutsetCoordinates be the outset-adjusted border radius given borderRect’s size, radius, and (-insetX, -insetY).
      5. Return (adjustedRadiusInOutsetCoordinates’s width - insetX, adjustedRadiusInOutsetCoordinates’s height - insetY).

      with adjustedInset, which calculates the inset from the adjusted radius, and by computing the borderRect outer point from the targetRect and the adjusted inset.

• Applied opposite corner scale factor to the used value.

• Made various math fixes.

• Updated explanation for non-linear interpolation.

• Fixed some typos.

Fixes #13318
Fixes #14183
Fixes #14184
Fixes #14185

WPT tests:

• Update corner-shape ref rendering to match new algo, and add test cases web-platform-tests/wpt#61696
• corner-shape-interpolation.html (already ok)

Questions:

• I fixed normalized superellipse half corner by calculating the geometric diagonal of the curve,
  though I wonder if it would be better to approximate it here by using the concave corner diagonal (n=2^-abs(K)), to get 0.25 and 0.75 for scoop and round, respectively.
  [css-borders-4] Stroke/hull direction uses the normalized (signed) half corner, but implementations require the convex half corner for concave shapes #14157

• [css-borders-4] How should outset_adjusted_border_radius apply to non-round corner shapes? #14270

• [css-borders-4] Editorial: clarify "border-aligned corner clip-out path" (pre-clip path, curve intersection, keyword shapes #14158

graphs:
clip-out path
testing for clip-out path
half corner
half corner visual

screencasts:
current algorithm, chrome implementation:

screencast-2.mp4

circa proposed changes:

expected-behavior-2.mp4

chrome bugs:
https://issues.chromium.org/issues/532190484
https://issues.chromium.org/issues/532199267
https://issues.chromium.org/issues/532163949

[noamr]

Thanks for working on this! The screen casts look like they fix the issue but it's hard for me to assess the formula without tests.

Note that the current WPTs for corner-shape implement the spec'ed formula in JS using canvas, see https://github.com/web-platform-tests/wpt/blob/master/css/css-borders/corner-shape/resources/render-corner-shape.js

So supplementing this PR with a WPT PR that does this and some test cases that fix the aforementioned issues would be very helpful.

(Side note: IPR for this issue needs to be filled out)

[sb3nder]

Thank you for the pointers. I've added WPTs to the todo list in the PR, and hopefully I'll be able to implement them.

[noamr]

Thank you for the pointers. I've added WPTs to the todo list in the PR, and hopefully I'll be able to implement them.

Let me know if you need any help. I also might try to get to trying this out.

[svgeesus]

s it is a separate repo for WPT, adding tests should be a separate PR right?

[sb3nder]

it is a separate repo for WPT, adding tests should be a separate PR right?

Yep, the todo list is mostly there to remind me what I still need to do for this PR.

[sb3nder]

In the following case (positive non-uniform outsets):

I think the corner should always be drawn without overflowing the blue area:

Let me know if you agree (👍) or disagree (👎).

cc @noamr

[sb3nder]

@noamr no progress yet. I got sidetracked trying to handle non-uniform outsets and was considering giving that another try.
Do you think I should leave that as-is for now and proceed with the WPT tests?

[noamr]

@noamr no progress yet. I got sidetracked trying to handle non-uniform outsets and was considering giving that another try. Do you think I should leave that as-is for now and proceed with the WPT tests?

Up to you!

[noamr]

This seems like really stellar work. Thanks a lot. We are testing it on the blink implementation/WPT and review it based on this

[sb3nder]

Thanks! I really appreciate it.
Happy to help if anything comes up.

[noamr]

I want to merge this.
@emilio @smfr @nt1m can you see if this is OK given your ongoing implementation of the feature?
We tested this in blink/WPT and it seems to give better results along all kinds of edge cases.

[smfr]

Do you plan to update the WPT JS to show the code? We'd like to review that, and see if it's different from what we've done in WebKit.

[noamr]

Do you plan to update the WPT JS to show the code? We'd like to review that, and see if it's different from what we've done in WebKit.

web-platform-tests/wpt#61658

[sb3nder]

I reworked the test algorithm a bit, added some new test cases, and added support for clip-path: margin-box to cover non-uniform outsets.
web-platform-tests/wpt#61696