Cherry-pick 9f3eab3. rdar://122501121

    [IFC][Ruby] Some characters are overlapped (Hiragana + Kanji character with Ruby)
    https://bugs.webkit.org/show_bug.cgi?id=269064
    <rdar://122501121>

    Reviewed by Antti Koivisto.

    1. When annotation is wide than the base content, we slightly pull adjacent content under the annotation on both sides
    2. Pulling the "after" content (boxes to the right of the ruby) means shifting all the runs as one monolithic content.

    However in case of justified alignment, as we are supposed to keep the spacing intact, we only adjust the adjacent run
    by moving and expanding it (expanding ensure the rest of the "after" content stays stationary).

    * LayoutTests/fast/ruby/ruby-overhang-with-justified-content-overlap-expected.html: Added.
    * LayoutTests/fast/ruby/ruby-overhang-with-justified-content-overlap.html: Added.
    * Source/WebCore/layout/formattingContexts/inline/display/InlineDisplayContentBuilder.cpp:
    (WebCore::Layout::InlineDisplayContentBuilder::applyRubyOverhang):

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

Identifier: 272448.550@safari-7618.1.15.10-branch

LayoutTests/fast/ruby/ruby-overhang-with-justified-content-overlap-expected.html

@@ -0,0 +1,16 @@
+<style>
+body {
+  margin: 0px;
+}
+div {
+  text-align: justify;
+  width: 260px;
+  font-family: Ahem;
+  font-size: 20px;
+}
+
+span {
+  color: green;
+}
+</style>
+<div>X<span>base</span></div>

LayoutTests/fast/ruby/ruby-overhang-with-justified-content-overlap.html

@@ -0,0 +1,19 @@
+<style>
+body {
+  margin: 0px;
+}
+div {
+  text-align: justify;
+  width: 260px;
+  font-family: Ahem;
+  font-size: 20px;
+  margin-left: -160px;
+  margin-top: -10px;
+}
+
+ruby {
+  color: green;
+}
+</style>
+<!-- PASS if justified content does not overlap with base -->
+<div><ruby>base<rt>annotation</rt></ruby>X X<ruby>base</ruby> X</div>

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

@@ -1229,14 +1229,18 @@ void InlineDisplayContentBuilder::applyRubyOverhang(InlineDisplay::Boxes& displa
                 }
                 return !!afterRubyBaseDisplayBox.expansion().horizontalExpansion;
             };
+            // Normally we shift all the "after" boxes to the left here as one monolithic content
+            // but in case of justified alignment we can only move the adjacent run under the annotation
+            // and expand the justified space to keep the rest of the runs stationary.
             if (hasJustifiedAdjacentAfterContent()) {
                 auto& afterRubyBaseDisplayBox = displayBoxes[startEndPair.end()];
                 auto expansion = afterRubyBaseDisplayBox.expansion();
                 auto inflateValue = afterOverhang + beforeOverhang;
                 afterRubyBaseDisplayBox.setExpansion({ expansion.behavior, expansion.horizontalExpansion + inflateValue });
                 afterRubyBaseDisplayBox.expandHorizontally(inflateValue);
-            }
-            moveBoxRangeToVisualLeft(startEndPair.end(), displayBoxes.size() - 1, afterOverhang);
+                moveBoxRangeToVisualLeft(startEndPair.end(), startEndPair.end(), afterOverhang);
+            } else
+                moveBoxRangeToVisualLeft(startEndPair.end(), displayBoxes.size() - 1, afterOverhang);
         }
     }
 }