summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-ruby
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/css-ruby')
-rw-r--r--layout/reftests/css-ruby/bidi-1-ref.html16
-rw-r--r--layout/reftests/css-ruby/bidi-1.html16
-rw-r--r--layout/reftests/css-ruby/bidi-2-ref.html39
-rw-r--r--layout/reftests/css-ruby/bidi-2.html51
-rw-r--r--layout/reftests/css-ruby/box-generation-1-ref.html43
-rw-r--r--layout/reftests/css-ruby/box-generation-1.html42
-rw-r--r--layout/reftests/css-ruby/box-generation-2-ref.html49
-rw-r--r--layout/reftests/css-ruby/box-generation-2.html42
-rw-r--r--layout/reftests/css-ruby/box-generation-3-ref.html45
-rw-r--r--layout/reftests/css-ruby/box-generation-3.html42
-rw-r--r--layout/reftests/css-ruby/box-generation-4-ref.html49
-rw-r--r--layout/reftests/css-ruby/box-generation-4.html42
-rw-r--r--layout/reftests/css-ruby/box-generation-5-ref.html47
-rw-r--r--layout/reftests/css-ruby/box-generation-5.html42
-rw-r--r--layout/reftests/css-ruby/box-properties-1-ref.html17
-rw-r--r--layout/reftests/css-ruby/box-properties-1.html21
-rw-r--r--layout/reftests/css-ruby/box-properties-2-ref.html29
-rw-r--r--layout/reftests/css-ruby/box-properties-2.html25
-rw-r--r--layout/reftests/css-ruby/box-properties-3-ref.html18
-rw-r--r--layout/reftests/css-ruby/box-properties-3.html18
-rw-r--r--layout/reftests/css-ruby/box-properties-4-ref.html24
-rw-r--r--layout/reftests/css-ruby/box-properties-4.html23
-rw-r--r--layout/reftests/css-ruby/bug1181890-notref.html9
-rw-r--r--layout/reftests/css-ruby/bug1181890-ref.html9
-rw-r--r--layout/reftests/css-ruby/bug1181890.html10
-rw-r--r--layout/reftests/css-ruby/common.css22
-rw-r--r--layout/reftests/css-ruby/dynamic-insertion-1-ref.html37
-rw-r--r--layout/reftests/css-ruby/dynamic-insertion-1.html55
-rw-r--r--layout/reftests/css-ruby/dynamic-insertion-2-ref.html27
-rw-r--r--layout/reftests/css-ruby/dynamic-insertion-2.html37
-rw-r--r--layout/reftests/css-ruby/dynamic-insertion-3-ref.html19
-rw-r--r--layout/reftests/css-ruby/dynamic-insertion-3.html26
-rw-r--r--layout/reftests/css-ruby/dynamic-insertion.js42
-rw-r--r--layout/reftests/css-ruby/dynamic-removal-1-ref.html25
-rw-r--r--layout/reftests/css-ruby/dynamic-removal-1.html38
-rw-r--r--layout/reftests/css-ruby/dynamic-removal-2-ref.html18
-rw-r--r--layout/reftests/css-ruby/dynamic-removal-2.html24
-rw-r--r--layout/reftests/css-ruby/dynamic-removal-3-ref.html26
-rw-r--r--layout/reftests/css-ruby/dynamic-removal-3.html37
-rw-r--r--layout/reftests/css-ruby/dynamic-removal.js14
-rw-r--r--layout/reftests/css-ruby/float-handling-ref.html23
-rw-r--r--layout/reftests/css-ruby/float-handling.html23
-rw-r--r--layout/reftests/css-ruby/inflated-ruby-1-ref.html6
-rw-r--r--layout/reftests/css-ruby/inflated-ruby-1.html10
-rw-r--r--layout/reftests/css-ruby/intra-level-whitespace-1-ref.html22
-rw-r--r--layout/reftests/css-ruby/intra-level-whitespace-1.html22
-rw-r--r--layout/reftests/css-ruby/intra-level-whitespace-2-ref.html28
-rw-r--r--layout/reftests/css-ruby/intra-level-whitespace-2.html33
-rw-r--r--layout/reftests/css-ruby/intra-level-whitespace-3-ref.html14
-rw-r--r--layout/reftests/css-ruby/intra-level-whitespace-3.html34
-rw-r--r--layout/reftests/css-ruby/intrinsic-isize-1-ref.html49
-rw-r--r--layout/reftests/css-ruby/intrinsic-isize-1.html46
-rw-r--r--layout/reftests/css-ruby/intrinsic-isize-2-ref.html31
-rw-r--r--layout/reftests/css-ruby/intrinsic-isize-2.html31
-rw-r--r--layout/reftests/css-ruby/justification-1-ref.html16
-rw-r--r--layout/reftests/css-ruby/justification-1.html17
-rw-r--r--layout/reftests/css-ruby/justification-2-ref.html20
-rw-r--r--layout/reftests/css-ruby/justification-2.html24
-rw-r--r--layout/reftests/css-ruby/lang-specific-style-1-ref.html14
-rw-r--r--layout/reftests/css-ruby/lang-specific-style-1.html14
-rw-r--r--layout/reftests/css-ruby/line-break-suppression-1-ref.html15
-rw-r--r--layout/reftests/css-ruby/line-break-suppression-1.html15
-rw-r--r--layout/reftests/css-ruby/line-break-suppression-2-ref.html17
-rw-r--r--layout/reftests/css-ruby/line-break-suppression-2.html17
-rw-r--r--layout/reftests/css-ruby/line-break-suppression-3-ref.html20
-rw-r--r--layout/reftests/css-ruby/line-break-suppression-3.html23
-rw-r--r--layout/reftests/css-ruby/line-break-suppression-4-ref.html11
-rw-r--r--layout/reftests/css-ruby/line-break-suppression-4.html11
-rw-r--r--layout/reftests/css-ruby/line-break-suppression-5-ref.html10
-rw-r--r--layout/reftests/css-ruby/line-break-suppression-5.html10
-rw-r--r--layout/reftests/css-ruby/line-breaking-1-ref.html17
-rw-r--r--layout/reftests/css-ruby/line-breaking-1.html20
-rw-r--r--layout/reftests/css-ruby/line-breaking-2-ref.html13
-rw-r--r--layout/reftests/css-ruby/line-breaking-2.html13
-rw-r--r--layout/reftests/css-ruby/line-height-1-ref.html21
-rw-r--r--layout/reftests/css-ruby/line-height-1.html14
-rw-r--r--layout/reftests/css-ruby/line-height-2-ref.html22
-rw-r--r--layout/reftests/css-ruby/line-height-2.html15
-rw-r--r--layout/reftests/css-ruby/line-height-3-ref.html24
-rw-r--r--layout/reftests/css-ruby/line-height-3.html16
-rw-r--r--layout/reftests/css-ruby/line-height-4-ref.html15
-rw-r--r--layout/reftests/css-ruby/line-height-4.html7
-rw-r--r--layout/reftests/css-ruby/min-font-size-1-ref.html13
-rw-r--r--layout/reftests/css-ruby/min-font-size-1.html13
-rw-r--r--layout/reftests/css-ruby/nested-ruby-1.html19
-rw-r--r--layout/reftests/css-ruby/no-transform-ref.html14
-rw-r--r--layout/reftests/css-ruby/no-transform.html19
-rw-r--r--layout/reftests/css-ruby/reftest-stylo.list59
-rw-r--r--layout/reftests/css-ruby/reftest.list57
-rw-r--r--layout/reftests/css-ruby/relative-positioning-1-ref.html22
-rw-r--r--layout/reftests/css-ruby/relative-positioning-1.html24
-rw-r--r--layout/reftests/css-ruby/relative-positioning-2-ref.html30
-rw-r--r--layout/reftests/css-ruby/relative-positioning-2.html30
-rw-r--r--layout/reftests/css-ruby/ruby-align-1-ref.html19
-rw-r--r--layout/reftests/css-ruby/ruby-align-1.html26
-rw-r--r--layout/reftests/css-ruby/ruby-align-1a.html26
-rw-r--r--layout/reftests/css-ruby/ruby-align-2-ref.html29
-rw-r--r--layout/reftests/css-ruby/ruby-align-2.html27
-rw-r--r--layout/reftests/css-ruby/ruby-align-2a.html27
-rw-r--r--layout/reftests/css-ruby/ruby-position-horizontal-ref.html35
-rw-r--r--layout/reftests/css-ruby/ruby-position-horizontal.html28
-rw-r--r--layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html38
-rw-r--r--layout/reftests/css-ruby/ruby-position-vertical-lr.html31
-rw-r--r--layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html38
-rw-r--r--layout/reftests/css-ruby/ruby-position-vertical-rl.html31
-rw-r--r--layout/reftests/css-ruby/ruby-reflow-1-noruby.html17
-rw-r--r--layout/reftests/css-ruby/ruby-reflow-1-opaqueruby.html20
-rw-r--r--layout/reftests/css-ruby/ruby-reflow-1-transparentruby.html21
-rw-r--r--layout/reftests/css-ruby/ruby-span-1-ref.html11
-rw-r--r--layout/reftests/css-ruby/ruby-span-1.html11
-rw-r--r--layout/reftests/css-ruby/ruby-whitespace-1-ref.html36
-rw-r--r--layout/reftests/css-ruby/ruby-whitespace-1.html34
-rw-r--r--layout/reftests/css-ruby/ruby-whitespace-2-ref.html20
-rw-r--r--layout/reftests/css-ruby/ruby-whitespace-2.html19
-rw-r--r--layout/reftests/css-ruby/utils.js33
115 files changed, 2915 insertions, 0 deletions
diff --git a/layout/reftests/css-ruby/bidi-1-ref.html b/layout/reftests/css-ruby/bidi-1-ref.html
new file mode 100644
index 000000000..c69bb0467
--- /dev/null
+++ b/layout/reftests/css-ruby/bidi-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1141928 - Position of ruby annotation in RTL text</title>
+ <style>
+ body { color: transparent; }
+ rb { background: green; }
+ rtc { background: red; }
+ rt { background: cyan; }
+ </style>
+</head>
+<body style="text-align: right">
+ <ruby><rb>base<rtc><rt>text</ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/bidi-1.html b/layout/reftests/css-ruby/bidi-1.html
new file mode 100644
index 000000000..4b22c6535
--- /dev/null
+++ b/layout/reftests/css-ruby/bidi-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1141928 - Position of ruby annotation in RTL text</title>
+ <style>
+ body { color: transparent; }
+ rb { background: green; }
+ rtc { background: red; }
+ rt { background: cyan; }
+ </style>
+</head>
+<body dir="rtl">
+ <ruby><rb>base<rtc><rt>text</ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/bidi-2-ref.html b/layout/reftests/css-ruby/bidi-2-ref.html
new file mode 100644
index 000000000..c46e956e0
--- /dev/null
+++ b/layout/reftests/css-ruby/bidi-2-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1141931 - Bidi reordering of ruby</title>
+ <link rel="stylesheet" href="common.css">
+ <style> rb { margin: 0 5px; } </style>
+</head>
+<body>
+ <p>
+ <ruby>
+ <rb>base1</rb><rb>base2</rb>
+ <rt>text1</rt><rt>text2</rt>
+ <rb>base4</rb><rb>base3</rb>
+ <rt>text4</rt><rt>text3</rt>
+ </ruby>
+ <ruby>
+ <rb>base7</rb><rb>base8</rb>
+ <rt>text7</rt><rt>text8</rt>
+ <rb>base6</rb><rb>base5</rb>
+ <rt>text6</rt><rt>text5</rt>
+ </ruby>
+ </p>
+ <p style="text-align: right">
+ <ruby>
+ <rb>base5</rb><rb>base6</rb>
+ <rt>text5</rt><rt>text6</rt>
+ <rb>base8</rb><rb>base7</rb>
+ <rt>text8</rt><rt>text7</rt>
+ </ruby>
+ <ruby>
+ <rb>base3</rb><rb>base4</rb>
+ <rt>text3</rt><rt>text4</rt>
+ <rb>base2</rb><rb>base1</rb>
+ <rt>text2</rt><rt>text1</rt>
+ </ruby>
+ </p>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/bidi-2.html b/layout/reftests/css-ruby/bidi-2.html
new file mode 100644
index 000000000..a2b2597b6
--- /dev/null
+++ b/layout/reftests/css-ruby/bidi-2.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1141931 - Bidi reordering of ruby</title>
+ <link rel="stylesheet" href="common.css">
+ <style> rb { margin: 0 5px; } </style>
+</head>
+<body>
+ <p>
+ <ruby>
+ <rb>base1</rb><rb>base2</rb>
+ <rtc dir="rtl">
+ <rt>text1</rt><rt>text2</rt>
+ </rtc>
+ <rbc dir="rtl">
+ <rb>base3</rb><rb>base4</rb>
+ </rbc>
+ <rt>text3</rt><rt>text4</rt>
+ </ruby>
+ <ruby dir="rtl">
+ <rb>base5</rb><rb>base6</rb>
+ <rt>text5</rt><rt>text6</rt>
+ <rbc dir="ltr">
+ <rb>base7</rb><rb>base8</rb>
+ </rbc>
+ <rt>text7</rt><rt>text8</rt>
+ </ruby>
+ </p>
+ <p dir="rtl">
+ <ruby>
+ <rb>base1</rb><rb>base2</rb>
+ <rtc dir="ltr">
+ <rt>text1</rt><rt>text2</rt>
+ </rtc>
+ <rbc dir="ltr">
+ <rb>base3</rb><rb>base4</rb>
+ </rbc>
+ <rt>text3</rt><rt>text4</rt>
+ </ruby>
+ <ruby dir="ltr">
+ <rb>base5</rb><rb>base6</rb>
+ <rt>text5</rt><rt>text6</rt>
+ <rbc dir="rtl">
+ <rb>base7</rb><rb>base8</rb>
+ </rbc>
+ <rt>text7</rt><rt>text8</rt>
+ </ruby>
+ </p>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-generation-1-ref.html b/layout/reftests/css-ruby/box-generation-1-ref.html
new file mode 100644
index 000000000..55ea0b27e
--- /dev/null
+++ b/layout/reftests/css-ruby/box-generation-1-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1088489 - Test for pseudo ruby box generation</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body class="large">
+
+ <p>|<ruby><rbc><rb>a</rb><rb><span> </span></rb><rb>b</rb></rbc
+ ><rtc pseudo><rt>c</rt><rt pseudo><span> </span></rt><rt>d</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>e</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>g</rb></rbc><rtc><rt>h</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>i</rb><rb><span> <span>j</span>
+ </span></rb></rbc><rtc pseudo><rt>k</rt></rtc><rbc><rb><span> <span>l</span>
+ </span></rb></rbc><rbc><rb>m</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>n</rb></rbc
+ ><rtc><rt>o</rt></rtc><rtc><rt>p</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>q</rb></rbc><rtc pseudo><rt>r</rt></rtc
+ ><rtc><rt>s</rt></rtc><rtc pseudo><rt>t</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>u</rb></rbc><rbc><rb><span> <span>v</span>
+ <span>w</span> </span></rb></rbc><rtc><rt>x</rt></rtc><rbc><rb><span>
+ <span>y</span> </span></rb><rb>z</rb></rbc></ruby>|</p>
+
+ <p>|<span> </span><ruby><rbc><rb>a</rb><rb><span> </span></rb><rb>b</rb></rbc
+ ><rtc pseudo><rt>c</rt><rt pseudo><span> </span></rt><rt>d</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>e</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>g</rb></rbc><rtc><rt>h</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>i</rb></rbc></ruby><span> <span>j</span>
+ </span><ruby><rbc></rbc><rtc pseudo><rt>k</rt></rtc></ruby><span> <span>l</span>
+ </span><ruby><rbc><rb>m</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>n</rb></rbc
+ ><rtc><rt>o</rt></rtc><rtc><rt>p</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>q</rb></rbc><rtc pseudo><rt>r</rt></rtc
+ ><rtc><rt>s</rt></rtc><rtc pseudo><rt>t</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>u</rb></rbc></ruby><span> <span>v</span>
+ <span>w</span> </span><ruby><rbc></rbc><rtc><rt>x</rt></rtc></ruby><span>
+ <span>y</span> </span><ruby><rbc><rb>z</rb></rbc></ruby><span> </span>|</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-generation-1.html b/layout/reftests/css-ruby/box-generation-1.html
new file mode 100644
index 000000000..2b829528f
--- /dev/null
+++ b/layout/reftests/css-ruby/box-generation-1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1088489 - Test for pseudo ruby box generation</title>
+ <link rel="stylesheet" href="common.css">
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1088489#c13">
+</head>
+<body class="large">
+
+ <p>|<ruby>
+ <rb>a</rb> <rb>b</rb>
+ <rt>c</rt> <rt>d</rt>
+ <rb>e</rb> <rbc><rb>f</rb></rbc>
+ <rb>g</rb> <rtc><rt>h</rt></rtc>
+ <rb>i</rb> <span>j</span>
+ <rt>k</rt> <span>l</span>
+ <rbc><rb>m</rb></rbc> <rbc><rb>n</rb></rbc>
+ <rtc><rt>o</rt></rtc> <rtc><rt>p</rt></rtc>
+ <rbc><rb>q</rb></rbc> <rt>r</rt>
+ <rtc><rt>s</rt></rtc> <rt>t</rt>
+ <rbc><rb>u</rb></rbc> <span>v</span>
+ <span>w</span> <rtc><rt>x</rt></rtc>
+ <span>y</span> <rb>z</rb>
+ </ruby>|</p>
+
+ <p>| <rb>a</rb> <rb>b</rb>
+ <rt>c</rt> <rt>d</rt>
+ <rb>e</rb> <rbc><rb>f</rb></rbc>
+ <rb>g</rb> <rtc><rt>h</rt></rtc>
+ <rb>i</rb> <span>j</span>
+ <rt>k</rt> <span>l</span>
+ <rbc><rb>m</rb></rbc> <rbc><rb>n</rb></rbc>
+ <rtc><rt>o</rt></rtc> <rtc><rt>p</rt></rtc>
+ <rbc><rb>q</rb></rbc> <rt>r</rt>
+ <rtc><rt>s</rt></rtc> <rt>t</rt>
+ <rbc><rb>u</rb></rbc> <span>v</span>
+ <span>w</span> <rtc><rt>x</rt></rtc>
+ <span>y</span> <rb>z</rb> |</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-generation-2-ref.html b/layout/reftests/css-ruby/box-generation-2-ref.html
new file mode 100644
index 000000000..879681c4c
--- /dev/null
+++ b/layout/reftests/css-ruby/box-generation-2-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1088489 - Test for pseudo ruby box generation</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body class="large">
+
+ <p>|<ruby><rbc></rbc
+ ><rtc pseudo><rt>a</rt><rt pseudo><span> </span></rt><rt>b</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>c</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>d</rb></rbc
+ ><rtc pseudo><rt>e</rt></rtc><rtc><rt>f</rt></rtc
+ ><rtc pseudo><rt>g</rt></rtc><rbc><rb><span> h
+ </span></rb></rbc><rtc pseudo><rt>i</rt></rtc><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>j</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>k</rb></rbc><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>l</rb></rbc
+ ><rtc><rt>m</rt></rtc><rtc><rt>n</rt></rtc><rbc><rb><span>
+ o p
+ </span></rb></rbc><rtc><rt>q</rt></rtc><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>r</rb></rbc><rbc><rb><span>
+ s </span></rb></rbc><rbc><rb>t</rb></rbc
+ ><rtc><rt>u</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>v</rb><rb><span>
+ </span></rb><rb>w</rb><rb><span> x
+ </span></rb><rb>y</rb></rbc><rtc pseudo><rt>z</rt></rtc></ruby>|</p>
+
+ <p>|<span> </span><ruby><rbc></rbc
+ ><rtc pseudo><rt>a</rt><rt pseudo><span> </span></rt><rt>b</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>c</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>d</rb></rbc
+ ><rtc pseudo><rt>e</rt></rtc><rtc><rt>f</rt></rtc
+ ><rtc pseudo><rt>g</rt></rtc></ruby><span> h
+ </span><ruby><rbc></rbc><rtc pseudo><rt>i</rt></rtc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>j</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>k</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>l</rb></rbc
+ ><rtc><rt>m</rt></rtc><rtc><rt>n</rt></rtc></ruby><span>
+ o p
+ </span><ruby><rbc></rbc><rtc><rt>q</rt></rtc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>r</rb></rbc></ruby><span>
+ s </span><ruby><rbc><rb>t</rb></rbc
+ ><rtc><rt>u</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>v</rb><rb><span>
+ </span></rb><rb>w</rb></rbc></ruby><span> x
+ </span><ruby><rbc><rb>y</rb></rbc><rtc pseudo><rt>z</rt></rtc></ruby><span> </span>|</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-generation-2.html b/layout/reftests/css-ruby/box-generation-2.html
new file mode 100644
index 000000000..0d734aa75
--- /dev/null
+++ b/layout/reftests/css-ruby/box-generation-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1088489 - Test for pseudo ruby box generation</title>
+ <link rel="stylesheet" href="common.css">
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1088489#c13">
+</head>
+<body class="large">
+
+ <p>|<ruby>
+ <rt>a</rt> <rt>b</rt>
+ <rbc><rb>c</rb></rbc> <rbc><rb>d</rb></rbc>
+ <rt>e</rt> <rtc><rt>f</rt></rtc>
+ <rt>g</rt> <span>h</span>
+ <rt>i</rt> <rb>j</rb>
+ <rbc><rb>k</rb></rbc> <rb>l</rb>
+ <rtc><rt>m</rt></rtc> <rtc><rt>n</rt></rtc>
+ <span>o</span> <span>p</span>
+ <rtc><rt>q</rt></rtc> <rbc><rb>r</rb></rbc>
+ <span>s</span> <rbc><rb>t</rb></rbc>
+ <rtc><rt>u</rt></rtc> <rb>v</rb>
+ <rb>w</rb> <span>x</span>
+ <rb>y</rb> <rt>z</rt>
+ </ruby>|</p>
+
+ <p>| <rt>a</rt> <rt>b</rt>
+ <rbc><rb>c</rb></rbc> <rbc><rb>d</rb></rbc>
+ <rt>e</rt> <rtc><rt>f</rt></rtc>
+ <rt>g</rt> <span>h</span>
+ <rt>i</rt> <rb>j</rb>
+ <rbc><rb>k</rb></rbc> <rb>l</rb>
+ <rtc><rt>m</rt></rtc> <rtc><rt>n</rt></rtc>
+ <span>o</span> <span>p</span>
+ <rtc><rt>q</rt></rtc> <rbc><rb>r</rb></rbc>
+ <span>s</span> <rbc><rb>t</rb></rbc>
+ <rtc><rt>u</rt></rtc> <rb>v</rb>
+ <rb>w</rb> <span>x</span>
+ <rb>y</rb> <rt>z</rt> |</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-generation-3-ref.html b/layout/reftests/css-ruby/box-generation-3-ref.html
new file mode 100644
index 000000000..65c3b8c1c
--- /dev/null
+++ b/layout/reftests/css-ruby/box-generation-3-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1088489 - Test for pseudo ruby box generation</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body class="large">
+
+ <p>|<ruby><rbc><rb>a</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>b</rb></rbc
+ ><rtc><rt>c</rt></rtc><rtc><rt>d</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>e</rb></rbc><rbc><rb><span> <span>f</span>
+ </span></rb></rbc><rbc><rb>g</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>h</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>i</rb></rbc><rtc pseudo><rt>j</rt></rtc
+ ><rtc><rt>k</rt></rtc><rtc pseudo><rt>l</rt></rtc><rbc><rb><span>
+ <span>m</span> <span>n</span>
+ </span></rb><rb>o</rb><rb><span> </span></rb><rb>p</rb><rb><span>
+ <span>q</span> </span></rb></rbc><rtc><rt>r</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>s</rb></rbc><rtc><rt>t</rt></rtc><rbc><rb><span>
+ <span>u</span> </span></rb></rbc><rtc pseudo><rt>v</rt><rt pseudo><span>
+ </span></rt><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc
+ ><rtc pseudo><rt>y</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>z</rb></rbc
+ ></ruby>|</p>
+
+ <p>|<span> </span><ruby><rbc><rb>a</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>b</rb></rbc
+ ><rtc><rt>c</rt></rtc><rtc><rt>d</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>e</rb></rbc></ruby><span> <span>f</span>
+ </span><ruby><rbc><rb>g</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>h</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>i</rb></rbc><rtc pseudo><rt>j</rt></rtc
+ ><rtc><rt>k</rt></rtc><rtc pseudo><rt>l</rt></rtc></ruby><span>
+ <span>m</span> <span>n</span>
+ </span><ruby><rbc><rb>o</rb><rb><span> </span></rb><rb>p</rb></rbc></ruby><span>
+ <span>q</span> </span><ruby><rbc></rbc><rtc><rt>r</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>s</rb></rbc><rtc><rt>t</rt></rtc></ruby><span>
+ <span>u</span> </span><ruby><rbc></rbc><rtc pseudo><rt>v</rt><rt pseudo><span>
+ </span><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc
+ ><rtc pseudo><rt>y</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>z</rb></rbc></ruby
+ ><span> </span>|</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-generation-3.html b/layout/reftests/css-ruby/box-generation-3.html
new file mode 100644
index 000000000..8a4c43e71
--- /dev/null
+++ b/layout/reftests/css-ruby/box-generation-3.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1088489 - Test for pseudo ruby box generation</title>
+ <link rel="stylesheet" href="common.css">
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1088489#c13">
+</head>
+<body class="large">
+
+ <p>|<ruby>
+ <rbc><rb>a</rb></rbc> <rbc><rb>b</rb></rbc>
+ <rtc><rt>c</rt></rtc> <rtc><rt>d</rt></rtc>
+ <rbc><rb>e</rb></rbc> <span>f</span>
+ <rbc><rb>g</rb></rbc> <rb>h</rb>
+ <rbc><rb>i</rb></rbc> <rt>j</rt>
+ <rtc><rt>k</rt></rtc> <rt>l</rt>
+ <span>m</span> <span>n</span>
+ <rb>o</rb> <rb>p</rb>
+ <span>q</span> <rtc><rt>r</rt></rtc>
+ <rb>s</rb> <rtc><rt>t</rt></rtc>
+ <span>u</span> <rt>v</rt>
+ <rt>w</rt> <rb>x</rb>
+ <rt>y</rt> <rbc><rb>z</rb></rbc>
+ </ruby>|</p>
+
+ <p>| <rbc><rb>a</rb></rbc> <rbc><rb>b</rb></rbc>
+ <rtc><rt>c</rt></rtc> <rtc><rt>d</rt></rtc>
+ <rbc><rb>e</rb></rbc> <span>f</span>
+ <rbc><rb>g</rb></rbc> <rb>h</rb>
+ <rbc><rb>i</rb></rbc> <rt>j</rt>
+ <rtc><rt>k</rt></rtc> <rt>l</rt>
+ <span>m</span> <span>n</span>
+ <rb>o</rb> <rb>p</rb>
+ <span>q</span> <rtc><rt>r</rt></rtc>
+ <rb>s</rb> <rtc><rt>t</rt></rtc>
+ <span>u</span> <rt>v</rt>
+ <rt>w</rt> <rb>x</rb>
+ <rt>y</rt> <rbc><rb>z</rb></rbc> |</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-generation-4-ref.html b/layout/reftests/css-ruby/box-generation-4-ref.html
new file mode 100644
index 000000000..8670d54a4
--- /dev/null
+++ b/layout/reftests/css-ruby/box-generation-4-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1088489 - Test for pseudo ruby box generation</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body class="large">
+
+ <p>|<ruby><rbc></rbc
+ ><rtc><rt>a</rt></rtc><rtc><rt>b</rt></rtc><rbc><rb><span>
+ <span>c</span> <span>d</span>
+ </span></rb></rbc><rtc><rt>e</rt></rtc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc
+ ><rtc><rt>g</rt></rtc><rtc pseudo><rt>h</rt></rtc
+ ><rtc><rt>i</rt></rtc><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>j</rb></rbc><rbc><rb><span>
+ <span>k</span> </span></rb></rbc><rbc><rb>l</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>m</rb><rb><span> </span></rb><rb>n</rb></rbc
+ ><rtc pseudo><rt>o</rt><rt pseudo><span> </span></rt><rt>p</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>q</rb><rb><span> <span>r</span>
+ </span></rb></rbc><rtc pseudo><rt>s</rt></rtc><rbc><rb><span> <span>t</span>
+ </span></rb></rbc><rbc><rb>u</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>v</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>w</rb></rbc><rtc pseudo><rt>x</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>y</rb></rbc><rtc><rt>z</rt></rtc
+ ></ruby>|</p>
+
+ <p>|<span> </span><ruby><rbc></rbc
+ ><rtc><rt>a</rt></rtc><rtc><rt>b</rt></rtc></ruby><span>
+ <span>c</span> <span>d</span>
+ </span><ruby><rbc></rbc><rtc><rt>e</rt></rtc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc
+ ><rtc><rt>g</rt></rtc><rtc pseudo><rt>h</rt></rtc
+ ><rtc><rt>i</rt></rtc><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>j</rb></rbc></ruby><span>
+ <span>k</span> </span><ruby><rbc><rb>l</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>m</rb><rb><span> </span></rb><rb>n</rb></rbc
+ ><rtc pseudo><rt>o</rt><rt pseudo><span> </span></rt><rt>p</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>q</rb></rbc></ruby><span> <span>r</span>
+ </span><ruby><rbc></rbc><rtc pseudo><rt>s</rt></rtc></ruby><span> <span>t</span>
+ </span><ruby><rbc><rb>u</rb></rbc><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>v</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>w</rb></rbc><rtc pseudo><rt>x</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>y</rb></rbc><rtc><rt>z</rt></rtc></ruby
+ ><span> </span>|</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-generation-4.html b/layout/reftests/css-ruby/box-generation-4.html
new file mode 100644
index 000000000..2dc24d3ee
--- /dev/null
+++ b/layout/reftests/css-ruby/box-generation-4.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1088489 - Test for pseudo ruby box generation</title>
+ <link rel="stylesheet" href="common.css">
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1088489#c13">
+</head>
+<body class="large">
+
+ <p>|<ruby>
+ <rtc><rt>a</rt></rtc> <rtc><rt>b</rt></rtc>
+ <span>c</span> <span>d</span>
+ <rtc><rt>e</rt></rtc> <rb>f</rb>
+ <rtc><rt>g</rt></rtc> <rt>h</rt>
+ <rtc><rt>i</rt></rtc> <rbc><rb>j</rb></rbc>
+ <span>k</span> <rbc><rb>l</rb></rbc>
+ <rb>m</rb> <rb>n</rb>
+ <rt>o</rt> <rt>p</rt>
+ <rb>q</rb> <span>r</span>
+ <rt>s</rt> <span>t</span>
+ <rb>u</rb> <rbc><rb>v</rb></rbc>
+ <rbc><rb>w</rb></rbc> <rt>x</rt>
+ <rbc><rb>y</rb></rbc> <rtc><rt>z</rt></rtc>
+ </ruby>|</p>
+
+ <p>| <rtc><rt>a</rt></rtc> <rtc><rt>b</rt></rtc>
+ <span>c</span> <span>d</span>
+ <rtc><rt>e</rt></rtc> <rb>f</rb>
+ <rtc><rt>g</rt></rtc> <rt>h</rt>
+ <rtc><rt>i</rt></rtc> <rbc><rb>j</rb></rbc>
+ <span>k</span> <rbc><rb>l</rb></rbc>
+ <rb>m</rb> <rb>n</rb>
+ <rt>o</rt> <rt>p</rt>
+ <rb>q</rb> <span>r</span>
+ <rt>s</rt> <span>t</span>
+ <rb>u</rb> <rbc><rb>v</rb></rbc>
+ <rbc><rb>w</rb></rbc> <rt>x</rt>
+ <rbc><rb>y</rb></rbc> <rtc><rt>z</rt></rtc> |</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-generation-5-ref.html b/layout/reftests/css-ruby/box-generation-5-ref.html
new file mode 100644
index 000000000..32ed1f97e
--- /dev/null
+++ b/layout/reftests/css-ruby/box-generation-5-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1088489 - Test for pseudo ruby box generation</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body class="large">
+
+ <p>|<ruby><rbc><rb><span><span>a</span> <span>b</span>
+ </span></rb><rb>c</rb><rb><span> </span></rb><rb>d</rb><rb><span>
+ <span>e</span> </span></rb></rbc><rtc pseudo><rt>f</rt></rtc><rbc><rb><span>
+ <span>g</span> </span></rb></rbc><rbc><rb>h</rb></rbc><rbc><rb><span>
+ <span>i</span> </span></rb></rbc><rtc><rt>j</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>k</rb></rbc><rtc><rt>l</rt></rtc
+ ><rtc pseudo><rt>m</rt><rt pseudo><span> </span></rt><rt>n</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>o</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>p</rb></rbc
+ ><rtc pseudo><rt>q</rt></rtc><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>r</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>s</rb></rbc><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>t</rb></rbc
+ ><rtc pseudo><rt>u</rt></rtc><rtc><rt>v</rt></rtc
+ ><rtc><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc
+ ><rtc><rt>y</rt></rtc><rbc><rb><span> <span>z</span></span></rb></rbc
+ ></ruby>|</p>
+
+ <p>|<span> <span>a</span> <span>b</span>
+ </span><ruby
+ ><rbc><rb>c</rb><rb><span> </span></rb><rb>d</rb></rbc></ruby><span>
+ <span>e</span> </span><ruby><rbc></rbc><rtc pseudo><rt>f</rt></rtc></ruby><span>
+ <span>g</span> </span><ruby><rbc><rb>h</rb></rbc></ruby><span>
+ <span>i</span> </span><ruby><rbc></rbc><rtc><rt>j</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>k</rb></rbc><rtc><rt>l</rt></rtc
+ ><rtc pseudo><rt>m</rt><rt pseudo><span> </span></rt><rt>n</rt></rtc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>o</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc><rbc><rb>p</rb></rbc
+ ><rtc pseudo><rt>q</rt></rtc><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>r</rb></rbc><rbc><rb><span>
+ </span></rb></rbc><rbc><rb>s</rb></rbc><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>t</rb></rbc
+ ><rtc pseudo><rt>u</rt></rtc><rtc><rt>v</rt></rtc
+ ><rtc><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc
+ ><rtc><rt>y</rt></rtc></ruby><span> <span>z</span> </span>|</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-generation-5.html b/layout/reftests/css-ruby/box-generation-5.html
new file mode 100644
index 000000000..043cf7576
--- /dev/null
+++ b/layout/reftests/css-ruby/box-generation-5.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1088489 - Test for pseudo ruby box generation</title>
+ <link rel="stylesheet" href="common.css">
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1088489#c13">
+</head>
+<body class="large">
+
+ <p>|<ruby>
+ <span>a</span> <span>b</span>
+ <rb>c</rb> <rb>d</rb>
+ <span>e</span> <rt>f</rt>
+ <span>g</span> <rbc><rb>h</rb></rbc>
+ <span>i</span> <rtc><rt>j</rt></rtc>
+ <rb>k</rb> <rtc><rt>l</rt></rtc>
+ <rt>m</rt> <rt>n</rt>
+ <rbc><rb>o</rb></rbc> <rbc><rb>p</rb></rbc>
+ <rt>q</rt> <rb>r</rb>
+ <rbc><rb>s</rb></rbc> <rb>t</rb>
+ <rt>u</rt> <rtc><rt>v</rt></rtc>
+ <rtc><rt>w</rt></rtc> <rbc><rb>x</rb></rbc>
+ <rtc><rt>y</rt></rtc> <span>z</span>
+ </ruby>|</p>
+
+ <p>| <span>a</span> <span>b</span>
+ <rb>c</rb> <rb>d</rb>
+ <span>e</span> <rt>f</rt>
+ <span>g</span> <rbc><rb>h</rb></rbc>
+ <span>i</span> <rtc><rt>j</rt></rtc>
+ <rb>k</rb> <rtc><rt>l</rt></rtc>
+ <rt>m</rt> <rt>n</rt>
+ <rbc><rb>o</rb></rbc> <rbc><rb>p</rb></rbc>
+ <rt>q</rt> <rb>r</rb>
+ <rbc><rb>s</rb></rbc> <rb>t</rb>
+ <rt>u</rt> <rtc><rt>v</rt></rtc>
+ <rtc><rt>w</rt></rtc> <rbc><rb>x</rb></rbc>
+ <rtc><rt>y</rt></rtc> <span>z</span> |</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-properties-1-ref.html b/layout/reftests/css-ruby/box-properties-1-ref.html
new file mode 100644
index 000000000..a8e340653
--- /dev/null
+++ b/layout/reftests/css-ruby/box-properties-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055667 - Box properties on ruby boxes</title>
+</head>
+<body style="line-height: 5;">
+ <div>
+ |<span style="background: aqua; padding: 10px; border: 12px solid red; outline: 5px solid yellow; margin: 10px;"
+ ><span>base1</span>
+ <!-- width: 256px = 300px - 2 * (padding: 2px + border: 4px + margin: 16px) -->
+ <span style="background: green; padding: 2px; border: 4px solid blue; outline: 8px solid pink; margin: 16px;"><div style="display: inline-block; text-align: center; width: 256px; line-height: normal;">base2</div></span>
+ <span>base3</span
+ ></span>|
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-properties-1.html b/layout/reftests/css-ruby/box-properties-1.html
new file mode 100644
index 000000000..1b463eb5b
--- /dev/null
+++ b/layout/reftests/css-ruby/box-properties-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055667 - Box properties on ruby boxes</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body style="line-height: 5;">
+ <div>
+ |<ruby style="background: aqua; padding: 10px; border: 12px solid red; outline: 5px solid yellow; margin: 10px;">
+ <rb>base1</rb>
+ <rb style="background: green; padding: 2px; border: 4px solid blue; outline: 8px solid pink; margin: 16px;">base2</rb>
+ <rb>base3</rb>
+ <rtc style="font-size: 0;">
+ <rt></rt>
+ <rt><div style="width: 300px; height: 0px;"></div></rt>
+ </rtc>
+ </ruby>|
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-properties-2-ref.html b/layout/reftests/css-ruby/box-properties-2-ref.html
new file mode 100644
index 000000000..5abfa2e84
--- /dev/null
+++ b/layout/reftests/css-ruby/box-properties-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055667 - Box properties on ruby boxes</title>
+ <link rel="stylesheet" href="common.css">
+ <script type="text/javascript" src="utils.js"></script>
+</head>
+<body style="line-height: 10">
+ <ruby>
+ <rb>base1</rb>
+ <rb><div></div></rb>
+ <rb>base3</rb>
+ <rtc>
+ <rt></rt>
+ <rt style="margin: 22px 0;"><div id="rtblock" style="width: 256px; text-align:center; background: silver; padding: 2px; border: 4px solid gray; outline: 8px solid black; margin: 16px;"><span id="inline">text1</span></div></rt>
+ <!-- margin: 22px = margin: 16px + padding: 2px + border: 4px -->
+ <!-- width: 256px = 300px - 2 * (padding: 2px + border: 4px + margin: 16px) -->
+ </rtc>
+ </ruby>
+ <script type="text/javascript">
+ // normal height of an one-line inline-block is the line-height,
+ // we need to adjust it to the height of the inline box to simulate
+ // the ruby text box.
+ makeBSizeMatchInlineBox(document.getElementById('rtblock'),
+ document.getElementById('inline'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-properties-2.html b/layout/reftests/css-ruby/box-properties-2.html
new file mode 100644
index 000000000..ca1201693
--- /dev/null
+++ b/layout/reftests/css-ruby/box-properties-2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055667 - Box properties on ruby boxes</title>
+ <link rel="stylesheet" href="common.css">
+ <script type="text/javascript" src="utils.js"></script>
+</head>
+<body style="line-height: 10">
+ <ruby>
+ <rb>base1</rb>
+ <rb><div style="width: 300px;"></div></rb>
+ <rb>base3</rb>
+ <rtc>
+ <rt></rt>
+ <rt style="background: silver; padding: 2px; border: 4px solid gray; outline: 8px solid black; margin: 16px;"><div id="rtblock"><span id="inline">text1</span></div></rt>
+ </rtc>
+ </ruby>
+ <script type="text/javascript">
+ // alter the height to make it easier to match the reference page
+ makeBSizeMatchInlineBox(document.getElementById('rtblock'),
+ document.getElementById('inline'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-properties-3-ref.html b/layout/reftests/css-ruby/box-properties-3-ref.html
new file mode 100644
index 000000000..465e54758
--- /dev/null
+++ b/layout/reftests/css-ruby/box-properties-3-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055667 - Box properties on ruby boxes</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body style="line-height: 5">
+ <ruby>
+ <rbc>
+ <rb style="background: aqua; outline: 8px solid teal; margin: 16px;">base1</rb>
+ </rbc><rbc></rbc>
+ <rtc>
+ <rt style="outline: 8px solid purple;"><span style="background: fuchsia">text1</span></rt>
+ </rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-properties-3.html b/layout/reftests/css-ruby/box-properties-3.html
new file mode 100644
index 000000000..6b014c268
--- /dev/null
+++ b/layout/reftests/css-ruby/box-properties-3.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055667 - Box properties on ruby boxes</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body style="line-height: 5">
+ <ruby>
+ <rbc style="background: aqua; padding: 2px; border: 4px solid red; outline: 8px solid teal; margin: 16px;">
+ <rb>base1</rb>
+ </rbc><rbc></rbc>
+ <rtc style="background: fuchsia; padding: 2px; border: 4px solid red; outline: 8px solid purple; margin: 16px;">
+ <rt>text1</rt>
+ </rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-properties-4-ref.html b/layout/reftests/css-ruby/box-properties-4-ref.html
new file mode 100644
index 000000000..db6788daa
--- /dev/null
+++ b/layout/reftests/css-ruby/box-properties-4-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055667 - Box properties on ruby boxes</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ .inside {
+ display: inline-block;
+ width: 50px; height: 10px;
+ background: black;
+ }
+ </style>
+</head>
+<body>
+ <div style="width: 80px">
+ <span style="background: silver; padding: 0 20px; border: 10px solid gray; border-width: 0 10px;"
+ ><div class="inside"></div
+ ><div class="inside" style="padding: 0 15px;"></div
+ ><div class="inside"></div
+ ></span>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/box-properties-4.html b/layout/reftests/css-ruby/box-properties-4.html
new file mode 100644
index 000000000..6e953bc3a
--- /dev/null
+++ b/layout/reftests/css-ruby/box-properties-4.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055667 - Box properties on ruby boxes</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ .inside {
+ width: 50px; height: 10px;
+ background: black;
+ }
+ </style>
+</head>
+<body>
+ <div style="width: 80px">
+ <ruby style="background: silver; padding: 0 20px; border: 10px solid gray; border-width: 0 10px;"
+ ><rb><div class="inside"></div></rb
+ ><rb><div class="inside" style="padding: 0 15px;"></div></rb
+ ><rb><div class="inside"></div></rb
+ ></ruby>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/bug1181890-notref.html b/layout/reftests/css-ruby/bug1181890-notref.html
new file mode 100644
index 000000000..0e97415a8
--- /dev/null
+++ b/layout/reftests/css-ruby/bug1181890-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<p style="ruby-align: start">
+ <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby>
+ <ruby><rb>BBBBB</rb><rt>b</rt></ruby>
+</p>
+<p style="ruby-align: start">
+ <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby>
+ <ruby><rb>BBBBB</rb><rt>b</rt></ruby>
+</p>
diff --git a/layout/reftests/css-ruby/bug1181890-ref.html b/layout/reftests/css-ruby/bug1181890-ref.html
new file mode 100644
index 000000000..41a46d13e
--- /dev/null
+++ b/layout/reftests/css-ruby/bug1181890-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<p style="ruby-align: center">
+ <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby>
+ <ruby><rb>BBBBB</rb><rt>b</rt></ruby>
+</p>
+<p style="ruby-align: space-between">
+ <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby>
+ <ruby><rb>BBBBB</rb><rt>b</rt></ruby>
+</p>
diff --git a/layout/reftests/css-ruby/bug1181890.html b/layout/reftests/css-ruby/bug1181890.html
new file mode 100644
index 000000000..3369a7482
--- /dev/null
+++ b/layout/reftests/css-ruby/bug1181890.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<p style="ruby-align: center">
+ <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby>
+ <ruby><rb>BBBBB</rb><rt>b</rt></ruby>
+</p>
+<p style="ruby-align: space-between">
+ <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby>
+ <ruby><rb>BBBBB</rb><rt>b</rt></ruby>
+</p>
+&lrm;
diff --git a/layout/reftests/css-ruby/common.css b/layout/reftests/css-ruby/common.css
new file mode 100644
index 000000000..45bdd379c
--- /dev/null
+++ b/layout/reftests/css-ruby/common.css
@@ -0,0 +1,22 @@
+@font-face {
+ font-family: Ahem;
+ src: url(../fonts/Ahem.ttf);
+}
+rbc {
+ display: ruby-base-container;
+ unicode-bidi: isolate;
+}
+[pseudo] {
+ font-size: inherit;
+ line-height: inherit;
+}
+[pseudo] > rt {
+ font-size: 50%;
+}
+[pseudo] > rt[pseudo] {
+ font-size: inherit;
+}
+
+.large {
+ font-size: 200%;
+}
diff --git a/layout/reftests/css-ruby/dynamic-insertion-1-ref.html b/layout/reftests/css-ruby/dynamic-insertion-1-ref.html
new file mode 100644
index 000000000..b174b85c8
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-insertion-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic insertion of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+
+ <p>One space should exist between 'a' and 'b':</p>
+
+ <p>a<rbc><rb></rb> <rb></rb></rbc>b</p>
+ <p>a<ruby><rb></rb> <rb></rb></ruby>b</p>
+ <p>a<ruby><rbc></rbc> <rbc></rbc></ruby>b</p>
+ <p>a<rtc><rt></rt> <rt></rt></rtc>b</p>
+ <p>a<ruby><rt></rt> <rt></rt></ruby>b</p>
+
+ <p>a<rbc><rb></rb> <rb></rb></rbc>b</p>
+ <p>a<ruby><rb></rb> <rb></rb></ruby>b</p>
+ <p>a<ruby><rbc></rbc> <rbc></rbc></ruby>b</p>
+ <p>a<rtc><rt></rt> <rt></rt></rtc>b</p>
+ <p>a<ruby><rt></rt> <rt></rt></ruby>b</p>
+
+ <p>a<rb></rb><span></span> <rt></rt>b</p>
+ <p>a<rb></rb> <span></span><rt></rt>b</p>
+ <p>a<rb></rb> <rb></rb><rt></rt>b</p>
+ <p>a<rt></rt><rb></rb> <rb></rb>b</p>
+ <p>a<rbc></rbc> <rbc></rbc><rt></rt>b</p>
+ <p>a<rb></rb><rt></rt> <rt></rt>b</p>
+ <p>a<rt></rt> <rt></rt><rb></rb>b</p>
+
+ <p>a<rb></rb> <rb></rb>b</p>
+ <p>a<rbc></rbc> <rbc></rbc>b</p>
+ <p>a<rt></rt> <rt></rt>b</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/dynamic-insertion-1.html b/layout/reftests/css-ruby/dynamic-insertion-1.html
new file mode 100644
index 000000000..72bf5aeb6
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-insertion-1.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic insertion of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+ <script src="dynamic-insertion.js"></script>
+</head>
+<body>
+
+ <p>One space should exist between 'a' and 'b':</p>
+
+ <!-- leading white space -->
+ <!-- => inter-base white space -->
+ <p>a<rbc data-insert="start" data-tag="rb"> <rb></rb></rbc>b</p>
+ <p>a<ruby data-insert="start" data-tag="rb"> <rb></rb></ruby>b</p>
+ <!-- => inter-segment white space -->
+ <p>a<ruby data-insert="start" data-tag="rbc"> <rbc></rbc></ruby>b</p>
+ <!-- => inter-annotation white space -->
+ <p>a<rtc data-insert="start" data-tag="rt"> <rt></rt></rtc>b</p>
+ <p>a<ruby data-insert="start" data-tag="rt"> <rt></rt></ruby>b</p>
+
+ <!-- trailing white space -->
+ <!-- => inter-base white space -->
+ <p>a<rbc data-insert="end" data-tag="rb"><rb></rb> </rbc>b</p>
+ <p>a<ruby data-insert="end" data-tag="rb"><rb></rb> </ruby>b</p>
+ <!-- => inter-segment white space -->
+ <p>a<ruby data-insert="end" data-tag="rbc"><rbc></rbc> </ruby>b</p>
+ <!-- => inter-annotation white space -->
+ <p>a<rtc data-insert="end" data-tag="rt"><rt></rt> </rtc>b</p>
+ <p>a<ruby data-insert="end" data-tag="rt"><rt></rt> </ruby>b</p>
+
+ <!-- inter-level white space -->
+ <!-- => normal white space -->
+ <p>a<rb data-insert="after" data-tag="span"></rb> <rt></rt>b</p>
+ <p>a<rb></rb> <rt data-insert="before" data-tag="span"></rt>b</p>
+ <!-- => inter-base white space -->
+ <p>a<rb></rb> <rt data-insert="before" data-tag="rb"></rt>b</p>
+ <p>a<rt data-insert="after" data-tag="rb"></rt> <rb></rb>b</p>
+ <!-- => inter-segment white space -->
+ <p>a<rbc></rbc> <rt data-insert="before" data-tag="rbc"></rt>b</p>
+ <!-- => inter-annotation white space -->
+ <p>a<rb data-insert="after" data-tag="rt"></rb> <rt></rt>b</p>
+ <p>a<rt></rt> <rb data-insert="before" data-tag="rt"></rb>b</p>
+
+ <!-- insert white space -->
+ <!-- inter-base white space -->
+ <p>a<rb data-insert="after" data-text=" "></rb><rb></rb>b</p>
+ <!-- inter-segment white space -->
+ <p>a<rbc data-insert="after" data-text=" "></rbc><rbc></rbc>b</p>
+ <!-- inter-annotation white space -->
+ <p>a<rt data-insert="after" data-text=" "></rt><rt></rt>b</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/dynamic-insertion-2-ref.html b/layout/reftests/css-ruby/dynamic-insertion-2-ref.html
new file mode 100644
index 000000000..eba1901bf
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-insertion-2-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic insertion of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+
+ <p>No space should exist between 'a' and 'b':</p>
+
+ <p><span>a</span><rb></rb> <rt></rt>b</p>
+ <p>a<rb></rb> <rt></rt><span>b</span></p>
+ <p>a<rb></rb> <rt></rt><rb></rb>b</p>
+ <p>a<rbc></rbc> <rt></rt><rb></rb>b</p>
+ <p>a<rt></rt><rb></rb> <rt></rt>b</p>
+
+ <p>a<ruby> <rb></rb></ruby>b</p>
+ <p>a<rbc> <rb></rb></rbc>b</p>
+ <p>a<rtc> <rt></rt></rtc>b</p>
+ <p>a<ruby><rb></rb> </ruby>b</p>
+ <p>a<rbc><rb></rb> </rbc>b</p>
+ <p>a<rtc><rt></rt> </rtc>b</p>
+ <p>a<rb></rb> <rt></rt>b</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/dynamic-insertion-2.html b/layout/reftests/css-ruby/dynamic-insertion-2.html
new file mode 100644
index 000000000..c1ec56594
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-insertion-2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic insertion of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+ <script src="dynamic-insertion.js"></script>
+</head>
+<body>
+
+ <p>No space should exist between 'a' and 'b':</p>
+
+ <!-- inter-level white space -->
+ <!-- <= normal white space -->
+ <p><span data-insert="after" data-tag="rb">a</span> <rt></rt>b</p>
+ <p>a<rb></rb> <span data-insert="before" data-tag="rt">b</span></p>
+ <!-- <= inter-base white space -->
+ <p>a<rb></rb> <rb data-insert="before" data-tag="rt"></rb>b</p>
+ <!-- <= inter-segment white space -->
+ <p>a<rbc></rbc> <rb data-insert="before" data-tag="rt"></rb>b</p>
+ <!-- <= inter-annotation white space -->
+ <p>a<rt data-insert="after" data-tag="rb"></rt> <rt></rt>b</p>
+
+ <!-- insert white space -->
+ <!-- leading white space -->
+ <p>a<ruby data-insert="start" data-text=" "><rb></rb></ruby>b</p>
+ <p>a<rbc data-insert="start" data-text=" "><rb></rb></rbc>b</p>
+ <p>a<rtc data-insert="start" data-text=" "><rt></rt></rtc>b</p>
+ <!-- trailing white space -->
+ <p>a<ruby data-insert="end" data-text=" "><rb></rb></ruby>b</p>
+ <p>a<rbc data-insert="end" data-text=" "><rb></rb></rbc>b</p>
+ <p>a<rtc data-insert="end" data-text=" "><rt></rt></rtc>b</p>
+ <!-- inter-level white space -->
+ <p>a<rb data-insert="after" data-text=" "></rb><rt></rt>b</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/dynamic-insertion-3-ref.html b/layout/reftests/css-ruby/dynamic-insertion-3-ref.html
new file mode 100644
index 000000000..a26c3d4fe
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-insertion-3-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic insertion of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+
+ <p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p>
+
+ <p><rb></rb><span></span><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+ <p><rb></rb><rt></rt><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+ <p><rb>a</rb><rt>x</rt><rb>b</rb><rt>y</rt></p>
+ <p><rbc><span>a</span><rb></rb>b</rbc><rt>x</rt><rt></rt><rt>y</rt></p>
+ <p><rb>a</rb><rb></rb><rb>b</rb><rtc><span>x</span><rt></rt>y</rtc></p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/dynamic-insertion-3.html b/layout/reftests/css-ruby/dynamic-insertion-3.html
new file mode 100644
index 000000000..f19d70260
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-insertion-3.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic insertion of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+ <script src="dynamic-insertion.js"></script>
+</head>
+<body>
+
+ <p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p>
+
+ <!-- split -->
+ <!-- pseudo ruby -->
+ <p><rb data-insert="after" data-tag="span"></rb><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+ <!-- pseudo ruby base container -->
+ <p><rb data-insert="after" data-tag="rt"></rb><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+ <!-- pseudo ruby text container -->
+ <p><rb>a</rb><rt data-insert="after" data-tag="rb" data-text="b">x</rt><rt>y</rt></p>
+ <!-- pseudo ruby base -->
+ <p><rbc><span data-insert="after" data-tag="rb">a</span>b</rbc><rt>x</rt><rt></rt><rt>y</rt></p>
+ <!-- pseudo ruby text -->
+ <p><rb>a</rb><rb></rb><rb>b</rb><rtc><span data-insert="after" data-tag="rt">x</span>y</rtc></p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/dynamic-insertion.js b/layout/reftests/css-ruby/dynamic-insertion.js
new file mode 100644
index 000000000..0bf6cd969
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-insertion.js
@@ -0,0 +1,42 @@
+window.onload = function() {
+ // Force a reflow before any changes.
+ document.body.clientWidth;
+
+ var elems = document.querySelectorAll('[data-insert]');
+ Array.from(elems).forEach(function(e) {
+ var parent, ref;
+ switch (e.dataset.insert) {
+ case 'start':
+ parent = e;
+ ref = e.firstChild;
+ break;
+
+ case 'end':
+ parent = e;
+ ref = null;
+ break;
+
+ case 'before':
+ parent = e.parentNode;
+ ref = e;
+ break;
+
+ case 'after':
+ parent = e.parentNode;
+ ref = e.nextSibling;
+ break;
+ }
+
+ var elem, textnode;
+ if ('text' in e.dataset) {
+ textnode = document.createTextNode(e.dataset.text);
+ }
+ if ('tag' in e.dataset) {
+ elem = document.createElement(e.dataset.tag);
+ if (textnode) {
+ elem.appendChild(textnode);
+ }
+ }
+ parent.insertBefore(elem ? elem : textnode, ref);
+ });
+};
diff --git a/layout/reftests/css-ruby/dynamic-removal-1-ref.html b/layout/reftests/css-ruby/dynamic-removal-1-ref.html
new file mode 100644
index 000000000..5fdcd8a7d
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-removal-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic removal of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+
+ <p>No space should exist between 'a' and 'b':</p>
+
+ <p>a<ruby> <rb></rb></ruby>b</p>
+ <p>a<ruby><rb></rb> </ruby>b</p>
+ <p>a<ruby><rb></rb> <rt></rt></ruby>b</p>
+
+ <p>a<ruby> <rbc></rbc></ruby>b</p>
+ <p>a<ruby><rbc></rbc> </ruby>b</p>
+ <p>a<rbc></rbc> <rtc></rtc>b</p>
+
+ <p><rb>a</rb><rb>b</rb><rtc> <rt>x</rt></rtc></p>
+ <p><rb>a</rb><rb>b</rb><rtc><rt>x</rt> </rtc></p>
+ <p><rb>a</rb><rb>b</rb> <rt>x</rt></p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/dynamic-removal-1.html b/layout/reftests/css-ruby/dynamic-removal-1.html
new file mode 100644
index 000000000..edff9246e
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-removal-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic removal of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+ <script src="dynamic-removal.js"></script>
+</head>
+<body>
+
+ <p>No space should exist between 'a' and 'b':</p>
+
+ <!-- inter-base white space -->
+ <!-- => leading white space -->
+ <p>a<ruby><rb class="remove"></rb> <rb></rb></ruby>b</p>
+ <!-- => trailing white space -->
+ <p>a<ruby><rb></rb> <rb class="remove"></rb></ruby>b</p>
+ <!-- => inter-level white space -->
+ <p>a<ruby><rb></rb> <rb class="remove"></rb><rt></rt></ruby>b</p>
+
+ <!-- inter-segment white space -->
+ <!-- => leading white space -->
+ <p>a<ruby><rbc class="remove"></rbc> <rbc></rbc></ruby>b</p>
+ <!-- => trailing white space -->
+ <p>a<ruby><rbc></rbc> <rbc class="remove"></rbc></ruby>b</p>
+ <!-- => inter-level white space -->
+ <p>a<rbc></rbc> <rbc class="remove"></rbc><rtc></rtc>b</p>
+
+ <!-- inter-annotation white space -->
+ <!-- => leading white space -->
+ <p><rb>a</rb><rb>b</rb><rtc><rt class="remove"></rt> <rt>x</rt></rtc></p>
+ <!-- => trailing white space -->
+ <p><rb>a</rb><rb>b</rb><rtc><rt>x</rt> <rt class="remove"></rt></rtc></p>
+ <!-- => inter-level white space -->
+ <p><rb>a</rb><rb>b</rb><rt class="remove"></rt> <rt>x</rt></p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/dynamic-removal-2-ref.html b/layout/reftests/css-ruby/dynamic-removal-2-ref.html
new file mode 100644
index 000000000..53500358c
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-removal-2-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic removal of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+
+ <p>One space should exist between 'a' and 'b':</p>
+
+ <p>a <rt></rt>b</p>
+ <p>a<rb></rb> b</p>
+ <p>a<rb></rb> <rb></rb>b</p>
+ <p>a<rbc></rbc> <rbc></rbc>b</p>
+ <p><rb>a</rb> <rb>b</rb><rt>x</rt> <rt>y</rt></p>
+
+</body>
diff --git a/layout/reftests/css-ruby/dynamic-removal-2.html b/layout/reftests/css-ruby/dynamic-removal-2.html
new file mode 100644
index 000000000..f1d3cb67c
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-removal-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic removal of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+ <script src="dynamic-removal.js"></script>
+</head>
+<body>
+
+ <p>One space should exist between 'a' and 'b':</p>
+
+ <!-- inter-level white space -->
+ <!-- => normal white space -->
+ <p>a<rb class="remove"></rb> <rt></rt>b</p>
+ <p>a<rb></rb> <rt class="remove"></rt>b</p>
+ <!-- => inter-base white space -->
+ <p>a<rb></rb> <rt class="remove"></rt><rb></rb>b</p>
+ <!-- => inter-segment white space -->
+ <p>a<rbc></rbc> <rtc class="remove"></rtc><rbc></rbc>b</p>
+ <!-- => inter-annotation white space -->
+ <p><rb>a</rb> <rb>b</rb><rt>x</rt><rb class="remove"></rb> <rt>y</rt></p>
+
+</body>
diff --git a/layout/reftests/css-ruby/dynamic-removal-3-ref.html b/layout/reftests/css-ruby/dynamic-removal-3-ref.html
new file mode 100644
index 000000000..2f36b2c7a
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-removal-3-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic removal of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+
+ <p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p>
+
+
+ <p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+ <p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+ <p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+
+ <p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+ <p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+
+ <p>'ab' should be paried with 'xy':</p>
+
+ <p><rbc>ab</rbc><rt>xy</rt></p>
+ <p><rb>ab</rb><rtc style="letter-spacing: 1px">xy</rtc></p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/dynamic-removal-3.html b/layout/reftests/css-ruby/dynamic-removal-3.html
new file mode 100644
index 000000000..4d757ecec
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-removal-3.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1087872 - Test for dynamic removal of ruby frames</title>
+ <link rel="stylesheet" href="common.css">
+ <script src="dynamic-removal.js"></script>
+</head>
+<body>
+
+ <p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p>
+
+ <!-- merge -->
+ <!-- pseudo ruby -->
+ <p><rb>a</rb><span class="remove"></span><rb>b</rb><rt>x</rt><rt>y</rt></p>
+ <!-- pseudo ruby base container -->
+ <p><rb>a</rb><rt class="remove"></rt><rb>b</rb><rt>x</rt><rt>y</rt></p>
+ <!-- pseudo ruby text container -->
+ <p><rb>a</rb><rb>b</rb><rt>x</rt><rb class="remove"></rb><rt>y</rt></p>
+
+ <!-- white space removal -->
+ <!-- inter-base white space -->
+ <p><rb class="remove-after">a</rb> <rb>b</rb><rt>x</rt><rt>y</rt></p>
+ <!-- inter-annotation white space -->
+ <p><rb>a</rb><rb>b</rb><rt class="remove-after">x</rt> <rt>y</rt></p>
+
+ <p>'ab' should be paried with 'xy':</p>
+
+ <!-- merge -->
+ <!-- pseudo ruby base -->
+ <p><rbc>a<rb class="remove"></rb>b</rbc><rt>xy</rt></p>
+ <!-- pseudo ruby text -->
+ <!-- letter-spacing is added here to avoid fuzzy on Windows. See bug 1111891 -->
+ <p><rb>ab</rb><rtc style="letter-spacing: 1px">x<rt class="remove"></rt>y</rtc></p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/dynamic-removal.js b/layout/reftests/css-ruby/dynamic-removal.js
new file mode 100644
index 000000000..f258f28cf
--- /dev/null
+++ b/layout/reftests/css-ruby/dynamic-removal.js
@@ -0,0 +1,14 @@
+function getElements(className) {
+ return Array.from(document.getElementsByClassName(className));
+}
+window.onload = function() {
+ // Force a reflow before any changes.
+ document.body.clientWidth;
+
+ getElements('remove').forEach(function(e) {
+ e.parentNode.removeChild(e);
+ });
+ getElements('remove-after').forEach(function(e) {
+ e.parentNode.removeChild(e.nextSibling);
+ });
+};
diff --git a/layout/reftests/css-ruby/float-handling-ref.html b/layout/reftests/css-ruby/float-handling-ref.html
new file mode 100644
index 000000000..d95796d32
--- /dev/null
+++ b/layout/reftests/css-ruby/float-handling-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title></title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ ruby div {
+ width: 10px; height: 10px;
+ background-color: grey;
+ margin: 2px;
+ }
+ .left { float: left; }
+ .right { float: right; }
+ </style>
+</head>
+<body>
+ <div><ruby><rb><div class="left"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div>
+ <div><ruby><rb><div class="left"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div>
+ <div><ruby><rb><div class="right"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div>
+ <div><ruby><rb><div class="right"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/float-handling.html b/layout/reftests/css-ruby/float-handling.html
new file mode 100644
index 000000000..587483ec1
--- /dev/null
+++ b/layout/reftests/css-ruby/float-handling.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title></title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ ruby div {
+ width: 10px; height: 10px;
+ background-color: grey;
+ margin: 2px;
+ }
+ .left { float: left; }
+ .right { float: right; }
+ </style>
+</head>
+<body>
+ <div><ruby><rb>HELLO WORLD</rb><rt><div class="left"></div>hello world</rt></ruby></div>
+ <div><ruby><rb>HELLO WORLD</rb><rt>hello<div class="left"></div> world</rt></ruby></div>
+ <div><ruby><rb>HELLO WORLD</rb><rt><div class="right"></div>hello world</rt></ruby></div>
+ <div><ruby><rb>HELLO WORLD</rb><rt>hello<div class="right"></div> world</rt></ruby></div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/inflated-ruby-1-ref.html b/layout/reftests/css-ruby/inflated-ruby-1-ref.html
new file mode 100644
index 000000000..7ae6e5825
--- /dev/null
+++ b/layout/reftests/css-ruby/inflated-ruby-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<style>
+div { font-family: monospace; font-size: 34px; width: 450px; }
+rt { font-size: 50%; }
+</style>
+<div><ruby><rb>base<rt>rubytext</ruby></div>
diff --git a/layout/reftests/css-ruby/inflated-ruby-1.html b/layout/reftests/css-ruby/inflated-ruby-1.html
new file mode 100644
index 000000000..f9c6f1947
--- /dev/null
+++ b/layout/reftests/css-ruby/inflated-ruby-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+div { font-family: monospace; font-size: 12px; width: 450px; }
+rt { font-size: 50%; }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><ruby><rb>base<rt>rubytext</ruby></div>
diff --git a/layout/reftests/css-ruby/intra-level-whitespace-1-ref.html b/layout/reftests/css-ruby/intra-level-whitespace-1-ref.html
new file mode 100644
index 000000000..7cc105032
--- /dev/null
+++ b/layout/reftests/css-ruby/intra-level-whitespace-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1099807 - Intra-level whitespace pairing</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <p><ruby>
+ <rb>a</rb><rb pseudo><span> </span></rb><rb>b</rb>
+ <rt>x</rt><rt pseudo><span> </span></rt><rt>y</rt>
+ </ruby></p>
+ <p><ruby>
+ <rb>a</rb><rb pseudo><span> </span></rb><rb>b</rb>
+ <rt>x</rt><rt></rt><rt>y</rt>
+ </ruby></p>
+ <p><ruby>
+ <rb>a</rb><rb pseudo></rb><rb>b</rb>
+ <rt>x</rt><rt pseudo><span> </span></rt><rt>y</rt>
+ </ruby></p>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/intra-level-whitespace-1.html b/layout/reftests/css-ruby/intra-level-whitespace-1.html
new file mode 100644
index 000000000..d1f23cbdb
--- /dev/null
+++ b/layout/reftests/css-ruby/intra-level-whitespace-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1099807 - Intra-level whitespace pairing</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <p><ruby>
+ <rb>a</rb> <rb>b</rb>
+ <rt>x</rt> <rt>y</rt>
+ </ruby></p>
+ <p><ruby>
+ <rb>a</rb> <rb>b</rb>
+ <rt>x</rt><rt>y</rt>
+ </ruby></p>
+ <p><ruby>
+ <rb>a</rb><rb>b</rb>
+ <rt>x</rt> <rt>y</rt>
+ </ruby></p>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/intra-level-whitespace-2-ref.html b/layout/reftests/css-ruby/intra-level-whitespace-2-ref.html
new file mode 100644
index 000000000..fe580bb44
--- /dev/null
+++ b/layout/reftests/css-ruby/intra-level-whitespace-2-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1099807 - Intra-level whitespace pairing</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ body { font-family: monospace; }
+ .container { border: 1px solid blue; margin: 20px; }
+ </style>
+ <style id="style"></style>
+</head>
+<body>
+ <span id="ref1">12345</span> <span id="ref2">12345 67890</span>
+ <div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt><rt>54321</rt></ruby></div>
+ <div class="container"><ruby><rb>12345</rb><rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div>
+ <div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div>
+ <script type="text/javascript">
+ var ref2 = document.getElementById('ref2');
+ var style = document.getElementById('style');
+ var width2 = ref2.getBoundingClientRect().width + 'px';
+ // This is the same as the script in the corresponding
+ // testcase, except that here we skip the intermediate
+ // size and jump straight to the final size.
+ style.textContent = '.container { width: ' + width2 + '; }';
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/intra-level-whitespace-2.html b/layout/reftests/css-ruby/intra-level-whitespace-2.html
new file mode 100644
index 000000000..f2eddba6c
--- /dev/null
+++ b/layout/reftests/css-ruby/intra-level-whitespace-2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1099807 - Intra-level whitespace pairing</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ body { font-family: monospace; }
+ .container { border: 1px solid blue; margin: 20px; }
+ </style>
+ <style id="style"></style>
+</head>
+<body>
+ <span id="ref1">12345</span> <span id="ref2">12345 67890</span>
+ <div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt><rt>54321</rt></ruby></div>
+ <div class="container"><ruby><rb>12345</rb><rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div>
+ <div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div>
+ <script type="text/javascript">
+ var ref1 = document.getElementById('ref1');
+ var ref2 = document.getElementById('ref2');
+ var style = document.getElementById('style');
+ var width1 = ref1.getBoundingClientRect().width + 'px';
+ var width2 = ref2.getBoundingClientRect().width + 'px';
+ // It changes the width of the containers to test incremental
+ // layout with intra-level whitespace columns being pushed and
+ // pulled up across a line-break.
+ style.textContent = '.container { width: ' + width1 + '; }';
+ document.body.offsetHeight; // force reflow
+ style.textContent = '.container { width: ' + width2 + '; }';
+ document.body.offsetHeight; // force reflow
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/intra-level-whitespace-3-ref.html b/layout/reftests/css-ruby/intra-level-whitespace-3-ref.html
new file mode 100644
index 000000000..1e43d0eac
--- /dev/null
+++ b/layout/reftests/css-ruby/intra-level-whitespace-3-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1099807 - Intra-level whitespace pairing</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ |<ruby>
+ <rbc><rb>before</rb><rb>base</rb><rb> </rb></rbc>
+ <rtc><rt> </rt><rt>text</rt><rt>after</rt></rtc>
+ </ruby>|
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/intra-level-whitespace-3.html b/layout/reftests/css-ruby/intra-level-whitespace-3.html
new file mode 100644
index 000000000..a3a9b6313
--- /dev/null
+++ b/layout/reftests/css-ruby/intra-level-whitespace-3.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1099807 - Intra-level whitespace pairing</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ rbc::before {
+ display: ruby-base;
+ content: "before";
+ }
+ rbc::after {
+ display: ruby-base;
+ content: " ";
+ }
+ rtc::before {
+ display: ruby-text;
+ content: " ";
+ }
+ rtc::after {
+ display: ruby-text;
+ content: "after";
+ }
+ </style>
+</head>
+<body>
+ <!-- This test ensures that we don't treat all-whitespace
+ ::before/::after content as intra-level whitespace -->
+ |<ruby>
+ <rbc><rb>base</rb></rbc>
+ <rtc><rt>text</rt></rtc>
+ </ruby>|
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/intrinsic-isize-1-ref.html b/layout/reftests/css-ruby/intrinsic-isize-1-ref.html
new file mode 100644
index 000000000..902e8537c
--- /dev/null
+++ b/layout/reftests/css-ruby/intrinsic-isize-1-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1134432 - Intrinsic ISize calculation of ruby</title>
+ <style>
+ div {
+ display: inline-block;
+ border: 1px solid black;
+ }
+ span {
+ white-space: nowrap;
+ }
+ </style>
+</head>
+<body>
+ <div style="width: -moz-min-content">
+ <span>ABC</span><span>DEF</span>
+ </div>
+ <div style="width: -moz-max-content">
+ <span>ABC</span><span>DEF</span>
+ </div>
+ <br>
+
+ <div style="width: -moz-min-content">
+ XYZ<span>ABC</span><span>DEF</span>XYZ
+ </div>
+ <div style="width: -moz-max-content">
+ XYZ<span>ABC</span><span>DEF</span>XYZ
+ </div>
+ <br>
+
+ <div style="width: -moz-min-content">
+ <span>あい</span><span>うえ</span>
+ </div>
+ <div style="width: -moz-max-content">
+ <span>あい</span><span>うえ</span>
+ </div>
+ <br>
+
+ <div style="width: -moz-min-content">
+ お<span>あい</span><span>うえ</span>お
+ </div>
+ <div style="width: -moz-max-content">
+ お<span>あい</span><span>うえ</span>お
+ </div>
+ <br>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/intrinsic-isize-1.html b/layout/reftests/css-ruby/intrinsic-isize-1.html
new file mode 100644
index 000000000..dd900b4b7
--- /dev/null
+++ b/layout/reftests/css-ruby/intrinsic-isize-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1134432 - Intrinsic ISize calculation of ruby</title>
+ <style>
+ div {
+ display: inline-block;
+ border: 1px solid black;
+ }
+ </style>
+</head>
+<body>
+ <div style="width: -moz-min-content">
+ <ruby><rb>ABC<rb>DEF</ruby>
+ </div>
+ <div style="width: -moz-max-content">
+ <ruby><rb>ABC<rb>DEF</ruby>
+ </div>
+ <br>
+
+ <div style="width: -moz-min-content">
+ XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ
+ </div>
+ <div style="width: -moz-max-content">
+ XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ
+ </div>
+ <br>
+
+ <div style="width: -moz-min-content">
+ <ruby><rb>あい<rb>うえ</ruby>
+ </div>
+ <div style="width: -moz-max-content">
+ <ruby><rb>あい<rb>うえ</ruby>
+ </div>
+ <br>
+
+ <div style="width: -moz-min-content">
+ お<ruby><rb>あい<rb>うえ</ruby>お
+ </div>
+ <div style="width: -moz-max-content">
+ お<ruby><rb>あい<rb>うえ</ruby>お
+ </div>
+ <br>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/intrinsic-isize-2-ref.html b/layout/reftests/css-ruby/intrinsic-isize-2-ref.html
new file mode 100644
index 000000000..cb706c13e
--- /dev/null
+++ b/layout/reftests/css-ruby/intrinsic-isize-2-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1180443 - Intrinsic ISize calculation of ruby with whitespace</title>
+ <style>
+ div {
+ display: inline-block;
+ border: 1px solid black;
+ }
+ </style>
+</head>
+<body>
+ <p>No line break should happen in any block, and the content should just fit in the block.</p>
+
+ <div>
+ ABC DEF
+ </div>
+ <div>
+ XYZ ABCDEF XYZ
+ </div>
+
+ <div>
+ あい うえ
+ </div>
+ <div>
+ お あいうえ お
+ </div>
+ <br>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/intrinsic-isize-2.html b/layout/reftests/css-ruby/intrinsic-isize-2.html
new file mode 100644
index 000000000..05991bb1c
--- /dev/null
+++ b/layout/reftests/css-ruby/intrinsic-isize-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1180443 - Intrinsic ISize calculation of ruby with whitespace</title>
+ <style>
+ div {
+ display: inline-block;
+ border: 1px solid black;
+ }
+ </style>
+</head>
+<body>
+ <p>No line break should happen in any block, and the content should just fit in the block.</p>
+
+ <div>
+ <ruby><rb>ABC</rb> <rb>DEF</rb></ruby>
+ </div>
+ <div>
+ XYZ <ruby><rb>ABC</rb><rb>DEF</rb></ruby> XYZ
+ </div>
+
+ <div>
+ <ruby><rb>あい</rb> <rb>うえ</rb></ruby>
+ </div>
+ <div>
+ お <ruby><rb>あい</rb><rb>うえ</rb></ruby> お
+ </div>
+ <br>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/justification-1-ref.html b/layout/reftests/css-ruby/justification-1-ref.html
new file mode 100644
index 000000000..f695fd118
--- /dev/null
+++ b/layout/reftests/css-ruby/justification-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1116631 - Justification with ruby span</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ body { line-height: 2; }
+ </style>
+</head>
+<body>
+ <div style="width: 200px; height: 100px; text-align-last: justify; overflow: auto;"><ruby>
+ <rb>a</rb><rb>b</rb>
+ </ruby></div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/justification-1.html b/layout/reftests/css-ruby/justification-1.html
new file mode 100644
index 000000000..78dc3f439
--- /dev/null
+++ b/layout/reftests/css-ruby/justification-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1116631 - Justification with ruby span</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ body { line-height: 2; }
+ </style>
+</head>
+<body>
+ <div style="width: 200px; height: 100px; text-align-last: justify; overflow: auto;"><ruby>
+ <rb>a</rb><rb>b</rb>
+ <rtc><div style="width: 100px;"></div></rtc>
+ </ruby></div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/justification-2-ref.html b/layout/reftests/css-ruby/justification-2-ref.html
new file mode 100644
index 000000000..02a573de1
--- /dev/null
+++ b/layout/reftests/css-ruby/justification-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1116631 - Justification with ruby span</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ div {
+ ruby-position: under;
+ width: 300px; height: 100px;
+ text-align-last: justify;
+ overflow: auto;
+ text-decoration: underline;
+ }
+ </style>
+</head>
+<body>
+ <div><rb>仮</rb><rb>名</rb><rt>が</rt><rt>な</rt></div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/justification-2.html b/layout/reftests/css-ruby/justification-2.html
new file mode 100644
index 000000000..5c184f9a9
--- /dev/null
+++ b/layout/reftests/css-ruby/justification-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1116631 - Justification with ruby span</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ div {
+ ruby-position: under;
+ width: 300px; height: 100px;
+ text-align-last: justify;
+ overflow: auto;
+ text-decoration: underline;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <rb>仮</rb><rb>名</rb>
+ <rt>が</rt><rt>な</rt>
+ <!-- -->
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/lang-specific-style-1-ref.html b/layout/reftests/css-ruby/lang-specific-style-1-ref.html
new file mode 100644
index 000000000..379c82bd3
--- /dev/null
+++ b/layout/reftests/css-ruby/lang-specific-style-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1133624 - Test for lang-specific default stylesheet for ruby</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body style="font: 200%/normal Ahem !important">
+ <p><ruby><rb>base x x<rt style="ruby-align: space-around; font-size: 50%">text x x</ruby></p>
+ <p><ruby><rb>base x x<rt style="ruby-align: space-around; font-size: 50%">text x x</ruby></p>
+ <p><ruby><rb>base x x<rt style="ruby-align: center; font-size: 50%">text x x</ruby></p>
+ <p><ruby><rb>base x x<rt style="ruby-align: center; font-size: 30%">text x x</ruby></p>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/lang-specific-style-1.html b/layout/reftests/css-ruby/lang-specific-style-1.html
new file mode 100644
index 000000000..1df3e71e5
--- /dev/null
+++ b/layout/reftests/css-ruby/lang-specific-style-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1133624 - Test for lang-specific default stylesheet for ruby</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body style="font: 200%/normal Ahem !important">
+ <p lang="en"><ruby><rb>base x x<rt>text x x</ruby></p>
+ <p lang="ja"><ruby><rb>base x x<rt>text x x</ruby></p>
+ <p lang="zh-CN"><ruby><rb>base x x<rt>text x x</ruby></p>
+ <p lang="zh-TW"><ruby><rb>base x x<rt>text x x</ruby></p>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-break-suppression-1-ref.html b/layout/reftests/css-ruby/line-break-suppression-1-ref.html
new file mode 100644
index 000000000..2823a6d7d
--- /dev/null
+++ b/layout/reftests/css-ruby/line-break-suppression-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Test for ruby line break suppression</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <ruby>ab</ruby><br>
+ <rbc>ab</rbc><br>
+ <rtc>ab</rtc><br>
+ <rb>ab</rb><br>
+ <rt>ab</rt>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-break-suppression-1.html b/layout/reftests/css-ruby/line-break-suppression-1.html
new file mode 100644
index 000000000..eb05af68a
--- /dev/null
+++ b/layout/reftests/css-ruby/line-break-suppression-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Test for ruby line break suppression</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <ruby>a<br>b</ruby><br>
+ <rbc>a<br>b</rbc><br>
+ <rtc>a<br>b</rtc><br>
+ <rb>a<br>b</rb><br>
+ <rt>a<br>b</rt>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-break-suppression-2-ref.html b/layout/reftests/css-ruby/line-break-suppression-2-ref.html
new file mode 100644
index 000000000..a39ca0baa
--- /dev/null
+++ b/layout/reftests/css-ruby/line-break-suppression-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Test for ruby line break suppression</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <div style="width: 1em; border: 1px solid">
+ <ruby>aaaaaaaaaabbbbbbbbbb</ruby><br>
+ <rbc>aaaaaaaaaabbbbbbbbbb</rbc><br>
+ <rtc>aaaaaaaaaabbbbbbbbbb</rtc><br>
+ <rb>aaaaaaaaaabbbbbbbbbb</rb><br>
+ <rt>aaaaaaaaaabbbbbbbbbb</rt><br>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-break-suppression-2.html b/layout/reftests/css-ruby/line-break-suppression-2.html
new file mode 100644
index 000000000..e05df48d9
--- /dev/null
+++ b/layout/reftests/css-ruby/line-break-suppression-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Test for ruby line break suppression</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <div style="width: 1em; border: 1px solid">
+ <ruby>aaaaaaaaaa<div></div>bbbbbbbbbb</ruby><br>
+ <rbc>aaaaaaaaaa<div></div>bbbbbbbbbb</rbc><br>
+ <rtc>aaaaaaaaaa<div></div>bbbbbbbbbb</rtc><br>
+ <rb>aaaaaaaaaa<div></div>bbbbbbbbbb</rb><br>
+ <rt>aaaaaaaaaa<div></div>bbbbbbbbbb</rt><br>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-break-suppression-3-ref.html b/layout/reftests/css-ruby/line-break-suppression-3-ref.html
new file mode 100644
index 000000000..8b0da6694
--- /dev/null
+++ b/layout/reftests/css-ruby/line-break-suppression-3-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Test for ruby line break suppression</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <ruby><span>a
+b</span></ruby><br>
+ <rbc><span>a
+b</span></rbc><br>
+ <rtc><span>a
+b</span></rtc><br>
+ <rb><span>a
+b</span></rb><br>
+ <rt><span>a
+b</span></rt><br>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-break-suppression-3.html b/layout/reftests/css-ruby/line-break-suppression-3.html
new file mode 100644
index 000000000..c75bcee06
--- /dev/null
+++ b/layout/reftests/css-ruby/line-break-suppression-3.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Test for ruby line break suppression</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ span { white-space: pre; }
+ </style>
+</head>
+<body>
+ <ruby><span>a
+b</span></ruby><br>
+ <rbc><span>a
+b</span></rbc><br>
+ <rtc><span>a
+b</span></rtc><br>
+ <rb><span>a
+b</span></rb><br>
+ <rt><span>a
+b</span></rt><br>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-break-suppression-4-ref.html b/layout/reftests/css-ruby/line-break-suppression-4-ref.html
new file mode 100644
index 000000000..5e680a298
--- /dev/null
+++ b/layout/reftests/css-ruby/line-break-suppression-4-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1149009 - Line break suppression on whitespaces wrapped but not contained in ruby boxes</title>
+</head>
+<body>
+ <span style="white-space: pre"><rb>a</rb><rb>
+</rb><rb>b</rb></span>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-break-suppression-4.html b/layout/reftests/css-ruby/line-break-suppression-4.html
new file mode 100644
index 000000000..90d7e73de
--- /dev/null
+++ b/layout/reftests/css-ruby/line-break-suppression-4.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1149009 - Line break suppression on whitespaces wrapped but not contained in ruby boxes</title>
+</head>
+<body>
+ <span style="white-space: pre"><rb>a</rb>
+<rb>b</rb></span>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-break-suppression-5-ref.html b/layout/reftests/css-ruby/line-break-suppression-5-ref.html
new file mode 100644
index 000000000..d646dba0c
--- /dev/null
+++ b/layout/reftests/css-ruby/line-break-suppression-5-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1186720 - Line break suppression with soft hyphen</title>
+</head>
+<body style="width: 1px">
+ x<ruby>a</ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-break-suppression-5.html b/layout/reftests/css-ruby/line-break-suppression-5.html
new file mode 100644
index 000000000..a44856c8d
--- /dev/null
+++ b/layout/reftests/css-ruby/line-break-suppression-5.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1186720 - Line break suppression with soft hyphen</title>
+</head>
+<body style="width: 1px">
+ x<ruby>a&shy;</ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-breaking-1-ref.html b/layout/reftests/css-ruby/line-breaking-1-ref.html
new file mode 100644
index 000000000..5d8e10e8e
--- /dev/null
+++ b/layout/reftests/css-ruby/line-breaking-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1089431 - Meet the specification for line breaking between ruby bases</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ body { line-height: 3; }
+ span { white-space: nowrap; }
+ </style>
+</head>
+<body>
+ <div style="width: .5em; border: 1px solid silver;">
+ <span>「</span><span>な</span><span>に</span><span>、</span><span>誰</span><span>?</span><span>」</span><span>「</span><span>私</span><span>です</span><span>」</span>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-breaking-1.html b/layout/reftests/css-ruby/line-breaking-1.html
new file mode 100644
index 000000000..e2e794918
--- /dev/null
+++ b/layout/reftests/css-ruby/line-breaking-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1089431 - Meet the specification for line breaking between ruby bases</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ body { line-height: 3; }
+ </style>
+</head>
+<body>
+ <div style="width: .5em; border: 1px solid silver;">
+ <ruby>
+ <rb>「<rb>な<rb>に<rb>、<rb>誰<rb>?<rb>」<rb>「<rb>私<rb>です<rb>」</rb>
+ <!-- Check if ruby text containers are skipped from the text run -->
+ <rtc><rt>
+ </ruby>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-breaking-2-ref.html b/layout/reftests/css-ruby/line-breaking-2-ref.html
new file mode 100644
index 000000000..53ec9d3e4
--- /dev/null
+++ b/layout/reftests/css-ruby/line-breaking-2-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1140264</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <div style="width: 5em; border: 1px solid silver;">
+ の「<span style="font-family: Ahem; padding: 0 10rem;">X</span>」
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-breaking-2.html b/layout/reftests/css-ruby/line-breaking-2.html
new file mode 100644
index 000000000..0a330741d
--- /dev/null
+++ b/layout/reftests/css-ruby/line-breaking-2.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1140264</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <div style="width: 5em; border: 1px solid silver;">
+ の「<ruby style="font-family: Ahem;">X<rt style="font-size: 0;"><div style="width: 21rem"></div></ruby>」
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-height-1-ref.html b/layout/reftests/css-ruby/line-height-1-ref.html
new file mode 100644
index 000000000..821765f5c
--- /dev/null
+++ b/layout/reftests/css-ruby/line-height-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1069519 - Ruby line height calculation</title>
+ <link rel="stylesheet" href="common.css">
+ <script type="text/javascript" src="utils.js"></script>
+</head>
+<body style="line-height: 1">
+ <div id="base">
+ <span id="inline">base</span>
+ <span id="text" style="font-size: 50%; color: transparent">text</span>
+ </div>
+ <script>
+ // Simulate the behavior of ruby layout.
+ var base = document.getElementById('base');
+ makeBSizeMatchInlineBox(base, document.getElementById('inline'));
+ base.style.paddingTop = getBSize(document.getElementById('text'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-height-1.html b/layout/reftests/css-ruby/line-height-1.html
new file mode 100644
index 000000000..fc7463e38
--- /dev/null
+++ b/layout/reftests/css-ruby/line-height-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1069519 - Ruby line height calculation</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body style="line-height: 1">
+ <ruby>
+ <rb>base</rb>
+ <rtc><rt style="color: transparent">text</rt></rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-height-2-ref.html b/layout/reftests/css-ruby/line-height-2-ref.html
new file mode 100644
index 000000000..3d506e4e9
--- /dev/null
+++ b/layout/reftests/css-ruby/line-height-2-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1069519 - Ruby line height calculation</title>
+ <link rel="stylesheet" href="common.css">
+ <script type="text/javascript" src="utils.js"></script>
+</head>
+<body style="line-height: 1">
+ <div id="base">
+ <span id="inline">base</span>
+ <span id="text" style="font-size: 50%; color: transparent">text</span>
+ </div>
+ next line
+ <script>
+ // Simulate the behavior of ruby layout.
+ var base = document.getElementById('base');
+ makeBSizeMatchInlineBox(base, document.getElementById('inline'));
+ base.style.paddingBottom = getBSize(document.getElementById('text'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-height-2.html b/layout/reftests/css-ruby/line-height-2.html
new file mode 100644
index 000000000..d84f31da4
--- /dev/null
+++ b/layout/reftests/css-ruby/line-height-2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1069519 - Ruby line height calculation</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body style="line-height: 1">
+ <ruby>
+ <rb>base</rb>
+ <rtc style="ruby-position: under;"><rt style="color: transparent">text</rt></rtc>
+ </ruby><br>
+ next line
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-height-3-ref.html b/layout/reftests/css-ruby/line-height-3-ref.html
new file mode 100644
index 000000000..8a186c5f2
--- /dev/null
+++ b/layout/reftests/css-ruby/line-height-3-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1069519 - Ruby line height calculation</title>
+ <link rel="stylesheet" href="common.css">
+ <script type="text/javascript" src="utils.js"></script>
+</head>
+<body style="line-height: 1">
+ <div id="base">
+ <span id="inline">base</span>
+ <span id="text1" style="font-size: 80%; color: transparent">text</span>
+ <span id="text2" style="font-size: 50%; color: transparent">text</span>
+ </div>
+ next line
+ <script>
+ // Simulate the behavior of ruby layout.
+ var base = document.getElementById('base');
+ makeBSizeMatchInlineBox(base, document.getElementById('inline'));
+ base.style.paddingTop = getBSize(document.getElementById('text1'));
+ base.style.paddingBottom = getBSize(document.getElementById('text2'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-height-3.html b/layout/reftests/css-ruby/line-height-3.html
new file mode 100644
index 000000000..ea2bf632a
--- /dev/null
+++ b/layout/reftests/css-ruby/line-height-3.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1069519 - Ruby line height calculation</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body style="line-height: 1">
+ <ruby>
+ <rb>base</rb>
+ <rtc style="ruby-position: over; font-size: 80%;"><rt style="color: transparent">text</rt></rtc>
+ <rtc style="ruby-position: under; font-size: 50%;"><rt style="color: transparent">text</rt></rtc>
+ </ruby><br>
+ next line
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/line-height-4-ref.html b/layout/reftests/css-ruby/line-height-4-ref.html
new file mode 100644
index 000000000..4ef96858e
--- /dev/null
+++ b/layout/reftests/css-ruby/line-height-4-ref.html
@@ -0,0 +1,15 @@
+<title>Bug 1134206 - Ruby line spacing adjustment on quirks mode</title>
+<script type="text/javascript" src="utils.js"></script>
+<div id="base">
+ <span id="inline">base</span>
+ <span id="text1" style="font-size: 80%; color: transparent">text</span>
+ <span id="text2" style="font-size: 50%; color: transparent">text</span>
+</div>
+next line
+<script>
+ // Simulate the behavior of ruby layout.
+ var base = document.getElementById('base');
+ makeBSizeMatchInlineBox(base, document.getElementById('inline'));
+ base.style.paddingTop = getBSize(document.getElementById('text1'));
+ base.style.paddingBottom = getBSize(document.getElementById('text2'));
+</script>
diff --git a/layout/reftests/css-ruby/line-height-4.html b/layout/reftests/css-ruby/line-height-4.html
new file mode 100644
index 000000000..978aa5c70
--- /dev/null
+++ b/layout/reftests/css-ruby/line-height-4.html
@@ -0,0 +1,7 @@
+<title>Bug 1134206 - Ruby line spacing adjustment on quirks mode</title>
+<ruby>
+ <rb>base</rb>
+ <rtc style="ruby-position: over; font-size: 80%;"><rt style="color: transparent">text</rt></rtc>
+ <rtc style="ruby-position: under; font-size: 50%;"><rt style="color: transparent">text</rt></rtc>
+</ruby><br>
+next line
diff --git a/layout/reftests/css-ruby/min-font-size-1-ref.html b/layout/reftests/css-ruby/min-font-size-1-ref.html
new file mode 100644
index 000000000..93b4bba2c
--- /dev/null
+++ b/layout/reftests/css-ruby/min-font-size-1-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1165538 - Minimum font size on ruby text</title>
+</head>
+<body style="font-size: 16px">
+ <ruby>
+ <rb>超電磁砲</rb>
+ <rt>レールガン</rt>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/min-font-size-1.html b/layout/reftests/css-ruby/min-font-size-1.html
new file mode 100644
index 000000000..150e03221
--- /dev/null
+++ b/layout/reftests/css-ruby/min-font-size-1.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1165538 - Minimum font size on ruby text</title>
+</head>
+<body style="font-size: 1px">
+ <ruby>
+ <rb>超電磁砲</rb>
+ <rt>レールガン</rt>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/nested-ruby-1.html b/layout/reftests/css-ruby/nested-ruby-1.html
new file mode 100644
index 000000000..b3e76768e
--- /dev/null
+++ b/layout/reftests/css-ruby/nested-ruby-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1120313 - Nested ruby inside ruby annotation</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <ruby>
+ <rb>base1</rb>
+ <rt>
+ <ruby>
+ <rb>base2</rb>
+ <rt>text</rt>
+ </ruby>
+ </rt>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/no-transform-ref.html b/layout/reftests/css-ruby/no-transform-ref.html
new file mode 100644
index 000000000..df9d6fdc0
--- /dev/null
+++ b/layout/reftests/css-ruby/no-transform-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1121738 - Ruby should not support transform</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <ruby>
+ <rbc><rb>a</rb><rb>b</rb></rbc>
+ <rtc><rt>A</rt><rt>B</rt></rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/no-transform.html b/layout/reftests/css-ruby/no-transform.html
new file mode 100644
index 000000000..ac78c16d4
--- /dev/null
+++ b/layout/reftests/css-ruby/no-transform.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1121738 - Ruby should not support transform</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ ruby, rbc, rb, rtc, rt {
+ transform: translateX(50px);
+ }
+ </style>
+</head>
+<body>
+ <ruby>
+ <rbc><rb>a</rb><rb>b</rb></rbc>
+ <rtc><rt>A</rt><rt>B</rt></rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/reftest-stylo.list b/layout/reftests/css-ruby/reftest-stylo.list
new file mode 100644
index 000000000..1ed58bea4
--- /dev/null
+++ b/layout/reftests/css-ruby/reftest-stylo.list
@@ -0,0 +1,59 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== bidi-1.html bidi-1.html
+== bidi-2.html bidi-2.html
+== box-generation-1.html box-generation-1.html
+== box-generation-2.html box-generation-2.html
+== box-generation-3.html box-generation-3.html
+== box-generation-4.html box-generation-4.html
+== box-generation-5.html box-generation-5.html
+== box-properties-1.html box-properties-1.html
+== box-properties-2.html box-properties-2.html
+== box-properties-3.html box-properties-3.html
+== box-properties-4.html box-properties-4.html
+== dynamic-insertion-1.html dynamic-insertion-1.html
+== dynamic-insertion-2.html dynamic-insertion-2.html
+== dynamic-insertion-3.html dynamic-insertion-3.html
+== dynamic-removal-1.html dynamic-removal-1.html
+== dynamic-removal-2.html dynamic-removal-2.html
+== dynamic-removal-3.html dynamic-removal-3.html
+== float-handling.html float-handling.html
+fails test-pref(dom.meta-viewport.enabled,true) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == inflated-ruby-1.html inflated-ruby-1.html
+== intra-level-whitespace-1.html intra-level-whitespace-1.html
+== intra-level-whitespace-2.html intra-level-whitespace-2.html
+== intra-level-whitespace-3.html intra-level-whitespace-3.html
+== intrinsic-isize-1.html intrinsic-isize-1.html
+== intrinsic-isize-2.html intrinsic-isize-2.html
+== justification-1.html justification-1.html
+== justification-2.html justification-2.html
+fuzzy-if(winWidget,255,792) == lang-specific-style-1.html lang-specific-style-1.html
+# bug 1134947
+== line-breaking-1.html line-breaking-1.html
+== line-breaking-2.html line-breaking-2.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),3,2) == line-break-suppression-1.html line-break-suppression-1.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),3,2) == line-break-suppression-2.html line-break-suppression-2.html
+== line-break-suppression-3.html line-break-suppression-3.html
+== line-break-suppression-4.html line-break-suppression-4.html
+== line-break-suppression-5.html line-break-suppression-5.html
+== line-height-1.html line-height-1.html
+== line-height-2.html line-height-2.html
+== line-height-3.html line-height-3.html
+== line-height-4.html line-height-4.html
+test-pref(font.minimum-size.ja,16) == min-font-size-1.html min-font-size-1.html
+skip load nested-ruby-1.html
+== no-transform.html no-transform.html
+== relative-positioning-1.html relative-positioning-1.html
+== relative-positioning-2.html relative-positioning-2.html
+== ruby-align-1.html ruby-align-1.html
+== ruby-align-1a.html ruby-align-1a.html
+== ruby-align-2.html ruby-align-2.html
+== ruby-align-2a.html ruby-align-2a.html
+== ruby-position-horizontal.html ruby-position-horizontal.html
+== ruby-position-vertical-lr.html ruby-position-vertical-lr.html
+== ruby-position-vertical-rl.html ruby-position-vertical-rl.html
+== ruby-reflow-1-opaqueruby.html ruby-reflow-1-opaqueruby.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),13,1) == ruby-reflow-1-transparentruby.html ruby-reflow-1-transparentruby.html
+== ruby-span-1.html ruby-span-1.html
+== ruby-whitespace-1.html ruby-whitespace-1.html
+== ruby-whitespace-2.html ruby-whitespace-2.html
+== bug1181890.html bug1181890.html
+== bug1181890.html bug1181890.html
diff --git a/layout/reftests/css-ruby/reftest.list b/layout/reftests/css-ruby/reftest.list
new file mode 100644
index 000000000..d940d8513
--- /dev/null
+++ b/layout/reftests/css-ruby/reftest.list
@@ -0,0 +1,57 @@
+== bidi-1.html bidi-1-ref.html
+== bidi-2.html bidi-2-ref.html
+== box-generation-1.html box-generation-1-ref.html
+== box-generation-2.html box-generation-2-ref.html
+== box-generation-3.html box-generation-3-ref.html
+== box-generation-4.html box-generation-4-ref.html
+== box-generation-5.html box-generation-5-ref.html
+== box-properties-1.html box-properties-1-ref.html
+== box-properties-2.html box-properties-2-ref.html
+== box-properties-3.html box-properties-3-ref.html
+== box-properties-4.html box-properties-4-ref.html
+== dynamic-insertion-1.html dynamic-insertion-1-ref.html
+== dynamic-insertion-2.html dynamic-insertion-2-ref.html
+== dynamic-insertion-3.html dynamic-insertion-3-ref.html
+== dynamic-removal-1.html dynamic-removal-1-ref.html
+== dynamic-removal-2.html dynamic-removal-2-ref.html
+== dynamic-removal-3.html dynamic-removal-3-ref.html
+== float-handling.html float-handling-ref.html
+test-pref(dom.meta-viewport.enabled,true) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == inflated-ruby-1.html inflated-ruby-1-ref.html
+== intra-level-whitespace-1.html intra-level-whitespace-1-ref.html
+== intra-level-whitespace-2.html intra-level-whitespace-2-ref.html
+== intra-level-whitespace-3.html intra-level-whitespace-3-ref.html
+== intrinsic-isize-1.html intrinsic-isize-1-ref.html
+== intrinsic-isize-2.html intrinsic-isize-2-ref.html
+== justification-1.html justification-1-ref.html
+== justification-2.html justification-2-ref.html
+fuzzy-if(winWidget,255,792) == lang-specific-style-1.html lang-specific-style-1-ref.html # bug 1134947
+== line-breaking-1.html line-breaking-1-ref.html
+== line-breaking-2.html line-breaking-2-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),3,2) == line-break-suppression-1.html line-break-suppression-1-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),3,2) == line-break-suppression-2.html line-break-suppression-2-ref.html
+== line-break-suppression-3.html line-break-suppression-3-ref.html
+== line-break-suppression-4.html line-break-suppression-4-ref.html
+== line-break-suppression-5.html line-break-suppression-5-ref.html
+== line-height-1.html line-height-1-ref.html
+== line-height-2.html line-height-2-ref.html
+== line-height-3.html line-height-3-ref.html
+== line-height-4.html line-height-4-ref.html
+test-pref(font.minimum-size.ja,16) == min-font-size-1.html min-font-size-1-ref.html
+load nested-ruby-1.html
+== no-transform.html no-transform-ref.html
+== relative-positioning-1.html relative-positioning-1-ref.html
+== relative-positioning-2.html relative-positioning-2-ref.html
+== ruby-align-1.html ruby-align-1-ref.html
+== ruby-align-1a.html ruby-align-1-ref.html
+== ruby-align-2.html ruby-align-2-ref.html
+== ruby-align-2a.html ruby-align-2-ref.html
+== ruby-position-horizontal.html ruby-position-horizontal-ref.html
+== ruby-position-vertical-lr.html ruby-position-vertical-lr-ref.html
+== ruby-position-vertical-rl.html ruby-position-vertical-rl-ref.html
+!= ruby-reflow-1-opaqueruby.html ruby-reflow-1-noruby.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),13,1) == ruby-reflow-1-transparentruby.html ruby-reflow-1-noruby.html
+== ruby-span-1.html ruby-span-1-ref.html
+== ruby-whitespace-1.html ruby-whitespace-1-ref.html
+== ruby-whitespace-2.html ruby-whitespace-2-ref.html
+== bug1181890.html bug1181890-ref.html
+!= bug1181890.html bug1181890-notref.html
diff --git a/layout/reftests/css-ruby/relative-positioning-1-ref.html b/layout/reftests/css-ruby/relative-positioning-1-ref.html
new file mode 100644
index 000000000..1819ba920
--- /dev/null
+++ b/layout/reftests/css-ruby/relative-positioning-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055658 - Relative positioning for ruby</title>
+ <script type="text/javascript" src="utils.js"></script>
+</head>
+<body>
+ <div style="height: 80px; line-height: 80px; width: 50px; text-align: center">
+ <span id="inline" style="position: relative">
+ <div id="annotation" style="position: absolute; width: 50px; top: -100%">
+ a<span style="position: relative; top: -10px;">b</span>c
+ </div>
+ base
+ </span>
+ </div>
+ <script type="text/javascript">
+ makeBSizeMatchInlineBox(document.getElementById('annotation'),
+ document.getElementById('inline'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/relative-positioning-1.html b/layout/reftests/css-ruby/relative-positioning-1.html
new file mode 100644
index 000000000..66dcf62c7
--- /dev/null
+++ b/layout/reftests/css-ruby/relative-positioning-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055658 - Relative positioning for ruby</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ body {
+ line-height: 80px;
+ }
+ rtc, rt {
+ font-size: 100% !important;
+ line-height: 1 !important;
+ }
+ </style>
+</head>
+<body>
+ <ruby style="position: relative;">
+ <rb>base</rb>
+ <rtc><rt>a<span style="position: relative; top: -10px;">b</span>c</rt></rtc>
+ <rtc><div style="width: 50px; height: 0;"></div></rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/relative-positioning-2-ref.html b/layout/reftests/css-ruby/relative-positioning-2-ref.html
new file mode 100644
index 000000000..a5fc13090
--- /dev/null
+++ b/layout/reftests/css-ruby/relative-positioning-2-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055658 - Relative positioning for ruby</title>
+ <script type="text/javascript" src="utils.js"></script>
+</head>
+<body style="font-family: monospace">
+ <div style="height: 80px; line-height: 80px;">
+ before
+ <div style="position: relative; top: 20px; display: inline-block">
+ <span id="inline" style="position: relative">
+ <div id="annotation" style="position: absolute; top: -100%;">
+ text1
+ <span style="position: relative; top: -20px;">text2</span>
+ <span style="position: relative; right: 10px;">text3</span>
+ </div>
+ base1
+ <span style="position: relative; left: 10px;">base2</span>
+ <span style="position: relative; bottom: -20px;">base3</span>
+ </span>
+ </div>
+ after
+ </div>
+ <script type="text/javascript">
+ makeBSizeMatchInlineBox(document.getElementById('annotation'),
+ document.getElementById('inline'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/relative-positioning-2.html b/layout/reftests/css-ruby/relative-positioning-2.html
new file mode 100644
index 000000000..0e91b7b37
--- /dev/null
+++ b/layout/reftests/css-ruby/relative-positioning-2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055658 - Relative positioning for ruby</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ body {
+ font-family: monospace;
+ line-height: 80px;
+ }
+ rtc, rt {
+ font-size: 100% !important;
+ line-height: 1 !important;
+ }
+ </style>
+</head>
+<body>
+ before
+ <ruby style="position: relative; top: 20px;">
+ <rb>base1</rb>
+ <rtc>text1</rtc>
+ <rb style="position: relative; left: 10px;">base2</rb>
+ <rtc style="position: relative; top: -20px;">text2</rtc>
+ <rbc style="position: relative; bottom: -20px;"><rb>base3</rb></rbc>
+ <rtc><rt style="position: relative; right: 10px;">text3</rt></rtc>
+ </ruby>
+ after
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-align-1-ref.html b/layout/reftests/css-ruby/ruby-align-1-ref.html
new file mode 100644
index 000000000..6f6ffcd30
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-align-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055676 - Tests for ruby-align</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ div { width: 160px; box-sizing: border-box; }
+ </style>
+</head>
+<body style="font: 16px/3 Ahem">
+ <div>X X X</div>
+ <div style="text-align: center">X X X</div>
+ <div style="text-align-last: justify">X X X</div>
+ <!-- 8px = (width: 160px - 5 * font-size: 16px) /
+ (1 + justification opportunities: 4) / 2 -->
+ <div style="text-align-last: justify; padding: 0 8px">X X X</div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-align-1.html b/layout/reftests/css-ruby/ruby-align-1.html
new file mode 100644
index 000000000..3acd5fcf3
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-align-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055676 - Tests for ruby-align</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ ruby { line-height: 0; }
+ rt > div { width: 160px; }
+ </style>
+</head>
+<body style="font: 16px/3 Ahem">
+ <ruby style="ruby-align: start">
+ <rb>X X X<rt><div></div></rt>
+ </ruby><br>
+ <ruby style="ruby-align: center">
+ <rb>X X X<rt><div></div></rt>
+ </ruby><br>
+ <ruby style="ruby-align: space-between">
+ <rb>X X X<rt><div></div></rt>
+ </ruby><br>
+ <ruby style="ruby-align: space-around">
+ <rb>X X X<rt><div></div></rt>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-align-1a.html b/layout/reftests/css-ruby/ruby-align-1a.html
new file mode 100644
index 000000000..795f0f4fa
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-align-1a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055676 - Tests for ruby-align</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ ruby { line-height: 0; }
+ rt > div { width: 160px; }
+ </style>
+</head>
+<body style="font: 16px/3 Ahem">
+ <ruby>
+ <rb style="ruby-align: start">X X X<rt><div></div></rt>
+ </ruby><br>
+ <ruby>
+ <rb style="ruby-align: center">X X X<rt><div></div></rt>
+ </ruby><br>
+ <ruby>
+ <rb style="ruby-align: space-between">X X X<rt><div></div></rt>
+ </ruby><br>
+ <ruby>
+ <rb style="ruby-align: space-around">X X X<rt><div></div></rt>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-align-2-ref.html b/layout/reftests/css-ruby/ruby-align-2-ref.html
new file mode 100644
index 000000000..465dd1d10
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-align-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055676 - Tests for ruby-align</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ ruby { line-height: 0; }
+ rt { font-size: 100%; }
+ rt > div { width: 160px; box-sizing: border-box; }
+ </style>
+</head>
+<body style="font: 16px/3 Ahem">
+ <ruby>
+ <rt><div>X X X</div></rt>
+ </ruby><br>
+ <ruby>
+ <rt><div style="text-align: center">X X X</div></rt>
+ </ruby><br>
+ <ruby>
+ <rt><div style="text-align-last: justify">X X X</div></rt>
+ </ruby><br>
+ <!-- 8px = (width: 160px - 5 * font-size: 16px) /
+ (1 + justification opportunities: 4) / 2 -->
+ <ruby>
+ <rt><div style="text-align-last: justify; padding: 0 8px">X X X</div></rt>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-align-2.html b/layout/reftests/css-ruby/ruby-align-2.html
new file mode 100644
index 000000000..8e520e408
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-align-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055676 - Tests for ruby-align</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ ruby { line-height: 0; }
+ rt { font-size: 100%; }
+ rb > div { width: 160px; }
+ </style>
+</head>
+<body style="font: 16px/3 Ahem">
+ <ruby style="ruby-align: start">
+ <rb><div></div><rt>X X X</rt>
+ </ruby><br>
+ <ruby style="ruby-align: center">
+ <rb><div></div><rt>X X X</rt>
+ </ruby><br>
+ <ruby style="ruby-align: space-between">
+ <rb><div></div><rt>X X X</rt>
+ </ruby><br>
+ <ruby style="ruby-align: space-around">
+ <rb><div></div><rt>X X X</rt>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-align-2a.html b/layout/reftests/css-ruby/ruby-align-2a.html
new file mode 100644
index 000000000..8944bd920
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-align-2a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055676 - Tests for ruby-align</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ ruby { line-height: 0; }
+ rt { font-size: 100%; }
+ rb > div { width: 160px; }
+ </style>
+</head>
+<body style="font: 16px/3 Ahem">
+ <ruby>
+ <rb><div></div><rt style="ruby-align: start">X X X</rt>
+ </ruby><br>
+ <ruby>
+ <rb><div></div><rt style="ruby-align: center">X X X</rt>
+ </ruby><br>
+ <ruby>
+ <rb><div></div><rt style="ruby-align: space-between">X X X</rt>
+ </ruby><br>
+ <ruby>
+ <rb><div></div><rt style="ruby-align: space-around">X X X</rt>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-position-horizontal-ref.html b/layout/reftests/css-ruby/ruby-position-horizontal-ref.html
new file mode 100644
index 000000000..9cb0ceaf4
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-position-horizontal-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055665 - Test for ruby-position</title>
+ <link rel="stylesheet" href="common.css">
+ <script type="text/javascript" src="utils.js"></script>
+ <style>
+ body {
+ font-family: monospace;
+ }
+ .annotation, .annotation > div {
+ position: absolute;
+ }
+ </style>
+</head>
+<body>
+ <div style="height: 8em; line-height: 8em;">
+ <div style="display: inline-block;">
+ <div class="annotation">
+ <div style="top: -100%;"><span>over##</span></div>
+ <div style="top: 100%;"><span>under#</span></div>
+ <div style="top: -200%;"><span>over2#</span></div>
+ <div style="top: 200%;"><span>under2</span></div>
+ <!-- to give container the proper block-axis size -->
+ <span>&nbsp;</span>
+ </div>
+ <span>base##</span>
+ </div>
+ </div>
+ <script type="text/javascript">
+ makeBSizeOfParentMatch(document.getElementsByTagName('span'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-position-horizontal.html b/layout/reftests/css-ruby/ruby-position-horizontal.html
new file mode 100644
index 000000000..e6d9e8393
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-position-horizontal.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055665 - Test for ruby-position</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ body {
+ font-family: monospace;
+ /* use a large line-height here to avoid additional leadings */
+ line-height: 8em;
+ }
+ rtc, rt {
+ font-size: 100% !important;
+ line-height: normal !important;
+ }
+ </style>
+</head>
+<body>
+ <ruby>
+ <rb>base##</rb>
+ <rtc style="ruby-position: over"><rt>over##</rt></rtc>
+ <rtc style="ruby-position: under"><rt>under#</rt></rtc>
+ <rtc style="ruby-position: over"><rt>over2#</rt></rtc>
+ <rtc style="ruby-position: under"><rt>under2</rt></rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html b/layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html
new file mode 100644
index 000000000..2c432e424
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055665 - Test for ruby-position</title>
+ <link rel="stylesheet" href="common.css">
+ <script type="text/javascript" src="utils.js"></script>
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ body {
+ font-family: monospace;
+ }
+ .annotation, .annotation > div {
+ position: absolute;
+ }
+ </style>
+</head>
+<body>
+ <div style="width: 8em; line-height: 8em;">
+ <div style="display: inline-block;">
+ <div class="annotation">
+ <div style="right: 100%;"><span>left##</span></div>
+ <div style="right: -100%;"><span>right#</span></div>
+ <div style="right: 200%;"><span>left2#</span></div>
+ <div style="right: -200%;"><span>right2</span></div>
+ <!-- to give container the proper block-axis size -->
+ <span>&nbsp;</span>
+ </div>
+ <span>base##</span>
+ </div>
+ </div>
+ <script type="text/javascript">
+ makeBSizeOfParentMatch(document.getElementsByTagName('span'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-position-vertical-lr.html b/layout/reftests/css-ruby/ruby-position-vertical-lr.html
new file mode 100644
index 000000000..6dee8f7cc
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-position-vertical-lr.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055665 - Test for ruby-position</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ body {
+ font-family: monospace;
+ /* use a large line-height here to avoid additional leadings */
+ line-height: 8em;
+ }
+ rtc, rt {
+ font-size: 100% !important;
+ line-height: normal !important;
+ }
+ </style>
+</head>
+<body>
+ <ruby>
+ <rb>base##</rb>
+ <rtc style="ruby-position: under"><rt>left##</rt></rtc>
+ <rtc style="ruby-position: over"><rt>right#</rt></rtc>
+ <rtc style="ruby-position: under"><rt>left2#</rt></rtc>
+ <rtc style="ruby-position: over"><rt>right2</rt></rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html b/layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html
new file mode 100644
index 000000000..edeeeb5f4
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055665 - Test for ruby-position</title>
+ <link rel="stylesheet" href="common.css">
+ <script type="text/javascript" src="utils.js"></script>
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ body {
+ font-family: monospace;
+ }
+ .annotation, .annotation > div {
+ position: absolute;
+ }
+ </style>
+</head>
+<body>
+ <div style="width: 8em; line-height: 8em;">
+ <div style="display: inline-block;">
+ <div class="annotation">
+ <div style="right: 100%;"><span>left##</span></div>
+ <div style="right: -100%;"><span>right#</span></div>
+ <div style="right: 200%;"><span>left2#</span></div>
+ <div style="right: -200%;"><span>right2</span></div>
+ <!-- to give container the proper block-axis size -->
+ <span>&nbsp;</span>
+ </div>
+ <span>base##</span>
+ </div>
+ </div>
+ <script type="text/javascript">
+ makeBSizeOfParentMatch(document.getElementsByTagName('span'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-position-vertical-rl.html b/layout/reftests/css-ruby/ruby-position-vertical-rl.html
new file mode 100644
index 000000000..1d9378176
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-position-vertical-rl.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1055665 - Test for ruby-position</title>
+ <link rel="stylesheet" href="common.css">
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ body {
+ font-family: monospace;
+ /* use a large line-height here to avoid additional leadings */
+ line-height: 8em;
+ }
+ rtc, rt {
+ font-size: 100% !important;
+ line-height: normal !important;
+ }
+ </style>
+</head>
+<body>
+ <ruby>
+ <rb>base##</rb>
+ <rtc style="ruby-position: under"><rt>left##</rt></rtc>
+ <rtc style="ruby-position: over"><rt>right#</rt></rtc>
+ <rtc style="ruby-position: under"><rt>left2#</rt></rtc>
+ <rtc style="ruby-position: over"><rt>right2</rt></rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-reflow-1-noruby.html b/layout/reftests/css-ruby/ruby-reflow-1-noruby.html
new file mode 100644
index 000000000..4119dc9bd
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-reflow-1-noruby.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html style="overflow:hidden;">
+<head>
+<title>CSS Test: Ruby Base Frames Reflowed</title>
+<link rel="author" title="Susanna Bowen" href="mailto:sgbowen8@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/2014/WD-css-ruby-1-20140805/">
+<meta name="assert" content="Test checks that ruby bases are reflowed.">
+<meta charset="UTF-8">
+<link rel="stylesheet" href="common.css">
+<style>
+body { line-height: 2em; }
+</style>
+</head>
+<body>
+新幹線
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-reflow-1-opaqueruby.html b/layout/reftests/css-ruby/ruby-reflow-1-opaqueruby.html
new file mode 100644
index 000000000..245d7136d
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-reflow-1-opaqueruby.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html style="overflow:hidden;">
+<head>
+<title>CSS Test: Ruby Text Frames Visible</title>
+<link rel="author" title="Susanna Bowen" href="mailto:sgbowen8@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/2014/WD-css-ruby-1-20140805/">
+<meta name="assert" content="Test checks that ruby text is rendered.">
+<meta charset="UTF-8">
+<link rel="stylesheet" href="common.css">
+<style>
+body { line-height: 2em; }
+</style>
+</head>
+<body>
+<ruby>
+ <rbc><rb>新</rb><rb>幹</rb><rb>線</rb></rbc>
+ <rtc><rt>しん</rt><rt>かん</rt><rt>せん</rt></rtc>
+</ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-reflow-1-transparentruby.html b/layout/reftests/css-ruby/ruby-reflow-1-transparentruby.html
new file mode 100644
index 000000000..0d2967a38
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-reflow-1-transparentruby.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html style="overflow:hidden;">
+<head>
+<title>CSS Test: Ruby Base Frames Reflowed</title>
+<link rel="author" title="Susanna Bowen" href="mailto:sgbowen8@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/2014/WD-css-ruby-1-20140805/">
+<meta name="assert" content="Test checks that ruby bases are reflowed.">
+<meta charset="UTF-8">
+<link rel="stylesheet" href="common.css">
+<style>
+body { line-height: 2em; }
+rtc { color: transparent; }
+</style>
+</head>
+<body>
+<ruby>
+ <rbc><rb>新</rb><rb>幹</rb><rb>線</rb></rbc>
+ <rtc><rt>しん</rt><rt>かん</rt><rt>せん</rt></rtc>
+</ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-span-1-ref.html b/layout/reftests/css-ruby/ruby-span-1-ref.html
new file mode 100644
index 000000000..e8b9d91e7
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-span-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1117597</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <ruby><rb>The Ruby Base</rb><rtc><rt>span</rt></rtc></ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-span-1.html b/layout/reftests/css-ruby/ruby-span-1.html
new file mode 100644
index 000000000..4862ecc10
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-span-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Bug 1117597</title>
+ <link rel="stylesheet" href="common.css">
+</head>
+<body>
+ <ruby><rb>The Ruby Base</rb><rtc>span</rtc></ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-whitespace-1-ref.html b/layout/reftests/css-ruby/ruby-whitespace-1-ref.html
new file mode 100644
index 000000000..7018627d1
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-whitespace-1-ref.html
@@ -0,0 +1,36 @@
+<html>
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="common.css">
+<style>
+body { line-height: 5em; }
+</style>
+</head>
+<body>
+
+<p>
+ <ruby><rbc><rb><span> </span></rb><rb><span> </span></rb><rb>Base three</rb></rbc
+ ><rtc><rt><span> </span></rt><rt><span> </span></rt><rt>Text three</rt></rtc
+ ><rtc><rt></rt></rtc
+ ><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>Segment two</rb></rbc
+ ><rtc><rt></rt></rtc></ruby>
+</p>
+
+<p>
+ <ruby><rbc><rb>Base one</rb><rb><span> </span></rb><rb>Base three</rb></rbc
+ ><rtc pseudo><rt>Text one</rt><rt pseudo><span> </span></rt><rt>Text three</rt></rtc></ruby>
+</p>
+
+<p>
+ <ruby><rbc><rb>Segment one</rb></rbc
+ ><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb><span> </span></rb><rb><span> </span></rb><rb>Base three</rb></rbc
+ ><rtc><rt><span> </span></rt><rt><span> </span></rt><rt>Text three</rt></rtc
+ ><rbc><rb><span> </span></rb></rbc
+ ><rbc><rb>Base one</rb><rb><span> </span></rb><rb>Base three</rb></rbc
+ ><rtc><rt>Text one</rt><rt></rt><rt>Text two/three</rt></rtc></ruby>
+</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-whitespace-1.html b/layout/reftests/css-ruby/ruby-whitespace-1.html
new file mode 100644
index 000000000..acb5da3e6
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-whitespace-1.html
@@ -0,0 +1,34 @@
+<html>
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="common.css">
+<style>
+body { line-height: 5em; }
+</style>
+</head>
+<body>
+
+<p>
+ <ruby>
+ <rbc> <rb> </rb> <rb>Base three</rb> </rbc>
+ <rtc> <rt> </rt> <rt>Text three</rt> </rtc> <rtc><rt></rt></rtc>
+ <rbc><rb>Segment two</rb></rbc><rtc><rt></rt></rtc>
+ </ruby>
+</p>
+
+<p>
+ <ruby>
+ <rb>Base one</rb> <rb>Base three</rb>
+ <rt>Text one</rt> <rt>Text three</rt>
+ </ruby>
+</p>
+
+<p>
+ <rb>Segment one</rb> <rbc> <rb> </rb> <rb>Base three</rb> </rbc
+ > <rtc><rt> </rt> <rt>Text three</rt></rtc>
+
+ <rb>Base one</rb> <rb>Base three</rb> <rt>Text one</rt><rt>Text two/three</rt>
+</p>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-whitespace-2-ref.html b/layout/reftests/css-ruby/ruby-whitespace-2-ref.html
new file mode 100644
index 000000000..f52b0685a
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-whitespace-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="common.css">
+</head>
+
+<body>
+
+<!-- Unclear how this should render. See http://lists.w3.org/Archives/Public/www-style/2014Jul/0620.html //-->
+abcd<ruby><rbc><rb><span> BASE</span></rb></rbc><rtc pseudo><rt>TEXT</rt></rtc></ruby>
+
+abcd<ruby><rbc><rb><span>BASE</span></rb></rbc><rtc pseudo><rt>TEXT</rt></rtc></ruby>
+
+abcd<ruby><rbc><rb><span> BASE</span></rb></rbc><rtc pseudo><rt>TEXT</rt></rtc></ruby>
+
+<ruby><rbc></rbc></ruby>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-whitespace-2.html b/layout/reftests/css-ruby/ruby-whitespace-2.html
new file mode 100644
index 000000000..7f65a7683
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-whitespace-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="common.css">
+</head>
+
+<body>
+
+abcd<rbc> BASE</rbc><rt>TEXT</rt>
+
+abcd<rbc> <span>BASE</span></rbc><rt>TEXT</rt>
+
+abcd<rbc><span> BASE</span></rbc><rt>TEXT</rt>
+
+<rbc> </rbc>
+
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/utils.js b/layout/reftests/css-ruby/utils.js
new file mode 100644
index 000000000..1fee84cc2
--- /dev/null
+++ b/layout/reftests/css-ruby/utils.js
@@ -0,0 +1,33 @@
+function getBlockAxisName(elem) {
+ var wm = getComputedStyle(elem).writingMode;
+ return (!wm || wm == 'horizontal-tb') ? 'height' : 'width';
+}
+
+function getBSize(elem) {
+ return elem.getBoundingClientRect()[getBlockAxisName(elem)] + 'px';
+}
+
+function setBSize(elem, bsize) {
+ elem.style[getBlockAxisName(elem)] = bsize;
+ elem.style.lineHeight = bsize;
+}
+
+// Ruby annotations are placed based on block-axis size of inline boxes
+// instead of line box. Block-axis size of an inline box is the max
+// height of the font, while that of line box is line height. Hence we
+// sometimes need to explicitly set the block-axis size of an inline
+// box to a block to simulate the exact behavior, which is what the
+// following two functions do.
+
+function makeBSizeMatchInlineBox(block, inline) {
+ setBSize(block, getBSize(inline));
+}
+
+function makeBSizeOfParentMatch(elems) {
+ // The size change is divided into two phases to avoid
+ // triggering reflow for every element.
+ for (var elem of elems)
+ elem.dataset.bsize = getBSize(elem);
+ for (var elem of elems)
+ setBSize(elem.parentNode, elem.dataset.bsize);
+}