[Outline] Incorrect inline box (hugging) outline painting in vertical…

… writing modes

https://bugs.webkit.org/show_bug.cgi?id=266914

Reviewed by Antti Koivisto.

* LayoutTests/fast/inline/hidpi-outline-inline-box-writing-modes-expected.html: Added.
* LayoutTests/fast/inline/hidpi-outline-inline-box-writing-modes.html: Added.
* LayoutTests/fast/writing-mode/basic-vertical-line.html:
* Source/WebCore/rendering/RenderInline.cpp:
(WebCore::RenderInline::paintOutline):

Canonical link: https://commits.webkit.org/272512@main

LayoutTests/fast/inline/hidpi-outline-inline-box-writing-modes-expected.html

@@ -0,0 +1,21 @@
+<style>
+div {
+  font-family: Ahem;
+  font-size: 20px;
+  color: transparent;
+  width: 60px;
+  margin-top: 10px;
+  white-space: pre;
+}
+span {
+  outline: 1px solid green;
+}
+</style>
+<div><span>XXX<br>X</span></div>
+<div style="transform: scaleX(-1);"><span>XXX<br>X</span></div>
+<div><span>XX<br>X<br>X</span></div>
+<div style="transform: scaleX(-1);"><span>XX<br>X<br>X</span></div>
+<div style="transform: scaleX(-1) scaleY(-1);"><span>XX<br>X<br>X</span></div>
+<div><span>X<br>X<br>XX</span></div>
+<div style="transform: translateX(10px)"><span>X<br>X<br>XX</span></div>
+<div style="transform: translateX(10px)"><span>X<br>X<br>XX</span></div>

LayoutTests/fast/inline/hidpi-outline-inline-box-writing-modes.html

@@ -0,0 +1,20 @@
+<style>
+div {
+  font-family: Ahem;
+  font-size: 20px;
+  color: transparent;
+  width: 60px;
+  margin-top: 10px;
+}
+span {
+  outline: 1px solid green;
+}
+</style>
+<div><span>XXX<br>X</span></div>
+<div style="direction: rtl"><span>XXX<br>X</span></div>
+<div style="writing-mode: vertical-lr"><span>XXX<br>X</span></div>
+<div style="writing-mode: vertical-rl"><span>XXX<br>X</span></div>
+<div style="writing-mode: vertical-rl; direction: rtl"><span>XXX<br>X</span></div>
+<div style="writing-mode: vertical-lr; direction: rtl"><span>XXX<br>X</span></div>
+<div style="padding-left: 10px; writing-mode: vertical-lr; direction: rtl"><span>XXX<br>X</span></div>
+<div style="border-left: 10px solid transparent; writing-mode: vertical-lr; direction: rtl"><span>XXX<br>X</span></div>

Source/WebCore/rendering/RenderInline.cpp

@@ -1097,13 +1097,28 @@ void RenderInline::paintOutline(PaintInfo& paintInfo, const LayoutPoint& paintOf
     if (styleToUse.outlineStyleIsAuto() == OutlineIsAuto::On || !styleToUse.hasOutline())
         return;
 
+    if (!containingBlock()) {
+        ASSERT_NOT_REACHED();
+        return;
+    }
+
+    auto isHorizontalWritingMode = this->isHorizontalWritingMode();
+    auto& containingBlock = *this->containingBlock();
+    auto isFlippedBlocksWritingMode = containingBlock.style().isFlippedBlocksWritingMode();
     Vector<LayoutRect> rects;
     for (auto box = InlineIterator::firstInlineBoxFor(*this); box; box.traverseNextInlineBox()) {
         auto lineBox = box->lineBox();
-        auto top = LayoutUnit { std::max(lineBox->contentLogicalTop(), box->logicalTop()) };
-        auto bottom = LayoutUnit { std::min(lineBox->contentLogicalBottom(), box->logicalBottom()) };
-        // FIXME: This is mixing physical and logical coordinates.
-        rects.append({ LayoutUnit(box->visualRectIgnoringBlockDirection().x()), top, LayoutUnit(box->logicalWidth()), bottom - top });
+        auto logicalTop = std::max(lineBox->contentLogicalTop(), box->logicalTop());
+        auto logicalBottom = std::min(lineBox->contentLogicalBottom(), box->logicalBottom());
+        auto enclosingVisualRect = FloatRect { box->logicalLeftIgnoringInlineDirection(), logicalTop, box->logicalWidth(), logicalBottom - logicalTop };
+
+        if (!isHorizontalWritingMode)
+            enclosingVisualRect = enclosingVisualRect.transposedRect();
+
+        if (isFlippedBlocksWritingMode)
+            containingBlock.flipForWritingMode(enclosingVisualRect);
+
+        rects.append(LayoutRect { enclosingVisualRect });
     }
     BorderPainter { *this, paintInfo }.paintOutline(paintOffset, rects);
 }