- Revision
- 100365
- Author
- [email protected]
- Date
- 2011-11-15 16:29:12 -0800 (Tue, 15 Nov 2011)
Log Message
implement flex-align for flex-flow: column
https://bugs.webkit.org/show_bug.cgi?id=70754
Reviewed by David Hyatt.
Source/WebCore:
Tests: css3/flexbox/flex-align-column.html
css3/flexbox/line-wrapping.html
* rendering/RenderBox.cpp:
(WebCore::RenderBox::sizesToIntrinsicLogicalWidth):
When flexitems are column, they should size to the intrinsic width unless flex-flow is stretch.
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::alignChildrenBlockDirection):
This was just using the wrong, non-flow-aware method.
LayoutTests:
* css3/flexbox/flex-align-column-expected.txt: Added.
* css3/flexbox/flex-align-column.html: Added.
Tests the basic flex-align cases with column.
* css3/flexbox/line-wrapping-expected.txt: Added.
* css3/flexbox/line-wrapping.html: Added.
This tests that wrapping inside flexitems uses the correct width.
Notably, auto-sizing properly falls back on the initial containing block.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (100364 => 100365)
--- trunk/LayoutTests/ChangeLog 2011-11-16 00:27:08 UTC (rev 100364)
+++ trunk/LayoutTests/ChangeLog 2011-11-16 00:29:12 UTC (rev 100365)
@@ -1,3 +1,19 @@
+2011-10-28 Ojan Vafai <[email protected]>
+
+ implement flex-align for flex-flow: column
+ https://bugs.webkit.org/show_bug.cgi?id=70754
+
+ Reviewed by David Hyatt.
+
+ * css3/flexbox/flex-align-column-expected.txt: Added.
+ * css3/flexbox/flex-align-column.html: Added.
+ Tests the basic flex-align cases with column.
+
+ * css3/flexbox/line-wrapping-expected.txt: Added.
+ * css3/flexbox/line-wrapping.html: Added.
+ This tests that wrapping inside flexitems uses the correct width.
+ Notably, auto-sizing properly falls back on the initial containing block.
+
2011-11-15 Peter Kasting <[email protected]>
Mark another test as flakily crashing.
@@ -350,6 +366,18 @@
* css3/flexbox/flex-item-child-overflow-expected.html: Added.
* css3/flexbox/flex-item-child-overflow.html: Added.
+2011-10-28 Ojan Vafai <[email protected]>
+
+ Overflow and relayout are broken in the new flexboxes
+ https://bugs.webkit.org/show_bug.cgi?id=71161
+
+ Reviewed by David Hyatt.
+
+ * css3/flexbox/auto-height-dynamic-expected.txt: Added.
+ * css3/flexbox/auto-height-dynamic.html: Added.
+ * css3/flexbox/flex-item-child-overflow-expected.html: Added.
+ * css3/flexbox/flex-item-child-overflow.html: Added.
+
2011-11-15 Peter Kasting <[email protected]>
Fix expectations after r100276.
Added: trunk/LayoutTests/css3/flexbox/flex-align-column-expected.txt (0 => 100365)
--- trunk/LayoutTests/css3/flexbox/flex-align-column-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flex-align-column-expected.txt 2011-11-16 00:29:12 UTC (rev 100365)
@@ -0,0 +1,2 @@
+PASS
+PASS
Property changes on: trunk/LayoutTests/css3/flexbox/flex-align-column-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/flex-align-column.html (0 => 100365)
--- trunk/LayoutTests/css3/flexbox/flex-align-column.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flex-align-column.html 2011-11-16 00:29:12 UTC (rev 100365)
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+ margin: 0;
+}
+.flexbox {
+ width: 600px;
+ height: 240px;
+ display: -webkit-flexbox;
+ background-color: #aaa;
+ position: relative;
+ -webkit-flex-flow: column;
+}
+.vertical {
+ -webkit-writing-mode: vertical-lr;
+}
+.flexbox :nth-child(1) {
+ background-color: blue;
+}
+.flexbox :nth-child(2) {
+ background-color: green;
+}
+.flexbox :nth-child(3) {
+ background-color: red;
+}
+.flexbox :nth-child(4) {
+ background-color: yellow;
+}
+.flexbox :nth-child(5) {
+ background-color: purple;
+}
+.flexbox :nth-child(6) {
+ background-color: orange;
+}
+.flexbox :nth-child(7) {
+ background-color: lime;
+}
+</style>
+<script>
+if (window.layoutTestController)
+ layoutTestController.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkFlexBoxen()">
+
+<div class="flexbox">
+ <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="height: -webkit-flex(1);"></div>
+ <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-align: stretch; "></div>
+ <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-align: start; width: 20px;"></div>
+ <div data-offset-x=580 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-align: end; width: 20px;"></div>
+ <div data-offset-x=290 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-align: center; width: 20px;"></div>
+ <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-align: baseline; width: 20px;"></div>
+</div>
+
+<div class="flexbox vertical">
+ <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="width: -webkit-flex(1);"></div>
+ <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="width: -webkit-flex(1); -webkit-flex-align: stretch; "></div>
+ <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-align: start; height: 20px;"></div>
+ <div data-offset-y=220 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-align: end; height: 20px;"></div>
+ <div data-offset-y=110 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-align: center; height: 20px;"></div>
+ <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-align: baseline; height: 20px;"></div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
Property changes on: trunk/LayoutTests/css3/flexbox/flex-align-column.html
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/line-wrapping-expected.txt (0 => 100365)
--- trunk/LayoutTests/css3/flexbox/line-wrapping-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/line-wrapping-expected.txt 2011-11-16 00:29:12 UTC (rev 100365)
@@ -0,0 +1,15 @@
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
+ PASS
Property changes on: trunk/LayoutTests/css3/flexbox/line-wrapping-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/line-wrapping.html (0 => 100365)
--- trunk/LayoutTests/css3/flexbox/line-wrapping.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/line-wrapping.html 2011-11-16 00:29:12 UTC (rev 100365)
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+ width: 500px;
+ height: 500px;
+ margin: 0;
+ border: 1px solid;
+}
+.column {
+ -webkit-flex-flow: column;
+}
+.flexbox {
+ display: -webkit-flexbox;
+ background-color: gray;
+ position: relative;
+}
+.flexbox > div {
+ line-height: 0px;
+}
+.flexbox > div > div {
+ display: inline-block;
+ line-height: 0px;
+}
+.horizontal-tb {
+ -webkit-writing-mode: horizontal-tb;
+}
+.vertical-rl {
+ -webkit-writing-mode: vertical-rl;
+}
+.vertical-lr {
+ -webkit-writing-mode: vertical-lr;
+}
+
+.horizontal-tb.row, .horizontal-tb.fixed.column {
+ height: 100px;
+}
+.vertical-lr.row, .vertical-rl.row, .vertical-lr.fixed.column, .vertical-rl.fixed.column {
+ width: 100px;
+}
+
+.horizontal-tb.row > div {
+ width: -webkit-flex(1);
+}
+.vertical-lr.row > div, .vertical-rl.row > div {
+ height: -webkit-flex(1);
+}
+
+.horizontal-tb.column > div {
+ height: -webkit-flex(1);
+}
+.vertical-lr.column > div, .vertical-rl.column > div {
+ width: -webkit-flex(1);
+}
+
+.horizontal-tb.fixed {
+ width: 200px;
+}
+.vertical-lr.fixed, .vertical-rl.fixed {
+ height: 200px;
+}
+
+.horizontal-tb.flexbox > div > div {
+ height: 20px;
+}
+.vertical-lr.flexbox > div > div, .vertical-rl.flexbox > div > div {
+ width: 20px;
+}
+
+.horizontal-tb.fixed > div > div {
+ width: 40px;
+}
+.vertical-lr.fixed > div > div, .vertical-rl.fixed > div > div {
+ height: 40px;
+}
+
+.horizontal-tb.auto > div > div {
+ width: 100px;
+}
+.vertical-lr.auto > div > div, .vertical-rl.auto > div > div {
+ height: 100px;
+}
+
+.flexbox > :nth-child(1) {
+ background-color: lightblue;
+}
+.flexbox > :nth-child(2) {
+ background-color: pink;
+}
+.flexbox > div > :nth-child(1) {
+ background-color: blue;
+}
+.flexbox > div > :nth-child(2) {
+ background-color: green;
+}
+.flexbox > div > :nth-child(3) {
+ background-color: red;
+}
+.flexbox > div > :nth-child(4) {
+ background-color: yellow;
+}
+.flexbox > div > :nth-child(5) {
+ background-color: purple;
+}
+.flexbox > div > :nth-child(6) {
+ background-color: orange;
+}
+</style>
+<script>
+if (window.layoutTestController)
+ layoutTestController.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkFlexBoxen()">
+
+<div class="flexbox fixed row horizontal-tb">
+ <div data-expected-width=100 data-expected-height=100>
+ <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
+ </div>
+ <div data-expected-width=100 data-expected-height=40 style="-webkit-flex-align: start;">
+ <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=100></div>
+ </div>
+</div>
+
+<div class="flexbox fixed column horizontal-tb">
+ <div data-expected-width=200 data-expected-height=50>
+ <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
+ </div>
+ <div data-expected-width=200 data-expected-height=50 style="-webkit-flex-align: start;">
+ <div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=70 data-offset-x=0></div>
+ </div>
+</div>
+
+<div class="flexbox fixed column horizontal-tb">
+ <div data-expected-width=200 data-expected-height=50>
+ <div data-offset-y=0></div><div data-offset-y=0></div>
+ </div>
+ <div data-expected-width=80 data-expected-height=50 style="-webkit-flex-align: start;">
+ <div data-offset-y=50></div><div data-offset-y=50></div>
+ </div>
+</div>
+
+<div class="flexbox auto row horizontal-tb" data-expected-width=500>
+ <div data-expected-width=250 data-expected-height=100>
+ <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
+ </div>
+ <div data-expected-width=250 data-expected-height=40 style="-webkit-flex-align: start;">
+ <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=250></div>
+ </div>
+</div>
+
+<div data-expected-width=500 data-expected-height=0 class="flexbox auto column horizontal-tb">
+ <div data-expected-width=500 data-expected-height=0>
+ <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
+ </div>
+ <div data-expected-width=500 data-expected-height=0 style="-webkit-flex-align: start;">
+ <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
+ </div>
+</div>
+
+<!-- FIXME: All the vertical-lr cases are off by 4px in the x direction. See http://webkit.org/b/71193. -->
+
+<div class="flexbox fixed row vertical-lr">
+ <div data-expected-height data-expected-width=100>
+ <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
+ </div>
+ <div data-expected-height=100 data-expected-width=40 style="-webkit-flex-align: start;">
+ <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=100></div>
+ </div>
+</div>
+
+<div class="flexbox fixed column vertical-lr">
+ <div data-expected-height=200 data-expected-width=50>
+ <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
+ </div>
+ <div data-expected-height=200 data-expected-width=50 style="-webkit-flex-align: start;">
+ <div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=74 data-offset-y=0></div>
+ </div>
+</div>
+
+<div class="flexbox fixed column vertical-lr">
+ <div data-expected-height=200 data-expected-width=50>
+ <div data-offset-x=4></div><div data-offset-x=4></div>
+ </div>
+ <div data-expected-height=80 data-expected-width=50 style="-webkit-flex-align: start;">
+ <div data-offset-x=54></div><div data-offset-x=54></div>
+ </div>
+</div>
+
+<div class="flexbox auto row vertical-lr" data-expected-height=300>
+ <div data-expected-height=150 data-expected-width=100>
+ <div data-offset-x=4></div><div data-offset-x=24></div><div data-offset-x=44 data-offset-y=0></div>
+ </div>
+ <div data-expected-height=150 data-expected-width=60 style="-webkit-flex-align: start;">
+ <div data-offset-x=4></div><div data-offset-x=24></div><div data-offset-x=44 data-offset-y=150></div>
+ </div>
+</div>
+
+<div data-expected-height=500 data-expected-width=0 class="flexbox auto column vertical-lr">
+ <div data-expected-height=500 data-expected-width=0>
+ <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
+ </div>
+ <div data-expected-height=500 data-expected-width=0 style="-webkit-flex-align: start;">
+ <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
+ </div>
+</div>
+
+
+<div class="flexbox fixed row vertical-rl">
+ <div data-expected-height=100 data-expected-width=100>
+ <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
+ </div>
+ <div data-expected-height=100 data-expected-width=40 style="-webkit-flex-align: start;">
+ <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=100></div>
+ </div>
+</div>
+
+<div class="flexbox fixed column vertical-rl">
+ <div data-expected-height=200 data-expected-width=50>
+ <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
+ </div>
+ <div data-expected-height=200 data-expected-width=50 style="-webkit-flex-align: start;">
+ <div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=10 data-offset-y=0></div>
+ </div>
+</div>
+
+<div class="flexbox fixed column vertical-rl">
+ <div data-expected-height=200 data-expected-width=50>
+ <div data-offset-x=80></div><div data-offset-x=80></div>
+ </div>
+ <div data-expected-height=80 data-expected-width=50 style="-webkit-flex-align: start;">
+ <div data-offset-x=30></div><div data-offset-x=30></div>
+ </div>
+</div>
+
+<div class="flexbox auto row vertical-rl" data-expected-height=300>
+ <div data-expected-height=150 data-expected-width=100>
+ <div data-offset-x=80></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=0></div>
+ </div>
+ <div data-expected-height=150 data-expected-width=60 style="-webkit-flex-align: start;">
+ <div data-offset-x=80></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=150></div>
+ </div>
+</div>
+
+<!-- Not sure if these negative offsets are correct, but if there's a bug it's not a flexbox bug, e.g. the following html gets the same negative offsets:
+<div style="-webkit-writing-mode:vertical-rl;"><div style="width: 0"><div style="display: inline-block; height: 40px; width: 20px; background-color: blue;"></div></div></div>
+-->
+<div data-expected-height=500 data-expected-width=0 class="flexbox auto column vertical-rl">
+ <div data-expected-height=500 data-expected-width=0>
+ <div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-40 data-offset-y=0></div>
+ </div>
+ <div data-expected-height=500 data-expected-width=0 style="-webkit-flex-align: start;">
+ <div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-40 data-offset-y=0></div>
+ </div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
Property changes on: trunk/LayoutTests/css3/flexbox/line-wrapping.html
___________________________________________________________________
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (100364 => 100365)
--- trunk/Source/WebCore/ChangeLog 2011-11-16 00:27:08 UTC (rev 100364)
+++ trunk/Source/WebCore/ChangeLog 2011-11-16 00:29:12 UTC (rev 100365)
@@ -1,3 +1,21 @@
+2011-10-28 Ojan Vafai <[email protected]>
+
+ implement flex-align for flex-flow: column
+ https://bugs.webkit.org/show_bug.cgi?id=70754
+
+ Reviewed by David Hyatt.
+
+ Tests: css3/flexbox/flex-align-column.html
+ css3/flexbox/line-wrapping.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::sizesToIntrinsicLogicalWidth):
+ When flexitems are column, they should size to the intrinsic width unless flex-flow is stretch.
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::alignChildrenBlockDirection):
+ This was just using the wrong, non-flow-aware method.
+
2011-11-15 Jochen Eisinger <[email protected]>
Rename ReferrerPolicy to clarify its meaning
@@ -162,6 +180,30 @@
-Refactor flipping code. The behavior is the same, but the variable names are just
more correct.
+2011-10-28 Ojan Vafai <[email protected]>
+
+ Overflow and relayout are broken in the new flexboxes
+ https://bugs.webkit.org/show_bug.cgi?id=71161
+
+ Reviewed by David Hyatt.
+
+ Tests: css3/flexbox/auto-height-dynamic.html
+ css3/flexbox/flex-item-child-overflow-expected.html
+ css3/flexbox/flex-item-child-overflow.html
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::layoutBlock):
+ -Always set the logical height to 0 to start with to ensure we don't
+ use the height from the previous layout when we are computing the
+ intrinsic size of the flexbox.
+ -Call computeOverflow after computeLogicalHeight so that flex-item's children's
+ overflow is properly rendered.
+
+ (WebCore::RenderFlexibleBox::layoutAndPlaceChildrenInlineDirection):
+ -Now that we setLogicalHeight in layoutBlock, we no longer need to do it here.
+ -Refactor flipping code. The behavior is the same, but the variable names are just
+ more correct.
+
2011-11-15 Nate Chapin <[email protected]>
CachedResourceRequest is now the only SubresourceLoaderClient
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (100364 => 100365)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2011-11-16 00:27:08 UTC (rev 100364)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2011-11-16 00:29:12 UTC (rev 100365)
@@ -1801,6 +1801,9 @@
return true;
}
+ if (parent()->isFlexibleBox())
+ return true;
+
// Flexible horizontal boxes lay out children at their intrinsic widths. Also vertical boxes
// that don't stretch their kids lay out their children at their intrinsic widths.
// FIXME: Think about block-flow here.
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (100364 => 100365)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-11-16 00:27:08 UTC (rev 100364)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-11-16 00:29:12 UTC (rev 100365)
@@ -721,7 +721,7 @@
Length height = isHorizontalFlow() ? child->style()->height() : child->style()->width();
if (height.isAuto()) {
// FIXME: Clamp to max-height once it's spec'ed (should we align towards the start or center?).
- LayoutUnit stretchedHeight = logicalHeightForChild(child) + RenderFlexibleBox::availableAlignmentSpaceForChild(child);
+ LayoutUnit stretchedHeight = crossAxisExtentForChild(child) + RenderFlexibleBox::availableAlignmentSpaceForChild(child);
if (isHorizontalFlow())
child->setHeight(stretchedHeight);
else
