Title: [93996] trunk
- Revision
- 93996
- Author
- [email protected]
- Date
- 2011-08-29 11:53:54 -0700 (Mon, 29 Aug 2011)
Log Message
Implement -webkit-flex-pack for horizontal flexboxen
https://bugs.webkit.org/show_bug.cgi?id=66898
Reviewed by Ojan Vafai.
Source/WebCore:
Test: css3/flexbox/004.html
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::layoutHorizontalBlock):
(WebCore::hasPackingSpace):
(WebCore::RenderFlexibleBox::runFreeSpaceAllocationAlgorithmHorizontal):
LayoutTests:
* css3/flexbox/004-expected.txt: Added.
* css3/flexbox/004.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (93995 => 93996)
--- trunk/LayoutTests/ChangeLog 2011-08-29 18:46:30 UTC (rev 93995)
+++ trunk/LayoutTests/ChangeLog 2011-08-29 18:53:54 UTC (rev 93996)
@@ -1,3 +1,13 @@
+2011-08-29 Tony Chang <[email protected]>
+
+ Implement -webkit-flex-pack for horizontal flexboxen
+ https://bugs.webkit.org/show_bug.cgi?id=66898
+
+ Reviewed by Ojan Vafai.
+
+ * css3/flexbox/004-expected.txt: Added.
+ * css3/flexbox/004.html: Added.
+
2011-08-29 Sam Weinig <[email protected]>
Update tests after landing Event constructors.
Added: trunk/LayoutTests/css3/flexbox/004-expected.txt (0 => 93996)
--- trunk/LayoutTests/css3/flexbox/004-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/004-expected.txt 2011-08-29 18:53:54 UTC (rev 93996)
@@ -0,0 +1,8 @@
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+
Property changes on: trunk/LayoutTests/css3/flexbox/004-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/004.html (0 => 93996)
--- trunk/LayoutTests/css3/flexbox/004.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/004.html 2011-08-29 18:53:54 UTC (rev 93996)
@@ -0,0 +1,78 @@
+<!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="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
+ <div data-expected-width="100" data-offset-x="100" style="width: 100px;"></div>
+ <div data-expected-width="100" data-offset-x="200" style="width: 100px;"></div>
+</div>
+
+<div class="horizontal-box" style="-webkit-flex-pack: end">
+ <div data-expected-width="100" data-offset-x="300" style="width: -webkit-flex(0 0 100px);"></div>
+ <div data-expected-width="100" data-offset-x="400" style="width: 100px;"></div>
+ <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
+</div>
+
+<div class="horizontal-box" style="-webkit-flex-pack: center">
+ <div data-expected-width="100" data-offset-x="150" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
+ <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
+ <div data-expected-width="100" data-offset-x="350" style="width: 100px;"></div>
+</div>
+
+<div class="horizontal-box" style="-webkit-flex-pack: justify">
+ <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
+ <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
+ <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
+</div>
+
+<!-- If there's only one child, we pack start. -->
+<div class="horizontal-box" style="-webkit-flex-pack: justify">
+ <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
+</div>
+
+<!-- The flex-pack does nothing here because the margin:auto eats all the available space. -->
+<div class="horizontal-box" style="-webkit-flex-pack: end">
+ <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div>
+ <div data-expected-width="100" data-offset-x="100" style="width: 100px; margin-right: auto"></div>
+ <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
+</div>
+
+<!-- The flex-pack does nothing here because we are shrinking. -->
+<div class="horizontal-box" style="-webkit-flex-pack: end">
+ <div data-expected-width="200" data-offset-x="0" style="width: -webkit-flex(0 1 300px);"></div>
+ <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div>
+ <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div>
+</div>
+
+</body>
+</html>
Property changes on: trunk/LayoutTests/css3/flexbox/004.html
___________________________________________________________________
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (93995 => 93996)
--- trunk/Source/WebCore/ChangeLog 2011-08-29 18:46:30 UTC (rev 93995)
+++ trunk/Source/WebCore/ChangeLog 2011-08-29 18:53:54 UTC (rev 93996)
@@ -1,3 +1,17 @@
+2011-08-29 Tony Chang <[email protected]>
+
+ Implement -webkit-flex-pack for horizontal flexboxen
+ https://bugs.webkit.org/show_bug.cgi?id=66898
+
+ Reviewed by Ojan Vafai.
+
+ Test: css3/flexbox/004.html
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::layoutHorizontalBlock):
+ (WebCore::hasPackingSpace):
+ (WebCore::RenderFlexibleBox::runFreeSpaceAllocationAlgorithmHorizontal):
+
2011-08-29 Alexey Proskuryakov <[email protected]>
Windows build fix.
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (93995 => 93996)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-08-29 18:46:30 UTC (rev 93995)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-08-29 18:53:54 UTC (rev 93996)
@@ -138,7 +138,6 @@
ASSERT(inflexibleItems.size() > 0);
}
- // FIXME: Distribute leftover space to the packing space (second distribution round).
// FIXME: Handle distribution of vertical space (third distribution round).
}
@@ -181,6 +180,11 @@
}
}
+static bool hasPackingSpace(LayoutUnit availableFreeSpace, float totalPositiveFlexibility)
+{
+ return availableFreeSpace > 0 && !totalPositiveFlexibility;
+}
+
// Returns true if we successfully ran the algorithm and sized the flex items.
bool RenderFlexibleBox::runFreeSpaceAllocationAlgorithmHorizontal(LayoutUnit& availableFreeSpace, float& totalPositiveFlexibility, float& totalNegativeFlexibility, InflexibleFlexItemSize& inflexibleItems)
{
@@ -226,6 +230,14 @@
// Now that we know the sizes, layout and position the flex items.
LayoutUnit xOffset = borderLeft() + paddingLeft();
+
+ if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility)) {
+ if (style()->flexPack() == PackEnd)
+ xOffset += availableFreeSpace;
+ else if (style()->flexPack() == PackCenter)
+ xOffset += availableFreeSpace / 2;
+ }
+
LayoutUnit yOffset = borderTop() + paddingTop();
setHeight(0);
size_t i = 0;
@@ -247,6 +259,9 @@
xOffset += child->marginLeft();
child->setLocation(IntPoint(xOffset, yOffset));
xOffset += child->width() + child->marginRight();
+
+ if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility) && style()->flexPack() == PackJustify && childSizes.size() > 1)
+ xOffset += availableFreeSpace / (childSizes.size() - 1);
}
return true;
}
_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes
