Bug 1112474 part 1 - Make utils of CSS Ruby reftests writing-mode aware. r=dholbert

--HG--
extra : rebase_source : 5a4be10876e45a8bb17edcca6e25be4dd5a31c0c
extra : source : 3d79017794b0718d7a382e7197e79544d00e25b4

layout/reftests/css-ruby/box-properties-2-ref.html

@@ -22,8 +22,8 @@
     // 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.
-    makeHeightMatchInlineBox(document.getElementById('rtblock'),
-                             document.getElementById('inline'));
+    makeBSizeMatchInlineBox(document.getElementById('rtblock'),
+                            document.getElementById('inline'));
   </script>
 </body>
 </html>

layout/reftests/css-ruby/box-properties-2.html

@@ -18,8 +18,8 @@
   </ruby>
   <script type="text/javascript">
     // alter the height to make it easier to match the reference page
-    makeHeightMatchInlineBox(document.getElementById('rtblock'),
-                             document.getElementById('inline'));
+    makeBSizeMatchInlineBox(document.getElementById('rtblock'),
+                            document.getElementById('inline'));
   </script>
 </body>
 </html>

layout/reftests/css-ruby/line-height-1-ref.html

@@ -14,8 +14,8 @@
   <script>
     // Simulate the behavior of ruby layout.
     var base = document.getElementById('base');
-    makeHeightMatchInlineBox(base, document.getElementById('inline'));
-    base.style.paddingTop = getHeight(document.getElementById('text'));
+    makeBSizeMatchInlineBox(base, document.getElementById('inline'));
+    base.style.paddingTop = getBSize(document.getElementById('text'));
   </script>
 </body>
 </html>

layout/reftests/css-ruby/line-height-2-ref.html

@@ -15,8 +15,8 @@
   <script>
     // Simulate the behavior of ruby layout.
     var base = document.getElementById('base');
-    makeHeightMatchInlineBox(base, document.getElementById('inline'));
-    base.style.paddingBottom = getHeight(document.getElementById('text'));
+    makeBSizeMatchInlineBox(base, document.getElementById('inline'));
+    base.style.paddingBottom = getBSize(document.getElementById('text'));
   </script>
 </body>
 </html>

layout/reftests/css-ruby/line-height-3-ref.html

@@ -16,9 +16,9 @@
   <script>
     // Simulate the behavior of ruby layout.
     var base = document.getElementById('base');
-    makeHeightMatchInlineBox(base, document.getElementById('inline'));
-    base.style.paddingTop = getHeight(document.getElementById('text1'));
-    base.style.paddingBottom = getHeight(document.getElementById('text2'));
+    makeBSizeMatchInlineBox(base, document.getElementById('inline'));
+    base.style.paddingTop = getBSize(document.getElementById('text1'));
+    base.style.paddingBottom = getBSize(document.getElementById('text2'));
   </script>
 </body>
 </html>

layout/reftests/css-ruby/line-height-4-ref.html

@@ -9,7 +9,7 @@ next line
 <script>
   // Simulate the behavior of ruby layout.
   var base = document.getElementById('base');
-  makeHeightMatchInlineBox(base, document.getElementById('inline'));
-  base.style.paddingTop = getHeight(document.getElementById('text1'));
-  base.style.paddingBottom = getHeight(document.getElementById('text2'));
+  makeBSizeMatchInlineBox(base, document.getElementById('inline'));
+  base.style.paddingTop = getBSize(document.getElementById('text1'));
+  base.style.paddingBottom = getBSize(document.getElementById('text2'));
 </script>

layout/reftests/css-ruby/relative-positioning-1-ref.html

@@ -15,8 +15,8 @@
     </span>
   </div>
   <script type="text/javascript">
-    makeHeightMatchInlineBox(document.getElementById('annotation'),
-                             document.getElementById('inline'));
+    makeBSizeMatchInlineBox(document.getElementById('annotation'),
+                            document.getElementById('inline'));
   </script>
 </body>
 </html>

layout/reftests/css-ruby/relative-positioning-2-ref.html

@@ -23,8 +23,8 @@
     after
   </div>
   <script type="text/javascript">
-    makeHeightMatchInlineBox(document.getElementById('annotation'),
-                             document.getElementById('inline'));
+    makeBSizeMatchInlineBox(document.getElementById('annotation'),
+                            document.getElementById('inline'));
   </script>
 </body>
 </html>

layout/reftests/css-ruby/utils.js

@@ -1,9 +1,17 @@
-function getHeight(elem) {
-  return elem.getBoundingClientRect().height + 'px';
+function getBlockAxisName(elem) {
+  var wm = getComputedStyle(elem).writingMode;
+  return (!wm || wm == 'horizontal-tb') ? 'height' : 'width';
 }
 
-function makeHeightMatchInlineBox(block, inline) {
-  var height = getHeight(inline);
-  block.style.height = height;
-  block.style.lineHeight = height;
+function getBSize(elem) {
+  return elem.getBoundingClientRect()[getBlockAxisName(elem)] + 'px';
+}
+
+function setBSize(elem, bsize) {
+  elem.style[getBlockAxisName(elem)] = bsize;
+  elem.style.lineHeight = bsize;
+}
+
+function makeBSizeMatchInlineBox(block, inline) {
+  setBSize(block, getBSize(inline));
 }