Bug 1272721: Fix rtl-checking logic in legacy -webkit-box codepath, to actually reverse the correct axis under correct conditions. r=mats
MozReview-Commit-ID: AQf71HMuyzO
--- 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;
}