diff --git a/layout/reftests/css-ruby/box-properties-2-ref.html b/layout/reftests/css-ruby/box-properties-2-ref.html
index 2c8ca8d69043..8bf2d754c2d4 100644
--- a/layout/reftests/css-ruby/box-properties-2-ref.html
+++ b/layout/reftests/css-ruby/box-properties-2-ref.html
@@ -6,14 +6,15 @@
   <link rel="stylesheet" href="common.css">
   <script type="text/javascript" src="utils.js"></script>
 </head>
-<body style="line-height: 5">
+<body style="line-height: 10">
   <ruby>
     <rb>base1</rb>
     <rb><div></div></rb>
     <rb>base3</rb>
     <rtc>
       <rt></rt>
-      <rt><div id="rtblock" style="width: 256px; text-align:center; background: silver; padding: 2px; border: 4px solid gray; outline: 8px solid black; margin: -6px 16px;"><span id="inline">text1</span></div></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>
diff --git a/layout/reftests/css-ruby/box-properties-2.html b/layout/reftests/css-ruby/box-properties-2.html
index ae9f15283845..6b936303996f 100644
--- a/layout/reftests/css-ruby/box-properties-2.html
+++ b/layout/reftests/css-ruby/box-properties-2.html
@@ -6,7 +6,7 @@
   <link rel="stylesheet" href="common.css">
   <script type="text/javascript" src="utils.js"></script>
 </head>
-<body style="line-height: 5">
+<body style="line-height: 10">
   <ruby>
     <rb>base1</rb>
     <rb><div style="width: 300px;"></div></rb>
diff --git a/layout/reftests/css-ruby/box-properties-3-ref.html b/layout/reftests/css-ruby/box-properties-3-ref.html
index a9e87f0574a5..465e54758463 100644
--- a/layout/reftests/css-ruby/box-properties-3-ref.html
+++ b/layout/reftests/css-ruby/box-properties-3-ref.html
@@ -11,7 +11,7 @@
       <rb style="background: aqua; outline: 8px solid teal; margin: 16px;">base1</rb>
     </rbc><rbc></rbc>
     <rtc>
-      <rt style="outline: 8px solid purple;"><div style="background: fuchsia;">text1</div></rt>
+      <rt style="outline: 8px solid purple;"><span style="background: fuchsia">text1</span></rt>
     </rtc>
   </ruby>
 </body>
diff --git a/layout/reftests/css-ruby/intra-level-whitespace-1-ref.html b/layout/reftests/css-ruby/intra-level-whitespace-1-ref.html
index 502452166fbc..7cc1050325cf 100644
--- a/layout/reftests/css-ruby/intra-level-whitespace-1-ref.html
+++ b/layout/reftests/css-ruby/intra-level-whitespace-1-ref.html
@@ -12,7 +12,7 @@
   </ruby></p>
   <p><ruby>
     <rb>a</rb><rb pseudo><span> </span></rb><rb>b</rb>
-    <rt>x</rt><rt pseudo></rt><rt>y</rt>
+    <rt>x</rt><rt></rt><rt>y</rt>
   </ruby></p>
   <p><ruby>
     <rb>a</rb><rb pseudo></rb><rb>b</rb>
diff --git a/layout/reftests/css-ruby/line-height-1-ref.html b/layout/reftests/css-ruby/line-height-1-ref.html
index f12eb3ea567c..414ad51c7274 100644
--- a/layout/reftests/css-ruby/line-height-1-ref.html
+++ b/layout/reftests/css-ruby/line-height-1-ref.html
@@ -7,11 +7,15 @@
   <script type="text/javascript" src="utils.js"></script>
 </head>
 <body style="line-height: 1">
-  <div id="base" style="padding-top: .5em"><span id="inline">base</span></div>
+  <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.
-    makeHeightMatchInlineBox(document.getElementById('base'),
-                             document.getElementById('inline'));
+    var base = document.getElementById('base');
+    makeHeightMatchInlineBox(base, document.getElementById('inline'));
+    base.style.paddingTop = getHeight(document.getElementById('text'));
   </script>
 </body>
 </html>
diff --git a/layout/reftests/css-ruby/line-height-2-ref.html b/layout/reftests/css-ruby/line-height-2-ref.html
index 9ed54600be19..58d6435c7bca 100644
--- a/layout/reftests/css-ruby/line-height-2-ref.html
+++ b/layout/reftests/css-ruby/line-height-2-ref.html
@@ -7,12 +7,16 @@
   <script type="text/javascript" src="utils.js"></script>
 </head>
 <body style="line-height: 1">
-  <div id="base" style="padding-bottom: .5em"><span id="inline">base</span></div>
+  <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.
-    makeHeightMatchInlineBox(document.getElementById('base'),
-                             document.getElementById('inline'));
+    var base = document.getElementById('base');
+    makeHeightMatchInlineBox(base, document.getElementById('inline'));
+    base.style.paddingBottom = getHeight(document.getElementById('text'));
   </script>
 </body>
 </html>
diff --git a/layout/reftests/css-ruby/line-height-3-ref.html b/layout/reftests/css-ruby/line-height-3-ref.html
index f919b1ace479..1773dc062b10 100644
--- a/layout/reftests/css-ruby/line-height-3-ref.html
+++ b/layout/reftests/css-ruby/line-height-3-ref.html
@@ -7,12 +7,18 @@
   <script type="text/javascript" src="utils.js"></script>
 </head>
 <body style="line-height: 1">
-  <div id="base" style="padding: .8em 0 .5em"><span id="inline">base</span></div>
+  <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.
-    makeHeightMatchInlineBox(document.getElementById('base'),
-                             document.getElementById('inline'));
+    var base = document.getElementById('base');
+    makeHeightMatchInlineBox(base, document.getElementById('inline'));
+    base.style.paddingTop = getHeight(document.getElementById('text1'));
+    base.style.paddingBottom = getHeight(document.getElementById('text2'));
   </script>
 </body>
 </html>
diff --git a/layout/reftests/css-ruby/reftest.list b/layout/reftests/css-ruby/reftest.list
index 74548778a263..4ff517eeed84 100644
--- a/layout/reftests/css-ruby/reftest.list
+++ b/layout/reftests/css-ruby/reftest.list
@@ -2,7 +2,7 @@ default-preferences pref(layout.css.ruby.enabled,true)
 
 == autohiding-1.html autohiding-1-ref.html
 == autohiding-2.html autohiding-2-ref.html
-fails == autohiding-3.html autohiding-3-ref.html # bug 1107701
+== autohiding-3.html autohiding-3-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
@@ -35,7 +35,7 @@ fails == autohiding-3.html autohiding-3-ref.html # bug 1107701
 == line-height-3.html line-height-3-ref.html
 load nested-ruby-1.html
 == no-transform.html no-transform-ref.html
-fails-if(cocoaWidget) == relative-positioning-1.html relative-positioning-1-ref.html # bug 1120280
+== 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
 pref(layout.css.vertical-text.enabled,true) fails == ruby-position-vertical-lr.html ruby-position-vertical-lr-ref.html # bug 1112474
diff --git a/layout/reftests/css-ruby/relative-positioning-1-ref.html b/layout/reftests/css-ruby/relative-positioning-1-ref.html
index f8df05509207..7695a493f24d 100644
--- a/layout/reftests/css-ruby/relative-positioning-1-ref.html
+++ b/layout/reftests/css-ruby/relative-positioning-1-ref.html
@@ -3,27 +3,20 @@
 <head>
   <meta charset="UTF-8">
   <title>Bug 1055658 - Relative positioning for ruby</title>
-  <style>
-    .wrapper {
-      width: 50px;
-      text-align: center;
-    }
-    .annotation, .annotation > div {
-      position: absolute;
-      line-height: 1;
-    }
-  </style>
+  <script type="text/javascript" src="utils.js"></script>
 </head>
 <body>
-  <div style="height: 80px; line-height: 80px;">
-    <div class="wrapper" style="display: inline-block; line-height: normal; position: relative;">
-      <div class="annotation" style="top: 0;">
-        <div class="wrapper" style="top: -100%;">a<span style="position: relative; top: -10px;">b</span>c</div>
-        &nbsp; <!-- to give container a nonzero size for
-                    percent values to resolve against -->
+  <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
-    </div>
+    </span>
   </div>
+  <script type="text/javascript">
+    makeHeightMatchInlineBox(document.getElementById('annotation'),
+                             document.getElementById('inline'));
+  </script>
 </body>
 </html>
diff --git a/layout/reftests/css-ruby/relative-positioning-2-ref.html b/layout/reftests/css-ruby/relative-positioning-2-ref.html
index e77efbbeaa3c..b1dfa959ddcf 100644
--- a/layout/reftests/css-ruby/relative-positioning-2-ref.html
+++ b/layout/reftests/css-ruby/relative-positioning-2-ref.html
@@ -3,34 +3,28 @@
 <head>
   <meta charset="UTF-8">
   <title>Bug 1055658 - Relative positioning for ruby</title>
-  <style>
-    body {
-      font-family: monospace;
-    }
-    .annotation, .annotation > div {
-      position: absolute;
-      line-height: 1;
-    }
-  </style>
+  <script type="text/javascript" src="utils.js"></script>
 </head>
-<body>
+<body style="font-family: monospace">
   <div style="height: 80px; line-height: 80px;">
     before
-    <div style="display: inline-block; line-height: normal; position: relative; top: 20px;">
-      <div class="annotation" style="top: 0; width: 100%;">
-        <div style="top: -100%;">
+    <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>
-        &nbsp; <!-- to give container a nonzero size for
-                    percent values to resolve against -->
-      </div>
-      base1
-      <span style="position: relative; left: 10px;">base2</span>
-      <span style="position: relative; bottom: -20px;">base3</span>
+        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">
+    makeHeightMatchInlineBox(document.getElementById('annotation'),
+                             document.getElementById('inline'));
+  </script>
 </body>
 </html>
diff --git a/layout/reftests/css-ruby/utils.js b/layout/reftests/css-ruby/utils.js
index 49a99d202a34..4b4182f2e843 100644
--- a/layout/reftests/css-ruby/utils.js
+++ b/layout/reftests/css-ruby/utils.js
@@ -1,5 +1,9 @@
+function getHeight(elem) {
+  return elem.getBoundingClientRect().height + 'px';
+}
+
 function makeHeightMatchInlineBox(block, inline) {
-  var height = inline.getBoundingClientRect().height + 'px';
+  var height = getHeight(inline);
   block.style.height = height;
   block.style.lineHeight = height;
 }
