Need to implement flex-flow: row-reverse

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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 7bbc266..738eb81 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,26 @@
+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.

diff --git a/LayoutTests/css3/flexbox/flex-flow-border-expected.txt b/LayoutTests/css3/flexbox/flex-flow-border-expected.txt
index 7538e82..7e79604 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-border-expected.txt
+++ b/LayoutTests/css3/flexbox/flex-flow-border-expected.txt
@@ -14,6 +14,14 @@ horizontal-tb ltr column physical
 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 @@ horizontal-bt ltr column physical
 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 @@ vertical-lr ltr column physical
 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 @@ vertical-rl ltr column physical
 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
 

diff --git a/LayoutTests/css3/flexbox/flex-flow-border.html b/LayoutTests/css3/flexbox/flex-flow-border.html
index aef36b4..dd8ca39 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-border.html
+++ b/LayoutTests/css3/flexbox/flex-flow-border.html
@@ -224,8 +224,8 @@ var logicalExpectations = {
 }
 
 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 @@ writingModes.forEach(function(writingMode) {
                 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);   

diff --git a/LayoutTests/css3/flexbox/flex-flow-expected.txt b/LayoutTests/css3/flexbox/flex-flow-expected.txt
index 00e8b92..f61966d 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-expected.txt
+++ b/LayoutTests/css3/flexbox/flex-flow-expected.txt
@@ -4,3 +4,5 @@ PASS
 PASS
 PASS
 PASS
+PASS
+PASS

diff --git a/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt b/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt
index 8da868c..9fe303e 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt
+++ b/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt
@@ -6,6 +6,10 @@ horizontal-tb rtl column
 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 @@ horizontal-bt rtl column
 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 @@ 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. 
@@ -70,4 +92,18 @@ 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>
 

diff --git a/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html b/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html
index 68ee27b..c8e97f5 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html
+++ b/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html
@@ -62,8 +62,8 @@ if (window.layoutTestController)
 // 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) {

diff --git a/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt b/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt
index 7538e82..7e79604 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt
+++ b/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt
@@ -14,6 +14,14 @@ horizontal-tb ltr column physical
 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 @@ horizontal-bt ltr column physical
 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 @@ vertical-lr ltr column physical
 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 @@ vertical-rl ltr column physical
 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
 

diff --git a/LayoutTests/css3/flexbox/flex-flow-margins.html b/LayoutTests/css3/flexbox/flex-flow-margins.html
index b190370..0b34af1 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-margins.html
+++ b/LayoutTests/css3/flexbox/flex-flow-margins.html
@@ -214,8 +214,8 @@ var logicalExpectations = {
 }
 
 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 @@ writingModes.forEach(function(writingMode) {
                 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';

diff --git a/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt b/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt
index fe0f4e7..9114cb8 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt
+++ b/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt
@@ -6,6 +6,10 @@ horizontal-tb rtl column
 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 @@ horizontal-bt rtl column
 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 @@ vertical-lr rtl column
 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 @@ vertical-rl rtl column
 PASS
 vertical-rl ltr column
 PASS
+vertical-rl rtl row-reverse
+PASS
+vertical-rl ltr row-reverse
+PASS
 

diff --git a/LayoutTests/css3/flexbox/flex-flow-orientations.html b/LayoutTests/css3/flexbox/flex-flow-orientations.html
index 7e29f8a..b29d145 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-orientations.html
+++ b/LayoutTests/css3/flexbox/flex-flow-orientations.html
@@ -78,6 +78,10 @@ var expectations = {
         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 @@ var expectations = {
         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 @@ var expectations = {
         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 @@ var expectations = {
         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)

diff --git a/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt b/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt
index fe0f4e7..9114cb8 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt
+++ b/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt
@@ -6,6 +6,10 @@ horizontal-tb rtl column
 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 @@ horizontal-bt rtl column
 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 @@ vertical-lr rtl column
 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 @@ vertical-rl rtl column
 PASS
 vertical-rl ltr column
 PASS
+vertical-rl rtl row-reverse
+PASS
+vertical-rl ltr row-reverse
+PASS
 

diff --git a/LayoutTests/css3/flexbox/flex-flow-overflow.html b/LayoutTests/css3/flexbox/flex-flow-overflow.html
index ea7da61..bf6b06e 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-overflow.html
+++ b/LayoutTests/css3/flexbox/flex-flow-overflow.html
@@ -90,8 +90,8 @@ var expectations = {
 }
 
 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 @@ 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);   

diff --git a/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt b/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt
index 7538e82..7e79604 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt
+++ b/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt
@@ -14,6 +14,14 @@ horizontal-tb ltr column physical
 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 @@ horizontal-bt ltr column physical
 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 @@ vertical-lr ltr column physical
 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 @@ vertical-rl ltr column physical
 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
 

diff --git a/LayoutTests/css3/flexbox/flex-flow-padding.html b/LayoutTests/css3/flexbox/flex-flow-padding.html
index 1eba813..193df4e 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow-padding.html
+++ b/LayoutTests/css3/flexbox/flex-flow-padding.html
@@ -227,8 +227,8 @@ var logicalExpectations = {
 }
 
 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 @@ writingModes.forEach(function(writingMode) {
 
                 // 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';
 

diff --git a/LayoutTests/css3/flexbox/flex-flow.html b/LayoutTests/css3/flexbox/flex-flow.html
index 7414f02..0879e0f 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-flow.html
+++ b/LayoutTests/css3/flexbox/flex-flow.html
@@ -81,6 +81,18 @@ if (window.layoutTestController)
   <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>

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 926cdbd..eede4ae 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,22 @@
+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.

diff --git a/Source/WebCore/rendering/RenderFlexibleBox.cpp b/Source/WebCore/rendering/RenderFlexibleBox.cpp
index e34cd0f..050c37a 100644 (file)
--- a/Source/WebCore/rendering/RenderFlexibleBox.cpp
+++ b/Source/WebCore/rendering/RenderFlexibleBox.cpp
@@ -206,6 +206,11 @@ bool RenderFlexibleBox::isColumnFlow() const
     return style()->isColumnFlexFlow();
 }
 
+bool RenderFlexibleBox::isReverseFlow() const
+{
+    return style()->flexFlow() == FlowColumnReverse || style()->flexFlow() == FlowRowReverse;
+}
+
 bool RenderFlexibleBox::isHorizontalFlow() const
 {
     if (isHorizontalWritingMode())
@@ -217,7 +222,7 @@ bool RenderFlexibleBox::isLeftToRightFlow() const
 {
     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 @@ LayoutUnit RenderFlexibleBox::flowAwareBorderBefore() 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();
@@ -353,22 +342,6 @@ LayoutUnit RenderFlexibleBox::flowAwarePaddingBefore() const
     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())

diff --git a/Source/WebCore/rendering/RenderFlexibleBox.h b/Source/WebCore/rendering/RenderFlexibleBox.h
index 66d8260..ea63cc4 100644 (file)
--- a/Source/WebCore/rendering/RenderFlexibleBox.h
+++ b/Source/WebCore/rendering/RenderFlexibleBox.h
@@ -53,6 +53,7 @@ private:
 
     bool hasOrthogonalFlow(RenderBox* child) const;
     bool isColumnFlow() const;
+    bool isReverseFlow() const;
     bool isHorizontalFlow() const;
     bool isLeftToRightFlow() const;
     Length crossAxisLength() const;
@@ -67,11 +68,9 @@ private:
     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;