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

LayoutTests/fast/inline/inline-box-decoration-with-border-and-padding-expected.html

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

LayoutTests/fast/inline/inline-box-decoration-with-border-and-padding.html

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

Source/WebCore/rendering/TextBoxPainter.cpp

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