Need to implement flex-flow: column-reverse
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 3 Dec 2011 03:50:24 +0000 (03:50 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 3 Dec 2011 03:50:24 +0000 (03:50 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@101897 268f45cc-cd09-0410-ab3c-d52691b4dbfc

18 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/flexbox/flex-flow-border-expected.txt
LayoutTests/css3/flexbox/flex-flow-border.html
LayoutTests/css3/flexbox/flex-flow-expected.txt
LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt
LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html
LayoutTests/css3/flexbox/flex-flow-margins-expected.txt
LayoutTests/css3/flexbox/flex-flow-margins.html
LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt
LayoutTests/css3/flexbox/flex-flow-orientations.html
LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt
LayoutTests/css3/flexbox/flex-flow-overflow.html
LayoutTests/css3/flexbox/flex-flow-padding-expected.txt
LayoutTests/css3/flexbox/flex-flow-padding.html
LayoutTests/css3/flexbox/flex-flow.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.h

index f2bb0a5..667ab1e 100644 (file)
@@ -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
index 7e79604..07dee53 100644 (file)
@@ -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
 
index dd8ca39..184ebf4 100644 (file)
@@ -224,8 +224,7 @@ var logicalExpectations = {
 }
 
 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'];
 
index 9fe303e..918bc6e 100644 (file)
@@ -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>
 
index c8e97f5..d58d12b 100644 (file)
@@ -62,8 +62,7 @@ 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 column-reverse.
-var flexFlows = ['row', 'column', 'row-reverse'];
+var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
 var directions = ['rtl', 'ltr'];
 
 writingModes.forEach(function(writingMode) {
index 7e79604..a3407d1 100644 (file)
@@ -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
 
index 0b34af1..336f4ea 100644 (file)
@@ -214,8 +214,7 @@ var logicalExpectations = {
 }
 
 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'];
 
index 9114cb8..15bcf71 100644 (file)
@@ -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
 
index b29d145..0db4619 100644 (file)
@@ -75,6 +75,10 @@ var expectations = {
             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 @@ var expectations = {
             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 @@ var expectations = {
             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 @@ var expectations = {
             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 expectations = {
 };
 
 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)
index 9114cb8..15bcf71 100644 (file)
@@ -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
 
index bf6b06e..25f22d5 100644 (file)
@@ -73,25 +73,32 @@ var containerSize = [100, 100];
 var expectations = {
     'horizontal-tb': {
         rtl: [-5, 0],
-        ltr: [0, 0]
+        ltr: [0, 0],
+        'rtl-column-reverse': [-5, -5],
+        'ltr-column-reverse': [0, -5],
     },
     'horizontal-bt': {
         rtl: [-5, -5],
-        ltr: [0, -5]
+        ltr: [0, -5],
+        'rtl-column-reverse': [-5, 0],
+        'ltr-column-reverse': [0, 0],
     },
     'vertical-lr': {
         rtl: [0, -5],
-        ltr: [0, 0]
+        ltr: [0, 0],
+        'rtl-column-reverse': [-5, -5],
+        'ltr-column-reverse': [-5, 0],
     },
     'vertical-rl': {
         rtl: [-5, -5],
-        ltr: [-5, 0]
+        ltr: [-5, 0],
+        'rtl-column-reverse': [0, -5],
+        'ltr-column-reverse': [0, 0],
     }
 }
 
 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) {
@@ -109,8 +116,11 @@ writingModes.forEach(function(writingMode) {
             container.setAttribute('data-expected-height', containerSize[1]);
 
             var flowDirection = direction;
-            if (flexFlow.indexOf("-reverse") != -1)
+            // row-reverse is the same as flipping the writing direction.
+            if (flexFlow == "row-reverse")
                 flowDirection = direction == "rtl" ? "ltr" : "rtl";
+            else if (flexFlow == "column-reverse")
+                flowDirection = direction + "-column-reverse";
 
             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][flowDirection]) + '></div>\n' +
index 7e79604..07dee53 100644 (file)
@@ -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
 
index 193df4e..34d872e 100644 (file)
@@ -227,8 +227,7 @@ var logicalExpectations = {
 }
 
 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'];
 
index 0879e0f..ee3c762 100644 (file)
@@ -102,6 +102,14 @@ if (window.layoutTestController)
 </div>
 
 <div style="position: relative;">
+<div class="flexbox column-reverse">
+  <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0); margin: auto 200px auto 150px;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
+  <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+</div>
+</div>
+
+<div style="position: relative;">
 <div class="flexbox column rtl">
   <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="height: -webkit-flex(1 0 0); margin: auto 100px auto 50px;"></div>
   <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
@@ -110,6 +118,14 @@ if (window.layoutTestController)
 </div>
 
 <div style="position: relative;">
+<div class="flexbox column-reverse rtl">
+  <div data-expected-height="150" data-offset-y="450" data-offset-x="480" style="height: -webkit-flex(1 0 0); margin: auto 100px auto 50px;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
+  <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="height: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+</div>
+</div>
+
+<div style="position: relative;">
 <div data-expected-height="600" class="flexbox vertical-lr column">
   <div data-offset-x="0" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
   <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style="width: -webkit-flex(1 0 200px); max-width: 100px; margin: 100px 0 50px 0;"></div>
@@ -117,11 +133,25 @@ if (window.layoutTestController)
 </div>
 
 <div style="position: relative;">
+<div data-expected-height="600" class="flexbox vertical-lr column-reverse">
+  <div data-offset-x="100" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
+  <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="width: -webkit-flex(1 0 200px); max-width: 100px; margin: 100px 0 50px 0;"></div>
+</div>
+</div>
+
+<div style="position: relative;">
 <div data-expected-height="600" class="flexbox vertical-rl column">
   <div data-offset-x="100" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px; margin-bottom: 100px"></div>
   <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="width: -webkit-flex(1 0 200px); max-width: 100px; margin: 100px 0 50px 0;"></div>
 </div>
 </div>
 
+<div style="position: relative;">
+<div data-expected-height="600" class="flexbox vertical-rl column-reverse">
+  <div data-offset-x="0" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px; margin-bottom: 100px"></div>
+  <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style="width: -webkit-flex(1 0 200px); max-width: 100px; margin: 100px 0 50px 0;"></div>
+</div>
+</div>
+
 </body>
 </html>
\ No newline at end of file
index 0da70f0..32c51be 100644 (file)
@@ -1,3 +1,22 @@
+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.
+
+        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:
+
 2011-12-02  Stephen Chenney  <schenney@chromium.org>
 
         Divide by zero for zero-length arcs
index 050c37a..b9a8ab2 100644 (file)
@@ -298,6 +298,13 @@ LayoutUnit RenderFlexibleBox::flowAwareBorderStart() const
     return isLeftToRightFlow() ? borderTop() : borderBottom();
 }
 
+LayoutUnit RenderFlexibleBox::flowAwareBorderEnd() const
+{
+    if (isHorizontalFlow())
+        return isLeftToRightFlow() ? borderRight() : borderLeft();
+    return isLeftToRightFlow() ? borderBottom() : borderTop();
+}
+
 LayoutUnit RenderFlexibleBox::flowAwareBorderBefore() const
 {
     switch (transformedWritingMode()) {
@@ -326,6 +333,13 @@ LayoutUnit RenderFlexibleBox::flowAwarePaddingStart() const
     return isLeftToRightFlow() ? paddingTop() : paddingBottom();
 }
 
+LayoutUnit RenderFlexibleBox::flowAwarePaddingEnd() const
+{
+    if (isHorizontalFlow())
+        return isLeftToRightFlow() ? paddingRight() : paddingLeft();
+    return isLeftToRightFlow() ? paddingBottom() : paddingTop();
+}
+
 LayoutUnit RenderFlexibleBox::flowAwarePaddingBefore() const
 {
     switch (transformedWritingMode()) {
@@ -555,6 +569,24 @@ static bool hasPackingSpace(LayoutUnit availableFreeSpace, float totalPositiveFl
     return availableFreeSpace > 0 && !totalPositiveFlexibility;
 }
 
+static LayoutUnit initialPackingOffset(LayoutUnit availableFreeSpace, float totalPositiveFlexibility, EFlexPack flexPack)
+{
+    if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility)) {
+        if (flexPack == PackEnd)
+            return availableFreeSpace;
+        if (flexPack == PackCenter)
+            return availableFreeSpace / 2;
+    }
+    return 0;
+}
+
+static LayoutUnit packingSpaceBetweenChildren(LayoutUnit availableFreeSpace, float totalPositiveFlexibility, EFlexPack flexPack, size_t numberOfChildren)
+{
+    if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility) && flexPack == PackJustify && numberOfChildren > 1)
+        return availableFreeSpace / (numberOfChildren - 1);
+    return 0;
+}
+
 void RenderFlexibleBox::setLogicalOverrideSize(RenderBox* child, LayoutUnit childPreferredSize)
 {
     // FIXME: Rename setOverrideWidth/setOverrideHeight to setOverrideLogicalWidth/setOverrideLogicalHeight.
@@ -567,13 +599,7 @@ void RenderFlexibleBox::setLogicalOverrideSize(RenderBox* child, LayoutUnit chil
 void RenderFlexibleBox::layoutAndPlaceChildren(FlexOrderIterator& iterator, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility)
 {
     LayoutUnit startEdge = flowAwareBorderStart() + flowAwarePaddingStart();
-
-    if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility)) {
-        if (style()->flexPack() == PackEnd)
-            startEdge += availableFreeSpace;
-        else if (style()->flexPack() == PackCenter)
-            startEdge += availableFreeSpace / 2;
-    }
+    startEdge += initialPackingOffset(availableFreeSpace, totalPositiveFlexibility, style()->flexPack());
 
     LayoutUnit logicalTop = flowAwareBorderBefore() + flowAwarePaddingBefore();
     LayoutUnit totalMainExtent = mainAxisExtent();
@@ -608,15 +634,45 @@ void RenderFlexibleBox::layoutAndPlaceChildren(FlexOrderIterator& iterator, cons
         setFlowAwareLocationForChild(child, IntPoint(logicalLeft, logicalTop + flowAwareMarginBeforeForChild(child)));
         startEdge += childMainExtent + flowAwareMarginEndForChild(child);
 
-        if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility) && style()->flexPack() == PackJustify && childSizes.size() > 1)
-            startEdge += availableFreeSpace / (childSizes.size() - 1);
+        startEdge += packingSpaceBetweenChildren(availableFreeSpace, totalPositiveFlexibility, style()->flexPack(), childSizes.size());
 
         if (isColumnFlow())
             setLogicalHeight(startEdge);
     }
+
+    if (style()->flexFlow() == FlowColumnReverse) {
+        // We have to do an extra pass for column-reverse to reposition the flex items since the start depends
+        // on the height of the flexbox, which we only know after we've positioned all the flex items.
+        computeLogicalHeight();
+        layoutColumnReverse(iterator, childSizes, availableFreeSpace, totalPositiveFlexibility);
+    }
+
     alignChildren(iterator, maxAscent);
 }
 
+void RenderFlexibleBox::layoutColumnReverse(FlexOrderIterator& iterator, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility)
+{
+    // This is similar to the logic in layoutAndPlaceChildren, except we place the children
+    // starting from the end of the flexbox. We also don't need to layout anything since we're
+    // just moving the children to a new position.
+    LayoutUnit mainAxisOffset = logicalHeight() - flowAwareBorderEnd() - flowAwarePaddingEnd();
+    mainAxisOffset -= initialPackingOffset(availableFreeSpace, totalPositiveFlexibility, style()->flexPack());
+
+    LayoutUnit crossAxisOffset = flowAwareBorderBefore() + flowAwarePaddingBefore();
+    size_t i = 0;
+    for (RenderBox* child = iterator.first(); child; child = iterator.next(), ++i) {
+        mainAxisOffset -= mainAxisExtentForChild(child) + flowAwareMarginEndForChild(child);
+
+        LayoutRect oldRect = child->frameRect();
+        setFlowAwareLocationForChild(child, IntPoint(mainAxisOffset, crossAxisOffset + flowAwareMarginBeforeForChild(child)));
+        if (!selfNeedsLayout() && child->checkForRepaintDuringLayout())
+            child->repaintDuringLayoutIfMoved(oldRect);
+
+        mainAxisOffset -= flowAwareMarginStartForChild(child);
+        mainAxisOffset -= packingSpaceBetweenChildren(availableFreeSpace, totalPositiveFlexibility, style()->flexPack(), childSizes.size());
+    }
+}
+
 void RenderFlexibleBox::adjustAlignmentForChild(RenderBox* child, LayoutUnit delta)
 {
     LayoutRect oldRect = child->frameRect();
index ea63cc4..aac8470 100644 (file)
@@ -68,9 +68,11 @@ private:
     WritingMode transformedWritingMode() const;
     LayoutUnit flowAwareBorderStart() const;
     LayoutUnit flowAwareBorderBefore() const;
+    LayoutUnit flowAwareBorderEnd() const;
     LayoutUnit crossAxisBorderAndPaddingExtent() const;
     LayoutUnit flowAwarePaddingStart() const;
     LayoutUnit flowAwarePaddingBefore() const;
+    LayoutUnit flowAwarePaddingEnd() const;
     LayoutUnit flowAwareMarginStartForChild(RenderBox* child) const;
     LayoutUnit flowAwareMarginEndForChild(RenderBox* child) const;
     LayoutUnit flowAwareMarginBeforeForChild(RenderBox* child) const;
@@ -96,6 +98,7 @@ private:
     bool runFreeSpaceAllocationAlgorithm(FlexOrderIterator&, LayoutUnit& availableFreeSpace, float& totalPositiveFlexibility, float& totalNegativeFlexibility, InflexibleFlexItemSize&, WTF::Vector<LayoutUnit>& childSizes);
     void setLogicalOverrideSize(RenderBox* child, LayoutUnit childPreferredSize);
     void layoutAndPlaceChildren(FlexOrderIterator&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility);
+    void layoutColumnReverse(FlexOrderIterator&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility);
     void alignChildren(FlexOrderIterator&, LayoutUnit maxAscent);
 };