Divs with border-radius are not repainted correctly when bounds change

https://bugs.webkit.org/show_bug.cgi?id=116510 Reviewed by Alan Bujtas. * LayoutTests/imported/blink/fast/repaint/border-radius-repaint-2-expected.txt: Added. * LayoutTests/imported/blink/fast/repaint/border-radius-repaint-2.html: Added. * LayoutTests/platform/ios/fast/repaint/border-radius-repaint-2-expected.txt: Added. * LayoutTests/platform/win/fast/repaint/border-radius-repaint-2-expected.txt: Added. * LayoutTests/platform/gtk/fast/repaint/border-radius-repaint-2-expected.txt: Added. * LayoutTests/platform/mac-bigsur-wk1/fast/repaint/border-radius-repaint-2-expected.txt: Added. Adding new repaint reduced test and expected files * Source/WebCore/platform/graphics/RoundedRect.h: (WebCore::operator!=): Adding operator!= for RoundedRect::Radii * Source/WebCore/rendering/RenderElement.cpp: (WebCore::RenderElement::repaintAfterLayoutIfNeeded): If bounds have changd and the element has border-radius, we should issue a full repaint if border-radius for new bounds differs from old one. Canonical link: https://commits.webkit.org/254041@main
WebKit · Sep 1, 2022 · 01b7c37f84bf7bb9cb4815f5cb06af7cabb7f798 · 01b7c37
1 parent 602ddbe
commit 01b7c37f84bf7bb9cb4815f5cb06af7cabb7f798
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 0 deletions.
diff --git a/LayoutTests/fast/repaint/border-radius-repaint-2-expected.txt b/LayoutTests/fast/repaint/border-radius-repaint-2-expected.txt
@@ -0,0 +1,10 @@
+(repaint rects
+  (rect 18 44 120 550)
+  (rect 18 44 120 40)
+  (rect 8 8 140 622)
+  (rect 8 8 140 112)
+  (rect 8 120 769 510)
+  (rect 0 0 800 600)
+  (rect 0 0 800 600)
+)
+
diff --git a/LayoutTests/fast/repaint/border-radius-repaint-2.html b/LayoutTests/fast/repaint/border-radius-repaint-2.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<head>
+<script src="./resources/text-based-repaint.js" type="text/javascript"></script>
+<script>
+function repaintTest() {
+    document.getElementById('target').style.height = '40px';
+}
+</script>
+<style>
+  body {
+    background-color: white;
+  }
+  #div-1 {
+    background-color:cornflowerblue;
+    width: 120px;
+    padding: 36px 10px;
+    border-radius: 95px;
+    margin: 0;
+  }
+  #target {
+    width: 100%;
+    height: 550px;
+    background-color: white;
+  }
+</style>
+</head>
+<body onload="runRepaintTest()">
+  <div id="div-1">
+    <div id="target"></div>
+  </div>
+</body>
+</html>
+
diff --git a/LayoutTests/platform/gtk/fast/repaint/border-radius-repaint-2-expected.txt b/LayoutTests/platform/gtk/fast/repaint/border-radius-repaint-2-expected.txt
@@ -0,0 +1,9 @@
+(repaint rects
+  (rect 18 44 120 550)
+  (rect 18 44 120 40)
+  (rect 8 8 140 622)
+  (rect 8 8 140 112)
+  (rect 8 120 769 510)
+  (rect 0 0 800 600)
+)
+
diff --git a/LayoutTests/platform/ios/fast/repaint/border-radius-repaint-2-expected.txt b/LayoutTests/platform/ios/fast/repaint/border-radius-repaint-2-expected.txt
@@ -0,0 +1,9 @@
+(repaint rects
+  (rect 18 44 120 550)
+  (rect 18 44 120 40)
+  (rect 8 8 140 622)
+  (rect 8 8 140 112)
+  (rect 8 120 784 510)
+  (rect 0 128 800 510)
+)
+
diff --git a/LayoutTests/platform/mac-bigsur-wk1/fast/repaint/border-radius-repaint-2-expected.txt b/LayoutTests/platform/mac-bigsur-wk1/fast/repaint/border-radius-repaint-2-expected.txt
@@ -0,0 +1,12 @@
+(repaint rects
+  (rect 18 44 120 550)
+  (rect 18 44 120 40)
+  (rect 8 8 140 622)
+  (rect 8 8 140 112)
+  (rect 8 120 769 510)
+  (rect 0 128 785 510)
+  (rect 785 0 15 600)
+  (rect 785 0 15 128)
+  (rect 0 0 800 600)
+)
+
diff --git a/LayoutTests/platform/win/fast/repaint/border-radius-repaint-2-expected.txt b/LayoutTests/platform/win/fast/repaint/border-radius-repaint-2-expected.txt
@@ -0,0 +1,9 @@
+(repaint rects
+  (rect 18 44 120 550)
+  (rect 18 44 120 40)
+  (rect 8 8 140 622)
+  (rect 8 8 140 112)
+  (rect 8 120 769 510)
+  (rect 0 0 800 600)
+)
+
diff --git a/Source/WebCore/platform/graphics/RoundedRect.h b/Source/WebCore/platform/graphics/RoundedRect.h
@@ -124,6 +124,11 @@ inline bool operator==(const RoundedRect::Radii& a, const RoundedRect::Radii& b)
     return a.topLeft() == b.topLeft() && a.topRight() == b.topRight() && a.bottomLeft() == b.bottomLeft() && a.bottomRight() == b.bottomRight();
 }
 
+inline bool operator!=(const RoundedRect::Radii& a, const RoundedRect::Radii& b)
+{
+    return !(a == b);
+}
+
 inline bool operator==(const RoundedRect& a, const RoundedRect& b)
 {
     return a.rect() == b.rect() && a.radii() == b.radii();

diff --git a/Source/WebCore/rendering/RenderElement.cpp b/Source/WebCore/rendering/RenderElement.cpp
@@ -1201,6 +1201,14 @@ bool RenderElement::repaintAfterLayoutIfNeeded(const RenderLayerModelObject* rep
     LayoutRect newOutlineBox;
 
     bool fullRepaint = selfNeedsLayout();
+
+    if (!fullRepaint && oldBounds != newBounds && style().hasBorderRadius()) {
+        auto oldRadius = style().getRoundedBorderFor(oldBounds).radii();
+        auto newRadius = style().getRoundedBorderFor(newBounds).radii();
+
+        fullRepaint = oldRadius != newRadius;
+    }
+
     if (!fullRepaint) {
         // This ASSERT fails due to animations. See https://bugs.webkit.org/show_bug.cgi?id=37048
         // ASSERT(!newOutlineBoxRectPtr || *newOutlineBoxRectPtr == outlineBoundsForRepaint(repaintContainer));