Rendering of corner-shape: bevel

This sets the infrastructure for rendering corner-shape,
by storing 4-float "CornerCurvature" on a FloatRoundedRect.

Currently only the special-case for "bevel" is handled, with the idea
of iterating on the different aspects of rendering as we go
along.

To properly render bevel (and any other curvature that's lower than
round), drawing a straight line from the outer/inner sides
doesn't create the right effect, because the diagonal distance between
those lines doesn't match the border width.

To correct that, while maintaining rendering within the initial
corners, the outer corner is shrunk to the point where the resulting
diagonal quad has a width equal to the border-width (or interpolating
between two border-widths).

See open spec issue: https://github.com/w3c/csswg-drafts/issues/11610

Removed existing hand-coded SVG tests, and generating the refs using
a canvas polyfill instead.

This polyfill can be amended later on as we polish the spec.

Bug: 394059604
Change-Id: I9fb76dd7dc557ed10c40adecbb9f68f672de1acc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6250197
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1421457}

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

@@ -12,6 +12,7 @@
 #include "third_party/blink/renderer/core/paint/rounded_border_geometry.h"
 #include "third_party/blink/renderer/core/style/border_edge.h"
 #include "third_party/blink/renderer/core/style/computed_style.h"
+#include "third_party/blink/renderer/platform/geometry/float_rounded_rect.h"
 #include "third_party/blink/renderer/platform/graphics/graphics_context.h"
 #include "third_party/blink/renderer/platform/graphics/graphics_context_state_saver.h"
 #include "third_party/blink/renderer/platform/graphics/skia/skia_utils.h"
@@ -860,8 +861,9 @@ struct BoxBorderPainter::ComplexBorderInfo {
     // Finally, build the opacity group structures.
     BuildOpacityGroups(border_painter, sorted_sides);
 
-    if (border_painter.is_rounded_)
+    if (border_painter.is_rounded_) {
       rounded_border_path.AddRoundedRect(border_painter.outer_);
+    }
   }
 
   Vector<OpacityGroup, 4> opacity_groups;
@@ -934,8 +936,10 @@ void BoxBorderPainter::DrawDoubleBorder() const {
 }
 
 bool BoxBorderPainter::PaintBorderFastPath() const {
-  if (!is_uniform_color_ || !is_uniform_style_ || !inner_.IsRenderable())
+  if (!is_uniform_color_ || !is_uniform_style_ || !inner_.IsRenderable() ||
+      !inner_.HasSimpleRoundedCurvature()) {
     return false;
+  }
 
   if (FirstEdge().BorderStyle() != EBorderStyle::kSolid &&
       FirstEdge().BorderStyle() != EBorderStyle::kDouble)
@@ -1250,6 +1254,7 @@ void BoxBorderPainter::PaintSide(const ComplexBorderInfo& border_info,
     case BoxSide::kTop: {
       bool use_path =
           is_rounded_ && (BorderStyleHasInnerDetail(edge.BorderStyle()) ||
+                          !inner_.HasSimpleRoundedCurvature() ||
                           BorderWillArcInnerEdge(inner_.GetRadii().TopLeft(),
                                                  inner_.GetRadii().TopRight()));
       if (use_path) {
@@ -1265,6 +1270,7 @@ void BoxBorderPainter::PaintSide(const ComplexBorderInfo& border_info,
     case BoxSide::kBottom: {
       bool use_path = is_rounded_ &&
                       (BorderStyleHasInnerDetail(edge.BorderStyle()) ||
+                       !inner_.HasSimpleRoundedCurvature() ||
                        BorderWillArcInnerEdge(inner_.GetRadii().BottomLeft(),
                                               inner_.GetRadii().BottomRight()));
       if (use_path) {
@@ -1280,6 +1286,7 @@ void BoxBorderPainter::PaintSide(const ComplexBorderInfo& border_info,
     case BoxSide::kLeft: {
       bool use_path =
           is_rounded_ && (BorderStyleHasInnerDetail(edge.BorderStyle()) ||
+                          !inner_.HasSimpleRoundedCurvature() ||
                           BorderWillArcInnerEdge(inner_.GetRadii().BottomLeft(),
                                                  inner_.GetRadii().TopLeft()));
       if (use_path) {
@@ -1295,6 +1302,7 @@ void BoxBorderPainter::PaintSide(const ComplexBorderInfo& border_info,
     case BoxSide::kRight: {
       bool use_path = is_rounded_ &&
                       (BorderStyleHasInnerDetail(edge.BorderStyle()) ||
+                       !inner_.HasSimpleRoundedCurvature() ||
                        BorderWillArcInnerEdge(inner_.GetRadii().BottomRight(),
                                               inner_.GetRadii().TopRight()));
       if (use_path) {

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

@@ -902,6 +902,10 @@ inline bool PaintFastBottomLayer(const Document& document,
                                  const BackgroundImageGeometry& geometry,
                                  Image* image,
                                  SkBlendMode composite_op) {
+  // TODO(crbug.com/397377466) support fast-path for non-round curves
+  if (!border_rect.HasSimpleRoundedCurvature()) {
+    return false;
+  }
   // Compute the destination rect for painting the color here because we may
   // need it for computing the image painting rect for optimization.
   FloatRoundedRect color_border =

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

@@ -9,6 +9,7 @@
 #include "third_party/blink/renderer/platform/geometry/float_rounded_rect.h"
 #include "third_party/blink/renderer/platform/geometry/length_functions.h"
 #include "ui/gfx/geometry/rect_conversions.h"
+#include "ui/gfx/geometry/vector2d_f.h"
 
 namespace blink {
 
@@ -32,6 +33,37 @@ FloatRoundedRect::Radii CalcRadiiFor(const ComputedStyle& style,
           : gfx::SizeF());
 }
 
+float EffectiveCurvature(Superellipse superellipse, const gfx::SizeF& radius) {
+  return radius.IsEmpty() ? FloatRoundedRect::CornerCurvature::kRound
+                          : superellipse.Exponent();
+}
+
+FloatRoundedRect::CornerCurvature CalcCurvatureFor(
+    const ComputedStyle& style,
+    const FloatRoundedRect::Radii& radii) {
+  return FloatRoundedRect::CornerCurvature(
+      EffectiveCurvature(style.CornerTopLeftShape(), radii.TopLeft()),
+      EffectiveCurvature(style.CornerTopRightShape(), radii.TopRight()),
+      EffectiveCurvature(style.CornerBottomRightShape(), radii.BottomRight()),
+      EffectiveCurvature(style.CornerBottomLeftShape(), radii.BottomLeft()));
+}
+
+FloatRoundedRect PixelSnappedRoundedBorderInternal(
+    const ComputedStyle& style,
+    const PhysicalRect& border_rect,
+    PhysicalBoxSides sides_to_include) {
+  FloatRoundedRect rounded_rect(ToPixelSnappedRect(border_rect));
+
+  if (style.HasBorderRadius()) {
+    rounded_rect.SetRadii(
+        CalcRadiiFor(style, gfx::SizeF(border_rect.size), sides_to_include));
+    rounded_rect.ConstrainRadii();
+    rounded_rect.SetCornerCurvature(
+        CalcCurvatureFor(style, rounded_rect.GetRadii()));
+  }
+  return rounded_rect;
+}
+
 }  // anonymous namespace
 
 FloatRoundedRect RoundedBorderGeometry::RoundedBorder(
@@ -42,20 +74,107 @@ FloatRoundedRect RoundedBorderGeometry::RoundedBorder(
     rounded_rect.SetRadii(
         CalcRadiiFor(style, gfx::SizeF(border_rect.size), PhysicalBoxSides()));
     rounded_rect.ConstrainRadii();
+    rounded_rect.SetCornerCurvature(
+        CalcCurvatureFor(style, rounded_rect.GetRadii()));
   }
   return rounded_rect;
 }
 
+// Each corner is rendered independently and its rendering should remain within
+// the corner bounds. With low curvature values (curvature<2), as well as with
+// elliptical corners, this creates an effect where lines/curves drawn at the
+// border-width offset would seem thinner than the given border-width. To
+// correct this, while maintaining the rule of drawing only within the corners,
+// the outer corner is inset by some offset, computed by the slope and different
+// border-widths. The resulting smaller outer corner size creates the effect of
+// having a larger border, which matches the specified border-width. Note that
+// it's currently implemented for bevel (straight line), and for other
+// curvatures it would have to use something equivalent to the tangent (the
+// nearest control point). Note that some of this is an open spec issue:
+// https://github.com/w3c/csswg-drafts/issues/11610
+gfx::SizeF InsetOuterCornerSizeForCurvature(const gfx::SizeF& corner_size,
+                                            float curvature,
+                                            float horizontal_border_width,
+                                            float vertical_border_width) {
+  // TODO(noamr) implement for other curvatures.
+  if (curvature != FloatRoundedRect::CornerCurvature::kBevel) {
+    return corner_size;
+  }
+
+  CHECK(!corner_size.IsEmpty());
+
+  // The slope would be different for curvatures other than bevel. The slope
+  // would be based on the control point.
+  float slope = corner_size.height() / corner_size.width();
+
+  // compute two vector that would be perpendicular to the straight line,
+  // with the border widths as their sizes.
+  gfx::Vector2dF perpendicular_vector(-corner_size.height(),
+                                      corner_size.width());
+  float magnitude = perpendicular_vector.Length();
+  gfx::Vector2dF horizontal_side_translation = gfx::ScaleVector2d(
+      perpendicular_vector, horizontal_border_width / magnitude,
+      horizontal_border_width / magnitude);
+  gfx::Vector2dF vertical_side_translation = gfx::ScaleVector2d(
+      perpendicular_vector, vertical_border_width / magnitude,
+      vertical_border_width / magnitude);
+
+  // Given the translations, compute the intercepts (b) of the wanted equation.
+  float vertical_side_intercept =
+      vertical_side_translation.y() - slope * vertical_side_translation.x();
+  float horizontal_side_intercept =
+      horizontal_side_translation.y() - slope * horizontal_side_translation.x();
+
+  // The found intercepts are relative to the *inner* rect, as the requisited
+  // distance is relative to the inner rect. So correct using the border width,
+  // as the offset applies to the outer rect.
+  return gfx::SizeF(
+      corner_size.width() + vertical_border_width - vertical_side_intercept,
+      corner_size.height() + horizontal_border_width -
+          horizontal_side_intercept);
+}
+
 FloatRoundedRect RoundedBorderGeometry::PixelSnappedRoundedBorder(
     const ComputedStyle& style,
     const PhysicalRect& border_rect,
     PhysicalBoxSides sides_to_include) {
-  FloatRoundedRect rounded_rect(ToPixelSnappedRect(border_rect));
-  if (style.HasBorderRadius()) {
-    rounded_rect.SetRadii(
-        CalcRadiiFor(style, gfx::SizeF(border_rect.size), sides_to_include));
-    rounded_rect.ConstrainRadii();
+  FloatRoundedRect rounded_rect =
+      PixelSnappedRoundedBorderInternal(style, border_rect, sides_to_include);
+  const auto& curvature = rounded_rect.GetCornerCurvature();
+
+  FloatRoundedRect::Radii radii = rounded_rect.GetRadii();
+  if (radii.IsZero() || curvature.IsRound() || sides_to_include.IsEmpty()) {
+    return rounded_rect;
   }
+  if ((sides_to_include.left || sides_to_include.top) &&
+      !radii.TopLeft().IsEmpty()) {
+    radii.SetTopLeft(InsetOuterCornerSizeForCurvature(
+        radii.TopLeft(), curvature.TopLeft(),
+        sides_to_include.left ? style.BorderLeftWidth() : 0,
+        sides_to_include.top ? style.BorderTopWidth() : 0));
+  }
+  if ((sides_to_include.right || sides_to_include.top) &&
+      !radii.TopRight().IsEmpty()) {
+    radii.SetTopRight(InsetOuterCornerSizeForCurvature(
+        radii.TopRight(), curvature.TopRight(),
+        sides_to_include.right ? style.BorderRightWidth() : 0,
+        sides_to_include.top ? style.BorderTopWidth() : 0));
+  }
+  if ((sides_to_include.right || sides_to_include.bottom) &&
+      !radii.BottomRight().IsEmpty()) {
+    radii.SetBottomRight(InsetOuterCornerSizeForCurvature(
+        radii.BottomRight(), curvature.BottomRight(),
+        sides_to_include.right ? style.BorderRightWidth() : 0,
+        sides_to_include.bottom ? style.BorderBottomWidth() : 0));
+  }
+  if ((sides_to_include.left || sides_to_include.bottom) &&
+      !radii.BottomLeft().IsEmpty()) {
+    radii.SetBottomLeft(InsetOuterCornerSizeForCurvature(
+        radii.BottomLeft(), curvature.BottomLeft(),
+        sides_to_include.left ? style.BorderLeftWidth() : 0,
+        sides_to_include.bottom ? style.BorderBottomWidth() : 0));
+  }
+  rounded_rect.SetRadii(radii);
   return rounded_rect;
 }
 
@@ -110,9 +229,11 @@ FloatRoundedRect RoundedBorderGeometry::PixelSnappedRoundedBorderWithOutsets(
 
   if (style.HasBorderRadius()) {
     FloatRoundedRect pixel_snapped_rounded_border =
-        PixelSnappedRoundedBorder(style, border_rect, sides_to_include);
+        PixelSnappedRoundedBorderInternal(style, border_rect, sides_to_include);
     pixel_snapped_rounded_border.Outset(gfx::OutsetsF(adjusted_outsets));
     rounded_rect.SetRadii(pixel_snapped_rounded_border.GetRadii());
+    rounded_rect.SetCornerCurvature(
+        pixel_snapped_rounded_border.GetCornerCurvature());
   }
   return rounded_rect;
 }

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

@@ -182,6 +182,7 @@ void FloatRoundedRect::Radii::OutsetForShapeMargin(float outset) {
   bottom_right_ += outset_size;
 }
 
+// TODO(crbug.com/396173464) support curvature
 static inline float CornerRectIntercept(float y,
                                         const gfx::RectF& corner_rect) {
   DCHECK_GT(corner_rect.height(), 0);
@@ -189,6 +190,7 @@ static inline float CornerRectIntercept(float y,
          sqrt(1 - (y * y) / (corner_rect.height() * corner_rect.height()));
 }
 
+// TODO(crbug.com/396173464) support curvature
 bool FloatRoundedRect::XInterceptsAtY(float y,
                                       float& min_x_intercept,
                                       float& max_x_intercept) const {
@@ -258,6 +260,7 @@ void FloatRoundedRect::OutsetForShapeMargin(float outset) {
   radii_.OutsetForShapeMargin(outset);
 }
 
+// TODO(crbug.com/396173464) support curvature
 bool FloatRoundedRect::IntersectsQuad(const gfx::QuadF& quad) const {
   if (!quad.IntersectsRect(rect_))
     return false;
@@ -366,13 +369,23 @@ String FloatRoundedRect::Radii::ToString() const {
       BottomRight().ToString().c_str());
 }
 
+String FloatRoundedRect::CornerCurvature::ToString() const {
+  return String::Format("tl:%.2f; tr:%.2f; bl:%.2f; br:%.2f", TopLeft(),
+                        TopRight(), BottomLeft(), BottomRight());
+}
+
 String FloatRoundedRect::ToString() const {
   if (Rect() == gfx::RectF(InfiniteIntRect())) {
     return "InfiniteIntRect";
   }
   if (GetRadii().IsZero())
     return String(Rect().ToString());
-  return String(Rect().ToString()) + " radii:(" + GetRadii().ToString() + ")";
+  if (HasSimpleRoundedCurvature()) {
+    return String(Rect().ToString()) + " radii:(" + GetRadii().ToString() + ")";
+  }
+
+  return String(Rect().ToString()) + " radii:(" + GetRadii().ToString() +
+         ") curvature:(" + GetCornerCurvature().ToString() + ")";
 }
 
 }  // namespace blink

third_party/blink/renderer/platform/geometry/float_rounded_rect.h

@@ -51,12 +51,28 @@ class QuadF;
 
 namespace blink {
 
-// Represents a rect with rounded corners.
+// Represents a rect with rounded corners, where the rounding of each corner is
+// controlled by 3 variables: x radius, y radius, and a superellipse parameter
+// for the curvature.
+//
+// A simple example of a rounded corner is:
+// <div style="width: 50px; height: 50px; border-radius: 10px;"/>
+// Here, rect_ will be 0,0 50x50, and radii_ for each corner will be 10x10.
+//
+// The radii of each corner can be controlled independently:
+// <div style="... border-top-right-radius: 25px 10px;"/>
+// Here, the radii_.top_right_ will be 25x10.
+//
+// The superellipse parameters control the curvature of each corner:
+// <div style="... border-radius: 10px; corner-shape: bevel;"/>
+// Here, the superelipsii_.top_right_ will be 1.
+//
 // We don't use gfx::RRectF in blink because gfx::RRectF is based on SkRRect
 // which always keeps the radii constrained within the size of the rect, but
 // in blink sometimes we need to keep the unconstrained status of a rounded
-// rect. See ConstrainRadii(). This class also provides functions that are
-// uniquely needed by blink.
+// rect. See ConstrainRadii(). Additionally, gfx::RRectF and SkRRect lack
+// control over curvature.
+
 class PLATFORM_EXPORT FloatRoundedRect {
   DISALLOW_NEW();
 
@@ -83,6 +99,7 @@ class PLATFORM_EXPORT FloatRoundedRect {
 
     constexpr Radii(const Radii&) = default;
     constexpr Radii& operator=(const Radii&) = default;
+    constexpr bool operator==(const Radii&) const = default;
 
     void SetTopLeft(const gfx::SizeF& size) { top_left_ = size; }
     void SetTopRight(const gfx::SizeF& size) { top_right_ = size; }
@@ -116,12 +133,60 @@ class PLATFORM_EXPORT FloatRoundedRect {
     gfx::SizeF bottom_right_;
   };
 
+  // A corner curvature is the exponent of a superellipse quadrant.
+  // e.g. 2 is round, 1 is bevel/angled, infinity is defunct/straight.
+  class CornerCurvature {
+   public:
+    static constexpr float kRound = 2;
+    static constexpr float kBevel = 1;
+
+    constexpr CornerCurvature() = default;
+    constexpr CornerCurvature(float top_left,
+                              float top_right,
+                              float bottom_right,
+                              float bottom_left)
+        : top_left_(top_left),
+          top_right_(top_right),
+          bottom_right_(bottom_right),
+          bottom_left_(bottom_left) {
+      DCHECK_GE(top_left, 0);
+      DCHECK_GE(top_right, 0);
+      DCHECK_GE(bottom_right, 0);
+      DCHECK_GE(bottom_left, 0);
+    }
+
+    constexpr bool IsRound() const {
+      return (top_left_ == kRound) && IsUniform();
+    }
+
+    constexpr bool IsUniform() const {
+      return top_left_ == top_right_ && top_left_ == bottom_right_ &&
+             top_left_ == bottom_left_;
+    }
+
+    constexpr float TopLeft() const { return top_left_; }
+    constexpr float TopRight() const { return top_right_; }
+    constexpr float BottomRight() const { return bottom_right_; }
+    constexpr float BottomLeft() const { return bottom_left_; }
+
+    constexpr bool operator==(const CornerCurvature&) const = default;
+
+    String ToString() const;
+
+   private:
+    float top_left_ = kRound;
+    float top_right_ = kRound;
+    float bottom_right_ = kRound;
+    float bottom_left_ = kRound;
+  };
+
   constexpr FloatRoundedRect() = default;
   explicit FloatRoundedRect(const gfx::RectF&, const Radii& radii = Radii());
   explicit FloatRoundedRect(const gfx::Rect&, const Radii& radii = Radii());
   explicit FloatRoundedRect(const SkRRect& r)
       : FloatRoundedRect(gfx::RRectF(r)) {}
   explicit FloatRoundedRect(const gfx::RRectF&);
+  constexpr bool operator==(const FloatRoundedRect&) const = default;
   FloatRoundedRect(float x, float y, float width, float height);
   FloatRoundedRect(const gfx::RectF& rect,
                    const gfx::SizeF& top_left,
@@ -135,11 +200,20 @@ class PLATFORM_EXPORT FloatRoundedRect {
 
   constexpr const gfx::RectF& Rect() const { return rect_; }
   constexpr const Radii& GetRadii() const { return radii_; }
+  constexpr const CornerCurvature& GetCornerCurvature() const {
+    return corner_curvature_;
+  }
   constexpr bool IsRounded() const { return !radii_.IsZero(); }
+  constexpr bool HasSimpleRoundedCurvature() const {
+    return !IsRounded() || corner_curvature_.IsRound();
+  }
   constexpr bool IsEmpty() const { return rect_.IsEmpty(); }
 
   void SetRect(const gfx::RectF& rect) { rect_ = rect; }
   void SetRadii(const Radii& radii) { radii_ = radii; }
+  void SetCornerCurvature(const CornerCurvature& curvature) {
+    corner_curvature_ = curvature;
+  }
 
   void Move(const gfx::Vector2dF& offset) { rect_.Offset(offset); }
 
@@ -222,9 +296,11 @@ class PLATFORM_EXPORT FloatRoundedRect {
  private:
   gfx::RectF rect_;
   Radii radii_;
+  CornerCurvature corner_curvature_;
 };
 
 inline FloatRoundedRect::operator SkRRect() const {
+  CHECK(HasSimpleRoundedCurvature());
   SkRRect rrect;
 
   if (IsRounded()) {
@@ -246,27 +322,6 @@ inline FloatRoundedRect::operator SkRRect() const {
   return rrect;
 }
 
-constexpr bool operator==(const FloatRoundedRect::Radii& a,
-                          const FloatRoundedRect::Radii& b) {
-  return a.TopLeft() == b.TopLeft() && a.TopRight() == b.TopRight() &&
-         a.BottomLeft() == b.BottomLeft() && a.BottomRight() == b.BottomRight();
-}
-
-constexpr bool operator!=(const FloatRoundedRect::Radii& a,
-                          const FloatRoundedRect::Radii& b) {
-  return !(a == b);
-}
-
-constexpr bool operator==(const FloatRoundedRect& a,
-                          const FloatRoundedRect& b) {
-  return a.Rect() == b.Rect() && a.GetRadii() == b.GetRadii();
-}
-
-constexpr bool operator!=(const FloatRoundedRect& a,
-                          const FloatRoundedRect& b) {
-  return !(a == b);
-}
-
 PLATFORM_EXPORT std::ostream& operator<<(std::ostream&,
                                          const FloatRoundedRect&);
 PLATFORM_EXPORT std::ostream& operator<<(std::ostream&,

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

@@ -399,6 +399,17 @@ TEST(FloatRoundedRectTest, ToString) {
 
   FloatRoundedRect rect_without_radii(gfx::RectF(1, 3, 5, 7));
   EXPECT_EQ("1,3 5x7", rect_without_radii.ToString());
+
+  FloatRoundedRect rect_with_curvature(
+      gfx::RectF(1, 3, 5, 7),
+      FloatRoundedRect::Radii(corner_rect, corner_rect, corner_rect,
+                              corner_rect));
+  rect_with_curvature.SetCornerCurvature(
+      FloatRoundedRect::CornerCurvature(1, 0.2222, 0, 3000));
+  EXPECT_EQ(
+      "1,3 5x7 radii:(tl:1x2; tr:1x2; bl:1x2; br:1x2) curvature:(tl:1.00; "
+      "tr:0.22; bl:3000.00; br:0.00)",
+      rect_with_curvature.ToString());
 }
 
 }  // namespace blink

third_party/blink/renderer/platform/graphics/graphics_context.cc

@@ -951,7 +951,14 @@ void GraphicsContext::ClipRoundedRect(const FloatRoundedRect& rrect,
     return;
   }
 
-  ClipRRect(SkRRect(rrect), should_antialias, clip_op);
+  if (rrect.HasSimpleRoundedCurvature()) {
+    ClipRRect(SkRRect(rrect), should_antialias, clip_op);
+    return;
+  }
+
+  Path path;
+  path.AddRoundedRect(rrect);
+  ClipPath(path.GetSkPath(), should_antialias, clip_op);
 }
 
 void GraphicsContext::ClipOutRoundedRect(const FloatRoundedRect& rect) {

third_party/blink/renderer/platform/graphics/path.cc

@@ -30,6 +30,7 @@
 #include "third_party/blink/renderer/platform/graphics/path.h"
 
 #include <math.h>
+
 #include "third_party/blink/renderer/platform/graphics/skia/skia_utils.h"
 #include "third_party/blink/renderer/platform/graphics/stroke_data.h"
 #include "third_party/blink/renderer/platform/transforms/affine_transform.h"
@@ -57,6 +58,51 @@ bool PathQuadIntersection(const SkPath& path, const gfx::QuadF& quad) {
   return !intersection.isEmpty();
 }
 
+enum class Corner { kTopLeft, kTopRight, kBottomRight, kBottomLeft };
+
+void AddCornerShape(SkPath& path,
+                    gfx::RectF corner_rect,
+                    Corner corner,
+                    float curvature) {
+  gfx::PointF target_point;
+  switch (corner) {
+    case Corner::kTopLeft:
+      target_point = corner_rect.top_right();
+      break;
+    case Corner::kTopRight:
+      target_point = corner_rect.bottom_right();
+      break;
+    case Corner::kBottomRight:
+      target_point = corner_rect.bottom_left();
+      break;
+    case Corner::kBottomLeft:
+      target_point = corner_rect.origin();
+      break;
+  }
+  if (curvature == FloatRoundedRect::CornerCurvature::kBevel) {
+    path.lineTo(gfx::PointFToSkPoint(target_point));
+  } else {
+    gfx::PointF control_point;
+    switch (corner) {
+      case Corner::kTopLeft:
+        control_point = corner_rect.origin();
+        break;
+      case Corner::kTopRight:
+        control_point = corner_rect.top_right();
+        break;
+      case Corner::kBottomRight:
+        control_point = corner_rect.bottom_right();
+        break;
+      case Corner::kBottomLeft:
+        control_point = corner_rect.bottom_left();
+        break;
+    }
+    // TODO(crbug.com/394059604): render the other curvatures
+    path.conicTo(gfx::PointFToSkPoint(control_point),
+                 gfx::PointFToSkPoint(target_point), SK_ScalarRoot2Over2);
+  }
+}
+
 }  // namespace
 
 Path::Path() : path_() {}
@@ -501,9 +547,31 @@ void Path::AddRoundedRect(const FloatRoundedRect& rect, bool clockwise) {
   if (rect.IsEmpty())
     return;
 
-  path_.addRRect(SkRRect(rect),
-                 clockwise ? SkPathDirection::kCW : SkPathDirection::kCCW,
-                 /* start at upper-left after corner radius */ 0);
+  if (rect.HasSimpleRoundedCurvature()) {
+    path_.addRRect(SkRRect(rect),
+                   clockwise ? SkPathDirection::kCW : SkPathDirection::kCCW,
+                   /* start at upper-left after corner radius */ 0);
+    return;
+  }
+
+  // Counterclockwise rounded rects are only available in canvas, and there is
+  // no canvas API (at this moment) to change corner curvature.
+  DCHECK(clockwise);
+
+  path_.moveTo(gfx::PointFToSkPoint(rect.TopLeftCorner().top_right()));
+
+  path_.lineTo(gfx::PointFToSkPoint((rect.TopRightCorner().origin())));
+  AddCornerShape(path_, rect.TopRightCorner(), Corner::kTopRight,
+                 rect.GetCornerCurvature().TopRight());
+  path_.lineTo(gfx::PointFToSkPoint((rect.BottomRightCorner().top_right())));
+  AddCornerShape(path_, rect.BottomRightCorner(), Corner::kBottomRight,
+                 rect.GetCornerCurvature().BottomRight());
+  path_.lineTo(gfx::PointFToSkPoint(rect.BottomLeftCorner().bottom_right()));
+  AddCornerShape(path_, rect.BottomLeftCorner(), Corner::kBottomLeft,
+                 rect.GetCornerCurvature().BottomLeft());
+  path_.lineTo(gfx::PointFToSkPoint(rect.TopLeftCorner().bottom_left()));
+  AddCornerShape(path_, rect.TopLeftCorner(), Corner::kTopLeft,
+                 rect.GetCornerCurvature().TopLeft());
 }
 
 void Path::AddPath(const Path& src, const AffineTransform& transform) {

third_party/blink/web_tests/TestExpectations

@@ -2374,32 +2374,6 @@ crbug.com/825270 external/wpt/payment-request/delegate-request.https.sub.html [
 # css-borders-4 corner shaping
 crbug.com/330758166 external/wpt/css/css-borders/tentative/border-radius-side-shorthands/border-radius-side-shorthands-001.html [ Failure ]
 crbug.com/330758166 external/wpt/css/css-borders/tentative/border-radius-side-shorthands/border-radius-side-shorthands-002.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-002.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-003.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-004.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-bottom-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-bottom-left-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-bottom-right-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-bottom-right-002.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-left-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-right-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-left-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-left-002.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-left-bottom-right-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-left-bottom-right-002.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-left-bottom-right-003.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-right-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-right-bottom-left-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-right-bottom-left-002.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-right-bottom-left-003.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-bottom-left-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-bottom-right-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-bottom-right-002.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-top-left-001.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-top-left-002.html [ Failure ]
-crbug.com/330758166 external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-top-right-001.html [ Failure ]
 
 ### external/wpt/css/CSS2/tables/
 crbug.com/958381 external/wpt/css/CSS2/tables/column-visibility-004.xht [ Failure ]

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-angle-bottom-001-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has beveled bottom-right and bottom-left corners and rounded top-left and top-right corners.
-
-<p><img src="../support/corner-shape-angle-bottom.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-angle-bottom-left-001-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has a beveled bottom-left corner and the others are rounded.
-
-<p><img src="../support/corner-shape-angle-bottom-left.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-angle-bottom-right-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has a beveled bottom-right corner and the others are rounded.
-
-<p><img src="../support/corner-shape-angle-bottom-right.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-angle-left-001-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has beveled top-left and bottom-left corners and rounded top-right and bottom-right corners.
-
-<p><img src="../support/corner-shape-angle-left.svg" alt="Image download support must be enabled">

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

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has four beveled corners.
-
-<p><img src="../support/corner-shape-angle-all.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-angle-right-001-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has beveled top-right and bottom-right corners and rounded top-left and bottom-left corners.
-
-<p><img src="../support/corner-shape-angle-right.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-angle-top-001-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has beveled top-left and top-right corners and rounded bottom-right and bottom-left corners.
-
-<p><img src="../support/corner-shape-angle-top.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-angle-top-left-bottom-right-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has beveled top-left and bottom-right corners and rounded top-right and bottom-left corners.
-
-<p><img src="../support/corner-shape-angle-top-left-bottom-right.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-angle-top-left-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has a beveled top-left corner and the others are rounded.
-
-<p><img src="../support/corner-shape-angle-top-left.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-angle-top-right-001-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has a beveled top-right corner and the others are rounded.
-
-<p><img src="../support/corner-shape-angle-top-right.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-angle-top-right-bottom-left-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has beveled top-right and bottom-left corners and rounded top-left and bottom-right corners.
-
-<p><img src="../support/corner-shape-angle-top-right-bottom-left.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-round-bottom-left-001-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has a rounded bottom-left corner and the others are beveled.
-
-<p><img src="../support/corner-shape-round-bottom-left.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-round-bottom-right-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has a rounded bottom-right corner and the others are beveled.
-
-<p><img src="../support/corner-shape-round-bottom-right.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-round-top-left-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has a rounded top-left corner and the others are beveled.
-
-<p><img src="../support/corner-shape-round-top-left.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/reference/corner-shape-round-top-right-001-ref.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-
-<p>Test passes if the square has a rounded top-right corner and the others are beveled.
-
-<p><img src="../support/corner-shape-round-top-right.svg" alt="Image download support must be enabled">

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-all.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      fill-opacity: 0;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 l 35,35 V 80 L 80,115 H 40 L 5,80 V 40 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-bottom-left.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 c 19.39,0 35,15.61 35,35 v 40 c 0,19.39 -15.61,35 -35,35 H 40 L 5,80 V 40 C 5,20.61 20.61,5 40,5 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-bottom-right.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 c 19.39,0 35,15.61 35,35 V 80 L 80,115 H 40 C 20.61,115 5,99.39 5,80 V 40 C 5,20.61 20.61,5 40,5 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-bottom.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 c 19.39,0 35,15.61 35,35 V 80 L 80,115 H 40 L 5,80 V 40 C 5,20.61 20.61,5 40,5 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-left.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 c 19.39,0 35,15.61 35,35 v 40 c 0,19.39 -15.61,35 -35,35 H 40 L 5,80 V 40 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-right.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 l 35,35 V 80 L 80,115 H 40 C 20.61,115 5,99.39 5,80 V 40 C 5,20.61 20.61,5 40,5 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-top-left-bottom-right.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 c 19.39,0 35,15.61 35,35 V 80 L 80,115 H 40 C 20.61,115 5,99.39 5,80 V 40 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-top-left.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 c 19.39,0 35,15.61 35,35 v 40 c 0,19.39 -15.61,35 -35,35 H 40 C 20.61,115 5,99.39 5,80 V 40 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-top-right-bottom-left.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 l 35,35 v 40 c 0,19.39 -15.61,35 -35,35 H 40 L 5,80 V 40 C 5,20.61 20.61,5 40,5 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-top-right.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 l 35,35 v 40 c 0,19.39 -15.61,35 -35,35 H 40 C 20.61,115 5,99.39 5,80 V 40 C 5,20.61 20.61,5 40,5 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-angle-top.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 l 35,35 v 40 c 0,19.39 -15.61,35 -35,35 H 40 C 20.61,115 5,99.39 5,80 V 40 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-round-bottom-left.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 l 35,35 V 80 L 80,115 H 40 C 20.61,115 5,99.39 5,80 V 40 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-round-bottom-right.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 l 35,35 v 40 c 0,19.39 -15.61,35 -35,35 H 40 L 5,80 V 40 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-round-top-left.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 l 35,35 V 80 L 80,115 H 40 L 5,80 V 40 C 5,20.61 20.61,5 40,5 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/support/corner-shape-round-top-right.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    #test {
-      fill: transparent;
-      stroke: black;
-      stroke-width: 10;
-      stroke-linecap: square;
-    }
-  </style>
-  <path id="test" d="m 40,5 h 40 c 19.39,0 35,15.61 35,35 V 80 L 80,115 H 40 L 5,80 V 40 Z" />
-</svg>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle;
-}
-</style>
-
-<p>Test passes if the square has four beveled corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-002.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle angle;
-}
-</style>
-
-<p>Test passes if the square has four beveled corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-003.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle angle angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle angle angle' is supported for 'corner-shape'">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle angle angle;
-}
-</style>
-
-<p>Test passes if the square has four beveled corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-004.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle angle angle angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle angle angle angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle angle angle angle;
-}
-</style>
-
-<p>Test passes if the square has four beveled corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-bottom-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round round angle angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-bottom-001-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round round angle angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round round angle angle;
-}
-</style>
-
-<p>Test passes if the square has beveled bottom-right and bottom-left corners and rounded top-left and top-right corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-bottom-left-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round round round angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-bottom-left-001-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round round round angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round round round angle;
-}
-</style>
-
-<p>Test passes if the square has a beveled bottom-left corner and the others are rounded.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-bottom-right-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round round angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-bottom-right-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round round angle' is supported for 'corner-shape'">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round round angle;
-}
-</style>
-
-<p>Test passes if the square has a beveled bottom-right corner and the others are rounded.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-bottom-right-002.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round round angle round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-bottom-right-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round round angle round' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round round angle round;
-}
-</style>
-
-<p>Test passes if the square has a beveled bottom-right corner and the others are rounded.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-left-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle round round angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-left-001-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle round round angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle round round angle;
-}
-</style>
-
-<p>Test passes if the square has beveled top-left and bottom-left corners and rounded top-right and bottom-right corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-right-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round angle angle round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-right-001-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round angle angle round' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round angle angle round;
-}
-</style>
-
-<p>Test passes if the square has beveled top-right and bottom-right corners and rounded top-left and bottom-left corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle angle round round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-top-001-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle angle round round' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle angle round round;
-}
-</style>
-
-<p>Test passes if the square has beveled top-left and top-right corners and rounded bottom-right and bottom-left corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-left-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle round round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-top-left-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle round round' is supported for 'corner-shape'">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle round round;
-}
-</style>
-
-<p>Test passes if the square has a beveled top-left corner and the others are rounded.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-left-002.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle round round round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-top-left-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle round round round' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle round round round;
-}
-</style>
-
-<p>Test passes if the square has a beveled top-left corner and the others are rounded.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-left-bottom-right-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-top-left-bottom-right-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle round' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle round;
-}
-</style>
-
-<p>Test passes if the square has beveled top-left and bottom-right corners and rounded top-right and bottom-left corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-left-bottom-right-002.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle round angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-top-left-bottom-right-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle round angle' is supported for 'corner-shape'">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle round angle;
-}
-</style>
-
-<p>Test passes if the square has beveled top-left and bottom-right corners and rounded top-right and bottom-left corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-left-bottom-right-003.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle round angle round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-top-left-bottom-right-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle round angle round' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle round angle round;
-}
-</style>
-
-<p>Test passes if the square has beveled top-left and bottom-right corners and rounded top-right and bottom-left corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-right-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round angle round round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-top-right-001-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round angle round round' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round angle round round;
-}
-</style>
-
-<p>Test passes if the square has a beveled top-right corner and the others are rounded.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-right-bottom-left-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-top-right-bottom-left-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round angle;
-}
-</style>
-
-<p>Test passes if the square has beveled top-right and bottom-left corners and rounded top-left and bottom-right corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-right-bottom-left-002.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round angle round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-top-right-bottom-left-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round angle round' is supported for 'corner-shape'">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round angle round;
-}
-</style>
-
-<p>Test passes if the square has beveled top-right and bottom-left corners and rounded top-left and bottom-right corners.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-angle-top-right-bottom-left-003.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round angle round angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-angle-top-right-bottom-left-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round angle round angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round angle round angle;
-}
-</style>
-
-<p>Test passes if the square has beveled top-right and bottom-left corners and rounded top-left and bottom-right corners.
-
-<div id="test"></div>

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

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<head>
+<style>
+    .target {
+        background: green;
+        width: 100px;
+        height: 100px;
+        border-radius: 50px;
+        border: 0px solid black;
+        clip-path: polygon(0px 50px, 50px 100px, 100px 50px, 50px 0px);
+    }
+</style>
+</head>
+<body>
+    <div class=target></div>
+</body>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-fill.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<head>
+<link rel="match" href="corner-shape-fill-ref.html">
+<meta name="fuzzy" content="maxDifference=0-32;totalPixels=0-32">
+<style>
+    .target {
+        background: green;
+        width: 100px;
+        height: 100px;
+        border-radius: 50px;
+        border: 0px solid black;
+        corner-shape: bevel;
+    }
+</style>
+</head>
+<body>
+    <div class=target></div>
+</body>

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

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<title>CSS Borders and Box Decorations 4: 'corner-shape' rendering</title>
+</head>
+<body>
+<canvas width="200" height="200" id="canvas"></canvas>
+<style>
+  canvas {
+    width: 200px;
+    height: 200px;
+  }
+</style>
+<script>
+const canvas = document.getElementById("canvas");
+const params = new URLSearchParams(location.search);
+const style = Object.fromEntries(params.entries());
+const { width, height } = canvas;
+
+// Populate defaults and constraints.
+for (const vSide of ["top", "bottom"]) {
+  for (const hSide of ["left", "right"]) {
+    let shape =
+      style[`corner-${vSide}-${hSide}-shape`] ||
+      style["corner-shape"] ||
+      "round";
+    const hWidth = parseFloat(
+      style[`border-${hSide}-width`] || style["border-width"] || "10px"
+    );
+    const vWidth = parseFloat(
+      style[`border-${vSide}-width`] || style["border-width"] || "10px"
+    );
+    let radius = (
+      style[`border-${vSide}-${hSide}-radius`] ||
+      style["border-radius"] ||
+      "20px"
+    ).match(/[0-9]*(\.[0-9]+)?/)?.[0];
+
+   radius = [
+      Math.min(parseFloat(radius), width / 2),
+      Math.min(parseFloat(radius), height / 2)
+    ];
+    style[`corner-${vSide}-${hSide}-shape`] = shape;
+    style[`border-${vSide}-${hSide}-radius`] = radius;
+    style[`border-${hSide}-width`] = hWidth;
+    style[`border-${vSide}-width`] = vWidth;
+  }
+}
+
+const ctx = canvas.getContext("2d");
+
+// 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`];
+    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];
+  })
+);
+let cursor = [];
+function lineTo(x, y) {
+  ctx.lineTo(x, y);
+  cursor = [x, y];
+}
+function moveTo(x, y) {
+  ctx.moveTo(x, y);
+  cursor = [x, y];
+}
+
+function cornerTo(x, y, corner) {
+  if (x == cursor[0] && y === cursor[1]) return;
+  const shape = style[`corner-${corner}-shape`];
+
+  // TODO: add other curves.
+  if (shape === "bevel")
+    lineTo(x, y);
+  else {
+    ctx.arcTo(
+      corner === "top-left" || corner === "bottom-right" ? cursor[0] : x,
+      corner === "top-left" || corner === "bottom-right" ? y : cursor[1],
+      x,
+      y,
+      Math.abs(x - cursor[0])
+    );
+    cursor = [x, y];
+  }
+}
+
+ctx.clearRect(0, 0, width, height);
+ctx.beginPath();
+
+// Outer path
+moveTo(width - outer_width[1][0], 0);
+cornerTo(width, outer_width[1][1], "top-right");
+lineTo(width, height - outer_width[3][1]);
+cornerTo(width - outer_width[3][0], height, "bottom-right");
+lineTo(outer_width[2][0], height);
+cornerTo(0, height - outer_width[2][1], "bottom-left");
+lineTo(0, outer_width[0][1]);
+cornerTo(outer_width[0][0], 0, "top-left");
+lineTo(width - outer_width[1][0], 0);
+
+// Inner path
+moveTo(
+  Math.max(style["border-top-left-radius"][0], style["border-left-width"]),
+  style["border-top-width"]
+);
+
+lineTo(width - style["border-top-right-radius"][0], style["border-top-width"]);
+cornerTo(
+  width - style["border-right-width"],
+  Math.max(style["border-top-width"], style["border-top-right-radius"][1]),
+  "top-right"
+);
+
+lineTo(
+  width - style["border-right-width"],
+  height -
+    Math.max(
+      style["border-bottom-width"],
+      style["border-bottom-right-radius"][1]
+    )
+);
+
+cornerTo(
+  width -
+    Math.max(
+      style["border-right-width"],
+      style["border-bottom-right-radius"][0]
+    ),
+  height - style["border-bottom-width"],
+  "bottom-right"
+);
+
+lineTo(
+  Math.max(style["border-left-width"], style["border-bottom-left-radius"][0]),
+  height - style["border-bottom-width"]
+);
+
+cornerTo(
+  style["border-left-width"],
+  height -
+    Math.max(style["border-top-width"], style["border-bottom-left-radius"][1]),
+  "bottom-left"
+);
+
+lineTo(
+  style["border-left-width"],
+  Math.max(style["border-top-width"], style["border-top-left-radius"][1])
+);
+cornerTo(
+  Math.max(style["border-left-width"], style["border-top-left-radius"][0]),
+  style["border-top-width"],
+  "top-left"
+);
+
+ctx.fillStyle = "black";
+ctx.fill("evenodd");
+</script>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-render.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<title>CSS Borders and Box Decorations 4: 'corner-shape' rendering</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
+<link rel="match" href="corner-shape-render-ref.html">
+<meta name="variant" content="?corner-shape=bevel">
+<meta name="variant" content="?corner-top-left-shape=bevel">
+<meta name="variant" content="?corner-top-right-shape=bevel">
+<meta name="variant" content="?corner-bottom-left-shape=bevel">
+<meta name="variant" content="?corner-bottom-right-shape=bevel">
+<meta name="variant" content="?corner-bottom-right-shape=bevel&corner-bottom-left-shape=bevel">
+<meta name="variant" content="?corner-top-left-shape=bevel&border-radius=40px">
+<meta name="variant" content="?corner-top-right-shape=bevel&corner-bottom-right-shape=bevel&border-radius=80px">
+<meta name="variant" content="?corner-top-right-shape=bevel&corner-bottom-right-shape=bevel&border-bottom-right-radius=80px&border-width=32px">
+<meta name="fuzzy" content="maxDifference=0-82;totalPixels=0-800">
+</head>
+<body>
+  <style>
+    #target {
+      width: 200px;
+      height: 200px;
+      border-width: 10px;
+      border-radius: 20px;
+      border-style: solid;
+      box-sizing: border-box;
+    }
+  </style>
+<div id="target"></div>
+<script>
+  const target = document.getElementById("target");
+  const params = new URLSearchParams(location.search);
+  for (const [key, value] of params.entries()) {
+    target.style[key] = value;
+  }
+</script>
+</body>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-bottom-left-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle angle angle round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-round-bottom-left-001-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle angle angle round' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle angle angle round;
-}
-</style>
-
-<p>Test passes if the square has a rounded bottom-left corner and the others are beveled.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-bottom-right-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle angle round'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-round-bottom-right-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle angle round' is supported for 'corner-shape'">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle angle round;
-}
-</style>
-
-<p>Test passes if the square has a rounded bottom-right corner and the others are beveled.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-bottom-right-002.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle angle round angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-round-bottom-right-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle angle round angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle angle round angle;
-}
-</style>
-
-<p>Test passes if the square has a rounded bottom-right corner and the others are beveled.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-top-left-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round angle angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-round-top-left-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round angle angle' is supported for 'corner-shape'">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round angle angle;
-}
-</style>
-
-<p>Test passes if the square has a rounded top-left corner and the others are beveled.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-top-left-002.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: round angle angle angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-round-top-left-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'round angle angle angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: round angle angle angle;
-}
-</style>
-
-<p>Test passes if the square has a rounded top-left corner and the others are beveled.
-
-<div id="test"></div>

third_party/blink/web_tests/external/wpt/css/css-borders/tentative/corner-shape/corner-shape-round-top-right-001.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Borders and Box Decorations 4 Test: 'corner-shape: angle round angle angle'</title>
-<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com">
-<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
-<link rel="match" href="../../reference/corner-shape-round-top-right-001-ref.html">
-<!-- TODO Test needs some fuzziness via <meta name="fuzzy">, though values for maxDifference and totalPixels are still unclear -->
-<meta name="assert" content="This test checks that 'angle round angle angle' is supported for 'corner-shape'.">
-
-<style>
-#test {
-  width: 100px;
-  height: 100px;
-  border: 10px solid black;
-  border-radius: 40px;
-  corner-shape: angle round angle angle;
-}
-</style>
-
-<p>Test passes if the square has a rounded top-right corner and the others are beveled.
-
-<div id="test"></div>