https://bugs.webkit.org/show_bug.cgi?id=70778
Reviewed by Ojan Vafai.
Source/WebCore:
We can't just change the direction of the FlexOrderIterator because we want the overflow to be
on the left side. Instead, we apply similar logic as when we're laying out RTL content. Putting
the check in isLeftToRightFlow() lets us flip the flexbox's border and padding and the flexitems'
margins. We then layout from right to left in layoutAndPlaceChildren.
Also remove 2 uncalled functions.
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::isReverseFlow):
(WebCore::RenderFlexibleBox::isLeftToRightFlow):
* rendering/RenderFlexibleBox.h:
LayoutTests:
* css3/flexbox/flex-flow-expected.txt:
* css3/flexbox/flex-flow.html: Added test cases to make sure start and end still apply to the text flow direction.
* css3/flexbox/flex-flow-border-expected.txt:
* css3/flexbox/flex-flow-border.html: Single flexitem, so reverse does nothing
* css3/flexbox/flex-flow-margins-auto-size-expected.txt:
* css3/flexbox/flex-flow-margins-auto-size.html: Ditto. The orthogonal tests fail, but they've always failed.
* css3/flexbox/flex-flow-margins-expected.txt:
* css3/flexbox/flex-flow-margins.html: Ditto.
* css3/flexbox/flex-flow-orientations-expected.txt:
* css3/flexbox/flex-flow-orientations.html: This test has 2 flexitems, the positions of which are now flipped.
* css3/flexbox/flex-flow-overflow-expected.txt:
* css3/flexbox/flex-flow-overflow.html: The overflow should go in the opposite direction. That is, the overflow
of rtl should be the same as row-reverse.
* css3/flexbox/flex-flow-padding-expected.txt:
* css3/flexbox/flex-flow-padding.html: Single flexitem, no change.
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@101703
268f45cc-cd09-0410-ab3c-
d52691b4dbfc
+2011-12-01 Tony Chang <tony@chromium.org>
+
+ Need to implement flex-flow: row-reverse
+ https://bugs.webkit.org/show_bug.cgi?id=70778
+
+ Reviewed by Ojan Vafai.
+
+ * css3/flexbox/flex-flow-expected.txt:
+ * css3/flexbox/flex-flow.html: Added test cases to make sure start and end still apply to the text flow direction.
+ * css3/flexbox/flex-flow-border-expected.txt:
+ * css3/flexbox/flex-flow-border.html: Single flexitem, so reverse does nothing
+ * css3/flexbox/flex-flow-margins-auto-size-expected.txt:
+ * css3/flexbox/flex-flow-margins-auto-size.html: Ditto. The orthogonal tests fail, but they've always failed.
+ * css3/flexbox/flex-flow-margins-expected.txt:
+ * css3/flexbox/flex-flow-margins.html: Ditto.
+ * css3/flexbox/flex-flow-orientations-expected.txt:
+ * css3/flexbox/flex-flow-orientations.html: This test has 2 flexitems, the positions of which are now flipped.
+ * css3/flexbox/flex-flow-overflow-expected.txt:
+ * css3/flexbox/flex-flow-overflow.html: The overflow should go in the opposite direction. That is, the overflow
+ of rtl should be the same as row-reverse.
+ * css3/flexbox/flex-flow-padding-expected.txt:
+ * css3/flexbox/flex-flow-padding.html: Single flexitem, no change.
+
2011-12-01 Jeff Timanus <twiz@chromium.org>
Cleaning up comments and unused portions of a webgl test, as per review comments.
PASS
horizontal-tb ltr column logical
PASS
+horizontal-tb rtl row-reverse physical
+PASS
+horizontal-tb rtl row-reverse logical
+PASS
+horizontal-tb ltr row-reverse physical
+PASS
+horizontal-tb ltr row-reverse logical
+PASS
horizontal-bt rtl row physical
PASS
horizontal-bt rtl row logical
PASS
horizontal-bt ltr column logical
PASS
+horizontal-bt rtl row-reverse physical
+PASS
+horizontal-bt rtl row-reverse logical
+PASS
+horizontal-bt ltr row-reverse physical
+PASS
+horizontal-bt ltr row-reverse logical
+PASS
vertical-lr rtl row physical
PASS
vertical-lr rtl row logical
PASS
vertical-lr ltr column logical
PASS
+vertical-lr rtl row-reverse physical
+PASS
+vertical-lr rtl row-reverse logical
+PASS
+vertical-lr ltr row-reverse physical
+PASS
+vertical-lr ltr row-reverse logical
+PASS
vertical-rl rtl row physical
PASS
vertical-rl rtl row logical
PASS
vertical-rl ltr column logical
PASS
+vertical-rl rtl row-reverse physical
+PASS
+vertical-rl rtl row-reverse logical
+PASS
+vertical-rl ltr row-reverse physical
+PASS
+vertical-rl ltr row-reverse logical
+PASS
}
var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
-// FIXME: Test row-reverse and column-reverse.
-var flexFlows = ['row', 'column'];
+// FIXME: Test column-reverse.
+var flexFlows = ['row', 'column', 'row-reverse'];
var directions = ['rtl', 'ltr'];
var marginTypes = ['physical', 'logical'];
container.setAttribute('data-expected-height', expectations.size[1]);
container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '" ' + positionAsString(expectations.position) + ' ' + offsetSizeAsString(expectations.size) + '>\n' +
- '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + asString(expectations[flexFlow]) + '></div>\n' +
+ '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + asString(expectations[flexFlow.replace("-reverse", "")]) + '></div>\n' +
'</div>\n';
document.body.appendChild(container);
PASS
PASS
PASS
+PASS
+PASS
PASS
horizontal-tb ltr column
PASS
+horizontal-tb rtl row-reverse
+PASS
+horizontal-tb ltr row-reverse
+PASS
horizontal-bt rtl row
PASS
horizontal-bt ltr row
PASS
horizontal-bt ltr column
PASS
+horizontal-bt rtl row-reverse
+PASS
+horizontal-bt ltr row-reverse
+PASS
vertical-lr rtl row
FAIL:
Expected 90 for width, but got 60.
<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr ltr column" data-offset-x="40" data-offset-y="10">
<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
</div></div>
+vertical-lr rtl row-reverse
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr rtl row-reverse" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
+vertical-lr ltr row-reverse
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr ltr row-reverse" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
vertical-rl rtl row
FAIL:
Expected 90 for width, but got 60.
<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl ltr column" data-offset-x="40" data-offset-y="10">
<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
</div></div>
+vertical-rl rtl row-reverse
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl rtl row-reverse" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
+vertical-rl ltr row-reverse
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl ltr row-reverse" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
// The vertical test cases are failing because of the orthogonal writing modes.
// https://bugs.webkit.org/show_bug.cgi?id=70769
var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
-// FIXME: Test row-reverse and column-reverse.
-var flexFlows = ['row', 'column'];
+// FIXME: Test column-reverse.
+var flexFlows = ['row', 'column', 'row-reverse'];
var directions = ['rtl', 'ltr'];
writingModes.forEach(function(writingMode) {
PASS
horizontal-tb ltr column logical
PASS
+horizontal-tb rtl row-reverse physical
+PASS
+horizontal-tb rtl row-reverse logical
+PASS
+horizontal-tb ltr row-reverse physical
+PASS
+horizontal-tb ltr row-reverse logical
+PASS
horizontal-bt rtl row physical
PASS
horizontal-bt rtl row logical
PASS
horizontal-bt ltr column logical
PASS
+horizontal-bt rtl row-reverse physical
+PASS
+horizontal-bt rtl row-reverse logical
+PASS
+horizontal-bt ltr row-reverse physical
+PASS
+horizontal-bt ltr row-reverse logical
+PASS
vertical-lr rtl row physical
PASS
vertical-lr rtl row logical
PASS
vertical-lr ltr column logical
PASS
+vertical-lr rtl row-reverse physical
+PASS
+vertical-lr rtl row-reverse logical
+PASS
+vertical-lr ltr row-reverse physical
+PASS
+vertical-lr ltr row-reverse logical
+PASS
vertical-rl rtl row physical
PASS
vertical-rl rtl row logical
PASS
vertical-rl ltr column logical
PASS
+vertical-rl rtl row-reverse physical
+PASS
+vertical-rl rtl row-reverse logical
+PASS
+vertical-rl ltr row-reverse physical
+PASS
+vertical-rl ltr row-reverse logical
+PASS
}
var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
-// FIXME: Test row-reverse and column-reverse.
-var flexFlows = ['row', 'column'];
+// FIXME: Test column-reverse.
+var flexFlows = ['row', 'column', 'row-reverse'];
var directions = ['rtl', 'ltr'];
var marginTypes = ['physical', 'logical'];
expectations = expectations[writingMode][direction];
var flexboxExpectations = positionAsString(expectations.flexbox);
- var flexItemExpectations = asString(expectations[flexFlow]);
+ var flexItemExpectations = asString(expectations[flexFlow.replace("-reverse", "")]);
var container = document.createElement('div');
container.className = 'container';
PASS
horizontal-tb ltr column
PASS
+horizontal-tb rtl row-reverse
+PASS
+horizontal-tb ltr row-reverse
+PASS
horizontal-bt rtl row
PASS
horizontal-bt ltr row
PASS
horizontal-bt ltr column
PASS
+horizontal-bt rtl row-reverse
+PASS
+horizontal-bt ltr row-reverse
+PASS
vertical-lr rtl row
PASS
vertical-lr ltr row
PASS
vertical-lr ltr column
PASS
+vertical-lr rtl row-reverse
+PASS
+vertical-lr ltr row-reverse
+PASS
vertical-rl rtl row
PASS
vertical-rl ltr row
PASS
vertical-rl ltr column
PASS
+vertical-rl rtl row-reverse
+PASS
+vertical-rl ltr row-reverse
+PASS
row: {
rtl: [[80, 0], [60, 0]],
ltr: [[0, 0], [20, 0]]
+ },
+ 'row-reverse': {
+ rtl: [[0, 0], [20, 0]],
+ ltr: [[80, 0], [60, 0]]
}
},
'horizontal-bt': {
row: {
rtl: [[80, 80], [60, 80]],
ltr: [[0, 80], [20, 80]]
+ },
+ 'row-reverse': {
+ rtl: [[0, 80], [20, 80]],
+ ltr: [[80, 80], [60, 80]]
}
},
'vertical-lr': {
row: {
rtl: [[0, 80], [0, 60]],
ltr: [[0, 0], [0, 20]]
+ },
+ 'row-reverse': {
+ rtl: [[0, 0], [0, 20]],
+ ltr: [[0, 80], [0, 60]]
}
},
'vertical-rl': {
row: {
rtl: [[80, 80], [80, 60]],
ltr: [[80, 0], [80, 20]]
+ },
+ 'row-reverse': {
+ rtl: [[80, 0], [80, 20]],
+ ltr: [[80, 80], [80, 60]]
}
}
};
var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
-// FIXME: Test row-reverse and column-reverse.
-var flexFlows = ['row', 'column'];
+// FIXME: Test column-reverse.
+var flexFlows = ['row', 'column', 'row-reverse'];
var directions = ['rtl', 'ltr'];
function physicalWritingMode(writingMode, flexFlow, direction)
PASS
horizontal-tb ltr column
PASS
+horizontal-tb rtl row-reverse
+PASS
+horizontal-tb ltr row-reverse
+PASS
horizontal-bt rtl row
PASS
horizontal-bt ltr row
PASS
horizontal-bt ltr column
PASS
+horizontal-bt rtl row-reverse
+PASS
+horizontal-bt ltr row-reverse
+PASS
vertical-lr rtl row
PASS
vertical-lr ltr row
PASS
vertical-lr ltr column
PASS
+vertical-lr rtl row-reverse
+PASS
+vertical-lr ltr row-reverse
+PASS
vertical-rl rtl row
PASS
vertical-rl ltr row
PASS
vertical-rl ltr column
PASS
+vertical-rl rtl row-reverse
+PASS
+vertical-rl ltr row-reverse
+PASS
}
var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
-// FIXME: Test row-reverse and column-reverse.
-var flexFlows = ['row', 'column'];
+// FIXME: Test column-reverse.
+var flexFlows = ['row', 'column', 'row-reverse'];
var directions = ['rtl', 'ltr'];
writingModes.forEach(function(writingMode) {
container.setAttribute('data-expected-width', containerSize[0]);
container.setAttribute('data-expected-height', containerSize[1]);
+ var flowDirection = direction;
+ if (flexFlow.indexOf("-reverse") != -1)
+ flowDirection = direction == "rtl" ? "ltr" : "rtl";
+
container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '" ' + sizeAsString(containerSize) + '>\n' +
- '<div style="width: -webkit-flex(1 105px); height: -webkit-flex(1 105px);" ' + sizeAsString([105, 105]) + ' ' + positionAsString(expectations[writingMode][direction]) + '></div>\n' +
+ '<div style="width: -webkit-flex(1 105px); height: -webkit-flex(1 105px);" ' + sizeAsString([105, 105]) + ' ' + positionAsString(expectations[writingMode][flowDirection]) + '></div>\n' +
'</div>\n';
document.body.appendChild(container);
PASS
horizontal-tb ltr column logical
PASS
+horizontal-tb rtl row-reverse physical
+PASS
+horizontal-tb rtl row-reverse logical
+PASS
+horizontal-tb ltr row-reverse physical
+PASS
+horizontal-tb ltr row-reverse logical
+PASS
horizontal-bt rtl row physical
PASS
horizontal-bt rtl row logical
PASS
horizontal-bt ltr column logical
PASS
+horizontal-bt rtl row-reverse physical
+PASS
+horizontal-bt rtl row-reverse logical
+PASS
+horizontal-bt ltr row-reverse physical
+PASS
+horizontal-bt ltr row-reverse logical
+PASS
vertical-lr rtl row physical
PASS
vertical-lr rtl row logical
PASS
vertical-lr ltr column logical
PASS
+vertical-lr rtl row-reverse physical
+PASS
+vertical-lr rtl row-reverse logical
+PASS
+vertical-lr ltr row-reverse physical
+PASS
+vertical-lr ltr row-reverse logical
+PASS
vertical-rl rtl row physical
PASS
vertical-rl rtl row logical
PASS
vertical-rl ltr column logical
PASS
+vertical-rl rtl row-reverse physical
+PASS
+vertical-rl rtl row-reverse logical
+PASS
+vertical-rl ltr row-reverse physical
+PASS
+vertical-rl ltr row-reverse logical
+PASS
}
var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
-// FIXME: Test row-reverse and column-reverse.
-var flexFlows = ['row', 'column'];
+// FIXME: Test column-reverse.
+var flexFlows = ['row', 'column', 'row-reverse'];
var directions = ['rtl', 'ltr'];
var marginTypes = ['physical', 'logical'];
// FIXME: In flex-flow column the innermost diff is always 20x20. Is that correct?
container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '">\n' +
- '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + asString(expectations['flexitem' + flexFlow]) + '>\n' +
- '<div style="width:100%; height:100%" ' + asString(expectations['child' + flexFlow]) + '></div>' +
+ '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + asString(expectations['flexitem' + flexFlow.replace('-reverse', '')]) + '>\n' +
+ '<div style="width:100%; height:100%" ' + asString(expectations['child' + flexFlow.replace('-reverse', '')]) + '></div>' +
'</div>\n' +
'</div>\n';
<div data-expected-width="75" data-offset-x="100" style="width: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
</div>
+<div class="flexbox row-reverse">
+ <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
+ <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-x="375"></div></div>
+ <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+</div>
+
+<div class="flexbox rtl row-reverse">
+ <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
+ <div data-expected-width="350" data-offset-x="75" style="width: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-x="75"></div></div>
+ <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+</div>
+
<div style="position: relative;">
<div class="flexbox column">
<div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0); margin: auto 200px auto 150px;"></div>
+2011-12-01 Tony Chang <tony@chromium.org>
+
+ Need to implement flex-flow: row-reverse
+ https://bugs.webkit.org/show_bug.cgi?id=70778
+
+ Reviewed by Ojan Vafai.
+
+ We can't just change the direction of the FlexOrderIterator because we want the overflow to be
+ on the left side. Instead, we apply similar logic as when we're laying out RTL content. Putting
+ the check in isLeftToRightFlow() lets us flip the flexbox's border and padding and the flexitems'
+ margins. We then layout from right to left in layoutAndPlaceChildren.
+
+ Also remove 2 uncalled functions.
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::isReverseFlow):
+ (WebCore::RenderFlexibleBox::isLeftToRightFlow):
+ * rendering/RenderFlexibleBox.h:
+
2011-12-01 Daniel Sievers <sievers@chromium.org>
[Chromium] Early returns in calculateDrawTransformsAndVisibilityInternal() are not respected by parent.
return style()->isColumnFlexFlow();
}
+bool RenderFlexibleBox::isReverseFlow() const
+{
+ return style()->flexFlow() == FlowColumnReverse || style()->flexFlow() == FlowRowReverse;
+}
+
bool RenderFlexibleBox::isHorizontalFlow() const
{
if (isHorizontalWritingMode())
{
if (isColumnFlow())
return style()->writingMode() == TopToBottomWritingMode || style()->writingMode() == LeftToRightWritingMode;
- return style()->isLeftToRightDirection();
+ return style()->isLeftToRightDirection() ^ isReverseFlow();
}
Length RenderFlexibleBox::mainAxisLengthForChild(RenderBox* child) const
return borderTop();
}
-LayoutUnit RenderFlexibleBox::flowAwareBorderAfter() const
-{
- switch (transformedWritingMode()) {
- case TopToBottomWritingMode:
- return borderBottom();
- case BottomToTopWritingMode:
- return borderTop();
- case LeftToRightWritingMode:
- return borderRight();
- case RightToLeftWritingMode:
- return borderLeft();
- }
- ASSERT_NOT_REACHED();
- return borderBottom();
-}
-
LayoutUnit RenderFlexibleBox::crossAxisBorderAndPaddingExtent() const
{
return isHorizontalFlow() ? borderAndPaddingHeight() : borderAndPaddingWidth();
return paddingTop();
}
-LayoutUnit RenderFlexibleBox::flowAwarePaddingAfter() const
-{
- switch (transformedWritingMode()) {
- case TopToBottomWritingMode:
- return paddingBottom();
- case BottomToTopWritingMode:
- return paddingTop();
- case LeftToRightWritingMode:
- return paddingRight();
- case RightToLeftWritingMode:
- return paddingLeft();
- }
- ASSERT_NOT_REACHED();
- return paddingBottom();
-}
-
LayoutUnit RenderFlexibleBox::flowAwareMarginStartForChild(RenderBox* child) const
{
if (isHorizontalFlow())
bool hasOrthogonalFlow(RenderBox* child) const;
bool isColumnFlow() const;
+ bool isReverseFlow() const;
bool isHorizontalFlow() const;
bool isLeftToRightFlow() const;
Length crossAxisLength() const;
WritingMode transformedWritingMode() const;
LayoutUnit flowAwareBorderStart() const;
LayoutUnit flowAwareBorderBefore() const;
- LayoutUnit flowAwareBorderAfter() const;
LayoutUnit crossAxisBorderAndPaddingExtent() const;
LayoutUnit flowAwarePaddingStart() const;
LayoutUnit flowAwarePaddingBefore() const;
- LayoutUnit flowAwarePaddingAfter() const;
LayoutUnit flowAwareMarginStartForChild(RenderBox* child) const;
LayoutUnit flowAwareMarginEndForChild(RenderBox* child) const;
LayoutUnit flowAwareMarginBeforeForChild(RenderBox* child) const;