Implement flex-align

https://bugs.webkit.org/show_bug.cgi?id=75782

Reviewed by Tony Chang.

Source/WebCore:

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
Intentially gets computed style for flex-item-align:auto wrong.
Will fix this in a followup patch.
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
* css/CSSProperty.cpp:
(WebCore::CSSProperty::isInheritedProperty):
* css/CSSPropertyNames.in:
* css/CSSStyleApplyProperty.cpp:
(WebCore::CSSStyleApplyProperty::CSSStyleApplyProperty):
* css/CSSStyleSelector.cpp:
(WebCore::CSSStyleSelector::applyProperty):
* rendering/RenderBox.cpp:
(WebCore::RenderBox::sizesToIntrinsicLogicalWidth):
* rendering/RenderFlexibleBox.cpp:
(WebCore::flexAlignForChild):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::alignChildren):
* rendering/style/RenderStyle.h:
(WebCore::RenderStyleBitfields::flexAlign):
(WebCore::RenderStyleBitfields::setFlexAlign):
(WebCore::RenderStyleBitfields::initialFlexAlign):
(WebCore::RenderStyleBitfields::initialFlexItemAlign):
* rendering/style/StyleFlexibleBoxData.cpp:
(WebCore::StyleFlexibleBoxData::StyleFlexibleBoxData):
(WebCore::StyleFlexibleBoxData::operator==):
* rendering/style/StyleFlexibleBoxData.h:

LayoutTests:

* css3/flexbox/css-properties-expected.txt:
* css3/flexbox/flex-align-expected.txt:
* css3/flexbox/flex-align.html:
* css3/flexbox/script-tests/css-properties.js:
* fast/css/getComputedStyle/computed-style-expected.txt:
* platform/chromium-mac-snowleopard/svg/css/getComputedStyle-basic-expected.txt:
* platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt:
* platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt:
* platform/gtk/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* platform/qt/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* svg/css/getComputedStyle-basic-expected.txt:

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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 21e9057..7aee4f6 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,24 @@
+2012-01-13  Ojan Vafai  <ojan@chromium.org>
+
+        Implement flex-align
+        https://bugs.webkit.org/show_bug.cgi?id=75782
+
+        Reviewed by Tony Chang.
+
+        * css3/flexbox/css-properties-expected.txt:
+        * css3/flexbox/flex-align-expected.txt:
+        * css3/flexbox/flex-align.html:
+        * css3/flexbox/script-tests/css-properties.js:
+        * fast/css/getComputedStyle/computed-style-expected.txt:
+        * platform/chromium-mac-snowleopard/svg/css/getComputedStyle-basic-expected.txt:
+        * platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt:
+        * platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
+        * platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt:
+        * platform/gtk/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
+        * platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
+        * platform/qt/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
+        * svg/css/getComputedStyle-basic-expected.txt:
+
 2012-01-13  Vincent Scheib  <scheib@chromium.org>
 
         Pointer Lock: Change isLocked() from operator to attribute isLocked

diff --git a/LayoutTests/css3/flexbox/css-properties-expected.txt b/LayoutTests/css3/flexbox/css-properties-expected.txt
index 069dec0..dfa5161 100644 (file)
--- a/LayoutTests/css3/flexbox/css-properties-expected.txt
+++ b/LayoutTests/css3/flexbox/css-properties-expected.txt
@@ -29,8 +29,10 @@ PASS window.getComputedStyle(flexbox, null).webkitFlexPack is "justify"
 PASS flexbox.style.webkitFlexPack is ""
 PASS window.getComputedStyle(flexbox, null).webkitFlexPack is "start"
 PASS flexbox.style.webkitFlexItemAlign is ""
-PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "stretch"
+FAIL window.getComputedStyle(flexbox, null).webkitFlexItemAlign should be stretch. Was auto.
 PASS flexbox.style.webkitFlexItemAlign is ""
+PASS flexbox.style.webkitFlexItemAlign is "auto"
+FAIL window.getComputedStyle(flexbox, null).webkitFlexItemAlign should be stretch. Was auto.
 PASS flexbox.style.webkitFlexItemAlign is "start"
 PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "start"
 PASS flexbox.style.webkitFlexItemAlign is "end"
@@ -42,7 +44,37 @@ PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "stretch"
 PASS flexbox.style.webkitFlexItemAlign is "baseline"
 PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "baseline"
 PASS flexbox.style.webkitFlexItemAlign is ""
-PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "stretch"
+FAIL window.getComputedStyle(flexbox, null).webkitFlexItemAlign should be stretch. Was auto.
+PASS flexbox.style.webkitFlexAlign is ""
+PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
+FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be stretch. Was auto.
+PASS flexbox.style.webkitFlexAlign is ""
+PASS flexbox.style.webkitFlexAlign is ""
+PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
+FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be stretch. Was auto.
+PASS flexbox.style.webkitFlexAlign is "start"
+PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "start"
+FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be start. Was auto.
+PASS flexbox.style.webkitFlexAlign is "end"
+PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "end"
+FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be end. Was auto.
+PASS flexbox.style.webkitFlexAlign is "center"
+PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "center"
+FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be center. Was auto.
+PASS flexbox.style.webkitFlexAlign is "stretch"
+PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
+FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be stretch. Was auto.
+PASS flexbox.style.webkitFlexAlign is "baseline"
+PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "baseline"
+FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be baseline. Was auto.
+PASS flexbox.style.webkitFlexAlign is ""
+PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
+FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be stretch. Was auto.
+PASS flexbox.style.webkitFlexAlign is ""
+PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
+FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be stretch. Was auto.
+PASS window.getComputedStyle(detachedFlexbox, null).webkitFlexItemAlign is ""
+PASS window.getComputedStyle(detachedFlexItem, null).webkitFlexItemAlign is ""
 PASS flexbox.style.webkitFlexDirection is ""
 PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is "row"
 PASS flexbox.style.webkitFlexDirection is ""

diff --git a/LayoutTests/css3/flexbox/flex-align-expected.txt b/LayoutTests/css3/flexbox/flex-align-expected.txt
index 5fc9496..8ead7bc 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-align-expected.txt
+++ b/LayoutTests/css3/flexbox/flex-align-expected.txt
@@ -9,6 +9,16 @@ PASS
 PASS
 PASS
 PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
 ahem
 
 

diff --git a/LayoutTests/css3/flexbox/flex-align.html b/LayoutTests/css3/flexbox/flex-align.html
index 2c67d2a..1d59d2c 100644 (file)
--- a/LayoutTests/css3/flexbox/flex-align.html
+++ b/LayoutTests/css3/flexbox/flex-align.html
@@ -10,7 +10,7 @@ body {
     background-color: #aaa;
     position: relative;
 }
-.flexbox div {
+.flexbox > div {
     border: 0;
 }
 
@@ -67,6 +67,86 @@ if (window.layoutTestController)
   </div>
 </div>
 
+<div class="flexbox" style="-webkit-flex-align: start">
+    <div data-expected-height="0" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-align: end">
+    <div data-expected-height="0" data-offset-y="100" style="width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-align: center">
+    <div data-expected-height="0" data-offset-y="50" style="width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-align: baseline">
+    <div style="width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-align: stretch">
+    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-align: start">
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-align: end">
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-align: center">
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-align: baseline">
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0); height: 100px;"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-align: stretch">
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
+</div>
+
 <div class="flexbox" style="height: 100px;">
   <div data-expected-height="50"  data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 50px;"></div>
   <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
@@ -136,6 +216,7 @@ if (window.layoutTestController)
 
 <div class="flexbox">
   <div data-expected-height="20" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; height: 20px;"></div>
+  <!-- FIXME: This looks like it might be positioned 10 pixels too high due the margin-bottom. All the boxes should have their bottoms aligned I think. -->
   <div data-expected-height="10" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; height: 10px; margin: 20px 0 10px;"></div>
   <div data-expected-height="10" data-offset-y="30" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; height: 10px; margin: 20px 0 0;"></div>
   <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>

diff --git a/LayoutTests/css3/flexbox/script-tests/css-properties.js b/LayoutTests/css3/flexbox/script-tests/css-properties.js
index d427af9..b1e7914 100644 (file)
--- a/LayoutTests/css3/flexbox/script-tests/css-properties.js
+++ b/LayoutTests/css3/flexbox/script-tests/css-properties.js
@@ -76,6 +76,10 @@ shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlig
 flexbox.style.webkitFlexItemAlign = 'foo';
 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
 
+flexbox.style.webkitFlexItemAlign = 'auto';
+shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'auto');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
+
 flexbox.style.webkitFlexItemAlign = 'start';
 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'start');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'start');
@@ -100,6 +104,64 @@ flexbox.style.webkitFlexItemAlign = '';
 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
 
+shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
+// The initial value is 'stretch'.
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
+
+flexbox.style.webkitFlexAlign = 'foo';
+shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
+
+flexbox.style.webkitFlexAlign = 'auto';
+shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
+
+flexbox.style.webkitFlexAlign = 'start';
+shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'start');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'start');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'start');
+
+flexbox.style.webkitFlexAlign = 'end';
+shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'end');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'end');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'end');
+
+flexbox.style.webkitFlexAlign = 'center';
+shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'center');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'center');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'center');
+
+flexbox.style.webkitFlexAlign = 'stretch';
+shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
+
+flexbox.style.webkitFlexAlign = 'baseline';
+shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'baseline');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'baseline');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'baseline');
+
+flexbox.style.webkitFlexAlign = '';
+shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
+
+flexbox.style.display = 'none';
+shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
+flexbox.style.display = '';
+
+
+// FIXME: This should probably return stretch. See https://bugs.webkit.org/show_bug.cgi?id=14563.
+var detachedFlexbox = document.createElement('div');
+var detachedFlexItem = document.createElement('div');
+detachedFlexbox.appendChild(detachedFlexItem);
+shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitFlexItemAlign', '');
+shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitFlexItemAlign', '');
+
+
 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
 

diff --git a/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt b/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
index 37c596c..77bb61d 100644 (file)
--- a/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
+++ b/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
@@ -144,7 +144,8 @@ zoom: 1;
 -webkit-column-width: auto;
 -webkit-flex-order: 0;
 -webkit-flex-pack: start;
--webkit-flex-item-align: stretch;
+-webkit-flex-align: stretch;
+-webkit-flex-item-align: auto;
 -webkit-flex-direction: row;
 -webkit-flex-flow: row nowrap;
 -webkit-flex-wrap: nowrap;

diff --git a/LayoutTests/platform/chromium-mac-snowleopard/svg/css/getComputedStyle-basic-expected.txt b/LayoutTests/platform/chromium-mac-snowleopard/svg/css/getComputedStyle-basic-expected.txt
index e9904b4..253858e 100644 (file)
--- a/LayoutTests/platform/chromium-mac-snowleopard/svg/css/getComputedStyle-basic-expected.txt
+++ b/LayoutTests/platform/chromium-mac-snowleopard/svg/css/getComputedStyle-basic-expected.txt
@@ -286,7 +286,9 @@ rect: style.getPropertyValue(-webkit-flex-order) : 0
 rect: style.getPropertyCSSValue(-webkit-flex-order) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-flex-pack) : start
 rect: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-flex-item-align) : stretch
+rect: style.getPropertyValue(-webkit-flex-align) : stretch
+rect: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(-webkit-flex-item-align) : auto
 rect: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-flex-direction) : row
 rect: style.getPropertyCSSValue(-webkit-flex-direction) : [object CSSPrimitiveValue]
@@ -798,7 +800,9 @@ g: style.getPropertyValue(-webkit-flex-order) : 0
 g: style.getPropertyCSSValue(-webkit-flex-order) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-flex-pack) : start
 g: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-flex-item-align) : stretch
+g: style.getPropertyValue(-webkit-flex-align) : stretch
+g: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(-webkit-flex-item-align) : auto
 g: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-flex-direction) : row
 g: style.getPropertyCSSValue(-webkit-flex-direction) : [object CSSPrimitiveValue]

diff --git a/LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt b/LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt
index 8fa00ba..88b1f0d 100644 (file)
--- a/LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt
+++ b/LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt
@@ -144,7 +144,8 @@ zoom: 1;
 -webkit-column-width: auto;
 -webkit-flex-order: 0;
 -webkit-flex-pack: start;
--webkit-flex-item-align: stretch;
+-webkit-flex-align: stretch;
+-webkit-flex-item-align: auto;
 -webkit-flex-direction: row;
 -webkit-flex-flow: row nowrap;
 -webkit-flex-wrap: nowrap;

diff --git a/LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt b/LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
index 27ad6a0..0b543ff 100644 (file)
--- a/LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
+++ b/LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
@@ -143,7 +143,8 @@ Computed style of an element whose parent's 'display' value is 'none':
     -webkit-column-width: auto
     -webkit-flex-order: 0
     -webkit-flex-pack: start
-    -webkit-flex-item-align: stretch
+    -webkit-flex-align: stretch
+    -webkit-flex-item-align: auto
     -webkit-flex-direction: row
     -webkit-flex-flow: row nowrap
     -webkit-flex-wrap: nowrap

diff --git a/LayoutTests/platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt b/LayoutTests/platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt
index 3f96dab..0ff5fbd 100644 (file)
--- a/LayoutTests/platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt
+++ b/LayoutTests/platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt
@@ -286,7 +286,9 @@ rect: style.getPropertyValue(-webkit-flex-order) : 0
 rect: style.getPropertyCSSValue(-webkit-flex-order) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-flex-pack) : start
 rect: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-flex-item-align) : stretch
+rect: style.getPropertyValue(-webkit-flex-align) : stretch
+rect: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(-webkit-flex-item-align) : auto
 rect: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-flex-direction) : row
 rect: style.getPropertyCSSValue(-webkit-flex-direction) : [object CSSPrimitiveValue]
@@ -798,7 +800,9 @@ g: style.getPropertyValue(-webkit-flex-order) : 0
 g: style.getPropertyCSSValue(-webkit-flex-order) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-flex-pack) : start
 g: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-flex-item-align) : stretch
+g: style.getPropertyValue(-webkit-flex-align) : stretch
+g: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(-webkit-flex-item-align) : auto
 g: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-flex-direction) : row
 g: style.getPropertyCSSValue(-webkit-flex-direction) : [object CSSPrimitiveValue]

diff --git a/LayoutTests/platform/gtk/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt b/LayoutTests/platform/gtk/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
index e4b509d..9892d80 100644 (file)
--- a/LayoutTests/platform/gtk/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
+++ b/LayoutTests/platform/gtk/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
@@ -143,7 +143,8 @@ Computed style of an element whose parent's 'display' value is 'none':
     -webkit-column-width: auto
     -webkit-flex-order: 0
     -webkit-flex-pack: start
-    -webkit-flex-item-align: stretch
+    -webkit-flex-align: stretch
+    -webkit-flex-item-align: auto
     -webkit-flex-direction: row
     -webkit-flex-flow: row nowrap
     -webkit-flex-wrap: nowrap

diff --git a/LayoutTests/platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt b/LayoutTests/platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
index 87c33d3..ae5a4fc 100644 (file)
--- a/LayoutTests/platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
+++ b/LayoutTests/platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
@@ -143,7 +143,8 @@ Computed style of an element whose parent's 'display' value is 'none':
     -webkit-column-width: auto
     -webkit-flex-order: 0
     -webkit-flex-pack: start
-    -webkit-flex-item-align: stretch
+    -webkit-flex-align: stretch
+    -webkit-flex-item-align: auto
     -webkit-flex-direction: row
     -webkit-flex-flow: row nowrap
     -webkit-flex-wrap: nowrap

diff --git a/LayoutTests/platform/qt/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt b/LayoutTests/platform/qt/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
index e4b509d..9892d80 100644 (file)
--- a/LayoutTests/platform/qt/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
+++ b/LayoutTests/platform/qt/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
@@ -143,7 +143,8 @@ Computed style of an element whose parent's 'display' value is 'none':
     -webkit-column-width: auto
     -webkit-flex-order: 0
     -webkit-flex-pack: start
-    -webkit-flex-item-align: stretch
+    -webkit-flex-align: stretch
+    -webkit-flex-item-align: auto
     -webkit-flex-direction: row
     -webkit-flex-flow: row nowrap
     -webkit-flex-wrap: nowrap

diff --git a/LayoutTests/svg/css/getComputedStyle-basic-expected.txt b/LayoutTests/svg/css/getComputedStyle-basic-expected.txt
index e9904b4..253858e 100644 (file)
--- a/LayoutTests/svg/css/getComputedStyle-basic-expected.txt
+++ b/LayoutTests/svg/css/getComputedStyle-basic-expected.txt
@@ -286,7 +286,9 @@ rect: style.getPropertyValue(-webkit-flex-order) : 0
 rect: style.getPropertyCSSValue(-webkit-flex-order) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-flex-pack) : start
 rect: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-flex-item-align) : stretch
+rect: style.getPropertyValue(-webkit-flex-align) : stretch
+rect: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(-webkit-flex-item-align) : auto
 rect: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-flex-direction) : row
 rect: style.getPropertyCSSValue(-webkit-flex-direction) : [object CSSPrimitiveValue]
@@ -798,7 +800,9 @@ g: style.getPropertyValue(-webkit-flex-order) : 0
 g: style.getPropertyCSSValue(-webkit-flex-order) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-flex-pack) : start
 g: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-flex-item-align) : stretch
+g: style.getPropertyValue(-webkit-flex-align) : stretch
+g: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(-webkit-flex-item-align) : auto
 g: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-flex-direction) : row
 g: style.getPropertyCSSValue(-webkit-flex-direction) : [object CSSPrimitiveValue]

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 123ed5c..898e10a 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,39 @@
+2012-01-13  Ojan Vafai  <ojan@chromium.org>
+
+        Implement flex-align
+        https://bugs.webkit.org/show_bug.cgi?id=75782
+
+        Reviewed by Tony Chang.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
+        Intentially gets computed style for flex-item-align:auto wrong.
+        Will fix this in a followup patch.
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseValue):
+        * css/CSSProperty.cpp:
+        (WebCore::CSSProperty::isInheritedProperty):
+        * css/CSSPropertyNames.in:
+        * css/CSSStyleApplyProperty.cpp:
+        (WebCore::CSSStyleApplyProperty::CSSStyleApplyProperty):
+        * css/CSSStyleSelector.cpp:
+        (WebCore::CSSStyleSelector::applyProperty):
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::sizesToIntrinsicLogicalWidth):
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::flexAlignForChild):
+        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
+        (WebCore::RenderFlexibleBox::alignChildren):
+        * rendering/style/RenderStyle.h:
+        (WebCore::RenderStyleBitfields::flexAlign):
+        (WebCore::RenderStyleBitfields::setFlexAlign):
+        (WebCore::RenderStyleBitfields::initialFlexAlign):
+        (WebCore::RenderStyleBitfields::initialFlexItemAlign):
+        * rendering/style/StyleFlexibleBoxData.cpp:
+        (WebCore::StyleFlexibleBoxData::StyleFlexibleBoxData):
+        (WebCore::StyleFlexibleBoxData::operator==):
+        * rendering/style/StyleFlexibleBoxData.h:
+
 2012-01-13  Brent Fulgham  <bfulgham@webkit.org>
 
         [Windows, WinCairo] Build correction after r104919.

diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
index 9b9abd5..958197c 100644 (file)
--- a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
+++ b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
@@ -218,6 +218,7 @@ static const int computedProperties[] = {
 #endif
     CSSPropertyWebkitFlexOrder,
     CSSPropertyWebkitFlexPack,
+    CSSPropertyWebkitFlexAlign,
     CSSPropertyWebkitFlexItemAlign,
     CSSPropertyWebkitFlexDirection,
     CSSPropertyWebkitFlexFlow,
@@ -1526,7 +1527,11 @@ PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(int proper
             return cssValuePool->createValue(style->flexOrder(), CSSPrimitiveValue::CSS_NUMBER);
         case CSSPropertyWebkitFlexPack:
             return cssValuePool->createValue(style->flexPack());
+        case CSSPropertyWebkitFlexAlign:
+            return cssValuePool->createValue(style->flexAlign());
         case CSSPropertyWebkitFlexItemAlign:
+            // FIXME: If flex-item-align:auto, then we should return the parent's flex-align.
+            // http://webkit.org/b/76326
             return cssValuePool->createValue(style->flexItemAlign());
         case CSSPropertyWebkitFlexDirection:
             return cssValuePool->createValue(style->flexDirection());

diff --git a/Source/WebCore/css/CSSParser.cpp b/Source/WebCore/css/CSSParser.cpp
index 46b3044..9a44ff2 100644 (file)
--- a/Source/WebCore/css/CSSParser.cpp
+++ b/Source/WebCore/css/CSSParser.cpp
@@ -1637,6 +1637,9 @@ bool CSSParser::parseValue(int propId, bool important)
     case CSSPropertyWebkitFlexPack:
         validPrimitive = id == CSSValueStart || id == CSSValueEnd || id == CSSValueCenter || id == CSSValueJustify;
         break;
+    case CSSPropertyWebkitFlexAlign:
+        validPrimitive = id == CSSValueStart || id == CSSValueEnd || id == CSSValueCenter || id == CSSValueBaseline || id == CSSValueStretch;
+        break;
     case CSSPropertyWebkitFlexItemAlign:
         validPrimitive = id == CSSValueAuto || id == CSSValueStart || id == CSSValueEnd || id == CSSValueCenter || id == CSSValueBaseline || id == CSSValueStretch;
         break;

diff --git a/Source/WebCore/css/CSSProperty.cpp b/Source/WebCore/css/CSSProperty.cpp
index 7b2d201..1071bbe 100644 (file)
--- a/Source/WebCore/css/CSSProperty.cpp
+++ b/Source/WebCore/css/CSSProperty.cpp
@@ -560,6 +560,7 @@ bool CSSProperty::isInheritedProperty(unsigned propertyID)
 #endif
     case CSSPropertyWebkitFlexOrder:
     case CSSPropertyWebkitFlexPack:
+    case CSSPropertyWebkitFlexAlign:
     case CSSPropertyWebkitFlexItemAlign:
     case CSSPropertyWebkitFlexDirection:
     case CSSPropertyWebkitFlexFlow:

diff --git a/Source/WebCore/css/CSSPropertyNames.in b/Source/WebCore/css/CSSPropertyNames.in
index 501447f..ceb2798 100644 (file)
--- a/Source/WebCore/css/CSSPropertyNames.in
+++ b/Source/WebCore/css/CSSPropertyNames.in
@@ -255,6 +255,7 @@ z-index
 #if defined(ENABLE_CSS_FILTERS) && ENABLE_CSS_FILTERS
 -webkit-filter
 #endif
+-webkit-flex-align
 -webkit-flex-direction
 -webkit-flex-flow
 -webkit-flex-item-align

diff --git a/Source/WebCore/css/CSSStyleApplyProperty.cpp b/Source/WebCore/css/CSSStyleApplyProperty.cpp
index e4d8eec..45a6349 100644 (file)
--- a/Source/WebCore/css/CSSStyleApplyProperty.cpp
+++ b/Source/WebCore/css/CSSStyleApplyProperty.cpp
@@ -1756,6 +1756,7 @@ CSSStyleApplyProperty::CSSStyleApplyProperty()
 
     setPropertyHandler(CSSPropertyWebkitFlexOrder, ApplyPropertyDefault<int, &RenderStyle::flexOrder, int, &RenderStyle::setFlexOrder, int, &RenderStyle::initialFlexOrder>::createHandler());
     setPropertyHandler(CSSPropertyWebkitFlexPack, ApplyPropertyDefault<EFlexPack, &RenderStyle::flexPack, EFlexPack, &RenderStyle::setFlexPack, EFlexPack, &RenderStyle::initialFlexPack>::createHandler());
+    setPropertyHandler(CSSPropertyWebkitFlexAlign, ApplyPropertyDefault<EFlexAlign, &RenderStyle::flexAlign, EFlexAlign, &RenderStyle::setFlexAlign, EFlexAlign, &RenderStyle::initialFlexAlign>::createHandler());
     setPropertyHandler(CSSPropertyWebkitFlexItemAlign, ApplyPropertyDefault<EFlexAlign, &RenderStyle::flexItemAlign, EFlexAlign, &RenderStyle::setFlexItemAlign, EFlexAlign, &RenderStyle::initialFlexItemAlign>::createHandler());
     setPropertyHandler(CSSPropertyWebkitFlexDirection, ApplyPropertyDefault<EFlexDirection, &RenderStyle::flexDirection, EFlexDirection, &RenderStyle::setFlexDirection, EFlexDirection, &RenderStyle::initialFlexDirection>::createHandler());
     setPropertyHandler(CSSPropertyWebkitFlexWrap, ApplyPropertyDefault<EFlexWrap, &RenderStyle::flexWrap, EFlexWrap, &RenderStyle::setFlexWrap, EFlexWrap, &RenderStyle::initialFlexWrap>::createHandler());

diff --git a/Source/WebCore/css/CSSStyleSelector.cpp b/Source/WebCore/css/CSSStyleSelector.cpp
index a94adb8..b81c8c5 100644 (file)
--- a/Source/WebCore/css/CSSStyleSelector.cpp
+++ b/Source/WebCore/css/CSSStyleSelector.cpp
@@ -3786,6 +3786,7 @@ void CSSStyleSelector::applyProperty(int id, CSSValue *value)
     case CSSPropertyWordSpacing:
     case CSSPropertyWebkitFlexOrder:
     case CSSPropertyWebkitFlexPack:
+    case CSSPropertyWebkitFlexAlign:
     case CSSPropertyWebkitFlexItemAlign:
     case CSSPropertyWebkitFlexDirection:
     case CSSPropertyWebkitFlexFlow:

diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
index befd5a2..4069f32 100644 (file)
--- a/Source/WebCore/rendering/RenderBox.cpp
+++ b/Source/WebCore/rendering/RenderBox.cpp
@@ -1793,8 +1793,13 @@ bool RenderBox::sizesToIntrinsicLogicalWidth(LogicalWidthType widthType) const
     // Flexible box items should shrink wrap, so we lay them out at their intrinsic widths.
     // In the case of columns that have a stretch alignment, we go ahead and layout at the
     // stretched size to avoid an extra layout when applying alignment.
-    if (parent()->isFlexibleBox() && (!parent()->style()->isColumnFlexDirection() || style()->flexItemAlign() != AlignStretch))
-        return true;
+    if (parent()->isFlexibleBox()) {
+        if (!parent()->style()->isColumnFlexDirection())
+            return true;
+        EFlexAlign itemAlign = style()->flexItemAlign();
+        if (itemAlign != AlignStretch && (itemAlign != AlignAuto || parent()->style()->flexAlign() != AlignStretch))
+            return true;
+    }
 
     // Flexible horizontal boxes lay out children at their intrinsic widths.  Also vertical boxes
     // that don't stretch their kids lay out their children at their intrinsic widths.

diff --git a/Source/WebCore/rendering/RenderFlexibleBox.cpp b/Source/WebCore/rendering/RenderFlexibleBox.cpp
index 0a646d9..53997a1 100644 (file)
--- a/Source/WebCore/rendering/RenderFlexibleBox.cpp
+++ b/Source/WebCore/rendering/RenderFlexibleBox.cpp
@@ -618,6 +618,14 @@ void RenderFlexibleBox::prepareChildForPositionedLayout(RenderBox* child, Layout
     }
 }
 
+static EFlexAlign flexAlignForChild(RenderBox* child)
+{
+    EFlexAlign align = child->style()->flexItemAlign();
+    if (align == AlignAuto)
+        return child->parent()->style()->flexAlign();
+    return align;
+}
+
 void RenderFlexibleBox::layoutAndPlaceChildren(FlexOrderIterator& iterator, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility)
 {
     LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
@@ -639,7 +647,7 @@ void RenderFlexibleBox::layoutAndPlaceChildren(FlexOrderIterator& iterator, cons
         child->setChildNeedsLayout(true);
         child->layoutIfNeeded();
 
-        if (child->style()->flexItemAlign() == AlignBaseline) {
+        if (flexAlignForChild(child) == AlignBaseline) {
             LayoutUnit ascent = marginBoxAscent(child);
             LayoutUnit descent = (crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child)) - ascent;
 
@@ -732,9 +740,9 @@ void RenderFlexibleBox::alignChildren(FlexOrderIterator& iterator, LayoutUnit ma
         }
 
         // FIXME: Make sure this does the right thing with column flows.
-        switch (child->style()->flexItemAlign()) {
+        switch (flexAlignForChild(child)) {
         case AlignAuto:
-            // FIXME: Handle this once we add flex-align.
+            ASSERT_NOT_REACHED();
             break;
         case AlignStretch: {
             if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {

diff --git a/Source/WebCore/rendering/style/RenderStyle.h b/Source/WebCore/rendering/style/RenderStyle.h
index 88f950b..52d2887 100644 (file)
--- a/Source/WebCore/rendering/style/RenderStyle.h
+++ b/Source/WebCore/rendering/style/RenderStyle.h
@@ -801,6 +801,7 @@ public:
     float flexboxHeightNegativeFlex() const { return rareNonInheritedData->m_flexibleBox->m_heightNegativeFlex; }
     int flexOrder() const { return rareNonInheritedData->m_flexibleBox->m_flexOrder; }
     EFlexPack flexPack() const { return static_cast<EFlexPack>(rareNonInheritedData->m_flexibleBox->m_flexPack); }
+    EFlexAlign flexAlign() const { return static_cast<EFlexAlign>(rareNonInheritedData->m_flexibleBox->m_flexAlign); }
     EFlexAlign flexItemAlign() const { return static_cast<EFlexAlign>(rareNonInheritedData->m_flexibleBox->m_flexItemAlign); }
     EFlexDirection flexDirection() const { return static_cast<EFlexDirection>(rareNonInheritedData->m_flexibleBox->m_flexDirection); }
     bool isColumnFlexDirection() const { return flexDirection() == FlowColumn || flexDirection() == FlowColumnReverse; }
@@ -1221,6 +1222,7 @@ public:
     void setFlexboxHeightNegativeFlex(float f) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_heightNegativeFlex, f); }
     void setFlexOrder(int o) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexOrder, o); }
     void setFlexPack(EFlexPack p) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexPack, p); }
+    void setFlexAlign(EFlexAlign a) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexAlign, a); }
     void setFlexItemAlign(EFlexAlign a) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexItemAlign, a); }
     void setFlexDirection(EFlexDirection direction) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexDirection, direction); }
     void setFlexWrap(EFlexWrap w) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexWrap, w); }
@@ -1545,8 +1547,8 @@ public:
     static float initialFlexboxHeightNegativeFlex() { return 0; }
     static int initialFlexOrder() { return 0; }
     static EFlexPack initialFlexPack() { return PackStart; }
-    // FIXME: When we add in flex-align, default flex-item-align to AlignAuto.
-    static EFlexAlign initialFlexItemAlign() { return AlignStretch; }
+    static EFlexAlign initialFlexAlign() { return AlignStretch; }
+    static EFlexAlign initialFlexItemAlign() { return AlignAuto; }
     static EFlexDirection initialFlexDirection() { return FlowRow; }
     static EFlexWrap initialFlexWrap() { return FlexNoWrap; }
     static int initialMarqueeLoopCount() { return -1; }

diff --git a/Source/WebCore/rendering/style/StyleFlexibleBoxData.cpp b/Source/WebCore/rendering/style/StyleFlexibleBoxData.cpp
index 5ca0edb..de6fabd 100644 (file)
--- a/Source/WebCore/rendering/style/StyleFlexibleBoxData.cpp
+++ b/Source/WebCore/rendering/style/StyleFlexibleBoxData.cpp
@@ -37,6 +37,7 @@ StyleFlexibleBoxData::StyleFlexibleBoxData()
     , m_heightNegativeFlex(RenderStyle::initialFlexboxHeightNegativeFlex())
     , m_flexOrder(RenderStyle::initialFlexOrder())
     , m_flexPack(RenderStyle::initialFlexPack())
+    , m_flexAlign(RenderStyle::initialFlexAlign())
     , m_flexItemAlign(RenderStyle::initialFlexItemAlign())
     , m_flexDirection(RenderStyle::initialFlexDirection())
     , m_flexWrap(RenderStyle::initialFlexWrap())
@@ -51,6 +52,7 @@ StyleFlexibleBoxData::StyleFlexibleBoxData(const StyleFlexibleBoxData& o)
     , m_heightNegativeFlex(o.m_heightNegativeFlex)
     , m_flexOrder(o.m_flexOrder)
     , m_flexPack(o.m_flexPack)
+    , m_flexAlign(o.m_flexAlign)
     , m_flexItemAlign(o.m_flexItemAlign)
     , m_flexDirection(o.m_flexDirection)
     , m_flexWrap(o.m_flexWrap)
@@ -61,8 +63,8 @@ bool StyleFlexibleBoxData::operator==(const StyleFlexibleBoxData& o) const
 {
     return m_widthPositiveFlex == o.m_widthPositiveFlex && m_widthNegativeFlex == o.m_widthNegativeFlex
         && m_heightPositiveFlex == o.m_heightPositiveFlex && m_heightNegativeFlex == o.m_heightNegativeFlex
-        && m_flexOrder == o.m_flexOrder && m_flexPack == o.m_flexPack && m_flexItemAlign == o.m_flexItemAlign
-        && m_flexDirection == o.m_flexDirection && m_flexWrap == o.m_flexWrap;
+        && m_flexOrder == o.m_flexOrder && m_flexPack == o.m_flexPack && m_flexAlign == o.m_flexAlign
+        && m_flexItemAlign == o.m_flexItemAlign && m_flexDirection == o.m_flexDirection && m_flexWrap == o.m_flexWrap;
 }
 
 }

diff --git a/Source/WebCore/rendering/style/StyleFlexibleBoxData.h b/Source/WebCore/rendering/style/StyleFlexibleBoxData.h
index 4a90fbe..840549b 100644 (file)
--- a/Source/WebCore/rendering/style/StyleFlexibleBoxData.h
+++ b/Source/WebCore/rendering/style/StyleFlexibleBoxData.h
@@ -50,6 +50,7 @@ public:
     int m_flexOrder;
 
     unsigned m_flexPack : 2; // EFlexPack
+    unsigned m_flexAlign : 3; // EFlexAlign
     unsigned m_flexItemAlign : 3; // EFlexAlign
     unsigned m_flexDirection : 2; // EFlexDirection
     unsigned m_flexWrap : 2; // EFlexWrap