Diff
Modified: trunk/LayoutTests/ChangeLog (93546 => 93547)
--- trunk/LayoutTests/ChangeLog 2011-08-22 21:46:58 UTC (rev 93546)
+++ trunk/LayoutTests/ChangeLog 2011-08-22 21:49:06 UTC (rev 93547)
@@ -1,3 +1,15 @@
+2011-08-22 Tony Chang <[email protected]>
+
+ handle child margin values when flexing
+ https://bugs.webkit.org/show_bug.cgi?id=65887
+
+ Reviewed by David Hyatt.
+
+ * css3/flexbox/002-expected.txt: Added.
+ * css3/flexbox/002.html: Added.
+ * css3/flexbox/resources/flexbox.js:
+ (checkHorizontalBoxen):
+
2011-08-22 Peter Kasting <[email protected]>
[chromium] Disable compositing tests for Leopard.
Added: trunk/LayoutTests/css3/flexbox/002-expected.txt (0 => 93547)
--- trunk/LayoutTests/css3/flexbox/002-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/002-expected.txt 2011-08-22 21:49:06 UTC (rev 93547)
@@ -0,0 +1,11 @@
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+
Property changes on: trunk/LayoutTests/css3/flexbox/002-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/002.html (0 => 93547)
--- trunk/LayoutTests/css3/flexbox/002.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/002.html 2011-08-22 21:49:06 UTC (rev 93547)
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+ margin: 0;
+}
+.horizontal-box {
+ width: 600px;
+ display: -webkit-flexbox;
+ background-color: #aaa;
+ position: relative;
+}
+.horizontal-box div {
+ height: 20px;
+ border: 0;
+}
+
+.horizontal-box :nth-child(1) {
+ background-color: blue;
+}
+.horizontal-box :nth-child(2) {
+ background-color: green;
+}
+.horizontal-box :nth-child(3) {
+ background-color: red;
+}
+</style>
+<script>
+if (window.layoutTestController)
+ layoutTestController.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkHorizontalBoxen()">
+<div class="horizontal-box">
+ <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
+ <div data-expected-width="100" data-offset-x="250" style="width: 100px; margin: 0 50px;"></div>
+ <div data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 0 0)"></div>
+</div>
+
+<!-- Margins set to auto have a positive flex of 1. In this example, the left and right margin should each be 100px. -->
+<div class="horizontal-box">
+ <div data-expected-width="100" style="width: -webkit-flex(1 0 0);"></div>
+ <div data-expected-width="200" data-offset-x="200" style="width: 200px; margin: 0 auto;"></div>
+ <div data-expected-width="100" data-offset-x="500" style="width: -webkit-flex(1 0 0)"></div>
+</div>
+
+<div class="horizontal-box">
+ <div data-expected-width="100" style="width: -webkit-flex(1 0 0);"></div>
+ <div data-expected-width="200" data-offset-x="200" style="width: -webkit-flex(1 0 100px); margin-left: auto;"></div>
+ <div data-expected-width="100" data-offset-x="400" style="width: -webkit-flex(1 0 0); margin-right: 100px"></div>
+</div>
+
+<!-- margin: auto has a negative flex of 0 -->
+<div class="horizontal-box">
+ <div data-expected-width="150" style="width: -webkit-flex(1 1 300px);"></div>
+ <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
+ <div data-expected-width="150" data-offset-x="450" style="width: -webkit-flex(1 1 300px);"></div>
+</div>
+
+<!-- The centering use case. -->
+<div class="horizontal-box">
+ <div data-expected-width="300px" data-offset-x="150" style="width: -webkit-flex(0 0 300px); margin: 0 auto;"></div>
+</div>
+
+<div class="horizontal-box">
+ <div data-expected-width="400px" data-offset-x="100" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
+</div>
+
+<div class="horizontal-box">
+ <div data-expected-width="400" data-offset-x="100" style="width: -webkit-flex(3); margin: 0 auto;">
+ <div style="width: 100px; height: 100%;"></div>
+ </div>
+</div>
+
+<div class="horizontal-box" style="margin: 100px;">
+ <div data-expected-width="100" data-offset-x="100" style="width: -webkit-flex(1); margin: 0 auto;"></div>
+ <div data-expected-width="100" data-offset-x="400" style="width: -webkit-flex(1); margin: 0 auto;"></div>
+</div>
+
+<div class="horizontal-box" style="padding: 100px;">
+ <div data-expected-width="100" data-offset-x="200" style="width: -webkit-flex(1 0 0px); margin: 0 auto;"></div>
+ <div data-expected-width="100" data-offset-x="500" style="width: -webkit-flex(1 0 0em); margin: 0 auto;"></div>
+</div>
+
+<div class="horizontal-box">
+ <div data-expected-width="50" data-offset-x="50" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
+ <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
+ <div data-expected-width="50" data-offset-x="550" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
+</div>
+
+</body>
+</html>
Property changes on: trunk/LayoutTests/css3/flexbox/002.html
___________________________________________________________________
Added: svn:eol-style
Modified: trunk/LayoutTests/css3/flexbox/resources/flexbox.js (93546 => 93547)
--- trunk/LayoutTests/css3/flexbox/resources/flexbox.js 2011-08-22 21:46:58 UTC (rev 93546)
+++ trunk/LayoutTests/css3/flexbox/resources/flexbox.js 2011-08-22 21:49:06 UTC (rev 93547)
@@ -16,9 +16,17 @@
var expectedWidth = child.getAttribute && child.getAttribute("data-expected-width");
if (child.offsetWidth && expectedWidth) {
if (child.offsetWidth != parseInt(expectedWidth)) {
- failures += "Expected " + expectedWidth + " but got " + child.offsetWidth + ". ";
+ failures += "Expected " + expectedWidth + " for width, but got " + child.offsetWidth + ". ";
}
}
+
+ var expectedOffset = child.getAttribute && child.getAttribute("data-offset-x");
+ if (child.offsetLeft && expectedOffset) {
+ if (child.offsetLeft != parseInt(expectedOffset)) {
+ failures += "Expected " + expectedOffset + " for offsetLeft, but got " + child.offsetLeft + ". ";
+ }
+ }
+
child = child.nextSibling;
}
Modified: trunk/Source/WebCore/ChangeLog (93546 => 93547)
--- trunk/Source/WebCore/ChangeLog 2011-08-22 21:46:58 UTC (rev 93546)
+++ trunk/Source/WebCore/ChangeLog 2011-08-22 21:49:06 UTC (rev 93547)
@@ -1,3 +1,21 @@
+2011-08-22 Tony Chang <[email protected]>
+
+ handle child margin values when flexing
+ https://bugs.webkit.org/show_bug.cgi?id=65887
+
+ Reviewed by David Hyatt.
+
+ Test: css3/flexbox/002.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::computeLogicalWidth):
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::layoutHorizontalBlock):
+ (WebCore::RenderFlexibleBox::computePreferredSize): If the margin is
+ auto, treat it as flex(1 0 0).
+ * rendering/RenderObject.cpp:
+ (WebCore::RenderObject::isFlexibleBoxIncludingDeprecated): Added.
+
2011-08-22 Nat Duca <[email protected]>
[chromium] Make compositor context current before querying for extensions
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (93546 => 93547)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2011-08-22 21:46:58 UTC (rev 93546)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2011-08-22 21:49:06 UTC (rev 93547)
@@ -1630,7 +1630,7 @@
computeInlineDirectionMargins(cb, containerLogicalWidth, logicalWidth());
if (!hasPerpendicularContainingBlock && containerLogicalWidth && containerLogicalWidth != (logicalWidth() + marginStart() + marginEnd())
- && !isFloating() && !isInline() && !cb->isDeprecatedFlexibleBox())
+ && !isFloating() && !isInline() && !cb->isFlexibleBoxIncludingDeprecated())
cb->setMarginEndForChild(this, containerLogicalWidth - logicalWidth() - cb->marginStartForChild(this));
}
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (93546 => 93547)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-08-22 21:46:58 UTC (rev 93546)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-08-22 21:49:06 UTC (rev 93547)
@@ -148,9 +148,14 @@
setHeight(std::max(height(), borderTop() + paddingTop() + child->marginTop() + child->height() + child->marginBottom() + paddingBottom() + borderBottom() + horizontalScrollbarHeight()));
- // FIXME: Handle child margins.
+ if (child->style()->marginLeft().isAuto())
+ child->setMarginLeft(availableFreeSpace > 0 ? lroundf(availableFreeSpace / totalPositiveFlexibility) : 0);
+ if (child->style()->marginRight().isAuto())
+ child->setMarginRight(availableFreeSpace > 0 ? lroundf(availableFreeSpace / totalPositiveFlexibility) : 0);
+
+ xOffset += child->marginLeft();
child->setLocation(IntPoint(xOffset, yOffset));
- xOffset += child->width();
+ xOffset += child->width() + child->marginRight();
}
// FIXME: Distribute leftover space to the packing space (second distribution round).
@@ -176,12 +181,16 @@
child->setChildNeedsLayout(true);
child->layoutIfNeeded();
- // FIXME: Margins and paddings set to auto have a positive flexibility of 1.
preferredSize += preferredSizeForMarginsAndPadding(child->style()->marginLeft(), flexboxAvailableLogicalWidth);
preferredSize += preferredSizeForMarginsAndPadding(child->style()->marginRight(), flexboxAvailableLogicalWidth);
preferredSize += preferredSizeForMarginsAndPadding(child->style()->paddingLeft(), flexboxAvailableLogicalWidth);
preferredSize += preferredSizeForMarginsAndPadding(child->style()->paddingRight(), flexboxAvailableLogicalWidth);
+ if (child->style()->marginLeft().isAuto())
+ totalPositiveFlexibility += 1;
+ if (child->style()->marginRight().isAuto())
+ totalPositiveFlexibility += 1;
+
preferredSize += child->borderLeft() + child->borderRight();
preferredSize += preferredFlexItemContentWidth(child);
Modified: trunk/Source/WebCore/rendering/RenderObject.h (93546 => 93547)
--- trunk/Source/WebCore/rendering/RenderObject.h 2011-08-22 21:46:58 UTC (rev 93546)
+++ trunk/Source/WebCore/rendering/RenderObject.h 2011-08-22 21:49:06 UTC (rev 93547)
@@ -753,6 +753,15 @@
virtual bool isFlexibleBox() const { return false; }
#endif
+ bool isFlexibleBoxIncludingDeprecated() const
+ {
+#if ENABLE(CSS3_FLEXBOX)
+ return isFlexibleBox() || isDeprecatedFlexibleBox();
+#else
+ return isDeprecatedFlexibleBox();
+#endif
+ }
+
virtual bool isCombineText() const { return false; }
virtual int caretMinOffset() const;
