summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-ruby
diff options
context:
space:
mode:
Diffstat (limited to '')
-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/inflated-ruby-1-ref.html6
-rw-r--r--layout/reftests/css-ruby/inflated-ruby-1.html10
-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/reftest.list33
-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-intercharacter-1-ref.htm34
-rw-r--r--layout/reftests/css-ruby/ruby-intercharacter-1.htm24
-rw-r--r--layout/reftests/css-ruby/ruby-intercharacter-2-ref.htm28
-rw-r--r--layout/reftests/css-ruby/ruby-intercharacter-2.htm23
-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/utils.js33
41 files changed, 902 insertions, 0 deletions
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 0000000000..a8e340653d
--- /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 0000000000..1b463eb5b8
--- /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 0000000000..5abfa2e84c
--- /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 0000000000..ca12016937
--- /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 0000000000..465e547584
--- /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 0000000000..6b014c2681
--- /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 0000000000..db6788daa2
--- /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 0000000000..6e953bc3a1
--- /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 0000000000..0e97415a88
--- /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 0000000000..41a46d13e3
--- /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 0000000000..3369a7482d
--- /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 0000000000..45bdd379cb
--- /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/inflated-ruby-1-ref.html b/layout/reftests/css-ruby/inflated-ruby-1-ref.html
new file mode 100644
index 0000000000..7ae6e58258
--- /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 0000000000..f9c6f19474
--- /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/line-height-1-ref.html b/layout/reftests/css-ruby/line-height-1-ref.html
new file mode 100644
index 0000000000..821765f5c3
--- /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 0000000000..fc7463e381
--- /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 0000000000..3d506e4e9b
--- /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 0000000000..d84f31da4e
--- /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 0000000000..8a186c5f25
--- /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 0000000000..ea2bf632af
--- /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 0000000000..4ef96858e1
--- /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 0000000000..978aa5c70b
--- /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 0000000000..93b4bba2cd
--- /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 0000000000..150e032216
--- /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 0000000000..b3e76768e8
--- /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/reftest.list b/layout/reftests/css-ruby/reftest.list
new file mode 100644
index 0000000000..e432c79426
--- /dev/null
+++ b/layout/reftests/css-ruby/reftest.list
@@ -0,0 +1,33 @@
+# Box properties support on ruby boxes are not specified.
+== 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
+
+# These tests browser features.
+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
+test-pref(font.minimum-size.ja,16) == min-font-size-1.html min-font-size-1-ref.html
+
+# These tests rely on height of inline elements which is unspecified.
+== 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
+== relative-positioning-1.html relative-positioning-1-ref.html
+== relative-positioning-2.html relative-positioning-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
+
+# Nested ruby should not crash.
+load nested-ruby-1.html
+
+# Inter-character ruby is not enabled, and its spec is not considered stable enough.
+pref(layout.css.ruby.intercharacter.enabled,true) fuzzy-if(Android,0-198,0-70) == ruby-intercharacter-1.htm ruby-intercharacter-1-ref.htm
+pref(layout.css.ruby.intercharacter.enabled,false) != ruby-intercharacter-1.htm ruby-intercharacter-1-ref.htm
+pref(layout.css.ruby.intercharacter.enabled,true) == ruby-intercharacter-2.htm ruby-intercharacter-2-ref.htm
+pref(layout.css.ruby.intercharacter.enabled,false) != ruby-intercharacter-2.htm ruby-intercharacter-2-ref.htm
+
+# Testing a specific bug for RTL handling.
+== 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 0000000000..1819ba920e
--- /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 0000000000..66dcf62c7c
--- /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 0000000000..a5fc13090e
--- /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 0000000000..0e91b7b379
--- /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-intercharacter-1-ref.htm b/layout/reftests/css-ruby/ruby-intercharacter-1-ref.htm
new file mode 100644
index 0000000000..6327ad90f7
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-intercharacter-1-ref.htm
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+Reftest 1 for Bug 1395777 (reference file)
+-->
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<style>
+body {
+ font-size: 30px;
+ line-height: 1;
+}
+.rbc {
+ height: 30px;
+ display: inline-block;
+ vertical-align: top;
+}
+.rtc {
+ height: 30px;
+ display: inline-block;
+ writing-mode: vertical-rl;
+ text-orientation: upright;
+ vertical-align: top;
+ text-align: center;
+ font-size: 30%;
+}
+</style>
+</head>
+<body>
+ <div>
+ <span class="rbc">BASE</span><span class="rtc">RT</span>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-intercharacter-1.htm b/layout/reftests/css-ruby/ruby-intercharacter-1.htm
new file mode 100644
index 0000000000..bb681a286b
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-intercharacter-1.htm
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+Reftest 1 for Bug 1395777 (test file)
+-->
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<style>
+body {
+ font-size: 30px;
+ line-height: 1;
+}
+rtc {
+ writing-mode: vertical-rl;
+ text-orientation: upright;
+}
+</style>
+</head>
+<body>
+ <ruby>
+ <rbc>BASE</rbc><rtc>RT</rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-intercharacter-2-ref.htm b/layout/reftests/css-ruby/ruby-intercharacter-2-ref.htm
new file mode 100644
index 0000000000..90d47ae1d5
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-intercharacter-2-ref.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!--
+Reftest 2 for Bug 1395777 (reference file)
+-->
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<style>
+html {
+ font-size: xx-large;
+}
+ruby {
+ width: 1.4em;
+}
+rtc {
+ display: inline-block;
+ writing-mode: vertical-rl;
+ text-orientation: upright;
+ vertical-align: text-top;
+}
+</style>
+</head>
+<body>
+ <ruby>
+ <rbc>BASE</rbc><rtc>LONGRT</rtc>
+ </ruby>
+</body>
+</html>
diff --git a/layout/reftests/css-ruby/ruby-intercharacter-2.htm b/layout/reftests/css-ruby/ruby-intercharacter-2.htm
new file mode 100644
index 0000000000..2819784f16
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-intercharacter-2.htm
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+Reftest 2 for Bug 1395777 (test file)
+-->
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<style>
+html {
+ font-size: xx-large;
+}
+rtc {
+ writing-mode: vertical-rl;
+ text-orientation: upright;
+}
+</style>
+</head>
+<body>
+ <ruby>
+ <rbc>BASE</rbc><rtc>LONGRT</rtc>
+ </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 0000000000..9cb0ceaf4f
--- /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 0000000000..e6d9e8393b
--- /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 0000000000..2c432e4240
--- /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 0000000000..6dee8f7ccb
--- /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 0000000000..edeeeb5f4b
--- /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 0000000000..1d93781764
--- /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/utils.js b/layout/reftests/css-ruby/utils.js
new file mode 100644
index 0000000000..1fee84cc2d
--- /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);
+}