Fix corner-shape shadow & outline rendering

As per resolution in
w3c/csswg-drafts#13037 (comment)

Shadows should be border-aligned, like border inset,
with external "miters" that are clipped to the outer edge.

The miter is computed by extending the start and end tangents of the
curve until they reach the outer edge.

The tangent is the line between the start point, and the "control
point": a point that would be the quadratic control point if this
was a normal quadratic curve with the same half-corner.

As part of this work, refactoring the rendering tests to be both
more precise and closer to something that can be reasoned about being
close to the spec.

See spec PR: w3c/csswg-drafts#13173
The PR and the WPT rendering code were developed side by side to
ensure that the tests assert the spec.

Since the spec defines that curves are approximate, and ref tests can
fail on antialiasing and curve inaccuracies, the corners are also
stroked with a blue 3px line on both the actual and ref versions, to
avoid test failures in these occasions.

(This change is guarded by the BorderRadiusCorrectionCoverageFactor,
as without it shadow rects wouldn't have an origin rect, so the
changed code paths is never reached).

Bug: 463996869
Change-Id: I7f586440f47757416b8eb9a2002629cd29e0174a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7215437
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Noam Rosenthal <nrosenthal@google.com>
Cr-Commit-Position: refs/heads/main@{#1554276}

Author: noamr

third_party/blink/renderer/core/paint/box_painter_base.cc

@@ -348,6 +348,10 @@ void BoxPainterBase::PaintNormalBoxShadow(
       ContouredRect rounded_fill_rect(
           FloatRoundedRect(fill_rect, border.GetRadii()),
           border.GetCornerCurvature());
+      if (RuntimeEnabledFeatures::
+              BorderRadiusCorrectionCoverageFactorEnabled()) {
+        rounded_fill_rect.SetOriginRect(border.GetOriginRect());
+      }
       ApplySpreadToShadowShape(rounded_fill_rect, shadow.Spread());
       context.FillContouredRect(rounded_fill_rect, Color::kBlack,
                                 auto_dark_mode);

third_party/blink/renderer/platform/geometry/contoured_rect.cc

@@ -93,9 +93,6 @@ bool ContouredRect::IntersectsQuad(const gfx::QuadF& quad) const {
 void ContouredRect::OutsetWithCornerCorrection(const gfx::OutsetsF& outsets) {
   if (RuntimeEnabledFeatures::BorderRadiusCorrectionCoverageFactorEnabled()) {
     rect_.OutsetWithCornerCorrection(outsets);
-    if (origin_rect_) {
-      origin_rect_->OutsetWithCornerCorrection(outsets);
-    }
     return;
   }
 

third_party/blink/renderer/platform/geometry/path_builder.cc

@@ -273,77 +273,56 @@ PathBuilder& PathBuilder::AddContouredRect(
   // This would include the outer border of the rect, as well as shadow and
   // margin.
   if (target_rect.Rect().Contains(origin_rect.Rect())) {
-    const gfx::RectF& outer_rect = target_rect.Rect();
+    auto miter = [&](const Corner& corner, const gfx::LineF& edge,
+                     const gfx::PointF& ref_point) {
+      return edge
+          .IntersectionWith(gfx::LineF(corner.IsEmpty()
+                                           ? (ref_point + edge.Normal())
+                                           : corner.QuadraticControlPoint(),
+                                       ref_point))
+          .value_or(ref_point);
+    };
+
+    auto miter_start = [&](const Corner& corner, const gfx::LineF& edge) {
+      return miter(corner, edge, corner.Start());
+    };
+    auto miter_end = [&](const Corner& corner, const gfx::LineF& edge) {
+      return miter(corner, edge, corner.End());
+    };
+
     const Corner top_right_corner = contoured_rect.TopRightCorner();
     const Corner bottom_right_corner = contoured_rect.BottomRightCorner();
     const Corner bottom_left_corner = contoured_rect.BottomLeftCorner();
     const Corner top_left_corner = contoured_rect.TopLeftCorner();
-    MoveTo(top_right_corner.Start());
+
+    const gfx::LineF top_line(target_rect.Rect().origin(),
+                              target_rect.Rect().top_right());
+    const gfx::LineF bottom_line(target_rect.Rect().bottom_left(),
+                                 target_rect.Rect().bottom_right());
+    const gfx::LineF left_line(target_rect.Rect().origin(),
+                               target_rect.Rect().bottom_left());
+    const gfx::LineF right_line(target_rect.Rect().top_right(),
+                                target_rect.Rect().bottom_right());
+
+    MoveTo(miter_start(top_right_corner, top_line));
     AddCorner(top_right_corner);
-    if (!top_right_corner.IsHyperellipse()) {
-      LineTo(gfx::LineF(outer_rect.top_right(), outer_rect.bottom_right())
-                 .IntersectionWith({top_right_corner.QuadraticControlPoint(),
-                                    top_right_corner.End()})
-                 .value_or(
-                     gfx::PointF(outer_rect.right(), origin_rect.Rect().y())));
-    }
-
-    if (!bottom_right_corner.IsHyperellipse()) {
-      LineTo(gfx::LineF(outer_rect.top_right(), outer_rect.bottom_right())
-                 .IntersectionWith({bottom_right_corner.QuadraticControlPoint(),
-                                    bottom_right_corner.Start()})
-                 .value_or(gfx::PointF(outer_rect.right(),
-                                       origin_rect.Rect().bottom())));
-    }
+    LineTo(miter_end(top_right_corner, right_line));
 
+    LineTo(miter_start(bottom_right_corner, right_line));
     AddCorner(bottom_right_corner);
+    LineTo(miter_end(bottom_right_corner, bottom_line));
 
-    if (!bottom_right_corner.IsHyperellipse()) {
-      LineTo(gfx::LineF(outer_rect.bottom_left(), outer_rect.bottom_right())
-                 .IntersectionWith({bottom_right_corner.QuadraticControlPoint(),
-                                    bottom_right_corner.End()})
-                 .value_or(gfx::PointF(origin_rect.Rect().right(),
-                                       outer_rect.bottom())));
-    }
-    if (!bottom_left_corner.IsHyperellipse()) {
-      LineTo(gfx::LineF(outer_rect.bottom_left(), outer_rect.bottom_right())
-                 .IntersectionWith({bottom_left_corner.QuadraticControlPoint(),
-                                    bottom_left_corner.Start()})
-                 .value_or(
-                     gfx::PointF(origin_rect.Rect().x(), outer_rect.bottom())));
-    }
+    LineTo(miter_start(bottom_left_corner, bottom_line));
     AddCorner(bottom_left_corner);
-    if (!bottom_left_corner.IsHyperellipse()) {
-      LineTo(gfx::LineF(outer_rect.bottom_left(), outer_rect.origin())
-                 .IntersectionWith({bottom_left_corner.QuadraticControlPoint(),
-                                    bottom_left_corner.End()})
-                 .value_or(
-                     gfx::PointF(outer_rect.x(), origin_rect.Rect().bottom())));
-    }
-    if (!top_left_corner.IsHyperellipse()) {
-      LineTo(
-          gfx::LineF(outer_rect.bottom_left(), outer_rect.origin())
-              .IntersectionWith({top_left_corner.QuadraticControlPoint(),
-                                 top_left_corner.Start()})
-              .value_or(gfx::PointF(outer_rect.x(), origin_rect.Rect().y())));
-    }
+    LineTo(miter_end(bottom_left_corner, left_line));
+
+    LineTo(miter_start(top_left_corner, left_line));
     AddCorner(top_left_corner);
-    if (!top_left_corner.IsHyperellipse()) {
-      LineTo(
-          gfx::LineF(outer_rect.top_right(), outer_rect.origin())
-              .IntersectionWith({top_left_corner.QuadraticControlPoint(),
-                                 top_left_corner.End()})
-              .value_or(gfx::PointF(origin_rect.Rect().x(), outer_rect.y())));
-    }
-    if (!top_right_corner.IsHyperellipse()) {
-      LineTo(gfx::LineF(outer_rect.top_right(), outer_rect.origin())
-                 .IntersectionWith({top_right_corner.QuadraticControlPoint(),
-                                    top_right_corner.Start()})
-                 .value_or(
-                     gfx::PointF(origin_rect.Rect().right(), outer_rect.y())));
-    }
+    LineTo(miter_end(top_left_corner, top_line));
+
     Close();
     ClearCachedData();
+
     return *this;
   }
 

third_party/blink/web_tests/external/wpt/css/css-borders/corner-shape/corner-shape-any-ref.html

@@ -20,8 +20,8 @@
 
 iframe {
     overflow: clip;
-    width: 250px;
-    height: 150px;
+    width: 500px;
+    height: 300px;
     border: none;
 }
 
@@ -41,7 +41,7 @@
 </template>
 <script>
     addEventListener("DOMContentLoaded", async () => {
-        const test_files = ["corner-shape-render-precise.html", "corner-shape-render-fuzzy.html"]
+        const test_files = ["render-corner-shape.html"]
         const dom_parser = new DOMParser();
         for (const test_file of test_files) {
             const test_html = await (await fetch(test_file)).text();
@@ -51,7 +51,7 @@
                 const scenario = document.getElementById("scenario").content.cloneNode(true);
                 scenario.querySelector(".variant").innerText = variant;
                 scenario.querySelector(".test").src = `${test_file}${variant}`;
-                scenario.querySelector(".ref").src = `corner-shape-any-ref.html${variant}`;
+                scenario.querySelector(".ref").src = `render-corner-shape-ref.html${variant}`;
                 document.querySelector("main").append(scenario);
             }
         }

third_party/blink/web_tests/external/wpt/css/css-borders/corner-shape/corner-shape-gallery.manual.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Render corner shape</title>
+    <script src="./resources/render-corner-shape.js"></script>
+  </head>
+  <body>
+    <script>
+      const element = create_element_with_corner_shape(
+        new URLSearchParams(location.search),
+        "ref"
+      );
+      document.body.appendChild(element);
+    </script>
+  </body>
+</html>