Bug 1132008 part 4 - Fix reftests which rely on the old rtc sizing method. r=dbaron

--HG-- extra : source : b856985e95d7bd2cf2f8f403e65511f44409f2a9
2015-02-17 14:25:18 +13:00 · 2015-02-17 14:25:18 +13:00 · 1f651d328a
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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>
--- 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>
--- 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;
 }