[New Multicolumn] flowThreadTranslationAtOffset() needs to be relative to the flow thread.

LayoutTests/fast/multicol/client-rects-rtl-expected.html

Index: LayoutTests/fast/multicol/client-rects-rtl-expected.html
diff --git a/LayoutTests/fast/multicol/client-rects-expected.html b/LayoutTests/fast/multicol/client-rects-rtl-expected.html
similarity index 63%
copy from LayoutTests/fast/multicol/client-rects-expected.html
copy to LayoutTests/fast/multicol/client-rects-rtl-expected.html
index 3aae3b9e0c2548805b809260fbfb9af5470c7f1e..8bfce09b2702baff7ae0196ddb73ed869e19c2e5 100644
--- a/LayoutTests/fast/multicol/client-rects-expected.html
+++ b/LayoutTests/fast/multicol/client-rects-rtl-expected.html
@@ -16,11 +16,11 @@
 
     .column {
         position: absolute;
-        width: 50px;
+        width: 25px;
     }
 
-    .left { left: 10px; }
-    .right { right: 10px; }
+    .first { right: 10px; }
+    .second { right: 70px; }
 
     .column > span {
         background-color: lightblue;
@@ -31,18 +31,18 @@
         box-sizing: border-box;
     }
 
-    .special > .left > span {
+    .special > .first > span {
         margin-top: 40px;
         height: 10px;
         border: none;
     }
-    .special > .right span:first-child {
+    .special > .second span:first-child {
         border-bottom: none;
         height: 10px;
         margin-top: -10px;
         background-color: white;
     }
-    .special > .right span:last-child {
+    .special > .second span:last-child {
         border-top: none;
         height: 15px;
     }
@@ -56,31 +56,31 @@
     <span style="display: inline-block; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
 </p>
 <div class="columns">
-    <div class="column left"><br><span></span></div>
-    <div class="column right"><span></span><span></span></div>
+    <div class="column first"><br><span></span></div>
+    <div class="column second"><span></span><span></span></div>
 </div>
 <div class="columns">
-    <div class="column left"><br><span></span></div>
-    <div class="column right"><span></span><span></span></div>
+    <div class="column first"><br><span></span></div>
+    <div class="column second"><span></span><span></span></div>
 </div>
 <div class="columns">
-    <div class="column left"><br><span></span></div>
-    <div class="column right"><span></span><span></span></div>
+    <div class="column first"><br><span></span></div>
+    <div class="column second"><span></span><span></span></div>
 </div>
 <div class="columns">
-    <div class="column left"></div>
-    <div class="column right"><span></span><span></span></div>
+    <div class="column first"></div>
+    <div class="column second"><span></span><span></span></div>
 </div>
 <div class="columns">
-    <div class="column right"><span></span></div>
+    <div class="column second"><span></span></div>
 </div>
 <div class="columns">
-    <div class="column right"><span></span></div>
+    <div class="column second"><span></span></div>
 </div>
 <p>
-    Except here, where the blue border should be around the bigger slice of the blue square, on the right.
+    Except here, where the blue border should be around the bigger slice of the blue square, on the left.
 </p>
 <div class="columns special">
-    <div class="column left"><span></span></div>
-    <div class="column right"><span></span><span></span></div>
-</div>
+    <div class="column first"><span></span></div>
+    <div class="column second"><span></span><span></span></div>
+</div>