Diff
Modified: trunk/LayoutTests/ChangeLog (101702 => 101703)
--- trunk/LayoutTests/ChangeLog 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/ChangeLog 2011-12-01 21:51:16 UTC (rev 101703)
@@ -1,3 +1,26 @@
+2011-12-01 Tony Chang <[email protected]>
+
+ 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 <[email protected]>
Cleaning up comments and unused portions of a webgl test, as per review comments.
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt 2011-12-01 21:51:16 UTC (rev 101703)
@@ -14,6 +14,14 @@
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
@@ -30,6 +38,14 @@
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
@@ -46,6 +62,14 @@
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
@@ -62,4 +86,12 @@
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
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-border.html (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-border.html 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-border.html 2011-12-01 21:51:16 UTC (rev 101703)
@@ -224,8 +224,8 @@
}
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'];
@@ -248,7 +248,7 @@
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);
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt 2011-12-01 21:51:16 UTC (rev 101703)
@@ -4,3 +4,5 @@
PASS
PASS
PASS
+PASS
+PASS
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt 2011-12-01 21:51:16 UTC (rev 101703)
@@ -6,6 +6,10 @@
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
@@ -14,6 +18,10 @@
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.
@@ -42,6 +50,20 @@
<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.
@@ -70,4 +92,18 @@
<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>
+
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html 2011-12-01 21:51:16 UTC (rev 101703)
@@ -62,8 +62,8 @@
// 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) {
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt 2011-12-01 21:51:16 UTC (rev 101703)
@@ -14,6 +14,14 @@
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
@@ -30,6 +38,14 @@
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
@@ -46,6 +62,14 @@
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
@@ -62,4 +86,12 @@
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
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins.html (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-margins.html 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins.html 2011-12-01 21:51:16 UTC (rev 101703)
@@ -214,8 +214,8 @@
}
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'];
@@ -233,7 +233,7 @@
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';
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt 2011-12-01 21:51:16 UTC (rev 101703)
@@ -6,6 +6,10 @@
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
@@ -14,6 +18,10 @@
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
@@ -22,6 +30,10 @@
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
@@ -30,4 +42,8 @@
PASS
vertical-rl ltr column
PASS
+vertical-rl rtl row-reverse
+PASS
+vertical-rl ltr row-reverse
+PASS
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html 2011-12-01 21:51:16 UTC (rev 101703)
@@ -78,6 +78,10 @@
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': {
@@ -88,6 +92,10 @@
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': {
@@ -98,6 +106,10 @@
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': {
@@ -108,13 +120,17 @@
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)
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt 2011-12-01 21:51:16 UTC (rev 101703)
@@ -6,6 +6,10 @@
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
@@ -14,6 +18,10 @@
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
@@ -22,6 +30,10 @@
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
@@ -30,4 +42,8 @@
PASS
vertical-rl ltr column
PASS
+vertical-rl rtl row-reverse
+PASS
+vertical-rl ltr row-reverse
+PASS
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html 2011-12-01 21:51:16 UTC (rev 101703)
@@ -90,8 +90,8 @@
}
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) {
@@ -108,8 +108,12 @@
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);
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt 2011-12-01 21:51:16 UTC (rev 101703)
@@ -14,6 +14,14 @@
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
@@ -30,6 +38,14 @@
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
@@ -46,6 +62,14 @@
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
@@ -62,4 +86,12 @@
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
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-padding.html (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow-padding.html 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-padding.html 2011-12-01 21:51:16 UTC (rev 101703)
@@ -227,8 +227,8 @@
}
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'];
@@ -252,8 +252,8 @@
// 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';
Modified: trunk/LayoutTests/css3/flexbox/flex-flow.html (101702 => 101703)
--- trunk/LayoutTests/css3/flexbox/flex-flow.html 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/LayoutTests/css3/flexbox/flex-flow.html 2011-12-01 21:51:16 UTC (rev 101703)
@@ -81,6 +81,18 @@
<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>
Modified: trunk/Source/WebCore/ChangeLog (101702 => 101703)
--- trunk/Source/WebCore/ChangeLog 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/Source/WebCore/ChangeLog 2011-12-01 21:51:16 UTC (rev 101703)
@@ -1,3 +1,22 @@
+2011-12-01 Tony Chang <[email protected]>
+
+ 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 <[email protected]>
[Chromium] Early returns in calculateDrawTransformsAndVisibilityInternal() are not respected by parent.
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (101702 => 101703)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-12-01 21:51:16 UTC (rev 101703)
@@ -206,6 +206,11 @@
return style()->isColumnFlexFlow();
}
+bool RenderFlexibleBox::isReverseFlow() const
+{
+ return style()->flexFlow() == FlowColumnReverse || style()->flexFlow() == FlowRowReverse;
+}
+
bool RenderFlexibleBox::isHorizontalFlow() const
{
if (isHorizontalWritingMode())
@@ -217,7 +222,7 @@
{
if (isColumnFlow())
return style()->writingMode() == TopToBottomWritingMode || style()->writingMode() == LeftToRightWritingMode;
- return style()->isLeftToRightDirection();
+ return style()->isLeftToRightDirection() ^ isReverseFlow();
}
Length RenderFlexibleBox::mainAxisLengthForChild(RenderBox* child) const
@@ -309,22 +314,6 @@
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();
@@ -353,22 +342,6 @@
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())
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (101702 => 101703)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2011-12-01 21:44:54 UTC (rev 101702)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2011-12-01 21:51:16 UTC (rev 101703)
@@ -53,6 +53,7 @@
bool hasOrthogonalFlow(RenderBox* child) const;
bool isColumnFlow() const;
+ bool isReverseFlow() const;
bool isHorizontalFlow() const;
bool isLeftToRightFlow() const;
Length crossAxisLength() const;
@@ -67,11 +68,9 @@
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;
