Table border radius is not applied when the border color is transpare…

…nt or semitransparent https://bugs.webkit.org/show_bug.cgi?id=154157 Reviewed by Simon Fraser. RenderTable::paintBoxDecorations also should create a transparency layer if determineBackgroundBleedAvoidance returns BackgroundBleedUseTransparencyLayer as well as RenderBox::paintBoxDecorations does. * LayoutTests/fast/table/table-border-radius-expected.html: Added. * LayoutTests/fast/table/table-border-radius.html: Added. * Source/WebCore/rendering/RenderTable.cpp: (WebCore::RenderTable::paintBoxDecorations): Canonical link: https://commits.webkit.org/252741@main
WebKit · Jul 22, 2022 · 96f929d · 96f929d
1 parent 092abab
commit 96f929d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/LayoutTests/fast/table/table-border-radius-expected.html b/LayoutTests/fast/table/table-border-radius-expected.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+    div {
+        width: 300px;
+        height: 50px;
+        background: green;
+        border: 10px solid;
+        border-radius: 20px;
+        box-sizing: border-box;
+    }
+</style>
+
+<p>You should see four green boxes with rounded corners.</p>
+
+blue border
+<div style="border-color:blue"></div>
+dark green border
+<div style="border-color:rgba(0,0,0,0.5)"></div>
+no border
+<div style="border-color:transparent"></div>
+no border
+<div style="border-color:transparent"></div>
diff --git a/LayoutTests/fast/table/table-border-radius.html b/LayoutTests/fast/table/table-border-radius.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta name="fuzzy" content="maxDifference=0-17; totalPixels=0-140"/>
+<style>
+    table {
+        width: 300px;
+        height: 50px;
+        background: green;
+        border: 10px solid;
+        border-radius: 20px;
+    }
+</style>
+
+<p>You should see four green boxes with rounded corners.</p>
+
+blue border
+<table style="border-color:blue"></table>
+dark green border
+<table style="border-color:rgba(0,0,0,0.5)"></table>
+no border
+<table style="border-color:transparent"></table>
+no border
+<table style="border-color:rgba(0,0,0,0.5);border-collapse:collapse"></table>
diff --git a/Source/WebCore/rendering/RenderTable.cpp b/Source/WebCore/rendering/RenderTable.cpp
@@ -796,11 +796,25 @@ void RenderTable::paintBoxDecorations(PaintInfo& paintInfo, const LayoutPoint& p
     BackgroundBleedAvoidance bleedAvoidance = determineBackgroundBleedAvoidance(paintInfo.context());
     if (!boxShadowShouldBeAppliedToBackground(rect.location(), bleedAvoidance, { }))
         paintBoxShadow(paintInfo, rect, style(), ShadowStyle::Normal);
+
+    GraphicsContextStateSaver stateSaver(paintInfo.context(), false);
+    if (bleedAvoidance == BackgroundBleedUseTransparencyLayer) {
+        // To avoid the background color bleeding out behind the border, we'll render background and border
+        // into a transparency layer, and then clip that in one go (which requires setting up the clip before
+        // beginning the layer).
+        stateSaver.save();
+        paintInfo.context().clipRoundedRect(style().getRoundedBorderFor(rect).pixelSnappedRoundedRectForPainting(document().deviceScaleFactor()));
+        paintInfo.context().beginTransparencyLayer(1);
+    }
+
     paintBackground(paintInfo, rect, bleedAvoidance);
     paintBoxShadow(paintInfo, rect, style(), ShadowStyle::Inset);
 
     if (style().hasVisibleBorderDecoration() && !collapseBorders())
         paintBorder(paintInfo, rect, style());
+
+    if (bleedAvoidance == BackgroundBleedUseTransparencyLayer)
+        paintInfo.context().endTransparencyLayer();
 }
 
 void RenderTable::paintMask(PaintInfo& paintInfo, const LayoutPoint& paintOffset)