Skip to content
Permalink
Browse files
Incorrect inline box decoration position when content box is vertical…
…ly shifted

https://bugs.webkit.org/show_bug.cgi?id=245209
<rdar://problem/99950939>

Reviewed by Simon Fraser.

1. the logical top of an inline box points to the edge of the border box.
2. the logical top of an inline box is relative to its parent inline box.
3. the vertical padding/border on an inline box does not make it any taller (and does not stretch the line).

It simply means that putting vertical padding/border on an inline box has no impact on its content box's vertical position.
    <div><span style="padding-top: 200px">with padding</span></div>
  and
    <div><span style="padding-top: 0px">without padding</span></div>
produce the same layout.

However the top value always includes both the border and the padding values (e.g. in the example above, the <span>'s logical top is resolved to -200px).

In this patch we ensure that the content box's top is used when paining the underline/overline/etc foreground decorations.

* LayoutTests/fast/inline/inline-box-decoration-with-border-and-padding-expected.html: Added.
* LayoutTests/fast/inline/inline-box-decoration-with-border-and-padding.html: Added.
* Source/WebCore/rendering/TextBoxPainter.cpp:
(WebCore::TextBoxPainter<TextBoxPath>::collectDecoratingBoxesForTextBox):

Canonical link: https://commits.webkit.org/254554@main
  • Loading branch information
alanbaradlay committed Sep 16, 2022
1 parent 6a3ee1f commit 6801b3e1c42c273e12254b6e0cfdb9774fbaa398
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 1 deletion.
@@ -0,0 +1,17 @@
<style>
div {
font-family: Monospace;
font-size: 10px;
}
span {
text-decoration: underline;
}
</style>
<div>X</div>
<div>X<span>X</span>X</div>
<div>X<span style="padding: 0px 50px;">X</span>X</div>
<div>X<span style="padding: 0px 100px;">X</span>X</div>
<div>X<span style="padding: 0px 50px;">X<span style="padding: 0px 50px;">X</span>X</span>X</div>
<div>X<span style="padding: 0px 100px;">X<span style="padding: 0px 100px;">X</span>X</span>X</div>
<div style="line-height: 200px;">X<span style="padding: 0px 100px;">X<span style="padding: 0px 100px;">X</span>X</span>X</div>
<div style="line-height: 0px;">X<span style="padding: 0px 100px;">X<span style="padding: 0px 100px;">X</span>X</span>X</div>
@@ -0,0 +1,18 @@
<style>
div {
font-family: Monospace;
font-size: 10px;
}
span {
text-decoration: underline;
}
</style>
<!-- test if underline is positioned properly when inline box's content box has non-zero vertical offset -->
<div>X</div>
<div>X<span>X</span>X</div>
<div>X<span style="padding: 50px;">X</span>X</div>
<div>X<span style="border: 50px solid transparent; padding: 50px;">X</span>X</div>
<div>X<span style="padding: 50px;">X<span style="padding: 50px;">X</span>X</span>X</div>
<div>X<span style="border: 50px solid transparent; padding: 50px;">X<span style="border: 50px solid transparent; padding: 50px;">X</span>X</span>X</div>
<div style="line-height: 200px">X<span style="border: 50px solid transparent; padding: 50px;">X<span style="border: 50px solid transparent; padding: 50px;">X</span>X</span>X</div>
<div style="line-height: 0px;">X<span style="padding: 0px 100px;">X<span style="padding: 0px 100px;">X</span>X</span>X</div>
@@ -497,11 +497,12 @@ void TextBoxPainter<TextBoxPath>::collectDecoratingBoxesForTextBox(DecoratingBox
return;
}

auto borderAndPaddingBefore = !inlineBox->isRootInlineBox() ? inlineBox->renderer().borderAndPaddingBefore() : LayoutUnit(0_lu);
decoratingBoxList.append({
inlineBox,
style,
useOverriderDecorationStyle == UseOverriderDecorationStyle::Yes ? overrideDecorationStyle : computedDecorationStyle(),
{ textBoxLocation.x(), m_paintOffset.y() + inlineBox->logicalTop() }
{ textBoxLocation.x(), m_paintOffset.y() + inlineBox->logicalTop() + borderAndPaddingBefore }
});
};

0 comments on commit 6801b3e

Please sign in to comment.