Bug 1949142 [wpt PR 50795] - Simplify corner-shape inset formula, a=testonly

Automatic update from web-platform-tests
Simplify corner-shape inset formula

Undo the slope calculation which was done for uneven radius (e.g. due to
percentage), as this would be incompatible with existing border-radius
rendering.

Instead, compute a simple offset based on the curvature and border width
only.

This would mean that elliptical corners would still look "scaled", but
square corners would have the correct width.

Bug: 394059604
Change-Id: If95876d166fdf7c2a83c3b1853e5be6cbb4bf657
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6280666
Reviewed-by: Fredrik Söderquist <[email protected]>
Commit-Queue: Noam Rosenthal <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1421844}

--

wpt-commits: 50268f9ef1ba7739f1d4b082b3b766b9a200144b
wpt-pr: 50795

Author: noamr

testing/web-platform/tests/css/css-borders/tentative/corner-shape/corner-shape-render-ref.html

@@ -48,26 +48,22 @@
 }
 
 const ctx = canvas.getContext("2d");
-
+const keywords = {bevel: 1, round: 2};
 // Adjust outer width for curvature
 const outer_width = ["top", "bottom"].flatMap((vSide) =>
   ["left", "right"].map((hSide) => {
     const corner = `${vSide}-${hSide}`;
-    const shape = style[`corner-${corner}-shape`];
+    let shape = style[`corner-${corner}-shape`];
+    shape = keywords[shape] || shape;
     const radius = style[`border-${corner}-radius`];
-    if (radius[0] === 0 || radius[1] === 0) return [0, 0];
-    if (shape === "round") return [...radius];
-
     const hWidth = style[`border-${hSide}-width`];
     const vWidth = style[`border-${vSide}-width`];
-    let slope = radius[1] / radius[0];
-    let perp = [-radius[0], radius[1]];
-    const mag = Math.hypot(...radius);
-    const translateX = [(perp[0] * hWidth) / mag, (perp[1] * hWidth) / mag];
-    const translateY = [(perp[0] * vWidth) / mag, (perp[1] * vWidth) / mag];
-    const vIntercept = Math.max(0, translateY[1] - slope * translateY[0]);
-    const hIntercept = Math.max(0, translateX[1] - slope * translateX[0]);
-    return [radius[0] + vWidth - vIntercept, radius[1] + hWidth - hIntercept];
+    if (shape >= 2.)
+      return radius;
+    if (shape <= 0.5)
+      return [radius[0] - vWidth, radius[1] - hWidth];
+    const offset = Math.sqrt(2. / shape) - 1;
+    return [radius[0] - vWidth * offset, radius[1] - hWidth * offset];
   })
 );
 let cursor = [];