auto margins on flexbox should allocate space in the cross direction
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 May 2012 00:19:40 +0000 (00:19 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 May 2012 00:19:40 +0000 (00:19 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@118279 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/auto-margins-expected.html [new file with mode: 0644]
LayoutTests/css3/flexbox/auto-margins.html [new file with mode: 0644]
LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html
LayoutTests/css3/flexbox/flex-align.html
LayoutTests/css3/flexbox/flex-flow-auto-margins.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.h

index 407622a..852237d 100644 (file)
@@ -1,3 +1,17 @@
+2012-05-23  Tony Chang  <tony@chromium.org>
+
+        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  <jsbell@chromium.org>
 
         [Chromium] Marking a pair of fast/history layout tests as flaky (TEXT).
diff --git a/LayoutTests/css3/flexbox/auto-margins-expected.html b/LayoutTests/css3/flexbox/auto-margins-expected.html
new file mode 100644 (file)
index 0000000..66d52c3
--- /dev/null
@@ -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="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">http://dev.w3.org/csswg/css3-flexbox/#auto-margins</a>.</p>
+
+<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>
diff --git a/LayoutTests/css3/flexbox/auto-margins.html b/LayoutTests/css3/flexbox/auto-margins.html
new file mode 100644 (file)
index 0000000..9a97b82
--- /dev/null
@@ -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="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">http://dev.w3.org/csswg/css3-flexbox/#auto-margins</a>.</p>
+
+<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>
index 2e7ca09..9f03c63 100644 (file)
@@ -5,7 +5,7 @@ body {
     margin: 0;
 }
 .flexbox {
-    height: 600px;
+    height: 100px;
     display: -webkit-flex;
     background-color: #aaa;
     position: relative;
@@ -36,6 +36,18 @@ body {
 .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 @@ if (window.layoutTestController)
 </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 @@ if (window.layoutTestController)
 <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 @@ if (window.layoutTestController)
 <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 @@ if (window.layoutTestController)
   <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>
index 6c28cda..ef5fd79 100644 (file)
@@ -35,6 +35,18 @@ body {
 .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 @@ if (window.layoutTestController)
 </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 @@ if (window.layoutTestController)
     <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 @@ if (window.layoutTestController)
 </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 @@ if (window.layoutTestController)
 <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 @@ if (window.layoutTestController)
 <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 @@ if (window.layoutTestController)
   <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 @@ if (window.layoutTestController)
   <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 @@ if (window.layoutTestController)
   <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>
index 5c349e8..47ecbec 100644 (file)
@@ -137,17 +137,17 @@ var physicalExpectations = {
             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 @@ var physicalExpectations = {
             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 @@ var logicalExpectations = {
             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 @@ var logicalExpectations = {
             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': {
index 9515091..4ead924 100644 (file)
@@ -1,3 +1,20 @@
+2012-05-23  Tony Chang  <tony@chromium.org>
+
+        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  <haraken@chromium.org>
 
         Unreviewed, rolling out r118120.
index fd8c9ed..2feab4f 100644 (file)
@@ -688,12 +688,53 @@ void RenderFlexibleBox::updateAutoMarginsInMainAxis(RenderBox* child, LayoutUnit
     }
 }
 
+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 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
         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 @@ void RenderFlexibleBox::alignChildren(FlexOrderIterator& iterator, const WTF::Ve
 
         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 @@ void RenderFlexibleBox::alignChildren(FlexOrderIterator& iterator, const WTF::Ve
         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);
         }
     }
index 4181411..8383a46 100644 (file)
@@ -103,6 +103,8 @@ private:
     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*);