Log Message
auto margins on flexbox should allocate space in the cross direction https://bugs.webkit.org/show_bug.cgi?id=86913
Reviewed by Ojan Vafai. Source/WebCore: Test: css3/flexbox/auto-margins.html * rendering/RenderFlexibleBox.cpp: (WebCore::RenderFlexibleBox::hasAutoMarginsInCrossAxis): (WebCore): (WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis): (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): If we have flex-align: baseline and auto margins, we ignore flex-align: baseline. (WebCore::RenderFlexibleBox::alignChildren): auto margins apply before flex-align. * rendering/RenderFlexibleBox.h: LayoutTests: * css3/flexbox/auto-margins-expected.html: Added. * css3/flexbox/auto-margins.html: Added. These are the test cases in the spec. * css3/flexbox/flex-align-vertical-writing-mode.html: Fix tests with auto margins and add more tests. Also reduce the height so it's easier to see the test cases (these vertical tests don't check the height). * css3/flexbox/flex-align.html: Fix tests with auto margins and add more tests. * css3/flexbox/flex-flow-auto-margins.html: Fix results now that we handle auto in the cross direction.
Modified Paths
- trunk/LayoutTests/ChangeLog
- trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html
- trunk/LayoutTests/css3/flexbox/flex-align.html
- trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html
- trunk/Source/WebCore/ChangeLog
- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp
- trunk/Source/WebCore/rendering/RenderFlexibleBox.h
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (118278 => 118279)
--- trunk/LayoutTests/ChangeLog 2012-05-24 00:18:55 UTC (rev 118278)
+++ trunk/LayoutTests/ChangeLog 2012-05-24 00:19:40 UTC (rev 118279)
@@ -1,3 +1,17 @@
+2012-05-23 Tony Chang <[email protected]>
+
+ auto margins on flexbox should allocate space in the cross direction
+ https://bugs.webkit.org/show_bug.cgi?id=86913
+
+ Reviewed by Ojan Vafai.
+
+ * css3/flexbox/auto-margins-expected.html: Added.
+ * css3/flexbox/auto-margins.html: Added. These are the test cases in the spec.
+ * css3/flexbox/flex-align-vertical-writing-mode.html: Fix tests with auto margins and add more tests.
+ Also reduce the height so it's easier to see the test cases (these vertical tests don't check the height).
+ * css3/flexbox/flex-align.html: Fix tests with auto margins and add more tests.
+ * css3/flexbox/flex-flow-auto-margins.html: Fix results now that we handle auto in the cross direction.
+
2012-05-23 Joshua Bell <[email protected]>
[Chromium] Marking a pair of fast/history layout tests as flaky (TEXT).
Added: trunk/LayoutTests/css3/flexbox/auto-margins-expected.html (0 => 118279)
--- trunk/LayoutTests/css3/flexbox/auto-margins-expected.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/auto-margins-expected.html 2012-05-24 00:19:40 UTC (rev 118279)
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+#circles, #circles div {
+ border: 1em solid blue;
+ border-radius:50%;
+ margin: auto;
+}
+
+#circles { width:9em; height:9em; }
+
+</style>
+</head>
+<body>
+<p>These tests are from the spec: <a href=""
+
+<p>The word OK should be centered vertically and horizontally.</p>
+<div style="width: 4em; height: 4em; background: silver">
+ <table style="width: 100%; height: 100%;"><tr><td style="text-align: center">OK</td></tr></table>
+</div>
+
+<div style="width: 4em; height: 4em; margin-top: 10px; background: silver; -webkit-writing-mode: vertical-rl">
+ <table style="width: 100%; height: 100%;"><tr><td style="text-align: center">OK</td></tr></table>
+</div>
+
+<p>You should see 3 blue concentric circles.</p>
+<div id="circles">
+ <div style="width: 5em; height: 5em; margin-top: 1em;">
+ <div style="width: 1em; height: 1em; margin-top: 1em;"></div>
+ </div>
+</div>
+
+<p>The computed style of each margin should not be 0.<br>OK: PASS<br>Vertical OK: PASS</p>
+</body>
+</html>
Added: trunk/LayoutTests/css3/flexbox/auto-margins.html (0 => 118279)
--- trunk/LayoutTests/css3/flexbox/auto-margins.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/auto-margins.html 2012-05-24 00:19:40 UTC (rev 118279)
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+#circles, #circles div {
+ display: -webkit-flex;
+ width: -webkit-calc(100% - 4em);
+ height: -webkit-calc(100% - 4em);
+ border: 1em solid blue;
+ border-radius:50%;
+ margin: auto;
+}
+
+#circles { width:9em; height:9em; }
+
+</style>
+</head>
+<body>
+<p>These tests are from the spec: <a href=""
+
+<p>The word OK should be centered vertically and horizontally.</p>
+<div style="display: -webkit-flex; width: 4em; height: 4em; background: silver">
+ <p id="ok" style="margin: auto">OK</p>
+</div>
+
+<div style="display: -webkit-flex; width: 4em; height: 4em; margin-top: 10px; background: silver; -webkit-writing-mode: vertical-rl">
+ <p id="okVertical" style="margin: auto">OK</p>
+</div>
+
+<p>You should see 3 blue concentric circles.</p>
+<div id="circles"><div><div></div></div></div>
+
+<p id="log">The computed style of each margin should not be 0.</p>
+<script>
+var okStyle = getComputedStyle(document.getElementById('ok'));
+document.getElementById("log").innerHTML += "<br>OK: " +
+ ((parseInt(okStyle.marginTop) && parseInt(okStyle.marginRight) && parseInt(okStyle.marginBottom) && parseInt(okStyle.marginLeft)) ? "PASS" : "FAIL");
+
+var okVerticalStyle = getComputedStyle(document.getElementById('okVertical'));
+document.getElementById("log").innerHTML += "<br>Vertical OK: " +
+ ((parseInt(okVerticalStyle.marginTop) && parseInt(okVerticalStyle.marginRight) && parseInt(okVerticalStyle.marginBottom) && parseInt(okVerticalStyle.marginLeft)) ? "PASS" : "FAIL");
+</script>
+</body>
+</html>
Modified: trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html (118278 => 118279)
--- trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html 2012-05-24 00:18:55 UTC (rev 118278)
+++ trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html 2012-05-24 00:19:40 UTC (rev 118279)
@@ -5,7 +5,7 @@
margin: 0;
}
.flexbox {
- height: 600px;
+ height: 100px;
display: -webkit-flex;
background-color: #aaa;
position: relative;
@@ -36,6 +36,18 @@
.flexbox :nth-child(7) {
background-color: lime;
}
+.flexbox :nth-child(8) {
+ background-color: lightblue;
+}
+.flexbox :nth-child(9) {
+ background-color: darkred;
+}
+.flexbox :nth-child(10) {
+ background-color: gold;
+}
+.flexbox :nth-child(11) {
+ background-color: salmon;
+}
</style>
<script>
if (window.layoutTestController)
@@ -52,8 +64,10 @@
</div>
<div class="flexbox">
- <div data-expected-width="60" data-offset-x="60" style="-webkit-flex: 1 0 0; width: 60px; margin: auto;"></div>
- <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
+ <div data-expected-width="60" data-offset-x="60" style="-webkit-flex: 1 0 0; width: 60px;"></div>
+ <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
+ <div data-expected-width="60" data-offset-x="30" style="-webkit-flex: 1 0 0; width: 60px; margin: auto;"></div>
+ <div data-expected-width="0" data-offset-x="60" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
<div data-expected-width="100" data-offset-x="10" style="-webkit-flex: 1 0 0; width: 100px; margin: 0 10px;"></div>
<div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: 0 20px 0 10px;"></div>
<div data-expected-width="90" data-offset-x="10" style="-webkit-flex: 1 0 0; margin: 0 20px 0 10px;"></div>
@@ -79,8 +93,9 @@
<div class="flexbox">
<div data-expected-width="0" data-offset-x="100" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start;"></div>
<div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px;"></div>
- <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 auto"></div>
- <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: auto 0 0"></div>
+ <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 auto"></div>
+ <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 auto 0 0"></div>
+ <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 0 0 auto"></div>
<div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 25px"></div>
<div data-expected-width="50" data-offset-x="30" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 20px 0 10px;"></div>
<div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
@@ -89,8 +104,9 @@
<div class="flexbox">
<div data-expected-width="0" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end;"></div>
<div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px;"></div>
- <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 auto"></div>
- <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: auto 0 0"></div>
+ <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 auto"></div>
+ <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 auto 0 0"></div>
+ <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 0 0 auto"></div>
<div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 25px"></div>
<div data-expected-width="50" data-offset-x="10" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 20px 0 10px;"></div>
<div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
@@ -100,7 +116,8 @@
<div data-expected-width="0" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center;"></div>
<div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px;"></div>
<div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 auto"></div>
- <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: auto 0 0"></div>
+ <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 auto 0 0"></div>
+ <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 0 0 auto"></div>
<div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 25px"></div>
<div data-expected-width="50" data-offset-x="20" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 20px 0 10px;"></div>
<div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
Modified: trunk/LayoutTests/css3/flexbox/flex-align.html (118278 => 118279)
--- trunk/LayoutTests/css3/flexbox/flex-align.html 2012-05-24 00:18:55 UTC (rev 118278)
+++ trunk/LayoutTests/css3/flexbox/flex-align.html 2012-05-24 00:19:40 UTC (rev 118279)
@@ -35,6 +35,18 @@
.flexbox :nth-child(7) {
background-color: lime;
}
+.flexbox :nth-child(8) {
+ background-color: lightblue;
+}
+.flexbox :nth-child(9) {
+ background-color: darkred;
+}
+.flexbox :nth-child(10) {
+ background-color: gold;
+}
+.flexbox :nth-child(11) {
+ background-color: salmon;
+}
</style>
<script>
if (window.layoutTestController)
@@ -51,9 +63,11 @@
</div>
<div class="flexbox">
- <div data-expected-height="60" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 60px; margin: auto 0;"></div>
- <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0; margin: auto 0 0;"></div>
- <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0; margin: auto 0;"></div>
+ <div data-expected-height="60" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 60px;"></div>
+ <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
+ <div data-expected-height="60" data-offset-y="30" style="-webkit-flex: 1 0 0; height: 60px; margin: auto 0;"></div>
+ <div data-expected-height="0" data-offset-y="120" style="-webkit-flex: 1 0 0; margin: auto 0 0;"></div>
+ <div data-expected-height="0" data-offset-y="60" style="-webkit-flex: 1 0 0; margin: auto 0;"></div>
<div data-expected-height="100" data-offset-y="10" style="-webkit-flex: 1 0 0; height: 100px; margin: 10px 0;"></div>
<div data-expected-height="50" data-offset-y="20" style="-webkit-flex: 1 0 0; height: 50px; margin: 20px 0 10px;"></div>
<div data-expected-height="90" data-offset-y="20" style="-webkit-flex: 1 0 0; margin: 20px 0 10px;"></div>
@@ -96,6 +110,9 @@
<div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; -webkit-flex: 1 0 0;"></div>
<div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div>
<div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
+ <div data-offset-y="50" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: auto 0;"></div>
+ <div data-offset-y="30" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: 30px 0 auto;"><div style="display:inline-block;"></div></div>
+ <div data-offset-y="80" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: auto 0 20px;"></div>
<div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; -webkit-flex: 1 0 0;"></div>
</div>
@@ -157,7 +174,9 @@
</div>
<div class="flexbox">
- <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0 0;"></div>
+ <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px;"></div>
+ <div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 70px;"></div>
+ <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0 0;"></div>
<div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 70px; margin: 0 0 auto"></div>
<div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 70px;"></div>
<div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
@@ -166,8 +185,9 @@
<div class="flexbox">
<div data-expected-height="0" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start;"></div>
<div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px;"></div>
- <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: auto 0"></div>
- <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: auto 0 0"></div>
+ <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: auto 0"></div>
+ <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: auto 0 0"></div>
+ <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: 0 0 auto"></div>
<div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: 25px 0"></div>
<div data-expected-height="50" data-offset-y="20" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: 20px 0 10px;"></div>
<div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
@@ -176,8 +196,9 @@
<div class="flexbox">
<div data-expected-height="0" data-offset-y="100" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end;"></div>
<div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px;"></div>
- <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: auto 0"></div>
+ <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: auto 0"></div>
<div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: auto 0 0"></div>
+ <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: 0 0 auto"></div>
<div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: 25px 0"></div>
<div data-expected-height="50" data-offset-y="40" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: 20px 0 10px;"></div>
<div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
@@ -187,7 +208,9 @@
<div data-expected-height="0" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center;"></div>
<div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px;"></div>
<div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: auto 0"></div>
- <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: auto 0 0"></div>
+ <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: auto 0 0"></div>
+ <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: 0 0 auto"></div>
+ <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: 0 0 auto"></div>
<div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: 25px 0"></div>
<div data-expected-height="50" data-offset-y="30" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: 20px 0 10px;"></div>
<div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
@@ -197,7 +220,8 @@
<div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
<div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
<div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
- <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0; -webkit-writing-mode: vertical-rl;"></div>
+ <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
+ <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0; -webkit-writing-mode: vertical-rl;"></div>
<div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px; -webkit-writing-mode: vertical-rl;"></div>
</div>
@@ -205,7 +229,8 @@
<div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px;"></div>
<div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px;"></div>
<div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px;"></div>
- <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0"></div>
+ <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px;"></div>
+ <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0"></div>
<div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
<div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
</div>
Modified: trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html (118278 => 118279)
--- trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html 2012-05-24 00:18:55 UTC (rev 118278)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html 2012-05-24 00:19:40 UTC (rev 118279)
@@ -137,17 +137,17 @@
container: physicalContainerSize,
flexbox: physicalFlexBoxPosition,
column: [20, 20, 80, 73],
- row: [20, 20, 40, 73],
+ row: [20, 20, 80, 73],
'column-reverse': [20, 20, 40, 73],
- 'row-reverse': [20, 20, 40, 23],
+ 'row-reverse': [20, 20, 80, 23],
},
ltr : {
container: physicalContainerSize,
flexbox: physicalFlexBoxPosition,
column: [20, 20, 80, 23],
- row: [20, 20, 40, 23],
+ row: [20, 20, 80, 23],
'column-reverse': [20, 20, 40, 23],
- 'row-reverse': [20, 20, 40, 73],
+ 'row-reverse': [20, 20, 80, 73],
}
},
'vertical-rl': {
@@ -155,17 +155,17 @@
container: physicalContainerSize,
flexbox: physicalFlexBoxPosition,
column: [20, 20, 80, 73],
- row: [20, 20, 120, 73],
+ row: [20, 20, 80, 73],
'column-reverse': [20, 20, 48, 73],
- 'row-reverse': [20, 20, 120, 23],
+ 'row-reverse': [20, 20, 80, 23],
},
ltr : {
container: physicalContainerSize,
flexbox: physicalFlexBoxPosition,
column: [20, 20, 80, 23],
- row: [20, 20, 120, 23],
+ row: [20, 20, 80, 23],
'column-reverse': [20, 20, 48, 23],
- 'row-reverse': [20, 20, 120, 73],
+ 'row-reverse': [20, 20, 80, 73],
}
}
}
@@ -176,17 +176,17 @@
container: [160, 140],
flexbox: [20, 10],
column: [20, 20, 22, 73],
- row: [20, 20, 22, 10],
+ row: [20, 20, 22, 73],
'column-reverse': [20, 20, 92, 10],
- 'row-reverse': [20, 20, 22, 10],
+ 'row-reverse': [20, 20, 22, 73],
},
ltr : {
container: [160, 140],
flexbox: [40, 10],
column: [20, 20, 118, 73],
- row: [20, 20, 118, 10],
+ row: [20, 20, 118, 73],
'column-reverse': [20, 20, 48, 10],
- 'row-reverse': [20, 20, 118, 10],
+ 'row-reverse': [20, 20, 118, 73],
}
},
'horizontal-bt': {
@@ -212,17 +212,17 @@
container: [140, 160],
flexbox: [10, 20],
column: [20, 20, 73, 22],
- row: [20, 20, 10, 22],
+ row: [20, 20, 73, 22],
'column-reverse': [20, 20, 23, 92],
- 'row-reverse': [20, 20, 10, 22],
+ 'row-reverse': [20, 20, 73, 22],
},
ltr : {
container: [140, 160],
flexbox: [10, 40],
column: [20, 20, 73, 118],
- row: [20, 20, 10, 118],
+ row: [20, 20, 73, 118],
'column-reverse': [20, 20, 23, 48],
- 'row-reverse': [20, 20, 10, 118],
+ 'row-reverse': [20, 20, 73, 118],
}
},
'vertical-rl': {
Modified: trunk/Source/WebCore/ChangeLog (118278 => 118279)
--- trunk/Source/WebCore/ChangeLog 2012-05-24 00:18:55 UTC (rev 118278)
+++ trunk/Source/WebCore/ChangeLog 2012-05-24 00:19:40 UTC (rev 118279)
@@ -1,3 +1,20 @@
+2012-05-23 Tony Chang <[email protected]>
+
+ auto margins on flexbox should allocate space in the cross direction
+ https://bugs.webkit.org/show_bug.cgi?id=86913
+
+ Reviewed by Ojan Vafai.
+
+ Test: css3/flexbox/auto-margins.html
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::hasAutoMarginsInCrossAxis):
+ (WebCore):
+ (WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis):
+ (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): If we have flex-align: baseline and auto margins, we ignore flex-align: baseline.
+ (WebCore::RenderFlexibleBox::alignChildren): auto margins apply before flex-align.
+ * rendering/RenderFlexibleBox.h:
+
2012-05-23 Kentaro Hara <[email protected]>
Unreviewed, rolling out r118120.
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (118278 => 118279)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-05-24 00:18:55 UTC (rev 118278)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-05-24 00:19:40 UTC (rev 118279)
@@ -688,12 +688,53 @@
}
}
+bool RenderFlexibleBox::hasAutoMarginsInCrossAxis(RenderBox* child)
+{
+ if (isHorizontalFlow())
+ return child->style()->marginTop().isAuto() || child->style()->marginBottom().isAuto();
+ return child->style()->marginLeft().isAuto() || child->style()->marginRight().isAuto();
+}
+
LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox* child)
{
LayoutUnit childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
return lineCrossAxisExtent - childCrossExtent;
}
+bool RenderFlexibleBox::updateAutoMarginsInCrossAxis(RenderBox* child, LayoutUnit availableAlignmentSpace)
+{
+ bool isHorizontal = isHorizontalFlow();
+ Length start = isHorizontal ? child->style()->marginTop() : child->style()->marginLeft();
+ Length end = isHorizontal ? child->style()->marginBottom() : child->style()->marginRight();
+ if (start.isAuto() && end.isAuto()) {
+ adjustAlignmentForChild(child, availableAlignmentSpace / 2);
+ if (isHorizontal) {
+ child->setMarginTop(availableAlignmentSpace / 2);
+ child->setMarginBottom(availableAlignmentSpace / 2);
+ } else {
+ child->setMarginLeft(availableAlignmentSpace / 2);
+ child->setMarginRight(availableAlignmentSpace / 2);
+ }
+ return true;
+ }
+ if (start.isAuto()) {
+ adjustAlignmentForChild(child, availableAlignmentSpace);
+ if (isHorizontal)
+ child->setMarginTop(availableAlignmentSpace);
+ else
+ child->setMarginLeft(availableAlignmentSpace);
+ return true;
+ }
+ if (end.isAuto()) {
+ if (isHorizontal)
+ child->setMarginBottom(availableAlignmentSpace);
+ else
+ child->setMarginRight(availableAlignmentSpace);
+ return true;
+ }
+ return false;
+}
+
LayoutUnit RenderFlexibleBox::marginBoxAscentForChild(RenderBox* child)
{
LayoutUnit ascent = child->firstLineBoxBaseline();
@@ -952,7 +993,7 @@
updateAutoMarginsInMainAxis(child, autoMarginOffset);
LayoutUnit childCrossAxisMarginBoxExtent;
- if (flexAlignForChild(child) == AlignBaseline) {
+ if (flexAlignForChild(child) == AlignBaseline && !hasAutoMarginsInCrossAxis(child)) {
LayoutUnit ascent = marginBoxAscentForChild(child);
LayoutUnit descent = (crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child)) - ascent;
@@ -1096,6 +1137,9 @@
for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = iterator.next()) {
ASSERT(child);
+ if (updateAutoMarginsInCrossAxis(child, availableAlignmentSpaceForChild(lineCrossAxisExtent, child)))
+ continue;
+
switch (flexAlignForChild(child)) {
case AlignAuto:
ASSERT_NOT_REACHED();
@@ -1139,7 +1183,7 @@
LayoutUnit minMarginAfterBaseline = minMarginAfterBaselines[lineNumber];
for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = iterator.next()) {
ASSERT(child);
- if (flexAlignForChild(child) == AlignBaseline && minMarginAfterBaseline)
+ if (flexAlignForChild(child) == AlignBaseline && !hasAutoMarginsInCrossAxis(child) && minMarginAfterBaseline)
adjustAlignmentForChild(child, minMarginAfterBaseline);
}
}
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (118278 => 118279)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2012-05-24 00:18:55 UTC (rev 118278)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2012-05-24 00:19:40 UTC (rev 118279)
@@ -103,6 +103,8 @@
void layoutFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&);
LayoutUnit autoMarginOffsetInMainAxis(const OrderedFlexItemList&, LayoutUnit& availableFreeSpace);
void updateAutoMarginsInMainAxis(RenderBox* child, LayoutUnit autoMarginOffset);
+ bool hasAutoMarginsInCrossAxis(RenderBox* child);
+ bool updateAutoMarginsInCrossAxis(RenderBox* child, LayoutUnit availableAlignmentSpace);
void repositionLogicalHeightDependentFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&, LayoutUnit& oldClientAfterEdge);
LayoutUnit availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox*);
_______________________________________________ webkit-changes mailing list [email protected] http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes
