From fdbac1cde7e23dbb05153d832db5749ca4ff1187 Mon Sep 17 00:00:00 2001
From: "ojan@chromium.org"
 <ojan@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Tue, 10 Jan 2012 21:19:55 +0000
Subject: [PATCH] Rename flex-align to flex-item-align.
 https://bugs.webkit.org/show_bug.cgi?id=75929

Reviewed by Darin Adler.

Source/WebCore:

The spec has changed and now flex-align will be set on
the flexbox itself.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
(WebCore::CSSPrimitiveValue::operator EFlexAlign):
* 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::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::alignChildren):
* rendering/style/RenderStyle.h:
(WebCore::RenderStyleBitfields::flexItemAlign):
(WebCore::RenderStyleBitfields::setFlexItemAlign):
(WebCore::RenderStyleBitfields::initialFlexItemAlign):
* rendering/style/RenderStyleConstants.h:
* 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-column.html:
* css3/flexbox/flex-align-vertical-writing-mode.html:
* css3/flexbox/flex-align.html:
* css3/flexbox/line-wrapping.html:
* css3/flexbox/orthogonal-flex-directions.html:
* css3/flexbox/script-tests/css-properties.js:
* fast/css/getComputedStyle/computed-style-expected.txt:
* platform/mac/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@104625 268f45cc-cd09-0410-ab3c-d52691b4dbfc
---
 LayoutTests/ChangeLog                              | 18 +++++
 .../css3/flexbox/css-properties-expected.txt       | 30 ++++----
 LayoutTests/css3/flexbox/flex-align-column.html    | 20 +++---
 .../flexbox/flex-align-vertical-writing-mode.html  | 82 +++++++++++-----------
 LayoutTests/css3/flexbox/flex-align.html           | 70 +++++++++---------
 LayoutTests/css3/flexbox/line-wrapping.html        | 30 ++++----
 .../css3/flexbox/orthogonal-flex-directions.html   |  2 +-
 .../css3/flexbox/script-tests/css-properties.js    | 44 ++++++------
 .../getComputedStyle/computed-style-expected.txt   |  2 +-
 .../computed-style-without-renderer-expected.txt   |  2 +-
 .../svg/css/getComputedStyle-basic-expected.txt    |  8 +--
 Source/WebCore/ChangeLog                           | 39 ++++++++++
 Source/WebCore/css/CSSComputedStyleDeclaration.cpp |  6 +-
 Source/WebCore/css/CSSParser.cpp                   |  4 +-
 Source/WebCore/css/CSSPrimitiveValueMappings.h     |  5 ++
 Source/WebCore/css/CSSProperty.cpp                 |  2 +-
 Source/WebCore/css/CSSPropertyNames.in             |  2 +-
 Source/WebCore/css/CSSStyleApplyProperty.cpp       |  2 +-
 Source/WebCore/css/CSSStyleSelector.cpp            |  2 +-
 Source/WebCore/rendering/RenderBox.cpp             |  2 +-
 Source/WebCore/rendering/RenderFlexibleBox.cpp     |  7 +-
 Source/WebCore/rendering/style/RenderStyle.h       |  7 +-
 .../WebCore/rendering/style/RenderStyleConstants.h |  2 +-
 .../rendering/style/StyleFlexibleBoxData.cpp       |  6 +-
 .../WebCore/rendering/style/StyleFlexibleBoxData.h |  2 +-
 25 files changed, 231 insertions(+), 165 deletions(-)

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 4002929..a66946b 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,21 @@
+2012-01-10  Ojan Vafai  <ojan@chromium.org>
+
+        Rename flex-align to flex-item-align.
+        https://bugs.webkit.org/show_bug.cgi?id=75929
+
+        Reviewed by Darin Adler.
+
+        * css3/flexbox/css-properties-expected.txt:
+        * css3/flexbox/flex-align-column.html:
+        * css3/flexbox/flex-align-vertical-writing-mode.html:
+        * css3/flexbox/flex-align.html:
+        * css3/flexbox/line-wrapping.html:
+        * css3/flexbox/orthogonal-flex-directions.html:
+        * css3/flexbox/script-tests/css-properties.js:
+        * fast/css/getComputedStyle/computed-style-expected.txt:
+        * platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
+        * svg/css/getComputedStyle-basic-expected.txt:
+
 2012-01-10  Eric Carlson  <eric.carlson@apple.com>
 
         Replace TextTrackCue "getCueAsSource" method with "text" attribute
diff --git a/LayoutTests/css3/flexbox/css-properties-expected.txt b/LayoutTests/css3/flexbox/css-properties-expected.txt
index b6b3705da..069dec0 100644
--- a/LayoutTests/css3/flexbox/css-properties-expected.txt
+++ b/LayoutTests/css3/flexbox/css-properties-expected.txt
@@ -28,21 +28,21 @@ PASS flexbox.style.webkitFlexPack is "justify"
 PASS window.getComputedStyle(flexbox, null).webkitFlexPack is "justify"
 PASS flexbox.style.webkitFlexPack is ""
 PASS window.getComputedStyle(flexbox, null).webkitFlexPack is "start"
-PASS flexbox.style.webkitFlexAlign is ""
-PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
-PASS flexbox.style.webkitFlexAlign is ""
-PASS flexbox.style.webkitFlexAlign is "start"
-PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "start"
-PASS flexbox.style.webkitFlexAlign is "end"
-PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "end"
-PASS flexbox.style.webkitFlexAlign is "center"
-PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "center"
-PASS flexbox.style.webkitFlexAlign is "stretch"
-PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
-PASS flexbox.style.webkitFlexAlign is "baseline"
-PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "baseline"
-PASS flexbox.style.webkitFlexAlign is ""
-PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
+PASS flexbox.style.webkitFlexItemAlign is ""
+PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "stretch"
+PASS flexbox.style.webkitFlexItemAlign is ""
+PASS flexbox.style.webkitFlexItemAlign is "start"
+PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "start"
+PASS flexbox.style.webkitFlexItemAlign is "end"
+PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "end"
+PASS flexbox.style.webkitFlexItemAlign is "center"
+PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "center"
+PASS flexbox.style.webkitFlexItemAlign is "stretch"
+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"
 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-column.html b/LayoutTests/css3/flexbox/flex-align-column.html
index 4cbc210..ee2e4b2 100644
--- a/LayoutTests/css3/flexbox/flex-align-column.html
+++ b/LayoutTests/css3/flexbox/flex-align-column.html
@@ -46,20 +46,20 @@ if (window.layoutTestController)
 
 <div class="flexbox">
     <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="height: -webkit-flex(1);"></div>
-    <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-align: stretch; "></div>
-    <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-align: start; width: 20px;"></div>
-    <div data-offset-x=580 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-align: end; width: 20px;"></div>
-    <div data-offset-x=290 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-align: center; width: 20px;"></div>
-    <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-align: baseline; width: 20px;"></div>
+    <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: stretch; "></div>
+    <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: start; width: 20px;"></div>
+    <div data-offset-x=580 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: end; width: 20px;"></div>
+    <div data-offset-x=290 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: center; width: 20px;"></div>
+    <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: baseline; width: 20px;"></div>
 </div>
 
 <div class="flexbox vertical">
     <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="width: -webkit-flex(1);"></div>
-    <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="width: -webkit-flex(1); -webkit-flex-align: stretch; "></div>
-    <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-align: start; height: 20px;"></div>
-    <div data-offset-y=220 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-align: end; height: 20px;"></div>
-    <div data-offset-y=110 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-align: center; height: 20px;"></div>
-    <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-align: baseline; height: 20px;"></div>
+    <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="width: -webkit-flex(1); -webkit-flex-item-align: stretch; "></div>
+    <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: start; height: 20px;"></div>
+    <div data-offset-y=220 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: end; height: 20px;"></div>
+    <div data-offset-y=110 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: center; height: 20px;"></div>
+    <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: baseline; height: 20px;"></div>
 </div>
 
 </body>
diff --git a/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html b/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html
index 6a00e6c..fdf2c7c 100644
--- a/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html
+++ b/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html
@@ -81,86 +81,86 @@ if (window.layoutTestController)
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="0" data-offset-x="100" style="height: -webkit-flex(1 0 0); -webkit-flex-align: start;"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-align: start; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-align: start; width: 50px; margin: 0 auto"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-align: start; width: 50px; margin: auto 0 0"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-align: start; width: 50px; margin: 0 25px"></div>
-  <div data-expected-width="50" data-offset-x="30" style="height: -webkit-flex(1 0 0); -webkit-flex-align: start; width: 50px; margin: 0 20px 0 10px;"></div>
+  <div data-expected-width="0" data-offset-x="100" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="height: -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="height: -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="height: -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="height: -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="height: -webkit-flex(1 0 0); width: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="0" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-align: end;"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-align: end; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-align: end; width: 50px; margin: 0 auto"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-align: end; width: 50px; margin: auto 0 0"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-align: end; width: 50px; margin: 0 25px"></div>
-  <div data-expected-width="50" data-offset-x="10" style="height: -webkit-flex(1 0 0); -webkit-flex-align: end; width: 50px; margin: 0 20px 0 10px;"></div>
+  <div data-expected-width="0" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end;"></div>
+  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="0" style="height: -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="height: -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="height: -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="height: -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="height: -webkit-flex(1 0 0); width: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="0" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-align: center;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-align: center; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-align: center; width: 50px; margin: 0 auto"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-align: center; width: 50px; margin: auto 0 0"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-align: center; width: 50px; margin: 0 25px"></div>
-  <div data-expected-width="50" data-offset-x="20" style="height: -webkit-flex(1 0 0); -webkit-flex-align: center; width: 50px; margin: 0 20px 0 10px;"></div>
+  <div data-expected-width="0" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="height: -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="height: -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="25" style="height: -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="height: -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="height: -webkit-flex(1 0 0); width: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-align: start; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-align: center; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-align: end; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px;"></div>
   <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px; margin: auto 0"></div>
   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0);"></div>
   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-align: start; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-align: center; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-align: end; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
+  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
   <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px; margin: auto 0; -webkit-writing-mode: horizontal-tb;"></div>
   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px; -webkit-writing-mode: horizontal-tb;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="20" data-offset-x="60" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline; width: 20px;"></div>
-  <div data-expected-width="10" data-offset-x="70" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline; width: 10px; margin: 0 20px 0 10px;"></div>
-  <div data-expected-width="10" data-offset-x="60" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline; width: 10px; margin: 0 20px 0 0;"></div>
+  <div data-expected-width="20" data-offset-x="60" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; width: 20px;"></div>
+  <div data-expected-width="10" data-offset-x="70" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; width: 10px; margin: 0 20px 0 10px;"></div>
+  <div data-expected-width="10" data-offset-x="60" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; width: 10px; margin: 0 20px 0 0;"></div>
   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="font-family: test;">
-  <div id="baseline1" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;">ahem</div>
-  <div id="baseline2" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
-  <div id="baseline3" data-expected-width="50" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div id="baseline1" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline2" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div id="baseline3" data-expected-width="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="font-family: test;">
-  <div id="baseline4" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;">ahem</div>
-  <div id="baseline5" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div id="baseline4" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline5" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="font-family: test; -webkit-writing-mode: vertical-lr">
-  <div id="baseline6" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;">ahem</div>
-  <div id="baseline7" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div id="baseline6" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline7" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="font-family: test; -webkit-writing-mode: vertical-lr">
-  <div id="baseline8" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;">ahem</div>
-  <div id="baseline9" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div id="baseline8" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline9" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
 </div>
 
diff --git a/LayoutTests/css3/flexbox/flex-align.html b/LayoutTests/css3/flexbox/flex-align.html
index 8c6f823..2c67d2a 100644
--- a/LayoutTests/css3/flexbox/flex-align.html
+++ b/LayoutTests/css3/flexbox/flex-align.html
@@ -88,71 +88,71 @@ if (window.layoutTestController)
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="0" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-align: start;"></div>
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-align: start; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-align: start; height: 50px; margin: auto 0"></div>
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-align: start; height: 50px; margin: auto 0 0"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-align: start; height: 50px; margin: 25px 0"></div>
-  <div data-expected-height="50" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-align: start; height: 50px; margin: 20px 0 10px;"></div>
+  <div data-expected-height="0" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="width: -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="width: -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="width: -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="width: -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="width: -webkit-flex(1 0 0); height: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="0" data-offset-y="100" style="width: -webkit-flex(1 0 0); -webkit-flex-align: end;"></div>
-  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-align: end; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-align: end; height: 50px; margin: auto 0"></div>
-  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-align: end; height: 50px; margin: auto 0 0"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-align: end; height: 50px; margin: 25px 0"></div>
-  <div data-expected-height="50" data-offset-y="40" style="width: -webkit-flex(1 0 0); -webkit-flex-align: end; height: 50px; margin: 20px 0 10px;"></div>
+  <div data-expected-height="0" data-offset-y="100" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end;"></div>
+  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="50" style="width: -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="width: -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="25" style="width: -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="width: -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="width: -webkit-flex(1 0 0); height: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="0" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-align: center;"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-align: center; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-align: center; height: 50px; margin: auto 0"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-align: center; height: 50px; margin: auto 0 0"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-align: center; height: 50px; margin: 25px 0"></div>
-  <div data-expected-height="50" data-offset-y="30" style="width: -webkit-flex(1 0 0); -webkit-flex-align: center; height: 50px; margin: 20px 0 10px;"></div>
+  <div data-expected-height="0" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"></div>
+  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="25" style="width: -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="width: -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="25" style="width: -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="width: -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="width: -webkit-flex(1 0 0); height: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-align: start; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-align: center; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
-  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-align: end; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="width: -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="width: -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="width: -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="width: -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="width: -webkit-flex(1 0 0); height: 100px; -webkit-writing-mode: vertical-rl;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-align: start; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-align: center; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-align: end; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 50px;"></div>
   <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 50px; margin: auto 0"></div>
   <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">
-  <div data-expected-height="20" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-align: baseline; height: 20px;"></div>
-  <div data-expected-height="10" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-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-align: baseline; height: 10px; margin: 20px 0 0;"></div>
+  <div data-expected-height="20" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; height: 20px;"></div>
+  <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>
 </div>
 
 <div class="flexbox" style="font-family: test;">
-  <div id="baseline1" style="width: -webkit-flex(1 0 0); -webkit-flex-align: baseline;">ahem</div>
-  <div id="baseline2" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
-  <div id="baseline3" data-expected-height="50" style="width: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
+  <div id="baseline1" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline2" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
+  <div id="baseline3" data-expected-height="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></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="font-family: test;">
-  <div id="baseline4" style="width: -webkit-flex(1 0 0); -webkit-flex-align: baseline;">ahem</div>
-  <div id="baseline5" style="width: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
+  <div id="baseline4" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline5" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
   <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
 </div>
 
@@ -167,7 +167,7 @@ function additionalBaselineChecks()
     logIfFalse(baseline1.offsetTop + baseline1.offsetHeight == baseline2.offsetTop + baseline2.offsetHeight,
                "baseline1 and baseline2 should have the same baseline.");
     logIfFalse(baseline3.offsetTop < 25,
-               "baseline3 should be above the center flex-aligned item.");
+               "baseline3 should be above the center flex-item-aligned item.");
 
     var baseline4 = document.getElementById("baseline4");
     var baseline5 = document.getElementById("baseline5");
diff --git a/LayoutTests/css3/flexbox/line-wrapping.html b/LayoutTests/css3/flexbox/line-wrapping.html
index 45d2f0c..edfff45 100644
--- a/LayoutTests/css3/flexbox/line-wrapping.html
+++ b/LayoutTests/css3/flexbox/line-wrapping.html
@@ -117,7 +117,7 @@ if (window.layoutTestController)
     <div data-expected-width=100 data-expected-height=100>
         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
     </div>
-    <div data-expected-width=100 data-expected-height=40 style="-webkit-flex-align: start;">
+    <div data-expected-width=100 data-expected-height=40 style="-webkit-flex-item-align: start;">
         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=100></div>
     </div>
 </div>
@@ -126,7 +126,7 @@ if (window.layoutTestController)
     <div data-expected-width=200 data-expected-height=50>
         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
     </div>
-    <div data-expected-width=200 data-expected-height=50 style="-webkit-flex-align: start;">
+    <div data-expected-width=200 data-expected-height=50 style="-webkit-flex-item-align: start;">
         <div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=70 data-offset-x=0></div>
     </div>
 </div>
@@ -135,7 +135,7 @@ if (window.layoutTestController)
     <div data-expected-width=200 data-expected-height=50>
         <div data-offset-y=0></div><div data-offset-y=0></div>
     </div>
-    <div data-expected-width=80 data-expected-height=50 style="-webkit-flex-align: start;">
+    <div data-expected-width=80 data-expected-height=50 style="-webkit-flex-item-align: start;">
         <div data-offset-y=50></div><div data-offset-y=50></div>
     </div>
 </div>
@@ -144,7 +144,7 @@ if (window.layoutTestController)
     <div data-expected-width=250 data-expected-height=100>
         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
     </div>
-    <div data-expected-width=250 data-expected-height=40 style="-webkit-flex-align: start;">
+    <div data-expected-width=250 data-expected-height=40 style="-webkit-flex-item-align: start;">
         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=250></div>
     </div>
 </div>
@@ -153,7 +153,7 @@ if (window.layoutTestController)
     <div data-expected-width=500 data-expected-height=0>
         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
     </div>
-    <div data-expected-width=500 data-expected-height=0 style="-webkit-flex-align: start;">
+    <div data-expected-width=500 data-expected-height=0 style="-webkit-flex-item-align: start;">
         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
     </div>
 </div>
@@ -164,7 +164,7 @@ if (window.layoutTestController)
     <div data-expected-height data-expected-width=100>
         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
     </div>
-    <div data-expected-height=100 data-expected-width=40 style="-webkit-flex-align: start;">
+    <div data-expected-height=100 data-expected-width=40 style="-webkit-flex-item-align: start;">
         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=100></div>
     </div>
 </div>
@@ -173,7 +173,7 @@ if (window.layoutTestController)
     <div data-expected-height=200 data-expected-width=50>
         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
     </div>
-    <div data-expected-height=200 data-expected-width=50 style="-webkit-flex-align: start;">
+    <div data-expected-height=200 data-expected-width=50 style="-webkit-flex-item-align: start;">
         <div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=74 data-offset-y=0></div>
     </div>
 </div>
@@ -182,7 +182,7 @@ if (window.layoutTestController)
     <div data-expected-height=200 data-expected-width=50>
         <div data-offset-x=4></div><div data-offset-x=4></div>
     </div>
-    <div data-expected-height=80 data-expected-width=50 style="-webkit-flex-align: start;">
+    <div data-expected-height=80 data-expected-width=50 style="-webkit-flex-item-align: start;">
         <div data-offset-x=54></div><div data-offset-x=54></div>
     </div>
 </div>
@@ -191,7 +191,7 @@ if (window.layoutTestController)
     <div data-expected-height=150 data-expected-width=100>
         <div data-offset-x=4></div><div data-offset-x=24></div><div data-offset-x=44 data-offset-y=0></div>
     </div>
-    <div data-expected-height=150 data-expected-width=60 style="-webkit-flex-align: start;">
+    <div data-expected-height=150 data-expected-width=60 style="-webkit-flex-item-align: start;">
         <div data-offset-x=4></div><div data-offset-x=24></div><div data-offset-x=44 data-offset-y=150></div>
     </div>
 </div>
@@ -200,7 +200,7 @@ if (window.layoutTestController)
     <div data-expected-height=500 data-expected-width=0>
         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
     </div>
-    <div data-expected-height=500 data-expected-width=0 style="-webkit-flex-align: start;">
+    <div data-expected-height=500 data-expected-width=0 style="-webkit-flex-item-align: start;">
         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
     </div>
 </div>
@@ -210,7 +210,7 @@ if (window.layoutTestController)
     <div data-expected-height=100 data-expected-width=100>
         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
     </div>
-    <div data-expected-height=100 data-expected-width=40 style="-webkit-flex-align: start;">
+    <div data-expected-height=100 data-expected-width=40 style="-webkit-flex-item-align: start;">
         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=100></div>
     </div>
 </div>
@@ -219,7 +219,7 @@ if (window.layoutTestController)
     <div data-expected-height=200 data-expected-width=50>
         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
     </div>
-    <div data-expected-height=200 data-expected-width=50 style="-webkit-flex-align: start;">
+    <div data-expected-height=200 data-expected-width=50 style="-webkit-flex-item-align: start;">
         <div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=10 data-offset-y=0></div>
     </div>
 </div>
@@ -228,7 +228,7 @@ if (window.layoutTestController)
     <div data-expected-height=200 data-expected-width=50>
         <div data-offset-x=80></div><div data-offset-x=80></div>
     </div>
-    <div data-expected-height=80 data-expected-width=50 style="-webkit-flex-align: start;">
+    <div data-expected-height=80 data-expected-width=50 style="-webkit-flex-item-align: start;">
         <div data-offset-x=30></div><div data-offset-x=30></div>
     </div>
 </div>
@@ -237,7 +237,7 @@ if (window.layoutTestController)
     <div data-expected-height=150 data-expected-width=100>
         <div data-offset-x=80></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=0></div>
     </div>
-    <div data-expected-height=150 data-expected-width=60 style="-webkit-flex-align: start;">
+    <div data-expected-height=150 data-expected-width=60 style="-webkit-flex-item-align: start;">
         <div data-offset-x=80></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=150></div>
     </div>
 </div>
@@ -249,7 +249,7 @@ if (window.layoutTestController)
     <div data-expected-height=500 data-expected-width=0>
         <div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-40 data-offset-y=0></div>
     </div>
-    <div data-expected-height=500 data-expected-width=0 style="-webkit-flex-align: start;">
+    <div data-expected-height=500 data-expected-width=0 style="-webkit-flex-item-align: start;">
         <div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-40 data-offset-y=0></div>
     </div>
 </div>
diff --git a/LayoutTests/css3/flexbox/orthogonal-flex-directions.html b/LayoutTests/css3/flexbox/orthogonal-flex-directions.html
index a4d3ec0..107cf523 100644
--- a/LayoutTests/css3/flexbox/orthogonal-flex-directions.html
+++ b/LayoutTests/css3/flexbox/orthogonal-flex-directions.html
@@ -59,7 +59,7 @@ body {
 }
 
 .align-start {
-    -webkit-flex-align: start;
+    -webkit-flex-item-align: start;
 }
 </style>
 <script>
diff --git a/LayoutTests/css3/flexbox/script-tests/css-properties.js b/LayoutTests/css3/flexbox/script-tests/css-properties.js
index 05896be..d427af9 100644
--- a/LayoutTests/css3/flexbox/script-tests/css-properties.js
+++ b/LayoutTests/css3/flexbox/script-tests/css-properties.js
@@ -69,36 +69,36 @@ shouldBeEqualToString('flexbox.style.webkitFlexPack', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'start');
 
 
-shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
+shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
 // The initial value is 'stretch'.
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
 
-flexbox.style.webkitFlexAlign = 'foo';
-shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
+flexbox.style.webkitFlexItemAlign = 'foo';
+shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
 
-flexbox.style.webkitFlexAlign = 'start';
-shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'start');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'start');
+flexbox.style.webkitFlexItemAlign = 'start';
+shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'start');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'start');
 
-flexbox.style.webkitFlexAlign = 'end';
-shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'end');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'end');
+flexbox.style.webkitFlexItemAlign = 'end';
+shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'end');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'end');
 
-flexbox.style.webkitFlexAlign = 'center';
-shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'center');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'center');
+flexbox.style.webkitFlexItemAlign = 'center';
+shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'center');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'center');
 
-flexbox.style.webkitFlexAlign = 'stretch';
-shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'stretch');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
+flexbox.style.webkitFlexItemAlign = 'stretch';
+shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
 
-flexbox.style.webkitFlexAlign = 'baseline';
-shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'baseline');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'baseline');
+flexbox.style.webkitFlexItemAlign = 'baseline';
+shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'baseline');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'baseline');
 
-flexbox.style.webkitFlexAlign = '';
-shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
+flexbox.style.webkitFlexItemAlign = '';
+shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
 
 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 9c1e896..7602b17 100644
--- a/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
+++ b/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
@@ -144,7 +144,7 @@ zoom: 1;
 -webkit-column-width: auto;
 -webkit-flex-order: 0;
 -webkit-flex-pack: start;
--webkit-flex-align: stretch;
+-webkit-flex-item-align: stretch;
 -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 d62be86..5b586d2 100644
--- 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,7 @@ 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-align: stretch
+    -webkit-flex-item-align: stretch
     -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 3dd6204..f520e2523 100644
--- a/LayoutTests/svg/css/getComputedStyle-basic-expected.txt
+++ b/LayoutTests/svg/css/getComputedStyle-basic-expected.txt
@@ -286,8 +286,8 @@ 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-align) : stretch
-rect: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(-webkit-flex-item-align) : stretch
+rect: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-flex-direction) : row
 rect: style.getPropertyCSSValue(-webkit-flex-direction) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-flex-flow) : row nowrap
@@ -794,8 +794,8 @@ 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-align) : stretch
-g: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(-webkit-flex-item-align) : stretch
+g: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-flex-direction) : row
 g: style.getPropertyCSSValue(-webkit-flex-direction) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-flex-flow) : row nowrap
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 3b44e3a..496db2a 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,42 @@
+2012-01-10  Ojan Vafai  <ojan@chromium.org>
+
+        Rename flex-align to flex-item-align.
+        https://bugs.webkit.org/show_bug.cgi?id=75929
+
+        Reviewed by Darin Adler.
+
+        The spec has changed and now flex-align will be set on
+        the flexbox itself.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseValue):
+        * css/CSSPrimitiveValueMappings.h:
+        (WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
+        (WebCore::CSSPrimitiveValue::operator EFlexAlign):
+        * 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::RenderFlexibleBox::layoutAndPlaceChildren):
+        (WebCore::RenderFlexibleBox::alignChildren):
+        * rendering/style/RenderStyle.h:
+        (WebCore::RenderStyleBitfields::flexItemAlign):
+        (WebCore::RenderStyleBitfields::setFlexItemAlign):
+        (WebCore::RenderStyleBitfields::initialFlexItemAlign):
+        * rendering/style/RenderStyleConstants.h:
+        * rendering/style/StyleFlexibleBoxData.cpp:
+        (WebCore::StyleFlexibleBoxData::StyleFlexibleBoxData):
+        (WebCore::StyleFlexibleBoxData::operator==):
+        * rendering/style/StyleFlexibleBoxData.h:
+
 2012-01-10  Eric Carlson  <eric.carlson@apple.com>
 
         Replace TextTrackCue "getCueAsSource" method with "text" attribute
diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
index 22eec1e..c9a1f00 100644
--- a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
+++ b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
@@ -217,7 +217,7 @@ static const int computedProperties[] = {
 #endif
     CSSPropertyWebkitFlexOrder,
     CSSPropertyWebkitFlexPack,
-    CSSPropertyWebkitFlexAlign,
+    CSSPropertyWebkitFlexItemAlign,
     CSSPropertyWebkitFlexDirection,
     CSSPropertyWebkitFlexFlow,
     CSSPropertyWebkitFlexWrap,
@@ -1520,8 +1520,8 @@ 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:
+            return cssValuePool->createValue(style->flexItemAlign());
         case CSSPropertyWebkitFlexDirection:
             return cssValuePool->createValue(style->flexDirection());
         case CSSPropertyWebkitFlexWrap:
diff --git a/Source/WebCore/css/CSSParser.cpp b/Source/WebCore/css/CSSParser.cpp
index 40f2cf1..cc50fa2 100644
--- a/Source/WebCore/css/CSSParser.cpp
+++ b/Source/WebCore/css/CSSParser.cpp
@@ -1637,8 +1637,8 @@ 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;
+    case CSSPropertyWebkitFlexItemAlign:
+        validPrimitive = id == CSSValueAuto || id == CSSValueStart || id == CSSValueEnd || id == CSSValueCenter || id == CSSValueBaseline || id == CSSValueStretch;
         break;
     case CSSPropertyWebkitFlexDirection:
         validPrimitive = id == CSSValueRow || id == CSSValueRowReverse || id == CSSValueColumn || id == CSSValueColumnReverse;
diff --git a/Source/WebCore/css/CSSPrimitiveValueMappings.h b/Source/WebCore/css/CSSPrimitiveValueMappings.h
index f8444ca..f7c725f 100644
--- a/Source/WebCore/css/CSSPrimitiveValueMappings.h
+++ b/Source/WebCore/css/CSSPrimitiveValueMappings.h
@@ -1158,6 +1158,9 @@ template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EFlexAlign e)
 {
     m_primitiveUnitType = CSS_IDENT;
     switch (e) {
+    case AlignAuto:
+        m_value.ident = CSSValueAuto;
+        break;
     case AlignStart:
         m_value.ident = CSSValueStart;
         break;
@@ -1179,6 +1182,8 @@ template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EFlexAlign e)
 template<> inline CSSPrimitiveValue::operator EFlexAlign() const
 {
     switch (m_value.ident) {
+    case CSSValueAuto:
+        return AlignAuto;
     case CSSValueStart:
         return AlignStart;
     case CSSValueEnd:
diff --git a/Source/WebCore/css/CSSProperty.cpp b/Source/WebCore/css/CSSProperty.cpp
index 3bbf032..6d13562 100644
--- a/Source/WebCore/css/CSSProperty.cpp
+++ b/Source/WebCore/css/CSSProperty.cpp
@@ -558,7 +558,7 @@ bool CSSProperty::isInheritedProperty(unsigned propertyID)
 #endif
     case CSSPropertyWebkitFlexOrder:
     case CSSPropertyWebkitFlexPack:
-    case CSSPropertyWebkitFlexAlign:
+    case CSSPropertyWebkitFlexItemAlign:
     case CSSPropertyWebkitFlexDirection:
     case CSSPropertyWebkitFlexFlow:
     case CSSPropertyWebkitFlexWrap:
diff --git a/Source/WebCore/css/CSSPropertyNames.in b/Source/WebCore/css/CSSPropertyNames.in
index c0299da..1ab3e89 100644
--- a/Source/WebCore/css/CSSPropertyNames.in
+++ b/Source/WebCore/css/CSSPropertyNames.in
@@ -253,9 +253,9 @@ 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
 -webkit-flex-order
 -webkit-flex-pack
 -webkit-flex-wrap
diff --git a/Source/WebCore/css/CSSStyleApplyProperty.cpp b/Source/WebCore/css/CSSStyleApplyProperty.cpp
index 389f25c..931dda4 100644
--- a/Source/WebCore/css/CSSStyleApplyProperty.cpp
+++ b/Source/WebCore/css/CSSStyleApplyProperty.cpp
@@ -1672,7 +1672,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());
     setPropertyHandler(CSSPropertyWebkitFlexFlow, ApplyPropertyExpanding<SuppressValue, CSSPropertyWebkitFlexDirection, CSSPropertyWebkitFlexWrap>::createHandler());
diff --git a/Source/WebCore/css/CSSStyleSelector.cpp b/Source/WebCore/css/CSSStyleSelector.cpp
index f12161f..c50aa27 100644
--- a/Source/WebCore/css/CSSStyleSelector.cpp
+++ b/Source/WebCore/css/CSSStyleSelector.cpp
@@ -3719,7 +3719,7 @@ void CSSStyleSelector::applyProperty(int id, CSSValue *value)
     case CSSPropertyWordSpacing:
     case CSSPropertyWebkitFlexOrder:
     case CSSPropertyWebkitFlexPack:
-    case CSSPropertyWebkitFlexAlign:
+    case CSSPropertyWebkitFlexItemAlign:
     case CSSPropertyWebkitFlexDirection:
     case CSSPropertyWebkitFlexFlow:
     case CSSPropertyWebkitFlexWrap:
diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
index 40adf38..25f168a 100644
--- a/Source/WebCore/rendering/RenderBox.cpp
+++ b/Source/WebCore/rendering/RenderBox.cpp
@@ -1804,7 +1804,7 @@ 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()->flexAlign() != AlignStretch))
+    if (parent()->isFlexibleBox() && (!parent()->style()->isColumnFlexDirection() || style()->flexItemAlign() != AlignStretch))
         return true;
 
     // Flexible horizontal boxes lay out children at their intrinsic widths.  Also vertical boxes
diff --git a/Source/WebCore/rendering/RenderFlexibleBox.cpp b/Source/WebCore/rendering/RenderFlexibleBox.cpp
index f8c74d0..55f8843 100644
--- a/Source/WebCore/rendering/RenderFlexibleBox.cpp
+++ b/Source/WebCore/rendering/RenderFlexibleBox.cpp
@@ -607,7 +607,7 @@ void RenderFlexibleBox::layoutAndPlaceChildren(FlexOrderIterator& iterator, cons
         child->setChildNeedsLayout(true);
         child->layoutIfNeeded();
 
-        if (child->style()->flexAlign() == AlignBaseline) {
+        if (child->style()->flexItemAlign() == AlignBaseline) {
             LayoutUnit ascent = marginBoxAscent(child);
             LayoutUnit descent = (crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child)) - ascent;
 
@@ -695,7 +695,10 @@ void RenderFlexibleBox::alignChildren(FlexOrderIterator& iterator, LayoutUnit ma
         }
 
         // FIXME: Make sure this does the right thing with column flows.
-        switch (child->style()->flexAlign()) {
+        switch (child->style()->flexItemAlign()) {
+        case AlignAuto:
+            // FIXME: Handle this once we add flex-align.
+            break;
         case AlignStretch: {
             if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {
                 LayoutUnit logicalHeightBefore = child->logicalHeight();
diff --git a/Source/WebCore/rendering/style/RenderStyle.h b/Source/WebCore/rendering/style/RenderStyle.h
index c037ace..eddd0f8 100644
--- a/Source/WebCore/rendering/style/RenderStyle.h
+++ b/Source/WebCore/rendering/style/RenderStyle.h
@@ -800,7 +800,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; }
     EFlexWrap flexWrap() const { return static_cast<EFlexWrap>(rareNonInheritedData->m_flexibleBox->m_flexWrap); }
@@ -1220,7 +1220,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); }
 #if ENABLE(CSS_GRID_LAYOUT)
@@ -1544,7 +1544,8 @@ public:
     static float initialFlexboxHeightNegativeFlex() { return 0; }
     static int initialFlexOrder() { return 0; }
     static EFlexPack initialFlexPack() { return PackStart; }
-    static EFlexAlign initialFlexAlign() { return AlignStretch; }
+    // FIXME: When we add in flex-align, default flex-item-align to AlignAuto.
+    static EFlexAlign initialFlexItemAlign() { return AlignStretch; }
     static EFlexDirection initialFlexDirection() { return FlowRow; }
     static EFlexWrap initialFlexWrap() { return FlexNoWrap; }
     static int initialMarqueeLoopCount() { return -1; }
diff --git a/Source/WebCore/rendering/style/RenderStyleConstants.h b/Source/WebCore/rendering/style/RenderStyleConstants.h
index ada7f61..9191ba2 100644
--- a/Source/WebCore/rendering/style/RenderStyleConstants.h
+++ b/Source/WebCore/rendering/style/RenderStyleConstants.h
@@ -177,7 +177,7 @@ enum EBoxDirection { BNORMAL, BREVERSE };
 // CSS3 Flexbox Properties
 
 enum EFlexPack { PackStart, PackEnd, PackCenter, PackJustify };
-enum EFlexAlign { AlignStart, AlignEnd, AlignCenter, AlignStretch, AlignBaseline };
+enum EFlexAlign { AlignAuto, AlignStart, AlignEnd, AlignCenter, AlignStretch, AlignBaseline };
 enum EFlexDirection { FlowRow, FlowRowReverse, FlowColumn, FlowColumnReverse };
 enum EFlexWrap { FlexNoWrap, FlexWrap, FlexWrapReverse };
 
diff --git a/Source/WebCore/rendering/style/StyleFlexibleBoxData.cpp b/Source/WebCore/rendering/style/StyleFlexibleBoxData.cpp
index 53e2a23..5ca0edb 100644
--- a/Source/WebCore/rendering/style/StyleFlexibleBoxData.cpp
+++ b/Source/WebCore/rendering/style/StyleFlexibleBoxData.cpp
@@ -37,7 +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,7 +51,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,7 +61,7 @@ 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_flexAlign == o.m_flexAlign
+        && 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;
 }
 
diff --git a/Source/WebCore/rendering/style/StyleFlexibleBoxData.h b/Source/WebCore/rendering/style/StyleFlexibleBoxData.h
index a5f1a03..4a90fbe 100644
--- a/Source/WebCore/rendering/style/StyleFlexibleBoxData.h
+++ b/Source/WebCore/rendering/style/StyleFlexibleBoxData.h
@@ -50,7 +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
 
-- 
1.8.3.1