8000 box-shadow does not paint correctly on inline elements · WebKit/WebKit@003ff7e · GitHub
[go: up one dir, main page]
Skip to content

Commit 003ff7e

Browse files
alanbaradlayalanbaradlay
committed
box-shadow does not paint correctly on inline elements
https://bugs.webkit.org/show_bug.cgi?id=250059 <rdar://problem/103887993> Reviewed by Antti Koivisto. Box shadow top and left values are relative to the content box. Shadow on the top/left side of the box produce negative values. Calling FloatRect::inflate with negative values deflate the rect. Also, use physical (visual) variants of the RenderStyle box-shadow functions as at this point (display box phase) all the coord are in physical (visual) space. * LayoutTests/fast/repaint/box-shadow-top-left-repaint-expected.txt: Added. * LayoutTests/fast/repaint/box-shadow-top-left-repaint.html: Added. * LayoutTests/fast/repaint/full-repaint-on-content-change.html: (remove odd leftover) * Source/WebCore/layout/formattingContexts/inline/display/InlineDisplayContentBuilder.cpp: (WebCore::Layout::computeInkOverflowForInlineLevelBox): Canonical link: https://commits.webkit.org/258923@main
1 parent 30687a5 commit 003ff7e

File tree

4 files changed

+38
-9
lines changed

4 files changed

+38
-9
lines changed

‎LayoutTests/fast/repaint/box-shadow-top-left-repaint-expected.txt‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
XXXXX
2+
XXXXX
3+
(repaint rects
4+
(rect 0 25 50 135)
5+
(rect 0 25 750 25)
6+
(rect 0 25 750 135)
7+
(rect 0 185 50 175)
8+
(rect 0 185 160 25)
9+
(rect 25 185 150 175)
10+
(rect 0 25 800 25)
11+
)
12+

‎LayoutTests/fast/repaint/box-shadow-top-left-repaint.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<style>
2+
body {
3+
margin: 0px;
4+
}
5+
6+
div {
7+
padding: 50px;
8+
margin: 50px;
9+
font-family: Ahem;
10+
font-size: 10px;
11+
}
12+
</style>
13+
<!-- Pass if green box shadow shows up on all sides. -->
14+
<div><span id=box_shadow_horizontal>XXXXX</span></div>
15+
<div style="writing-mode: vertical-lr"><span id=box_shadow_vertical>XXXXX</span></div>
16+
<script src="resources/text-based-repaint.js" type="text/javascript"></script>
17+
<script>
18+
repaintTest = function() {
19+
box_shadow_horizontal.style.boxShadow = "-50px -25px 0px 50px green";
20+
box_shadow_vertical.style.boxShadow = "-50px -25px 0px 50px green";
21+
};
22+
runRepaintTest();
23+
</script>

‎LayoutTests/fast/repaint/full-repaint-on-content-change.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
<script>
2-
setTimeout(function() {
3-
}, 3000);
4-
</script>
5-
61
<style>
72
body {
83
margin: 0px;
@@ -21,7 +16,6 @@
2116
padding-top: 100px;
2217
content: var(--pseudo-text);
2318
}
24-
artifacts
2519
</style>
2620
<!-- Note if we ever run repaint on visual overflow only (and repaint rects here no longer match), just make sure this test produces no artifacts -->
2721
<div>some text</div>

‎Source/WebCore/layout/formattingContexts/inline/display/InlineDisplayContentBuilder.cpp‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,14 +120,14 @@ static inline bool computeInkOverflowForInlineLevelBox(const RenderStyle& style,
120120
auto inflateWithBoxShadow = [&] {
121121
auto topBoxShadow = LayoutUnit { };
122122
auto bottomBoxShadow = LayoutUnit { };
123-
style.getBoxShadowBlockDirectionExtent(topBoxShadow, bottomBoxShadow);
123+
style.getBoxShadowVerticalExtent(topBoxShadow, bottomBoxShadow);
124124

125125
auto leftBoxShadow = LayoutUnit { };
126126
auto rightBoxShadow = LayoutUnit { };
127-
style.getBoxShadowInlineDirectionExtent(leftBoxShadow, rightBoxShadow);
127+
style.getBoxShadowHorizontalExtent(leftBoxShadow, rightBoxShadow);
128128
if (!topBoxShadow && !bottomBoxShadow && !leftBoxShadow && !rightBoxShadow)
129129
return;
130-
inkOverflow.inflate(leftBoxShadow.toFloat(), topBoxShadow.toFloat(), rightBoxShadow.toFloat(), bottomBoxShadow.toFloat());
130+
inkOverflow.inflate(-leftBoxShadow.toFloat(), -topBoxShadow.toFloat(), rightBoxShadow.toFloat(), bottomBoxShadow.toFloat());
131131
hasVisualOverflow = true;
132132
};
133133
inflateWithBoxShadow();

0 commit comments

Comments
 (0)
0