Title: [96776] trunk
- Revision
- 96776
- Author
- [email protected]
- Date
- 2011-10-05 17:51:56 -0700 (Wed, 05 Oct 2011)
Log Message
force margin:auto to 0 in flex items
https://bugs.webkit.org/show_bug.cgi?id=69475
Reviewed by Ojan Vafai.
Source/WebCore:
The spec used to say the margin had a value of flex(1 0 0), but changed to just be 0.
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::computePreferredLogicalWidth):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildrenInlineDirection):
LayoutTests:
* css3/flexbox/002.html:
* css3/flexbox/003.html:
* css3/flexbox/004.html:
* css3/flexbox/writing-modes.html:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (96775 => 96776)
--- trunk/LayoutTests/ChangeLog 2011-10-06 00:44:27 UTC (rev 96775)
+++ trunk/LayoutTests/ChangeLog 2011-10-06 00:51:56 UTC (rev 96776)
@@ -1,3 +1,15 @@
+2011-10-05 Tony Chang <[email protected]>
+
+ force margin:auto to 0 in flex items
+ https://bugs.webkit.org/show_bug.cgi?id=69475
+
+ Reviewed by Ojan Vafai.
+
+ * css3/flexbox/002.html:
+ * css3/flexbox/003.html:
+ * css3/flexbox/004.html:
+ * css3/flexbox/writing-modes.html:
+
2011-10-05 Dean Jackson <[email protected]>
Computed style for filter property
Modified: trunk/LayoutTests/css3/flexbox/002.html (96775 => 96776)
--- trunk/LayoutTests/css3/flexbox/002.html 2011-10-06 00:44:27 UTC (rev 96775)
+++ trunk/LayoutTests/css3/flexbox/002.html 2011-10-06 00:51:56 UTC (rev 96776)
@@ -43,55 +43,55 @@
<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. -->
+<!-- Margins set to auto have a value of 0. -->
<div class="flexbox">
- <div data-expected-width="100" style="width: -webkit-flex(1 0 0);"></div>
+ <div data-expected-width="200" 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 data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 0 0)"></div>
</div>
<div class="flexbox">
- <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 data-expected-width="133" style="width: -webkit-flex(1 0 0);"></div>
+ <div data-expected-width="233" data-offset-x="133" style="width: -webkit-flex(1 0 100px); margin-left: auto;"></div>
+ <div data-expected-width="133" data-offset-x="366" style="width: -webkit-flex(1 0 0); margin-right: 100px"></div>
</div>
-<!-- margin: auto has a negative flex of 0 -->
+<!-- Margins set to auto don't have negative flex either. -->
<div class="flexbox">
<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. -->
+<!-- Margins set to auto don't center in flexboxen. -->
<div class="flexbox">
- <div data-expected-width="300px" data-offset-x="150" style="width: -webkit-flex(0 0 300px); margin: 0 auto;"></div>
+ <div data-expected-width="300px" data-offset-x="0" style="width: -webkit-flex(0 0 300px); margin: 0 auto;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="400px" data-offset-x="100" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
+ <div data-expected-width="600px" data-offset-x="0" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="400" data-offset-x="100" style="width: -webkit-flex(4); margin: 0 auto;">
+ <div data-expected-width="600" data-offset-x="0" style="width: -webkit-flex(4); margin: 0 auto;">
<div style="width: 100px; height: 100%;"></div>
</div>
</div>
<div class="flexbox" 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 data-expected-width="300" data-offset-x="0" style="width: -webkit-flex(1); margin: 0 auto;"></div>
+ <div data-expected-width="300" data-offset-x="300" style="width: -webkit-flex(1); margin: 0 auto;"></div>
</div>
<div class="flexbox" 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 data-expected-width="300" data-offset-x="100" style="width: -webkit-flex(1 0 0px); margin: 0 auto;"></div>
+ <div data-expected-width="300" data-offset-x="400" style="width: -webkit-flex(1 0 0em); margin: 0 auto;"></div>
</div>
<div class="flexbox">
- <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 data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
+ <div data-expected-width="350" data-offset-x="75" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
+ <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
</div>
</body>
Modified: trunk/LayoutTests/css3/flexbox/003.html (96775 => 96776)
--- trunk/LayoutTests/css3/flexbox/003.html 2011-10-06 00:44:27 UTC (rev 96775)
+++ trunk/LayoutTests/css3/flexbox/003.html 2011-10-06 00:51:56 UTC (rev 96776)
@@ -64,9 +64,9 @@
</div>
<div class="flexbox">
- <div data-expected-width="100" data-offset-x="100" style="width: -webkit-flex(1 0 0); margin: 0 auto; max-width: 100px;"></div>
- <div data-expected-width="200" data-offset-x="300" style="width: -webkit-flex(2 0 0);"></div>
- <div data-expected-width="100" data-offset-x="500" style="width: -webkit-flex(1 0 0);"></div>
+ <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto; max-width: 100px;"></div>
+ <div data-expected-width="333" data-offset-x="100" style="width: -webkit-flex(2 0 0);"></div>
+ <div data-expected-width="167" data-offset-x="433" style="width: -webkit-flex(1 0 0);"></div>
</div>
<!-- min-width and max-width take priority over the preferred size. -->
Modified: trunk/LayoutTests/css3/flexbox/004.html (96775 => 96776)
--- trunk/LayoutTests/css3/flexbox/004.html 2011-10-06 00:44:27 UTC (rev 96775)
+++ trunk/LayoutTests/css3/flexbox/004.html 2011-10-06 00:51:56 UTC (rev 96776)
@@ -60,10 +60,10 @@
<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. -->
+<!-- margin:auto does nothing here. -->
<div class="flexbox" 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="300" style="width: 100px;"></div>
+ <div data-expected-width="100" data-offset-x="400" style="width: 100px; margin-right: auto"></div>
<div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
</div>
Modified: trunk/LayoutTests/css3/flexbox/writing-modes.html (96775 => 96776)
--- trunk/LayoutTests/css3/flexbox/writing-modes.html 2011-10-06 00:44:27 UTC (rev 96775)
+++ trunk/LayoutTests/css3/flexbox/writing-modes.html 2011-10-06 00:51:56 UTC (rev 96776)
@@ -56,21 +56,21 @@
<body _onload_="checkFlexBoxen()">
<div class="flexbox rtl">
- <div data-expected-width="50" data-offset-x="500" 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="100" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
+ <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
+ <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
+ <div data-expected-width="75" data-offset-x="100" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
</div>
<div class="flexbox rtl">
- <div data-expected-width="50" data-offset-x="500" 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="0" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
+ <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
+ <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
+ <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
</div>
<div class="flexbox rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 50px;">
- <div data-expected-width="50" data-offset-x="550" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
- <div data-expected-width="300" data-offset-x="200" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
- <div data-expected-width="50" data-offset-x="50" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
+ <div data-expected-width="75" data-offset-x="575" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
+ <div data-expected-width="350" data-offset-x="225" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
+ <div data-expected-width="75" data-offset-x="50" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
</div>
<div style="position:relative">
@@ -116,33 +116,33 @@
<div style="position:relative">
<div class="flexbox vertical-lr">
- <div data-expected-height="100" data-offset-y="100" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
- <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
- <div data-expected-height="100" data-offset-y="500" style="height: -webkit-flex(1 0 0);"></div>
+ <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
+ <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
+ <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
- <div data-expected-height="50" data-offset-y="50" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
- <div data-expected-height="400" data-offset-y="150" style="height: -webkit-flex(2 0 auto);"><div style="width:200px;height:300px;background-color:orange;"></div></div>
- <div data-expected-height="50" data-offset-y="550" style="height: -webkit-flex(1 0 0);"></div>
+ <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
+ <div data-expected-height="450" data-offset-y="75" style="height: -webkit-flex(2 0 auto);"><div style="width:200px;height:300px;background-color:orange;"></div></div>
+ <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0);"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
- <div data-expected-height="50" data-offset-y="50" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
- <div data-expected-height="400" data-offset-y="150" class="bt" style="height: -webkit-flex(2 0 auto);"><div style="width:200px;height:300px;background-color:orange;"></div></div>
- <div data-expected-height="50" data-offset-y="550" style="height: -webkit-flex(1 0 0);"></div>
+ <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
+ <div data-expected-height="450" data-offset-y="75" class="bt" style="height: -webkit-flex(2 0 auto);"><div style="width:200px;height:300px;background-color:orange;"></div></div>
+ <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0);"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
- <div data-expected-height="100" data-offset-y="100" style="height: -webkit-flex(1 0 0);-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
- <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
- <div data-expected-height="100" data-offset-y="500" style="height: -webkit-flex(1 0 0);"></div>
+ <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
+ <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
+ <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
</div>
</div>
@@ -156,9 +156,9 @@
<div style="position:relative">
<div class="flexbox vertical-lr rtl">
- <div data-expected-height="50" data-offset-y="500" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
- <div data-expected-height="300" data-offset-y="150" class="bt" style="height: -webkit-flex(2 0 0); padding: 100px 0;"></div>
- <div data-expected-height="50" data-offset-y="0" style="height: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
+ <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
+ <div data-expected-height="350" data-offset-y="175" class="bt" style="height: -webkit-flex(2 0 0); padding: 100px 0;"></div>
+ <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
</div>
</div>
@@ -201,17 +201,17 @@
<div style="position: relative;">
<div data-expected-width="600" style="direction: rtl; display: -webkit-flexbox; margin-left: 10px; margin-right:20px;" class="flexbox">
- <div data-expected-width="50" data-offset-x="510" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
- <div data-expected-width="300" data-offset-x="160" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
- <div data-expected-width="50" data-offset-x="10" style="width: -webkit-flex(1 0 0);margin-right: 100px;"></div>
+ <div data-expected-width="75" data-offset-x="535" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
+ <div data-expected-width="350" data-offset-x="185" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
+ <div data-expected-width="75" data-offset-x="10" style="width: -webkit-flex(1 0 0);margin-right: 100px;"></div>
</div>
</div>
<div style="position: relative;">
<div data-expected-width="700" style="direction: rtl; display: -webkit-flexbox; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox ">
- <div data-expected-width="50" data-offset-x="540" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
- <div data-expected-width="300" data-offset-x="190" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
- <div data-expected-width="50" data-offset-x="40" style="width: -webkit-flex(1 0 0);margin-right: 100px;"></div>
+ <div data-expected-width="75" data-offset-x="565" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
+ <div data-expected-width="350" data-offset-x="215" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
+ <div data-expected-width="75" data-offset-x="40" style="width: -webkit-flex(1 0 0);margin-right: 100px;"></div>
</div>
</div>
Modified: trunk/Source/WebCore/ChangeLog (96775 => 96776)
--- trunk/Source/WebCore/ChangeLog 2011-10-06 00:44:27 UTC (rev 96775)
+++ trunk/Source/WebCore/ChangeLog 2011-10-06 00:51:56 UTC (rev 96776)
@@ -1,3 +1,16 @@
+2011-10-05 Tony Chang <[email protected]>
+
+ force margin:auto to 0 in flex items
+ https://bugs.webkit.org/show_bug.cgi?id=69475
+
+ Reviewed by Ojan Vafai.
+
+ The spec used to say the margin had a value of flex(1 0 0), but changed to just be 0.
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::computePreferredLogicalWidth):
+ (WebCore::RenderFlexibleBox::layoutAndPlaceChildrenInlineDirection):
+
2011-10-05 Dean Jackson <[email protected]>
Computed style for filter property
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (96775 => 96776)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-10-06 00:44:27 UTC (rev 96775)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-10-06 00:51:56 UTC (rev 96776)
@@ -392,11 +392,6 @@
preferredLogicalWidth += child->style()->marginBottom().calcMinValue(flexboxAvailableLogicalWidth);
}
- if (marginStartStyleForChild(child).isAuto())
- totalPositiveFlexibility += 1;
- if (marginEndStyleForChild(child).isAuto())
- totalPositiveFlexibility += 1;
-
preferredLogicalWidth += logicalBorderAndPaddingWidthForChild(child);
preferredLogicalWidth += preferredLogicalContentWidthForFlexItem(child);
@@ -487,9 +482,9 @@
setFlowAwareLogicalHeight(std::max(flowAwareLogicalHeight(), flowAwareBorderBefore() + flowAwarePaddingBefore() + flowAwareMarginBeforeForChild(child) + flowAwareLogicalHeightForChild(child) + flowAwareMarginAfterForChild(child) + flowAwarePaddingAfter() + flowAwareBorderAfter() + scrollbarLogicalHeight()));
if (marginStartStyleForChild(child).isAuto())
- setFlowAwareMarginStartForChild(child, availableFreeSpace > 0 ? lroundf(availableFreeSpace / totalPositiveFlexibility) : 0);
+ setFlowAwareMarginStartForChild(child, 0);
if (marginEndStyleForChild(child).isAuto())
- setFlowAwareMarginEndForChild(child, availableFreeSpace > 0 ? lroundf(availableFreeSpace / totalPositiveFlexibility) : 0);
+ setFlowAwareMarginEndForChild(child, 0);
startEdge += flowAwareMarginStartForChild(child);
_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes
