corner-shape: adopt the revised contoured-path algorithm

https://bugs.webkit.org/show_bug.cgi?id=320753
rdar://183753095

Reviewed by NOBODY (OOPS!).

Offsetting a shaped corner outward picked between several constructions
based on the corner's shape, and they disagreed with one another. They
coincided only for a plain round corner with a single radius, so the damage
showed up on non-round shapes and on elliptical radii

This replaces them with the single construction from the revised algorithm,
which scales the offset normal per-axis by the two corner radii so an
elliptical corner keeps its shape when offset. box-shadow spread now uses
that same construction, so a shadow and an outline at the same distance stay
parallel rather than pinching together at the corners.

Adopted algorithm from w3c/csswg-drafts#14142

* Source/WebCore/platform/graphics/CornerShapeUtilities.cpp:
(WebCore::borderContourPath):
* Source/WebCore/platform/graphics/GeometryUtilities.cpp:
(WebCore::findSegmentLineIntersection):
* Source/WebCore/platform/graphics/GeometryUtilities.h:
* Source/WebCore/rendering/BorderShape.cpp:
(WebCore::BorderShape::shapeForOffsetRect):
(WebCore::buildOutsetCornerInputs):
(WebCore::addAreaExpansionOffsetContour):
(WebCore::BorderShape::pathForOuterCornerShape const):
(WebCore::BorderShape::pathForInnerCornerShape const):
(WebCore::adjustedRadiusDimension):
(WebCore::outsetAdjustedBorderRadius):
(WebCore::expandRadiiForOutset):
(WebCore::BorderShape::shapeWithBorderWidths const):
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-bevel-overflow.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-superellipse-convex.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-bevel.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-squircle.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-superellipse-bevel.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-superellipse-squircle.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-bevel-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-bevel-ref.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-bevel.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-elliptical-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-elliptical-ref.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-elliptical.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-outline-offset-bevel-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-outline-offset-bevel-ref.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-outline-offset-bevel.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-outline-offset-elliptical-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-outline-offset-elliptical-ref.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-outline-offset-elliptical.html: Added.
* Source/WebCore/rendering/BorderShape.h:
(WebCore::BorderShape::shapeForOffsetRect):
* Source/WebCore/rendering/OutlinePainter.cpp:
(WebCore::OutlinePainter::paintOutline const):
(WebCore::OutlinePainter::paintFocusRing const):

Author: cupidsity

LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-bevel-overflow.html

@@ -2,7 +2,7 @@
 <title>CSS Borders and Box Decorations 4: 'corner-shape' rendering with overflow</title>
 <link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
 <link rel="match" href="corner-shape-bevel-overflow-ref.html">
-<meta name="fuzzy" content="maxDifference=0-32;totalPixels=0-256">
+<meta name="fuzzy" content="maxDifference=0-36;totalPixels=0-256">
 <style>
     .bevel {
         background: red;

LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-bevel.html

@@ -3,7 +3,7 @@
 <title>CSS Borders and Box Decorations 4: 'corner-shape: bevel' on all corners</title>
 <link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
 <link rel="match" href="corner-shape-bevel-ref.html">
-<meta name="fuzzy" content="maxDifference=0-13; totalPixels=0-135">
+<meta name="fuzzy" content="maxDifference=0-24; totalPixels=0-135">
 <style>
     .target {
         background: green;

LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-bevel-expected.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: 'box-shadow' spread with elliptical 'corner-shape: bevel' corners — reference</title>
+<style>
+    body { margin: 0; }
+    .canvas { position: absolute; left: 0; top: 0; width: 160px; height: 160px; }
+    .canvas > div { position: absolute; inset: 0; }
+    .spread {
+        background: green;
+        clip-path: path("\
+            M 123.524 25.000 L 126.494 36.135 L \
+            134.494 66.135 L 135.000 68.034 L 135.000 \
+            91.966 L 134.494 93.865 L 126.494 123.865 \
+            L 123.524 135.000 L 36.476 135.000 L \
+            33.506 123.865 L 25.506 93.865 L 25.000 \
+            91.966 L 25.000 68.034 L 25.506 66.135 \
+            L 33.506 36.135 L 36.476 25.000 Z");
+    }
+    .box {
+        background: red;
+        clip-path: path("\
+            M 112.000 40.000 L 120.000 70.000 L \
+            120.000 90.000 L 112.000 120.000 L 48.000 \
+            120.000 L 40.000 90.000 L 40.000 70.000 \
+            L 48.000 40.000 Z");
+    }
+</style>
+</head>
+<div class=canvas><div class=spread></div><div class=box></div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-bevel-ref.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: 'box-shadow' spread with elliptical 'corner-shape: bevel' corners — reference</title>
+<style>
+    body { margin: 0; }
+    .canvas { position: absolute; left: 0; top: 0; width: 160px; height: 160px; }
+    .canvas > div { position: absolute; inset: 0; }
+    .spread {
+        background: green;
+        clip-path: path("\
+            M 123.524 25.000 L 126.494 36.135 L \
+            134.494 66.135 L 135.000 68.034 L 135.000 \
+            91.966 L 134.494 93.865 L 126.494 123.865 \
+            L 123.524 135.000 L 36.476 135.000 L \
+            33.506 123.865 L 25.506 93.865 L 25.000 \
+            91.966 L 25.000 68.034 L 25.506 66.135 \
+            L 33.506 36.135 L 36.476 25.000 Z");
+    }
+    .box {
+        background: red;
+        clip-path: path("\
+            M 112.000 40.000 L 120.000 70.000 L \
+            120.000 90.000 L 112.000 120.000 L 48.000 \
+            120.000 L 40.000 90.000 L 40.000 70.000 \
+            L 48.000 40.000 Z");
+    }
+</style>
+</head>
+<div class=canvas><div class=spread></div><div class=box></div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-bevel.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: 'box-shadow' spread with elliptical 'corner-shape: bevel' corners</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
+<link rel="match" href="corner-shape-box-shadow-spread-bevel-ref.html">
+<meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-336">
+<style>
+    body { margin: 0; }
+    .target {
+        position: absolute;
+        left: 40px;
+        top: 40px;
+        width: 80px;
+        height: 80px;
+        background: red;
+        box-shadow: 0 0 0 15px green;
+        border-radius: 8px / 30px;
+        corner-shape: bevel;
+    }
+</style>
+</head>
+<div class=target></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-elliptical-expected.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: 'box-shadow' spread with an elliptical concave 'corner-shape' — reference</title>
+<style>
+    body { margin: 0; }
+    .canvas { position: absolute; left: 0; top: 0; width: 160px; height: 160px; }
+    .canvas > div { position: absolute; inset: 0; }
+    .spread {
+        background: green;
+        clip-path: path("\
+            M 135.000 25.000 L 135.000 135.000 L \
+            25.000 135.000 L 25.000 81.369 C 25.791 \
+            80.348 27.077 79.810 28.083 79.023 C 29.088 \
+            78.237 30.381 77.764 31.033 76.651 C 31.685 \
+            75.537 31.743 73.844 31.994 72.342 C 32.244 \
+            70.840 32.361 69.210 32.536 67.642 C 32.711 \
+            66.074 32.879 64.505 33.043 62.934 C 33.207 \
+            61.364 33.365 59.793 33.520 58.221 C 33.675 \
+            56.649 33.830 55.077 33.974 53.503 C 34.118 \
+            51.929 34.253 50.353 34.384 48.776 C 34.515 \
+            47.200 34.646 45.623 34.759 44.043 C 34.872 \
+            42.462 34.982 40.882 35.064 39.295 C 35.145 \
+            37.708 35.179 36.112 35.249 34.523 C 35.319 \
+            32.934 35.405 31.349 35.483 29.762 C 35.562 \
+            28.174 35.645 26.587 35.718 25.000 Z");
+    }
+    .box {
+        background: red;
+        clip-path: path("\
+            M 120.000 40.000 L 120.000 120.000 L \
+            40.000 120.000 L 40.000 90.000 C 40.614 \
+            90.000 43.179 85.360 46.125 70.627 C 49.072 \
+            55.895 50.000 43.070 50.000 40.000 Z");
+    }
+</style>
+</head>
+<div class=canvas><div class=spread></div><div class=box></div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-elliptical-ref.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: 'box-shadow' spread with an elliptical concave 'corner-shape' — reference</title>
+<style>
+    body { margin: 0; }
+    .canvas { position: absolute; left: 0; top: 0; width: 160px; height: 160px; }
+    .canvas > div { position: absolute; inset: 0; }
+    .spread {
+        background: green;
+        clip-path: path("\
+            M 135.000 25.000 L 135.000 135.000 L \
+            25.000 135.000 L 25.000 81.369 C 25.791 \
+            80.348 27.077 79.810 28.083 79.023 C 29.088 \
+            78.237 30.381 77.764 31.033 76.651 C 31.685 \
+            75.537 31.743 73.844 31.994 72.342 C 32.244 \
+            70.840 32.361 69.210 32.536 67.642 C 32.711 \
+            66.074 32.879 64.505 33.043 62.934 C 33.207 \
+            61.364 33.365 59.793 33.520 58.221 C 33.675 \
+            56.649 33.830 55.077 33.974 53.503 C 34.118 \
+            51.929 34.253 50.353 34.384 48.776 C 34.515 \
+            47.200 34.646 45.623 34.759 44.043 C 34.872 \
+            42.462 34.982 40.882 35.064 39.295 C 35.145 \
+            37.708 35.179 36.112 35.249 34.523 C 35.319 \
+            32.934 35.405 31.349 35.483 29.762 C 35.562 \
+            28.174 35.645 26.587 35.718 25.000 Z");
+    }
+    .box {
+        background: red;
+        clip-path: path("\
+            M 120.000 40.000 L 120.000 120.000 L \
+            40.000 120.000 L 40.000 90.000 C 40.614 \
+            90.000 43.179 85.360 46.125 70.627 C 49.072 \
+            55.895 50.000 43.070 50.000 40.000 Z");
+    }
+</style>
+</head>
+<div class=canvas><div class=spread></div><div class=box></div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-box-shadow-spread-elliptical.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: 'box-shadow' spread with an elliptical concave 'corner-shape'</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
+<link rel="match" href="corner-shape-box-shadow-spread-elliptical-ref.html">
+<meta name="fuzzy" content="maxDifference=0-89; totalPixels=0-115">
+<style>
+    body { margin: 0; }
+    .target {
+        position: absolute;
+        left: 40px;
+        top: 40px;
+        width: 80px;
+        height: 80px;
+        background: red;
+        box-shadow: 0 0 0 15px green;
+        border-top-left-radius: 10px 50px;
+        corner-top-left-shape: superellipse(-0.5);
+    }
+</style>
+</head>
+<div class=target></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-outline-offset-bevel-expected.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: 'outline-offset' with elliptical 'corner-shape: bevel' corners — reference</title>
+<style>
+    body { margin: 0; }
+    .canvas { position: absolute; left: 0; top: 0; width: 160px; height: 160px; }
+    .canvas > div { position: absolute; inset: 0; }
+    .box {
+        background: red;
+        clip-path: path("\
+            M 112.000 40.000 L 120.000 70.000 L \
+            120.000 90.000 L 112.000 120.000 L 48.000 \
+            120.000 L 40.000 90.000 L 40.000 70.000 \
+            L 48.000 40.000 Z");
+    }
+    .outline {
+        background: black;
+        clip-path: path(evenodd, "\
+            M 131.207 15.000 L 136.156 33.558 L \
+            144.156 63.558 L 145.000 66.724 L 145.000 \
+            93.276 L 144.156 96.442 L 136.156 126.442 \
+            L 131.207 145.000 L 28.793 145.000 L \
+            23.844 126.442 L 15.844 96.442 L 15.000 \
+            93.276 L 15.000 66.724 L 15.844 63.558 \
+            L 23.844 33.558 L 28.793 15.000 Z \
+            M 127.366 20.000 L 131.325 34.847 L \
+            139.325 64.847 L 140.000 67.379 L 140.000 \
+            92.621 L 139.325 95.153 L 131.325 125.153 \
+            L 127.366 140.000 L 32.634 140.000 L \
+            28.675 125.153 L 20.675 95.153 L 20.000 \
+            92.621 L 20.000 67.379 L 20.675 64.847 \
+            L 28.675 34.847 L 32.634 20.000 Z");
+    }
+</style>
+</head>
+<div class=canvas><div class=box></div><div class=outline></div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-borders/corner-shape/corner-shape-outline-offset-bevel-ref.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: 'outline-offset' with elliptical 'corner-shape: bevel' corners — reference</title>
+<style>
+    body { margin: 0; }
+    .canvas { position: absolute; left: 0; top: 0; width: 160px; height: 160px; }
+    .canvas > div { position: absolute; inset: 0; }
+    .box {
+        background: red;
+        clip-path: path("\
+            M 112.000 40.000 L 120.000 70.000 L \
+            120.000 90.000 L 112.000 120.000 L 48.000 \
+            120.000 L 40.000 90.000 L 40.000 70.000 \
+            L 48.000 40.000 Z");
+    }
+    .outline {
+        background: black;
+        clip-path: path(evenodd, "\
+            M 131.207 15.000 L 136.156 33.558 L \
+            144.156 63.558 L 145.000 66.724 L 145.000 \
+            93.276 L 144.156 96.442 L 136.156 126.442 \
+            L 131.207 145.000 L 28.793 145.000 L \
+            23.844 126.442 L 15.844 96.442 L 15.000 \
+            93.276 L 15.000 66.724 L 15.844 63.558 \
+            L 23.844 33.558 L 28.793 15.000 Z \
+            M 127.366 20.000 L 131.325 34.847 L \
+            139.325 64.847 L 140.000 67.379 L 140.000 \
+            92.621 L 139.325 95.153 L 131.325 125.153 \
+            L 127.366 140.000 L 32.634 140.000 L \
+            28.675 125.153 L 20.675 95.153 L 20.000 \
+            92.621 L 20.000 67.379 L 20.675 64.847 \
+            L 28.675 34.847 L 32.634 20.000 Z");
+    }
+</style>
+</head>
+<div class=canvas><div class=box></div><div class=outline></div></div>