Diff
Modified: trunk/LayoutTests/ChangeLog (101896 => 101897)
--- trunk/LayoutTests/ChangeLog 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/ChangeLog 2011-12-03 03:50:24 UTC (rev 101897)
@@ -1,3 +1,27 @@
+2011-12-02 Tony Chang <[email protected]>
+
+ 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 <[email protected]>
Divide by zero for zero-length arcs
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt 2011-12-03 03:50:24 UTC (rev 101897)
@@ -22,6 +22,14 @@
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 @@
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 @@
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 @@
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
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-border.html (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-border.html 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-border.html 2011-12-03 03:50:24 UTC (rev 101897)
@@ -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'];
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt 2011-12-03 03:50:24 UTC (rev 101897)
@@ -6,3 +6,7 @@
PASS
PASS
PASS
+PASS
+PASS
+PASS
+PASS
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt 2011-12-03 03:50:24 UTC (rev 101897)
@@ -10,6 +10,10 @@
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 @@
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 @@
<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 @@
<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>
+
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html 2011-12-03 03:50:24 UTC (rev 101897)
@@ -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) {
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt 2011-12-03 03:50:24 UTC (rev 101897)
@@ -22,6 +22,14 @@
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 @@
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 @@
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 @@
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
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins.html (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-margins.html 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins.html 2011-12-03 03:50:24 UTC (rev 101897)
@@ -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'];
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt 2011-12-03 03:50:24 UTC (rev 101897)
@@ -10,6 +10,10 @@
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 @@
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 @@
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 @@
PASS
vertical-rl ltr row-reverse
PASS
+vertical-rl rtl column-reverse
+PASS
+vertical-rl ltr column-reverse
+PASS
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html 2011-12-03 03:50:24 UTC (rev 101897)
@@ -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)
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt 2011-12-03 03:50:24 UTC (rev 101897)
@@ -10,6 +10,10 @@
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 @@
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 @@
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 @@
PASS
vertical-rl ltr row-reverse
PASS
+vertical-rl rtl column-reverse
+PASS
+vertical-rl ltr column-reverse
+PASS
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html 2011-12-03 03:50:24 UTC (rev 101897)
@@ -73,25 +73,32 @@
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 @@
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' +
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt 2011-12-03 03:50:24 UTC (rev 101897)
@@ -22,6 +22,14 @@
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 @@
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 @@
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 @@
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
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-padding.html (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-padding.html 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-padding.html 2011-12-03 03:50:24 UTC (rev 101897)
@@ -227,8 +227,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'];
Modified: trunk/LayoutTests/css3/flexbox/flex-flow.html (101896 => 101897)
--- trunk/LayoutTests/css3/flexbox/flex-flow.html 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/LayoutTests/css3/flexbox/flex-flow.html 2011-12-03 03:50:24 UTC (rev 101897)
@@ -102,6 +102,14 @@
</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 @@
</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 @@
</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
Modified: trunk/Source/WebCore/ChangeLog (101896 => 101897)
--- trunk/Source/WebCore/ChangeLog 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/Source/WebCore/ChangeLog 2011-12-03 03:50:24 UTC (rev 101897)
@@ -1,3 +1,22 @@
+2011-12-02 Tony Chang <[email protected]>
+
+ 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 <[email protected]>
Divide by zero for zero-length arcs
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (101896 => 101897)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-12-03 03:50:24 UTC (rev 101897)
@@ -298,6 +298,13 @@
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 @@
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 @@
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,14 +599,8 @@
void RenderFlexibleBox::layoutAndPlaceChildren(FlexOrderIterator& iterator, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility)
{
LayoutUnit startEdge = flowAwareBorderStart() + flowAwarePaddingStart();
+ startEdge += initialPackingOffset(availableFreeSpace, totalPositiveFlexibility, style()->flexPack());
- if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility)) {
- if (style()->flexPack() == PackEnd)
- startEdge += availableFreeSpace;
- else if (style()->flexPack() == PackCenter)
- startEdge += availableFreeSpace / 2;
- }
-
LayoutUnit logicalTop = flowAwareBorderBefore() + flowAwarePaddingBefore();
LayoutUnit totalMainExtent = mainAxisExtent();
LayoutUnit maxAscent = 0, maxDescent = 0; // Used when flex-align: baseline.
@@ -608,15 +634,45 @@
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();
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (101896 => 101897)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2011-12-03 03:13:43 UTC (rev 101896)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2011-12-03 03:50:24 UTC (rev 101897)
@@ -68,9 +68,11 @@
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 @@
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);
};
