Need to implement flex-flow: column-reverse

https://bugs.webkit.org/show_bug.cgi?id=73504 Reviewed by David Hyatt. Source/WebCore: We can't just change the direction of the FlexOrderIterator because we want the overflow to be on the top. We can't just position them in the reverse location since we don't know where the bottom edge is until we've layed out the flex items. So we do an extra pass, but it should be fast since we're not laying out, just moving. * rendering/RenderFlexibleBox.cpp: (WebCore::RenderFlexibleBox::flowAwareBorderEnd): (WebCore::RenderFlexibleBox::flowAwarePaddingEnd): (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): (WebCore::RenderFlexibleBox::layoutColumnReverse): Do an extra pass to reposition flexitems in the reverse order. * rendering/RenderFlexibleBox.h: LayoutTests: Enable testing of column-reverse. * 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 vertical tests cases (orthogonal directions) have 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 vertically, but the same direction horizontally. * css3/flexbox/flex-flow-padding-expected.txt: * css3/flexbox/flex-flow-padding.html: Single flexitem, no change. Canonical link: https://commits.webkit.org/90360@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@101897 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Dec 3, 2011 · edbbeaf · edbbeaf
1 parent 7728679
commit edbbeaf
Show file tree

Hide file tree

Showing 18 changed files with 347 additions and 26 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,27 @@
+2011-12-02  Tony Chang  <tony@chromium.org>
+
+        Need to implement flex-flow: column-reverse
+        https://bugs.webkit.org/show_bug.cgi?id=73504
+
+        Reviewed by David Hyatt.
+
+        Enable testing of column-reverse.
+
+        * 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 vertical tests cases (orthogonal directions) have 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 vertically, but the same direction horizontally.
+        * css3/flexbox/flex-flow-padding-expected.txt:
+        * css3/flexbox/flex-flow-padding.html: Single flexitem, no change.
+
 2011-12-02  Stephen Chenney  <schenney@chromium.org>
 
         Divide by zero for zero-length arcs

diff --git a/LayoutTests/css3/flexbox/flex-flow-border-expected.txt b/LayoutTests/css3/flexbox/flex-flow-border-expected.txt
@@ -22,6 +22,14 @@ horizontal-tb ltr row-reverse physical
 PASS
 horizontal-tb ltr row-reverse logical
 PASS
+horizontal-tb rtl column-reverse physical
+PASS
+horizontal-tb rtl column-reverse logical
+PASS
+horizontal-tb ltr column-reverse physical
+PASS
+horizontal-tb ltr column-reverse logical
+PASS
 horizontal-bt rtl row physical
 PASS
 horizontal-bt rtl row logical
@@ -46,6 +54,14 @@ horizontal-bt ltr row-reverse physical
 PASS
 horizontal-bt ltr row-reverse logical
 PASS
+horizontal-bt rtl column-reverse physical
+PASS
+horizontal-bt rtl column-reverse logical
+PASS
+horizontal-bt ltr column-reverse physical
+PASS
+horizontal-bt ltr column-reverse logical
+PASS
 vertical-lr rtl row physical
 PASS
 vertical-lr rtl row logical
@@ -70,6 +86,14 @@ vertical-lr ltr row-reverse physical
 PASS
 vertical-lr ltr row-reverse logical
 PASS
+vertical-lr rtl column-reverse physical
+PASS
+vertical-lr rtl column-reverse logical
+PASS
+vertical-lr ltr column-reverse physical
+PASS
+vertical-lr ltr column-reverse logical
+PASS
 vertical-rl rtl row physical
 PASS
 vertical-rl rtl row logical
@@ -94,4 +118,12 @@ vertical-rl ltr row-reverse physical
 PASS
 vertical-rl ltr row-reverse logical
 PASS
+vertical-rl rtl column-reverse physical
+PASS
+vertical-rl rtl column-reverse logical
+PASS
+vertical-rl ltr column-reverse physical
+PASS
+vertical-rl ltr column-reverse logical
+PASS
 
diff --git a/LayoutTests/css3/flexbox/flex-flow-border.html b/LayoutTests/css3/flexbox/flex-flow-border.html
@@ -224,8 +224,7 @@
 }
 
 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
-// FIXME: Test column-reverse.
-var flexFlows = ['row', 'column', 'row-reverse'];
+var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
 var directions = ['rtl', 'ltr'];
 var marginTypes = ['physical', 'logical'];
 

diff --git a/LayoutTests/css3/flexbox/flex-flow-expected.txt b/LayoutTests/css3/flexbox/flex-flow-expected.txt
@@ -6,3 +6,7 @@ PASS
 PASS
 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
@@ -10,6 +10,10 @@ horizontal-tb rtl row-reverse
 PASS
 horizontal-tb ltr row-reverse
 PASS
+horizontal-tb rtl column-reverse
+PASS
+horizontal-tb ltr column-reverse
+PASS
 horizontal-bt rtl row
 PASS
 horizontal-bt ltr row
@@ -22,6 +26,10 @@ horizontal-bt rtl row-reverse
 PASS
 horizontal-bt ltr row-reverse
 PASS
+horizontal-bt rtl column-reverse
+PASS
+horizontal-bt ltr column-reverse
+PASS
 vertical-lr rtl row
 FAIL:
 Expected 90 for width, but got 60. 
@@ -64,6 +72,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 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 rtl column-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 column-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 column-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 column-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. 
@@ -106,4 +128,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 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 column-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 column-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 column-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 column-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
@@ -62,8 +62,7 @@
 // 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 column-reverse.
-var flexFlows = ['row', 'column', 'row-reverse'];
+var flexFlows = ['row', 'column', 'row-reverse', 'column-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
@@ -22,6 +22,14 @@ horizontal-tb ltr row-reverse physical
 PASS
 horizontal-tb ltr row-reverse 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
@@ -46,6 +54,14 @@ horizontal-bt ltr row-reverse physical
 PASS
 horizontal-bt ltr row-reverse 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
@@ -70,6 +86,14 @@ vertical-lr ltr row-reverse physical
 PASS
 vertical-lr ltr row-reverse 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
@@ -94,4 +118,12 @@ vertical-rl ltr row-reverse physical
 PASS
 vertical-rl ltr row-reverse 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
@@ -214,8 +214,7 @@
 }
 
 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
-// FIXME: Test column-reverse.
-var flexFlows = ['row', 'column', 'row-reverse'];
+var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse'];
 var directions = ['rtl', 'ltr'];
 var marginTypes = ['physical', 'logical'];
 

diff --git a/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt b/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt
@@ -10,6 +10,10 @@ horizontal-tb rtl row-reverse
 PASS
 horizontal-tb ltr row-reverse
 PASS
+horizontal-tb rtl column-reverse
+PASS
+horizontal-tb ltr column-reverse
+PASS
 horizontal-bt rtl row
 PASS
 horizontal-bt ltr row
@@ -22,6 +26,10 @@ horizontal-bt rtl row-reverse
 PASS
 horizontal-bt ltr row-reverse
 PASS
+horizontal-bt rtl column-reverse
+PASS
+horizontal-bt ltr column-reverse
+PASS
 vertical-lr rtl row
 PASS
 vertical-lr ltr row
@@ -34,6 +42,10 @@ vertical-lr rtl row-reverse
 PASS
 vertical-lr ltr row-reverse
 PASS
+vertical-lr rtl column-reverse
+PASS
+vertical-lr ltr column-reverse
+PASS
 vertical-rl rtl row
 PASS
 vertical-rl ltr row
@@ -46,4 +58,8 @@ vertical-rl rtl row-reverse
 PASS
 vertical-rl ltr row-reverse
 PASS
+vertical-rl rtl column-reverse
+PASS
+vertical-rl ltr column-reverse
+PASS
 
diff --git a/LayoutTests/css3/flexbox/flex-flow-orientations.html b/LayoutTests/css3/flexbox/flex-flow-orientations.html
@@ -75,6 +75,10 @@
             rtl: [[80, 0], [80, 20]],
             ltr: [[0, 0], [0, 20]]
         },
+        'column-reverse': {
+            rtl: [[80, 80], [80, 60]],
+            ltr: [[0, 80], [0, 60]]
+        },
         row: {
             rtl: [[80, 0], [60, 0]],
             ltr: [[0, 0], [20, 0]]
@@ -89,6 +93,10 @@
             rtl: [[80, 80], [80, 60]],
             ltr: [[0, 80], [0, 60]]
         },
+        'column-reverse': {
+            rtl: [[80, 0], [80, 20]],
+            ltr: [[0, 0], [0, 20]]
+        },
         row: {
             rtl: [[80, 80], [60, 80]],
             ltr: [[0, 80], [20, 80]]
@@ -103,6 +111,10 @@
             rtl: [[0, 80], [20, 80]],
             ltr: [[0, 0], [20, 0]]
         },
+        'column-reverse': {
+            rtl: [[80, 80], [60, 80]],
+            ltr: [[80, 0], [60, 0]]
+        },
         row: {
             rtl: [[0, 80], [0, 60]],
             ltr: [[0, 0], [0, 20]]
@@ -117,6 +129,10 @@
             rtl: [[80, 80], [60, 80]],
             ltr: [[80, 0], [60, 0]]
         },
+        'column-reverse': {
+            rtl: [[0, 80], [20, 80]],
+            ltr: [[0, 0], [20, 0]]
+        },
         row: {
             rtl: [[80, 80], [80, 60]],
             ltr: [[80, 0], [80, 20]]
@@ -129,8 +145,7 @@
 };
 
 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
-// FIXME: Test column-reverse.
-var flexFlows = ['row', 'column', 'row-reverse'];
+var flexFlows = ['row', 'column', 'row-reverse', 'column-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
@@ -10,6 +10,10 @@ horizontal-tb rtl row-reverse
 PASS
 horizontal-tb ltr row-reverse
 PASS
+horizontal-tb rtl column-reverse
+PASS
+horizontal-tb ltr column-reverse
+PASS
 horizontal-bt rtl row
 PASS
 horizontal-bt ltr row
@@ -22,6 +26,10 @@ horizontal-bt rtl row-reverse
 PASS
 horizontal-bt ltr row-reverse
 PASS
+horizontal-bt rtl column-reverse
+PASS
+horizontal-bt ltr column-reverse
+PASS
 vertical-lr rtl row
 PASS
 vertical-lr ltr row
@@ -34,6 +42,10 @@ vertical-lr rtl row-reverse
 PASS
 vertical-lr ltr row-reverse
 PASS
+vertical-lr rtl column-reverse
+PASS
+vertical-lr ltr column-reverse
+PASS
 vertical-rl rtl row
 PASS
 vertical-rl ltr row
@@ -46,4 +58,8 @@ vertical-rl rtl row-reverse
 PASS
 vertical-rl ltr row-reverse
 PASS
+vertical-rl rtl column-reverse
+PASS
+vertical-rl ltr column-reverse
+PASS