Skip to content
Permalink
Browse files
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
  • Loading branch information
vitorroriz authored and nt1m committed Sep 1, 2022
1 parent 602ddbe commit 01b7c37f84bf7bb9cb4815f5cb06af7cabb7f798
Show file tree
Hide file tree
Showing 8 changed files with 96 additions and 0 deletions.
@@ -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)
)

@@ -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>

@@ -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)
)

@@ -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)
)

@@ -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)
)

@@ -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)
)

@@ -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();
@@ -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));

0 comments on commit 01b7c37

Please sign in to comment.