Diff
Modified: trunk/LayoutTests/ChangeLog (111213 => 111214)
--- trunk/LayoutTests/ChangeLog 2012-03-19 19:08:01 UTC (rev 111213)
+++ trunk/LayoutTests/ChangeLog 2012-03-19 19:11:14 UTC (rev 111214)
@@ -1,3 +1,17 @@
+2012-03-19 Tony Chang <[email protected]>
+
+ flex-item-align: stretch should only grow, never shrink
+ https://bugs.webkit.org/show_bug.cgi?id=80882
+
+ Reviewed by Ojan Vafai.
+
+ * css3/flexbox/child-overflow-expected.html:
+ * css3/flexbox/child-overflow.html: For cases that overflow the height, we now just overflow rather than reducing the height.
+ * css3/flexbox/flex-align-stretch-expected.txt:
+ * css3/flexbox/flex-align-stretch.html: New test cases.
+ * platform/chromium/test_expectations.txt: Mark as failing on Windows
+ because of mock scrollbar rendering bug.
+
2012-03-19 Vsevolod Vlasov <[email protected]>
Web Inspector: Implement snippets evaluation.
Modified: trunk/LayoutTests/css3/flexbox/child-overflow-expected.html (111213 => 111214)
--- trunk/LayoutTests/css3/flexbox/child-overflow-expected.html 2012-03-19 19:08:01 UTC (rev 111213)
+++ trunk/LayoutTests/css3/flexbox/child-overflow-expected.html 2012-03-19 19:11:14 UTC (rev 111214)
@@ -4,14 +4,17 @@
<style>
.container {
display: inline-block;
- margin-right: 5px;
+ margin-right: 30px;
+ width: 100px;
+ height: 100px;
+ border: 5px solid pink;
+ position: relative;
}
.container > div {
- border: 5px solid pink;
overflow: auto;
+ width: 100px;
height: 100px;
- width: 100px;
}
.container > div > div {
@@ -19,25 +22,39 @@
height: 120px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
}
+
+p {
+ margin-bottom: 30px;
+}
</style>
</head>
<body>
- <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p>
-</body>
+ <p>Scrollbars should work in all the flexboxes. The first and third
+ columns should overflow the logical height. Each row should be aligned
+ to the same corner.</p>
+
+ <div class="container bottomLeft"><div style="height: auto; position: absolute; bottom: 0"><div></div></div></div>
+ <div class="container bottomLeft"><div><div></div></div></div>
+ <div class="container bottomLeft"><div style="height: auto; position: absolute; bottom: 0"><div></div></div></div>
+ <div class="container bottomLeft"><div><div></div></div></div>
+ <br>
+ <div class="container topRight"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0"><div></div></div></div>
+ <div class="container topRight"><div><div></div></div></div>
+ <div class="container topRight"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0"><div></div></div></div>
+ <div class="container topRight"><div><div></div></div></div>
+ <br>
+ <div class="container"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute;"><div></div></div></div>
+ <div class="container"><div><div></div></div></div>
+ <div class="container"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute;"><div></div></div></div>
+ <div class="container"><div><div></div></div></div>
+ <br>
+ <div class="container"><div style="height: auto"><div></div></div></div>
+ <div class="container"><div><div></div></div></div>
+ <div class="container"><div style="height: auto"><div></div></div></div>
+ <div class="container"><div><div></div></div></div>
+
<script>
-var origins = ['', 'bottomLeft', 'topRight', ''];
-origins.forEach(function(origin) {
- for (var i = 0; i < 4; ++i) {
- var containerClass = 'container ' + origin;
- document.body.innerHTML +=
- "<div class='" + containerClass + "'>" +
- "<div><div></div></div>" +
- "</div>";
- }
- document.body.innerHTML += "<br>";
-});
-
Array.prototype.forEach.call(document.querySelectorAll('.bottomLeft'), function(element) {
element.firstChild.scrollTop = 1000;
});
Modified: trunk/LayoutTests/css3/flexbox/child-overflow.html (111213 => 111214)
--- trunk/LayoutTests/css3/flexbox/child-overflow.html 2012-03-19 19:08:01 UTC (rev 111213)
+++ trunk/LayoutTests/css3/flexbox/child-overflow.html 2012-03-19 19:11:14 UTC (rev 111214)
@@ -4,7 +4,7 @@
<style>
.container {
display: inline-block;
- margin-right: 5px;
+ margin-right: 30px;
}
.horizontal-tb {
@@ -55,13 +55,19 @@
height: 120px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
}
+
+p {
+ margin-bottom: 30px;
+}
</style>
</head>
<body>
- <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p>
+ <p>Scrollbars should work in all the flexboxes. The first and third
+ columns should overflow the logical height. Each row should be aligned
+ to the same corner.</p>
</body>
<script>
-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
+var writingModes = ['horizontal-bt', 'vertical-rl', 'vertical-lr', 'horizontal-tb'];
var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
writingModes.forEach(function(writingMode) {
flexDirections.forEach(function(flexDirection) {
@@ -72,7 +78,7 @@
"<div class='" + flexboxClass + "'>" +
"<div style='width: -webkit-flex(0 1 auto); height: -webkit-flex(0 1 auto)'><div></div></div>" +
"</div>" +
- "</div>";
+ "</div> ";
});
document.body.innerHTML += "<br>";
});
Modified: trunk/LayoutTests/css3/flexbox/flex-align-stretch-expected.txt (111213 => 111214)
--- trunk/LayoutTests/css3/flexbox/flex-align-stretch-expected.txt 2012-03-19 19:08:01 UTC (rev 111213)
+++ trunk/LayoutTests/css3/flexbox/flex-align-stretch-expected.txt 2012-03-19 19:11:14 UTC (rev 111214)
@@ -2,3 +2,5 @@
PASS
PASS
PASS
+PASS
+PASS
Modified: trunk/LayoutTests/css3/flexbox/flex-align-stretch.html (111213 => 111214)
--- trunk/LayoutTests/css3/flexbox/flex-align-stretch.html 2012-03-19 19:08:01 UTC (rev 111213)
+++ trunk/LayoutTests/css3/flexbox/flex-align-stretch.html 2012-03-19 19:11:14 UTC (rev 111214)
@@ -82,4 +82,18 @@
</div>
</div>
+<!-- When overflowing the height, flex-align: stretch doesn't cause the flex item to get smaller. -->
+<div class="flexbox" style="height: 50px; width: 600px;">
+ <div data-expected-height="60" style="background-color: yellow; width: 300px">
+ <div data-expected-height="60" style="height: 60px; width: 10px; background-color: orange"></div>
+ </div>
+</div>
+
+<!-- In the column case, the width of the flex item is constrained by the width of the flexbox, so flex-align: stretch doesn't change the width. -->
+<div class="flexbox" style="-webkit-flex-direction: column; width: 100px;">
+ <div data-expected-width="100" data-expected-height="50" style="background-color: yellow;">
+ <div data-expected-width="200" style="height: 50px; width: 200px; background-color: orange"></div>
+ </div>
+</div>
+
</html>
Modified: trunk/LayoutTests/platform/chromium/test_expectations.txt (111213 => 111214)
--- trunk/LayoutTests/platform/chromium/test_expectations.txt 2012-03-19 19:08:01 UTC (rev 111213)
+++ trunk/LayoutTests/platform/chromium/test_expectations.txt 2012-03-19 19:11:14 UTC (rev 111214)
@@ -3937,3 +3937,5 @@
// flaky tests
BUGWK81493 LINUX : svg/custom/js-late-gradient-creation.svg = PASS IMAGE
+
+BUGWK77368 WIN : css3/flexbox/child-overflow.html = IMAGE
Modified: trunk/Source/WebCore/ChangeLog (111213 => 111214)
--- trunk/Source/WebCore/ChangeLog 2012-03-19 19:08:01 UTC (rev 111213)
+++ trunk/Source/WebCore/ChangeLog 2012-03-19 19:11:14 UTC (rev 111214)
@@ -1,3 +1,19 @@
+2012-03-19 Tony Chang <[email protected]>
+
+ flex-item-align: stretch should only grow, never shrink
+ https://bugs.webkit.org/show_bug.cgi?id=80882
+
+ Reviewed by Ojan Vafai.
+
+ New test cases in css3/flexbox/flex-align-stretch.html.
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::alignChildren): Move stretch code into a separate function.
+ (WebCore::RenderFlexibleBox::alignChildStretch): Add an early return if our height is shrinking.
+ (WebCore):
+ * rendering/RenderFlexibleBox.h:
+ (RenderFlexibleBox):
+
2012-03-19 Vsevolod Vlasov <[email protected]>
Web Inspector: Implement snippets evaluation.
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (111213 => 111214)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-03-19 19:08:01 UTC (rev 111213)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-03-19 19:11:14 UTC (rev 111214)
@@ -974,25 +974,7 @@
ASSERT_NOT_REACHED();
break;
case AlignStretch: {
- if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {
- LayoutUnit logicalHeightBefore = child->logicalHeight();
- LayoutUnit stretchedLogicalHeight = child->logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child);
- child->setLogicalHeight(stretchedLogicalHeight);
- child->computeLogicalHeight();
-
- if (child->logicalHeight() != logicalHeightBefore) {
- child->setOverrideHeight(child->logicalHeight());
- child->setLogicalHeight(0);
- child->setChildNeedsLayout(true);
- child->layoutIfNeeded();
- }
- } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
- // FIXME: Handle min-width and max-width.
- LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
- child->setOverrideWidth(std::max(0, childWidth));
- child->setChildNeedsLayout(true);
- child->layoutIfNeeded();
- }
+ applyStretchAlignmentToChild(child, lineCrossAxisExtent);
// Since wrap-reverse flips cross start and cross end, strech children should be aligned with the cross end.
if (style()->flexWrap() == FlexWrapReverse)
adjustAlignmentForChild(child, availableAlignmentSpaceForChild(lineCrossAxisExtent, child));
@@ -1029,6 +1011,32 @@
}
}
+void RenderFlexibleBox::applyStretchAlignmentToChild(RenderBox* child, LayoutUnit lineCrossAxisExtent)
+{
+ if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {
+ LayoutUnit logicalHeightBefore = child->logicalHeight();
+ LayoutUnit stretchedLogicalHeight = child->logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child);
+ if (stretchedLogicalHeight < logicalHeightBefore)
+ return;
+
+ child->setLogicalHeight(stretchedLogicalHeight);
+ child->computeLogicalHeight();
+
+ if (child->logicalHeight() != logicalHeightBefore) {
+ child->setOverrideHeight(child->logicalHeight());
+ child->setLogicalHeight(0);
+ child->setChildNeedsLayout(true);
+ child->layoutIfNeeded();
+ }
+ } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
+ // FIXME: Handle min-width and max-width.
+ LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
+ child->setOverrideWidth(std::max(0, childWidth));
+ child->setChildNeedsLayout(true);
+ child->layoutIfNeeded();
+ }
+}
+
void RenderFlexibleBox::flipForRightToLeftColumn(FlexOrderIterator& iterator)
{
if (style()->isLeftToRightDirection() || !isColumnFlow())
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (111213 => 111214)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2012-03-19 19:08:01 UTC (rev 111213)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2012-03-19 19:11:14 UTC (rev 111214)
@@ -112,6 +112,7 @@
void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace);
void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
void alignChildren(const OrderedFlexItemList&, LayoutUnit lineCrossAxisExtent, LayoutUnit maxAscent);
+ void applyStretchAlignmentToChild(RenderBox*, LayoutUnit lineCrossAxisExtent);
void flipForRightToLeftColumn(FlexOrderIterator&);
void flipForWrapReverse(FlexOrderIterator&, const WrapReverseContext&);
};
