Bug 1272721: Fix rtl-checking logic in legacy -webkit-box codepath, to actually reverse the correct axis under correct conditions. r=mats, a=sylvestre
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 25 May 2016 10:48:06 -0700
changeset 333125 7aa34c1c53982faa61bb64ac62f9582f55b5398e
parent 333124 ba38537fbb5af21916ef5869a108f59ec51bc874
child 333126 70f114d27c05ff5e994c8996cc24f7dd8720425e
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats, sylvestre
bugs1272721
milestone48.0a2
Bug 1272721: Fix rtl-checking logic in legacy -webkit-box codepath, to actually reverse the correct axis under correct conditions. r=mats, a=sylvestre MozReview-Commit-ID: AQf71HMuyzO
layout/generic/nsFlexContainerFrame.cpp
layout/reftests/webkit-box/reftest.list
layout/reftests/webkit-box/webkit-box-direction-2-ref.html
layout/reftests/webkit-box/webkit-box-direction-2.html
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -3253,21 +3253,23 @@ FlexboxAxisTracker::InitAxesFromLegacyPr
   // XXXdholbert BEGIN CODE TO SET DEPRECATED MEMBER-VARS
   if (boxOrientIsVertical) {
     mMainAxis = eAxis_TB;
     mCrossAxis = eAxis_LR;
   } else {
     mMainAxis = eAxis_LR;
     mCrossAxis = eAxis_TB;
   }
-  // "direction: rtl" (in a horizontal -webkit-box) reverses the main axis.
+  // "direction: rtl" reverses the writing-mode's inline axis.
+  // So, we need to reverse the corresponding flex axis to match.
   // (Note this we don't toggle "mIsMainAxisReversed" for this condition,
   // because the main axis will still match aWM's inline direction.)
-  if (aWM.IsBidiLTR()) {
-    mMainAxis = GetReverseAxis(mMainAxis);
+  if (!aWM.IsBidiLTR()) {
+    AxisOrientationType& axisToFlip = mIsRowOriented ? mMainAxis : mCrossAxis;
+    axisToFlip = GetReverseAxis(axisToFlip);
   }
   // XXXdholbert END CODE TO SET DEPRECATED MEMBER-VARS
 
   // Legacy flexbox can use "-webkit-box-direction: reverse" to reverse the
   // main axis (so it runs in the reverse direction of the inline axis):
   if (styleXUL->mBoxDirection == NS_STYLE_BOX_DIRECTION_REVERSE) {
     mMainAxis = GetReverseAxis(mMainAxis);
     mIsMainAxisReversed = true;
--- a/layout/reftests/webkit-box/reftest.list
+++ b/layout/reftests/webkit-box/reftest.list
@@ -16,16 +16,17 @@ fails == webkit-box-anon-flex-items-3.ht
 
 # Tests for "-webkit-box-align" (cross-axis alignment):
 == webkit-box-align-horiz-1a.html webkit-box-align-horiz-1-ref.html
 == webkit-box-align-horiz-1b.html webkit-box-align-horiz-1-ref.html
 == webkit-box-align-vert-1.html webkit-box-align-vert-1-ref.html
 
 # Tests for "-webkit-box-direction":
 == webkit-box-direction-1.html webkit-box-direction-1-ref.html
+== webkit-box-direction-2.html webkit-box-direction-2-ref.html
 
 # Tests for "-webkit-box-flex" (flexibility of items)
 == webkit-box-flex-1.html webkit-box-flex-1-ref.html
 
 # Tests for "-webkit-box-ordinal-group"
 == webkit-box-ordinal-group-1.html webkit-box-ordinal-group-1-ref.html
 # XXXdholbert The following test fails because we accept "0" as a valid value
 # for -webkit-box-ordinal-group (unlike Chrome/Blink), because that's simply
copy from layout/reftests/webkit-box/webkit-box-direction-1-ref.html
copy to layout/reftests/webkit-box/webkit-box-direction-2-ref.html
--- a/layout/reftests/webkit-box/webkit-box-direction-1-ref.html
+++ b/layout/reftests/webkit-box/webkit-box-direction-2-ref.html
@@ -13,19 +13,25 @@
       display: flex;
       border: 1px solid black;
       margin: 5px 20px;
       float: left; /* For testing in "rows" */
       font: 10px serif;
     }
     .box > *:nth-child(1) {
       background: turquoise;
+      margin: 2px 4px 6px 8px;
+      border: 1px solid blue;
+      padding: 4px 3px 2px 1px;
     }
     .box > *:nth-child(2) {
       background: salmon;
+      margin: 9px 3px 7px 5px;
+      border: 2px solid purple;
+      padding: 6px 7px 8px 9px;
     }
 
     .rtl { direction: rtl; }
 
     .horizNormal {
       flex-direction: row;
     }
     .horizReverse {
copy from layout/reftests/webkit-box/webkit-box-direction-1.html
copy to layout/reftests/webkit-box/webkit-box-direction-2.html
--- a/layout/reftests/webkit-box/webkit-box-direction-1.html
+++ b/layout/reftests/webkit-box/webkit-box-direction-2.html
@@ -3,30 +3,37 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
 <head>
   <title>
     CSS Test: "-webkit-box-direction" property
     in a -webkit-box with default writing-mode
+    and some margin/border/padding on flex items
   </title>
   <style>
     .box {
       display: -webkit-box;
       border: 1px solid black;
       margin: 5px 20px;
       float: left; /* For testing in "rows" */
       font: 10px serif;
     }
     .box > *:nth-child(1) {
       background: turquoise;
+      margin: 2px 4px 6px 8px;
+      border: 1px solid blue;
+      padding: 4px 3px 2px 1px;
     }
     .box > *:nth-child(2) {
       background: salmon;
+      margin: 9px 3px 7px 5px;
+      border: 2px solid purple;
+      padding: 6px 7px 8px 9px;
     }
 
     .rtl { direction: rtl; }
 
     .horizNormal {
       -webkit-box-orient: horizontal;
       -webkit-box-direction: normal;
     }