Disallow ruby base from having leading or trailing expansions

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

Reviewed by David Hyatt.

Source/WebCore:

If we determine that a ruby base should have either a leading or trailing expansion,
we shunt that expansion over to the neighboring RenderText, assuming one exists. This
requires that we teach RenderText how to force leading or trailing expansions if one
wouldn't naturally be present.

Tests: fast/ruby/ruby-expansion-cjk-2.html
       fast/ruby/ruby-expansion-cjk-3.html
       fast/ruby/ruby-expansion-cjk-4.html
       fast/ruby/ruby-expansion-cjk-5.html
       fast/ruby/ruby-expansion-cjk.html

* rendering/InlineFlowBox.cpp:
(WebCore::InlineFlowBox::removeChild): Delete contentIsKnownToFollow.
* rendering/InlineTextBox.cpp:
(WebCore::InlineTextBox::expansionBehavior): Support forced leading and trailing
expansions.
* rendering/InlineTextBox.h:
(WebCore::InlineTextBox::expansionBehavior): Moved to .cpp
* rendering/RenderBlockLineLayout.cpp:
(WebCore::RenderBlockFlow::updateRubyForJustifiedText): Perform relayout even if
there are no expansions left. This is so that ruby bases with no expansions will get
centered.
(WebCore::expansionBehaviorForInlineTextBox): Update to inspect neighboring rubies.
(WebCore::RenderBlockFlow::computeInlineDirectionPositionsForSegment): Use updated
expansionBehaviorForInlineTextBox(). Also center ruby bases if they have no expansion
opportunities.
(WebCore::RenderBlockFlow::createLineBoxesFromBidiRuns): Use nullptr.
(WebCore::RenderBlockFlow::layoutRunsAndFloatsInRange): Ditto.
* rendering/RenderText.cpp:
(WebCore::RenderText::RenderText): Delete contentIsKnownToFollow.
* rendering/RenderText.h:
(WebCore::RenderText::contentIsKnownToFollow): Deleted.
(WebCore::RenderText::setContentIsKnownToFollow): Deleted.

LayoutTests:

Test combinations of CJK, Latin, ruby-in-ruby, simple text codepath, complex
text codepath, RTL, and LTR codepaths.

* fast/ruby/positioned-ruby-text-expected.txt:
* fast/ruby/positioned-ruby-text.html:
* fast/ruby/resources/green.png: Added.
* fast/ruby/resources/ruby-expansion.svg: Added.
* fast/ruby/ruby-expansion-cjk-2-expected.html: Added.
* fast/ruby/ruby-expansion-cjk-2.html: Added.
* fast/ruby/ruby-expansion-cjk-3-expected.html: Added.
* fast/ruby/ruby-expansion-cjk-3.html: Added.
* fast/ruby/ruby-expansion-cjk-4-expected.html: Added.
* fast/ruby/ruby-expansion-cjk-4.html: Added.
* fast/ruby/ruby-expansion-cjk-5-expected.html: Added.
* fast/ruby/ruby-expansion-cjk-5.html: Added.
* fast/ruby/ruby-expansion-cjk-expected.html: Added.
* fast/ruby/ruby-expansion-cjk.html: Added.
* fast/ruby/ruby-justification-expected.html:
* fast/ruby/ruby-justification.html:

Canonical link: https://commits.webkit.org/161378@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@182286 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,30 @@
+2015-04-02  Myles C. Maxfield  <mmaxfield@apple.com>
+
+        Disallow ruby base from having leading or trailing expansions
+        https://bugs.webkit.org/show_bug.cgi?id=142608
+
+        Reviewed by David Hyatt.
+
+        Test combinations of CJK, Latin, ruby-in-ruby, simple text codepath, complex
+        text codepath, RTL, and LTR codepaths.
+
+        * fast/ruby/positioned-ruby-text-expected.txt:
+        * fast/ruby/positioned-ruby-text.html:
+        * fast/ruby/resources/green.png: Added.
+        * fast/ruby/resources/ruby-expansion.svg: Added.
+        * fast/ruby/ruby-expansion-cjk-2-expected.html: Added.
+        * fast/ruby/ruby-expansion-cjk-2.html: Added.
+        * fast/ruby/ruby-expansion-cjk-3-expected.html: Added.
+        * fast/ruby/ruby-expansion-cjk-3.html: Added.
+        * fast/ruby/ruby-expansion-cjk-4-expected.html: Added.
+        * fast/ruby/ruby-expansion-cjk-4.html: Added.
+        * fast/ruby/ruby-expansion-cjk-5-expected.html: Added.
+        * fast/ruby/ruby-expansion-cjk-5.html: Added.
+        * fast/ruby/ruby-expansion-cjk-expected.html: Added.
+        * fast/ruby/ruby-expansion-cjk.html: Added.
+        * fast/ruby/ruby-justification-expected.html:
+        * fast/ruby/ruby-justification.html:
+
 2015-04-02  Alexey Proskuryakov  <ap@apple.com>
 
         Clean up access checks in JSHistoryCustom.cpp

LayoutTests/fast/ruby/positioned-ruby-text-expected.txt

@@ -1,7 +1,7 @@
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
 layer at (0,0) size 800x51
-  RenderBlock {HTML} at (0,0) size 800x51 [color=#FFFFFF]
+  RenderBlock {HTML} at (0,0) size 800x51
     RenderBody {BODY} at (8,8) size 784x35
       RenderRuby (inline) {RUBY} at (0,0) size 784x10
         RenderRubyRun (anonymous) at (0,5) size 784x30
@@ -12,5 +12,5 @@ layer at (0,0) size 800x51
             RenderText {#text} at (0,0) size 784x30
               text run at (0,0) width 784: "Attempt to create a positioned ruby text element. Non-static position is not"
               text run at (0,10) width 784: "supported for ruby text, which should be apparent from the resulting render"
-              text run at (0,20) width 50: "tree."
+              text run at (367,20) width 50: "tree."
       RenderText {#text} at (0,0) size 0x0

LayoutTests/fast/ruby/positioned-ruby-text.html

@@ -1,4 +1,4 @@
 <!DOCTYPE html>
-<html style="font-family: ahem; font-size: 10px; -webkit-font-smoothing: none; color: white;">
+<html style="font-family: ahem; font-size: 10px; -webkit-font-smoothing: none;">
 <ruby>Attempt to create a positioned ruby text element. Non-static position is not supported for ruby text, which should be apparent from the resulting render tree.<rt style="position: fixed">rubytext</rt></ruby>
 </html>

LayoutTests/fast/ruby/ruby-expansion-cjk-2-expected.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<head>
+</head>
+<body>
+<div style="position: absolute; left: 0px; top: 0px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 200px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 380px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+<div style="position: absolute; left: 0px; top: 120px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 180px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 360px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 80px; height: 41px; right: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+<div style="position: absolute; left: 0px; top: 240px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 220px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 81px; height: 41px; left: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 400px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+<div style="position: absolute; left: 0px; top: 360px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 200px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 81px; height: 41px; left: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 380px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 80px; height: 41px; right: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+<div style="position: absolute; left: 0px; top: 480px; width: 100%;">
+<div style="position: absolute; width: 300px; height: 20px; left: 0px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 300px; height: 20px; right: 00px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 130px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 380px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; right: 129px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+</body>
+</html>

LayoutTests/fast/ruby/ruby-expansion-cjk-2.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+<style>
+@font-face {
+    font-family: 'Litherum';
+    src: url("resources/ruby-expansion.svg#Litherum") format(svg);
+}
+</style>
+</head>
+<body style="text-align: justify; font: 40px Litherum; margin: 0px; -webkit-font-smoothing: none;">
+<div dir="rtl">&#x5e2;<ruby><rb>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby>&#x5e2; aaaaaaaaaaaaaaaaaaaa</div>
+<div dir="rtl">&#x5e2;&#x5e2;<ruby><rb>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby>&#x5e2; aaaaaaaaaaaaaaaaaaaa</div>
+<div dir="rtl">&#x5e2;<ruby><rb>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby>&#x5e2;&#x5e2; aaaaaaaaaaaaaaaaaaaa</div>
+<div dir="rtl">&#x5e2;&#x5e2;<ruby><rb>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby>&#x5e2;&#x5e2; aaaaaaaaaaaaaaaaaaaa</div>
+<div><ruby><rb>&#x304e;</rb><rt>aaaaaaaaaaaaaaa</rt></ruby>a<ruby><rb>&#x304e;</rb><rt>aaaaaaaaaaaaaaa</rt></ruby> aaaaaaaaaaaaaaaaaaaa</div>
+</body>
+</html>

LayoutTests/fast/ruby/ruby-expansion-cjk-3-expected.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<head>
+</head>
+<body>
+<div style="position: absolute; left: 0px; top: 0px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 199px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; left: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 40px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 166px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 41px; height: 41px; right: 166px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 40px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 0px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+<div style="position: absolute; left: 0px; top: 120px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 265px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; left: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 40px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 210px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 80px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 40px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 0px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+<div style="position: absolute; left: 0px; top: 240px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 135px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; left: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 40px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 80px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 550px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 40px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 0px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+<div style="position: absolute; left: 0px; top: 360px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 199px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; left: 0px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 40px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 166px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 41px; height: 41px; right: 166px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 40px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+<div style="position: absolute; left: 0px; top: 480px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 135px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; left: 0px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 40px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 80px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 550px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 40px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+</body>
+</html>

LayoutTests/fast/ruby/ruby-expansion-cjk-3.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+<style>
+@font-face {
+    font-family: 'Litherum';
+    src: url("resources/ruby-expansion.svg#Litherum") format(svg);
+}
+</style>
+</head>
+<body style="text-align: justify; font: 40px Litherum; margin: 0px; -webkit-font-smoothing: none;">
+<div dir="rtl"><span style="color: green;">&#x5e2;</span>&#x5e2;<ruby><rb><span style="color: green;">&#x304e;</span>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby><span style="color: green;">&#x5e2;</span>&#x5e2; aaaaaaaaaaaaaaaaaaaa</div>
+<div dir="rtl"><span style="color: green;">&#x5e2;</span>&#x5e2;<ruby><rb><span style="color: green;">&#x5e2;</span>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby><span style="color: green;">&#x5e2;</span>&#x5e2; aaaaaaaaaaaaaaaaaaaa</div>
+<div dir="rtl"><span style="color: green;">&#x5e2;</span>&#x5e2;<ruby><rb><span style="color: green;">&#x304e;</span>&#x5e2;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby><span style="color: green;">&#x5e2;</span>&#x5e2; aaaaaaaaaaaaaaaaaaaa</div>
+<div><span style="color: green;">a</span>a<ruby><rb><span style="color: green;">&#x304e;</span>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby><span style="color: green;">a</span>a aaaaaaaaaaaaaaaaaaaa</div>
+<div><span style="color: green;">a</span>a<ruby><rb><span style="color: green;">a</span>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby><span style="color: green;">a</span>a aaaaaaaaaaaaaaaaaaaa</div>
+</body>
+</html>

LayoutTests/fast/ruby/ruby-expansion-cjk-4-expected.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+<style>
+@font-face {
+    font-family: 'Litherum';
+    src: url("resources/ruby-expansion.svg#Litherum") format(svg);
+}
+</style>
+</head>
+<body style="text-align: justify; font-size: 40px; margin: 0px; -webkit-font-smoothing: none;">
+<div>e&#x300;a&#x300;<ruby><rb>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby>e&#x300;a&#x300; <span style="font-family: Litherum;">aaaaaaaaaaaaaaaaaaaa</span></div>
+<div style="font-family: Litherum;">
+<div style="position: absolute; left: 0px; top: 126px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 199px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; left: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 40px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 166px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 41px; height: 41px; right: 166px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 40px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 0px; top: 19px; background: green;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+
+<div style="position: absolute; left: 0px; top: 239px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 200px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 400px; height: 20px; left: 199px; top: 21px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 0px; top: 40px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 120px; top: 40px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 193px; top: 40px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; right: 193px; top: 40px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; right: 119px; top: 40px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 0px; top: 40px; background: black;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 91px; background: black;"></div>
+</div>
+
+<div style="position: absolute; left: 0px; top: 380px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; left: 100px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 100px; height: 50px; left: 0px; top: 10px; background: rgb(0, 255, 0);"></div>
+<div style="position: absolute; width: 41px; height: 41px; right: 479px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 40px; height: 41px; right: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+</div>
+</body>
+</html>

LayoutTests/fast/ruby/ruby-expansion-cjk-4.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+<style>
+@font-face {
+    font-family: 'Litherum';
+    src: url("resources/ruby-expansion.svg#Litherum") format(svg);
+}
+</style>
+</head>
+<body style="text-align: justify; font-size: 40px; margin: 0px; -webkit-font-smoothing: none;">
+<div>&#xe8;&#xe0;<ruby><rb>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby>&#xe8;&#xe0; <span style="font-family: Litherum;">aaaaaaaaaaaaaaaaaaaa</span></div>
+<div style="font-family: Litherum;">
+<div dir="rtl"><span style="color: green;">&#x62a;</span>&#x62a;<ruby><rb><span style="color: green;">&#x304e;</span>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby><span style="color: green;">&#x62a;</span>&#x62a; aaaaaaaaaaaaaaaaaaaa</div>
+<div>a<ruby><rb>&#x304e;<ruby><rb>&#x304e;&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby>a <span style="font-family: Litherum;">aaaaaaaaaaaaaaaaaaaa</span></div>
+<div><img src="resources/green.png"><ruby><rb>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby>a <span style="font-family: Litherum;">aaaaaaaaaaaaaaaaaaaa</span></div>
+</div>
+</body>
+</html>

LayoutTests/fast/ruby/ruby-expansion-cjk-5-expected.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+</head>
+<body style="text-align: justify; font: 40px Litherum; margin: 0px; -webkit-font-smoothing: none;">
+<div style="position: absolute; left: 0px; top: 0px; width: 100%;">
+<div style="position: absolute; width: 400px; height: 20px; right: 100px; top: 0px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 0px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 41px; height: 41px; left: 480px; top: 19px; background: black;"></div>
+<div style="position: absolute; width: 100px; height: 50px; right: 0px; top: 10px; background: rgb(0, 255, 0);"></div>
+<div style="position: absolute; width: 800px; height: 41px; left: 0px; top: 70px; background: black;"></div>
+</div>
+</body>
+</html>

LayoutTests/fast/ruby/ruby-expansion-cjk-5.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+<style>
+@font-face {
+    font-family: 'Litherum';
+    src: url("resources/ruby-expansion.svg#Litherum") format(svg);
+}
+</style>
+</head>
+<body style="text-align: justify; font: 40px Litherum; margin: 0px; -webkit-font-smoothing: none;">
+<div>a<ruby><rb>&#x304e;</rb><rt>aaaaaaaaaaaaaaaaaaaa</rt></ruby><img src="resources/green.png"> <span style="font-family: Litherum;">aaaaaaaaaaaaaaaaaaaa</span></div>
+</body>
+</html>