Attachment 241719 Details for Bug 133359 – Patch

[patch] Patch

bug-133359-20141117183031.patch (text/plain), 119.06 KB, created by Javier Fernandez on 2014-11-17 09:30:21 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Javier Fernandez

Created: 2014-11-17 09:30:21 PST

Size: 119.06 KB

patch

obsolete

>Subversion Revision: 176201
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 14ee2cc4e4550a32a10c9795e79aec96d2bc1b40..d78b4d265fca9964a2c5e4318d85d7fe2a85ae67 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,86 @@
>+2014-10-27  Javier Fernandez  <jfernandez@igalia.com>
>+
>+        [CSS Grid Layout] Upgrade align-self and align-items parsing to CSS 3
>+        https://bugs.webkit.org/show_bug.cgi?id=133359
>+
>+        Reviewed by David Hyatt.
>+
>+        Broaden justify-self's parsing name as a preparation of migrating
>+        align-self, align-items and justify-items to the CSS 3 Alignment syntax.
>+
>+        The current naming was too tied to justify-self and needs to
>+        be broadened. This will reduce the follow-up implementations'
>+        patches.
>+
>+        Upgrade align-self and align-items parsing to CSS 3
>+
>+        This change migrates the 2 properties to the CSS 3 Alignment
>+        parsing. The new parsing is identical to how we parse
>+        'justify-self'. The 2 properties need to be migrated together
>+        as they are used in tandem in CSSComputedStyleDeclaration.
>+
>+        This change also removes EAlignItems as it is now unused.
>+
>+        Tests: css3/parse-align-items.html
>+               css3/parse-align-self.html
>+
>+        * css/CSSComputedStyleDeclaration.cpp:
>+        (WebCore::valueForItemPositionWithOverflowAlignment): Added. Builds the CSSValue for the for the alignment properties.
>+        (WebCore::ComputedStyleExtractor::propertyValue):
>+        * css/CSSParser.cpp:
>+        (WebCore::isKeywordPropertyID): Removed align-items and align-self from the list.
>+        (WebCore::isValidKeywordPropertyAndValue): Removed align-items and align-self from the list.
>+        (WebCore::CSSParser::parseValue): Added align-items and align-self to the list and call to the generic parsing fuction for the alignment properties.
>+        (WebCore::isBaselinePositionKeyword): Utility function added to identify Baseline keyword values.
>+        (WebCore::CSSParser::parseItemPositionOverflowPosition): Generic parsing fuction for the alignment properties.
>+        (WebCore::CSSParser::parseJustifySelf): Deleted.
>+        * css/CSSParser.h:
>+        * css/CSSPrimitiveValueMappings.h:
>+        (WebCore::CSSPrimitiveValue::CSSPrimitiveValue): Refactoring some mapping functions.
>+       (WebCore::CSSPrimitiveValue::operator ItemPosition): Added. Replace the old EAlignItems enumeration.
>+        (WebCore::CSSPrimitiveValue::operator OverflowAlignment): Added.
>+        (WebCore::CSSPrimitiveValue::operator EAlignItems): Deleted.
>+        (WebCore::CSSPrimitiveValue::operator EJustifySelf): Deleted.
>+        (WebCore::CSSPrimitiveValue::operator EJustifySelfOverflowAlignment): Deleted.
>+        * css/CSSPropertyNames.in:
>+        * css/CSSValueKeywords.in:
>+        * css/StyleResolver.cpp:
>+        (WebCore::StyleResolver::adjustRenderStyle): Added a new adjustment to resolve the "auto" vale on the alignment properties.
>+        (WebCore::StyleResolver::adjustStyleForAlignment): Added. Function to resolve the "auto" vale on the alignment properties. 
>+        (WebCore::StyleResolver::applyProperty):
>+        (WebCore::isDisplayFlexibleBox): Deleted. Moved to the RenderStyle.
>+        (WebCore::isDisplayGridBox): Deleted. Moved to the RenderStyle.
>+        (WebCore::isDisplayFlexibleOrGridBox): Deleted. Moved to the RenderStyle.
>+        * css/StyleResolver.h:
>+        * rendering/RenderBox.cpp:
>+        (WebCore::flexItemHasStretchAlignment): Adapted to the new ItemPosition enum.
>+        * rendering/RenderFlexibleBox.cpp:
>+        (WebCore::RenderFlexibleBox::firstLineBaseline): Adapted to the new ItemPosition enum.
>+        (WebCore::resolveAlignment): Consider also that align-items could be "auto", since it's the default now.
>+        (WebCore::RenderFlexibleBox::styleDidChange): Adapted to the new ItemPosition enum.
>+        (WebCore::RenderFlexibleBox::alignmentForChild): Adapted to the new ItemPosition enum.
>+        (WebCore::RenderFlexibleBox::needToStretchChild): Adapted to the new ItemPosition enum.
>+        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Adapted to the new ItemPosition enum.
>+        (WebCore::RenderFlexibleBox::alignChildren): Adapted to the new ItemPosition enum.
>+        * rendering/RenderFlexibleBox.h:
>+        * rendering/RenderFullScreen.cpp:
>+        (WebCore::createFullScreenStyle): Adapted to the new ItemPosition enum.
>+        * rendering/RenderMenuList.cpp:
>+        (WebCore::RenderMenuList::adjustInnerStyle): Adapted to the new ItemPosition enum.
>+        * rendering/mathml/RenderMathMLRoot.cpp:
>+        (WebCore::RenderMathMLRoot::updateStyle): Adapted to the new ItemPosition enum.
>+        * rendering/mathml/RenderMathMLScripts.cpp:
>+        (WebCore::RenderMathMLScripts::fixAnonymousStyleForSubSupPair): Adapted to the new ItemPosition enum.
>+        (WebCore::RenderMathMLScripts::fixAnonymousStyles): Adapted to the new ItemPosition enum.
>+        * rendering/style/RenderStyle.h: Adapted to the new ItemPosition enum.
>+        * rendering/style/RenderStyleConstants.h: Adapted to the new ItemPosition enum.
>+        * rendering/style/StyleRareNonInheritedData.cpp: Adapted to the new ItemPosition enum.
>+        (WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData): Adapted to the new ItemPosition enum.
>+        (WebCore::StyleRareNonInheritedData::operator==): Adapted to the new ItemPosition enum.
>+        * rendering/style/StyleRareNonInheritedData.h: Adapted to the new ItemPosition enum.
>+        * style/StyleResolveTree.cpp:
>+        (WebCore::Style::determineChange): Changes in the alignItems property will cause a Detach.
>+
> 2014-11-16  Andreas Kling  <akling@apple.com>
> 
>         Avoid synchronous style recalc when mutating a Node inside FrameSelection.
>diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>index 090ba03a60d16bbc7f4f52c3edecbec40ca01c73..7ee7b282fbe2896932dc619d7441007eed1c4a3e 100644
>--- a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>+++ b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>@@ -296,7 +296,7 @@ static const CSSPropertyID computedProperties[] = {
>     CSSPropertyFlexDirection,
>     CSSPropertyFlexWrap,
>     CSSPropertyJustifyContent,
>-    CSSPropertyWebkitJustifySelf,
>+    CSSPropertyJustifySelf,
>     CSSPropertyWebkitFilter,
> #if ENABLE(FILTERS_LEVEL_2)
>     CSSPropertyWebkitBackdropFilter,
>@@ -1713,6 +1713,15 @@ static PassRef<CSSValue> shapePropertyValue(const RenderStyle* style, const Shap
> }
> #endif
> 
>+static PassRefPtr<CSSValueList> valueForItemPositionWithOverflowAlignment(ItemPosition itemPosition, OverflowAlignment overflowAlignment)
>+{
>+    RefPtr<CSSValueList> result = CSSValueList::createSpaceSeparated();
>+    result->append(cssValuePool().createValue(itemPosition));
>+    if (itemPosition >= ItemPositionCenter && overflowAlignment != OverflowAlignmentDefault)
>+        result->append(cssValuePool().createValue(overflowAlignment));
>+    return result.release();
>+}
>+
> PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID, EUpdateLayout updateLayout) const
> {
>     Node* styledNode = this->styledNode();
>@@ -2056,15 +2065,19 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
>         case CSSPropertyAlignContent:
>             return cssValuePool().createValue(style->alignContent());
>         case CSSPropertyAlignItems:
>-            return cssValuePool().createValue(style->alignItems());
>-        case CSSPropertyAlignSelf:
>-            if (style->alignSelf() == AlignAuto) {
>+            return valueForItemPositionWithOverflowAlignment(style->alignItems(), style->alignItemsOverflowAlignment());
>+        case CSSPropertyAlignSelf: {
>+            ItemPosition alignSelf = style->alignSelf();
>+            OverflowAlignment overflow = style->alignSelfOverflowAlignment();
>+            if (alignSelf == ItemPositionAuto) {
>                 Node* parent = styledNode->parentNode();
>-                if (parent && parent->computedStyle())
>-                    return cssValuePool().createValue(parent->computedStyle()->alignItems());
>-                return cssValuePool().createValue(AlignStretch);
>+                if (parent && parent->computedStyle()) {
>+                    alignSelf = parent->computedStyle()->alignItems();
>+                    overflow = parent->computedStyle()->alignItemsOverflowAlignment();
>+                }
>             }
>-            return cssValuePool().createValue(style->alignSelf());
>+            return valueForItemPositionWithOverflowAlignment(alignSelf, overflow);
>+        }
>         case CSSPropertyFlex:
>             return getCSSPropertyValuesForShorthandProperties(flexShorthand());
>         case CSSPropertyFlexBasis:
>@@ -2081,13 +2094,8 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
>             return cssValuePool().createValue(style->flexWrap());
>         case CSSPropertyJustifyContent:
>             return cssValuePool().createValue(style->justifyContent());
>-        case CSSPropertyWebkitJustifySelf: {
>-            RefPtr<CSSValueList> result = CSSValueList::createSpaceSeparated();
>-            result->append(CSSPrimitiveValue::create(style->justifySelf()));
>-            if (style->justifySelf() >= JustifySelfCenter && style->justifySelfOverflowAlignment() != JustifySelfOverflowAlignmentDefault)
>-                result->append(CSSPrimitiveValue::create(style->justifySelfOverflowAlignment()));
>-            return result.release();
>-        }
>+        case CSSPropertyJustifySelf:
>+            return valueForItemPositionWithOverflowAlignment(style->justifySelf(), style->justifySelfOverflowAlignment());
>         case CSSPropertyOrder:
>             return cssValuePool().createValue(style->order(), CSSPrimitiveValue::CSS_NUMBER);
>         case CSSPropertyFloat:
>diff --git a/Source/WebCore/css/CSSParser.cpp b/Source/WebCore/css/CSSParser.cpp
>index 1dc777f564ad5d2da7e299c8189eb995a6af461b..5c1f74995d2a8c59e878ca4b191099c76e123a60 100644
>--- a/Source/WebCore/css/CSSParser.cpp
>+++ b/Source/WebCore/css/CSSParser.cpp
>@@ -865,6 +865,7 @@ static inline bool isValidKeywordPropertyAndValue(CSSPropertyID propertyId, int
>         if (valueID == CSSValueFlexStart || valueID == CSSValueFlexEnd || valueID == CSSValueCenter || valueID == CSSValueSpaceBetween || valueID == CSSValueSpaceAround || valueID == CSSValueStretch)
>             return true;
>         break;
>+#if !ENABLE(CSS_GRID_LAYOUT)
>     case CSSPropertyAlignItems:
>         // FIXME: Per CSS alignment, this property should accept the same arguments as 'justify-self' so we should share its parsing code.
>         if (valueID == CSSValueFlexStart || valueID == CSSValueFlexEnd || valueID == CSSValueCenter || valueID == CSSValueBaseline || valueID == CSSValueStretch)
>@@ -875,6 +876,7 @@ static inline bool isValidKeywordPropertyAndValue(CSSPropertyID propertyId, int
>         if (valueID == CSSValueAuto || valueID == CSSValueFlexStart || valueID == CSSValueFlexEnd || valueID == CSSValueCenter || valueID == CSSValueBaseline || valueID == CSSValueStretch)
>             return true;
>         break;
>+#endif
>     case CSSPropertyFlexDirection:
>         if (valueID == CSSValueRow || valueID == CSSValueRowReverse || valueID == CSSValueColumn || valueID == CSSValueColumnReverse)
>             return true;
>@@ -888,10 +890,12 @@ static inline bool isValidKeywordPropertyAndValue(CSSPropertyID propertyId, int
>         if (valueID == CSSValueFlexStart || valueID == CSSValueFlexEnd || valueID == CSSValueCenter || valueID == CSSValueSpaceBetween || valueID == CSSValueSpaceAround)
>             return true;
>         break;
>-    case CSSPropertyWebkitJustifySelf:
>+#if !ENABLE(CSS_GRID_LAYOUT)
>+    case CSSPropertyJustifySelf:
>         if (valueID == CSSValueAuto || valueID == CSSValueFlexStart || valueID == CSSValueFlexEnd || valueID == CSSValueCenter || valueID == CSSValueBaseline || valueID == CSSValueStretch)
>             return true;
>         break;
>+#endif
>     case CSSPropertyWebkitFontKerning:
>         if (valueID == CSSValueAuto || valueID == CSSValueNormal || valueID == CSSValueNone)
>             return true;
>@@ -1106,8 +1110,10 @@ static inline bool isKeywordPropertyID(CSSPropertyID propertyId)
>     case CSSPropertyColumnFill:
>     case CSSPropertyColumnRuleStyle:
>     case CSSPropertyAlignContent:
>+#if !ENABLE(CSS_GRID_LAYOUT)
>     case CSSPropertyAlignItems:
>     case CSSPropertyAlignSelf:
>+#endif
>     case CSSPropertyFlexDirection:
>     case CSSPropertyFlexWrap:
>     case CSSPropertyJustifyContent:
>@@ -2630,9 +2636,9 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
>         }
>         return false;
>     }
>-    case CSSPropertyWebkitJustifySelf:
>-        return parseJustifySelf(propId, important);
> #if ENABLE(CSS_GRID_LAYOUT)
>+    case CSSPropertyJustifySelf:
>+        return parseItemPositionOverflowPosition(propId, important);
>     case CSSPropertyWebkitGridAutoColumns:
>     case CSSPropertyWebkitGridAutoRows:
>         parsedValue = parseGridTrackSize(*m_valueList);
>@@ -2967,6 +2973,13 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
>         parsedValue = parseImageResolution();
>         break;
> #endif
>+#if ENABLE(CSS_GRID_LAYOUT)
>+    case CSSPropertyAlignSelf:
>+        return parseItemPositionOverflowPosition(propId, important);
>+
>+    case CSSPropertyAlignItems:
>+        return parseItemPositionOverflowPosition(propId, important);
>+#endif
>     case CSSPropertyBorderBottomStyle:
>     case CSSPropertyBorderCollapse:
>     case CSSPropertyBorderLeftStyle:
>@@ -3028,8 +3041,11 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
>     case CSSPropertyColumnFill:
>     case CSSPropertyColumnRuleStyle:
>     case CSSPropertyAlignContent:
>+#if !ENABLE(CSS_GRID_LAYOUT)
>     case CSSPropertyAlignItems:
>     case CSSPropertyAlignSelf:
>+    case CSSPropertyJustifySelf:
>+#endif
>     case CSSPropertyFlexDirection:
>     case CSSPropertyFlexWrap:
>     case CSSPropertyJustifyContent:
>@@ -3140,6 +3156,11 @@ void CSSParser::addFillValue(RefPtr<CSSValue>& lval, PassRef<CSSValue> rval)
>     lval = WTF::move(list);
> }
> 
>+static inline bool isBaselinePositionKeyword(CSSValueID id)
>+{
>+    return id == CSSValueBaseline || id == CSSValueLastBaseline;
>+}
>+
> static bool isItemPositionKeyword(CSSValueID id)
> {
>     return id == CSSValueStart || id == CSSValueEnd || id == CSSValueCenter
>@@ -3147,7 +3168,7 @@ static bool isItemPositionKeyword(CSSValueID id)
>         || id == CSSValueFlexEnd || id == CSSValueLeft || id == CSSValueRight;
> }
> 
>-bool CSSParser::parseJustifySelf(CSSPropertyID propId, bool important)
>+bool CSSParser::parseItemPositionOverflowPosition(CSSPropertyID propId, bool important)
> {
>     // auto | baseline | stretch | [<item-position> && <overflow-position>? ]
>     // <item-position> = center | start | end | self-start | self-end | flex-start | flex-end | left | right;
>@@ -3155,7 +3176,7 @@ bool CSSParser::parseJustifySelf(CSSPropertyID propId, bool important)
> 
>     CSSParserValue* value = m_valueList->current();
> 
>-    if (value->id == CSSValueAuto || value->id == CSSValueBaseline || value->id == CSSValueStretch) {
>+    if (value->id == CSSValueAuto || value->id == CSSValueStretch || isBaselinePositionKeyword(value->id)) {
>         if (m_valueList->next())
>             return false;
> 
>diff --git a/Source/WebCore/css/CSSParser.h b/Source/WebCore/css/CSSParser.h
>index a2a450f6c69f74803de878e73cdf858f2c9841ab..a0c5be48e6ad3cdbf7541ba7f11fb483b82b8914 100644
>--- a/Source/WebCore/css/CSSParser.h
>+++ b/Source/WebCore/css/CSSParser.h
>@@ -177,7 +177,7 @@ public:
> 
>     bool parseClipShape(CSSPropertyID, bool important);
> 
>-    bool parseJustifySelf(CSSPropertyID, bool important);
>+    bool parseItemPositionOverflowPosition(CSSPropertyID, bool important);
> 
> #if ENABLE(CSS_SHAPES)
>     PassRefPtr<CSSValue> parseShapeProperty(CSSPropertyID);
>diff --git a/Source/WebCore/css/CSSPrimitiveValueMappings.h b/Source/WebCore/css/CSSPrimitiveValueMappings.h
>index 8165e3b4b8e605c186f4b990cab18a2c412cb35f..f2313ed58af181a3de74a1b6fb8e2c22d6978be7 100644
>--- a/Source/WebCore/css/CSSPrimitiveValueMappings.h
>+++ b/Source/WebCore/css/CSSPrimitiveValueMappings.h
>@@ -1428,57 +1428,6 @@ template<> inline CSSPrimitiveValue::operator EEmptyCell() const
>     return SHOW;
> }
> 
>-template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EAlignItems e)
>-    : CSSValue(PrimitiveClass)
>-{
>-    m_primitiveUnitType = CSS_VALUE_ID;
>-    switch (e) {
>-    case AlignAuto:
>-        m_value.valueID = CSSValueAuto;
>-        break;
>-    case AlignFlexStart:
>-        m_value.valueID = CSSValueFlexStart;
>-        break;
>-    case AlignFlexEnd:
>-        m_value.valueID = CSSValueFlexEnd;
>-        break;
>-    case AlignCenter:
>-        m_value.valueID = CSSValueCenter;
>-        break;
>-    case AlignStretch:
>-        m_value.valueID = CSSValueStretch;
>-        break;
>-    case AlignBaseline:
>-        m_value.valueID = CSSValueBaseline;
>-        break;
>-    }
>-}
>-
>-template<> inline CSSPrimitiveValue::operator EAlignItems() const
>-{
>-    ASSERT(isValueID());
>-
>-    switch (m_value.valueID) {
>-    case CSSValueAuto:
>-        return AlignAuto;
>-    case CSSValueFlexStart:
>-        return AlignFlexStart;
>-    case CSSValueFlexEnd:
>-        return AlignFlexEnd;
>-    case CSSValueCenter:
>-        return AlignCenter;
>-    case CSSValueStretch:
>-        return AlignStretch;
>-    case CSSValueBaseline:
>-        return AlignBaseline;
>-    default:
>-        break;
>-    }
>-
>-    ASSERT_NOT_REACHED();
>-    return AlignFlexStart;
>-}
>-
> template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EJustifyContent e)
>     : CSSValue(PrimitiveClass)
> {
>@@ -5082,116 +5031,118 @@ template<> inline CSSPrimitiveValue::operator CSSBoxType() const
>     return BoxMissing;
> }
> 
>-template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EJustifySelf justifySelf)
>+template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ItemPosition itemPosition)
>     : CSSValue(PrimitiveClass)
> {
>     m_primitiveUnitType = CSS_VALUE_ID;
>-    switch (justifySelf) {
>-    case JustifySelfAuto:
>+    switch (itemPosition) {
>+    case ItemPositionAuto:
>         m_value.valueID = CSSValueAuto;
>         break;
>-    case JustifySelfStretch:
>+    case ItemPositionStretch:
>         m_value.valueID = CSSValueStretch;
>         break;
>-    case JustifySelfBaseline:
>+    case ItemPositionBaseline:
>         m_value.valueID = CSSValueBaseline;
>         break;
>-    case JustifySelfCenter:
>+    case ItemPositionLastBaseline:
>+        m_value.valueID = CSSValueLastBaseline;
>+        break;
>+    case ItemPositionCenter:
>         m_value.valueID = CSSValueCenter;
>         break;
>-    case JustifySelfStart:
>+    case ItemPositionStart:
>         m_value.valueID = CSSValueStart;
>         break;
>-    case JustifySelfEnd:
>+    case ItemPositionEnd:
>         m_value.valueID = CSSValueEnd;
>         break;
>-    case JustifySelfSelfStart:
>+    case ItemPositionSelfStart:
>         m_value.valueID = CSSValueSelfStart;
>         break;
>-    case JustifySelfSelfEnd:
>+    case ItemPositionSelfEnd:
>         m_value.valueID = CSSValueSelfEnd;
>         break;
>-    case JustifySelfFlexStart:
>+    case ItemPositionFlexStart:
>         m_value.valueID = CSSValueFlexStart;
>         break;
>-    case JustifySelfFlexEnd:
>+    case ItemPositionFlexEnd:
>         m_value.valueID = CSSValueFlexEnd;
>         break;
>-    case JustifySelfLeft:
>+    case ItemPositionLeft:
>         m_value.valueID = CSSValueLeft;
>         break;
>-    case JustifySelfRight:
>+    case ItemPositionRight:
>         m_value.valueID = CSSValueRight;
>         break;
>-    default:
>-        m_value.valueID = CSSValueAuto;
>-        break;
>     }
> }
> 
>-template<> inline CSSPrimitiveValue::operator EJustifySelf() const
>+template<> inline CSSPrimitiveValue::operator ItemPosition() const
> {
>     switch (m_value.valueID) {
>     case CSSValueAuto:
>-        return JustifySelfAuto;
>+        return ItemPositionAuto;
>     case CSSValueStretch:
>-        return JustifySelfStretch;
>+        return ItemPositionStretch;
>     case CSSValueBaseline:
>-        return JustifySelfBaseline;
>+        return ItemPositionBaseline;
>+    case CSSValueLastBaseline:
>+        return ItemPositionLastBaseline;
>     case CSSValueCenter:
>-        return JustifySelfCenter;
>+        return ItemPositionCenter;
>     case CSSValueStart:
>-        return JustifySelfStart;
>+        return ItemPositionStart;
>     case CSSValueEnd:
>-        return JustifySelfEnd;
>+        return ItemPositionEnd;
>     case CSSValueSelfStart:
>-        return JustifySelfSelfStart;
>+        return ItemPositionSelfStart;
>     case CSSValueSelfEnd:
>-        return JustifySelfSelfEnd;
>+        return ItemPositionSelfEnd;
>     case CSSValueFlexStart:
>-        return JustifySelfFlexStart;
>+        return ItemPositionFlexStart;
>     case CSSValueFlexEnd:
>-        return JustifySelfFlexEnd;
>+        return ItemPositionFlexEnd;
>     case CSSValueLeft:
>-        return JustifySelfLeft;
>+        return ItemPositionLeft;
>     case CSSValueRight:
>-        return JustifySelfRight;
>+        return ItemPositionRight;
>     default:
>         break;
>     }
>     ASSERT_NOT_REACHED();
>-    return JustifySelfAuto;
>+    return ItemPositionAuto;
> }
> 
>-template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EJustifySelfOverflowAlignment overflowAlignment)
>+template<> inline CSSPrimitiveValue::CSSPrimitiveValue(OverflowAlignment overflowAlignment)
>     : CSSValue(PrimitiveClass)
> {
>     m_primitiveUnitType = CSS_VALUE_ID;
>     switch (overflowAlignment) {
>-    case JustifySelfOverflowAlignmentDefault:
>+    case OverflowAlignmentDefault:
>         m_value.valueID = CSSValueDefault;
>         break;
>-    case JustifySelfOverflowAlignmentTrue:
>+    case OverflowAlignmentTrue:
>         m_value.valueID = CSSValueTrue;
>         break;
>-    case JustifySelfOverflowAlignmentSafe:
>+    case OverflowAlignmentSafe:
>         m_value.valueID = CSSValueSafe;
>         break;
>     }
> }
> 
>-template<> inline CSSPrimitiveValue::operator EJustifySelfOverflowAlignment() const
>+template<> inline CSSPrimitiveValue::operator OverflowAlignment() const
> {
>     switch (m_value.valueID) {
>     case CSSValueTrue:
>-        return JustifySelfOverflowAlignmentTrue;
>+        return OverflowAlignmentTrue;
>     case CSSValueSafe:
>-        return JustifySelfOverflowAlignmentSafe;
>+        return OverflowAlignmentSafe;
>     default:
>         break;
>     }
>     ASSERT_NOT_REACHED();
>-    return JustifySelfOverflowAlignmentTrue;
>+    return OverflowAlignmentTrue;
> }
> 
> 
>diff --git a/Source/WebCore/css/CSSPropertyNames.in b/Source/WebCore/css/CSSPropertyNames.in
>index 273a1ab11e12d2f347870a0e7cd8c25a96751bbc..819d05da365cc56d016ba71b1184963ecef5cbe8 100644
>--- a/Source/WebCore/css/CSSPropertyNames.in
>+++ b/Source/WebCore/css/CSSPropertyNames.in
>@@ -360,9 +360,9 @@ isolation [NewStyleBuilder, TypeName=Isolation]
> -webkit-filter
> align-content [NewStyleBuilder]
> -webkit-align-content = align-content
>-align-items [NewStyleBuilder]
>+align-items
> -webkit-align-items = align-items
>-align-self [NewStyleBuilder, TypeName=EAlignItems]
>+align-self
> -webkit-align-self = align-self
> flex
> -webkit-flex = flex
>@@ -383,7 +383,8 @@ justify-content [NewStyleBuilder]
> #if defined(ENABLE_FILTERS_LEVEL_2) && ENABLE_FILTERS_LEVEL_2
> -webkit-backdrop-filter
> #endif
>--webkit-justify-self
>+justify-self
>+-webkit-justify-self = justify-self
> -webkit-font-size-delta
> #if defined(ENABLE_CSS_GRID_LAYOUT) && ENABLE_CSS_GRID_LAYOUT
> -webkit-grid
>diff --git a/Source/WebCore/css/CSSValueKeywords.in b/Source/WebCore/css/CSSValueKeywords.in
>index 66dfd3853feecde81253f94705cd14fcd9562130..1a6495e0b06e259fccbf1e624429fd222d552d6c 100644
>--- a/Source/WebCore/css/CSSValueKeywords.in
>+++ b/Source/WebCore/css/CSSValueKeywords.in
>@@ -540,6 +540,7 @@ space-around
> // flex-end
> // center
> // baseline
>+last-baseline
> // stretch
> 
> // CSS_PROP_JUSTIFY_CONTENT
>@@ -553,6 +554,7 @@ space-around
> // auto
> // stretch
> // baseline
>+// last-baseline
> // center
> // start
> // end
>diff --git a/Source/WebCore/css/StyleResolver.cpp b/Source/WebCore/css/StyleResolver.cpp
>index caa6fd1a623073184da47bf3ad8f782725892a30..ac2fa7457a7b2a9b25bff60d25ddb68f4aa544d7 100644
>--- a/Source/WebCore/css/StyleResolver.cpp
>+++ b/Source/WebCore/css/StyleResolver.cpp
>@@ -1113,26 +1113,6 @@ static bool doesNotInheritTextDecoration(const RenderStyle& style, Element* e)
>         || style.isFloating() || style.hasOutOfFlowPosition();
> }
> 
>-static bool isDisplayFlexibleBox(EDisplay display)
>-{
>-    return display == FLEX || display == INLINE_FLEX;
>-}
>-
>-static inline bool isDisplayGridBox(EDisplay display)
>-{
>-#if ENABLE(CSS_GRID_LAYOUT)
>-    return display == GRID || display == INLINE_GRID;
>-#else
>-    UNUSED_PARAM(display);
>-    return false;
>-#endif
>-}
>-
>-static bool isDisplayFlexibleOrGridBox(EDisplay display)
>-{
>-    return isDisplayFlexibleBox(display) || isDisplayGridBox(display);
>-}
>-
> #if ENABLE(ACCELERATED_OVERFLOW_SCROLLING)
> static bool isScrollableOverflow(EOverflow overflow)
> {
>@@ -1235,14 +1215,14 @@ void StyleResolver::adjustRenderStyle(RenderStyle& style, const RenderStyle& par
>         if (style.writingMode() != TopToBottomWritingMode && (style.display() == BOX || style.display() == INLINE_BOX))
>             style.setWritingMode(TopToBottomWritingMode);
> 
>-        if (isDisplayFlexibleOrGridBox(parentStyle.display())) {
>+        if (parentStyle.isDisplayFlexibleOrGridBox()) {
>             style.setFloating(NoFloat);
>             style.setDisplay(equivalentBlockDisplay(style.display(), style.isFloating(), !document().inQuirksMode()));
>         }
>     }
> 
>     // Make sure our z-index value is only applied if the object is positioned.
>-    if (style.position() == StaticPosition && !isDisplayFlexibleOrGridBox(parentStyle.display()))
>+    if (style.position() == StaticPosition && !parentStyle.isDisplayFlexibleOrGridBox())
>         style.setHasAutoZIndex();
> 
>     // Auto z-index becomes 0 for the root element and transparent objects. This prevents
>@@ -1371,6 +1351,30 @@ void StyleResolver::adjustRenderStyle(RenderStyle& style, const RenderStyle& par
>         if ((e->hasTagName(SVGNames::foreignObjectTag) || e->hasTagName(SVGNames::textTag)) && style.isDisplayInlineType())
>             style.setDisplay(BLOCK);
>     }
>+
>+    // CSS Box Alignment specification requires to resolve "auto" (inital/default) values.
>+    adjustStyleForAlignment(style);
>+}
>+
>+void StyleResolver::adjustStyleForAlignment(RenderStyle& style)
>+{
>+    // The 'auto' keyword computes to:
>+    //  - 'stretch' for flex containers and grid containers,
>+    //  - 'start' for everything else. (to be resolved later, during the layout)
>+    if (style.alignItems() == ItemPositionAuto) {
>+        if (style.isDisplayFlexibleOrGridBox())
>+            style.setAlignItems(ItemPositionStretch);
>+        else
>+            style.setAlignItems(ItemPositionStart);
>+    }
>+
>+    // The 'auto' keyword computes to 'stretch' on absolutely-positioned elements,
>+    // and to the computed value of align-items on the parent (minus
>+    // any 'legacy' keywords) on all other boxes (to be resolved during the layout).
>+    if (style.alignSelf() == ItemPositionAuto) {
>+        if ((style.position() == AbsolutePosition))
>+            style.setAlignSelf(ItemPositionStretch);
>+    }
> }
> 
> bool StyleResolver::checkRegionStyle(Element* regionElement)
>@@ -2900,16 +2904,61 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
>         return;
>     }
> #endif /* ENABLE(CSS_GRID_LAYOUT) */
>+    case CSSPropertyAlignSelf: {
>+        if (isInherit) {
>+            state.style()->setAlignSelf(state.parentStyle()->alignSelf());
>+            state.style()->setAlignSelfOverflowAlignment(state.parentStyle()->alignSelfOverflowAlignment());
>+            return;
>+        }
>+        if (isInitial) {
>+            state.style()->setAlignSelf(RenderStyle::initialAlignSelf());
>+            state.style()->setAlignSelfOverflowAlignment(RenderStyle::initialAlignSelfOverflowAlignment());
>+            return;
>+        }
>+        if (Pair* pairValue = primitiveValue->getPairValue()) {
>+            state.style()->setAlignSelf(*pairValue->first());
>+            state.style()->setAlignSelfOverflowAlignment(*pairValue->second());
>+        } else
>+            state.style()->setAlignSelf(*primitiveValue);
>+        return;
>+    }
> 
>-    case CSSPropertyWebkitJustifySelf:
>-        HANDLE_INHERIT_AND_INITIAL(justifySelf, JustifySelf);
>+    case CSSPropertyAlignItems: {
>+        if (isInherit) {
>+            state.style()->setAlignItems(state.parentStyle()->alignItems());
>+            state.style()->setAlignItemsOverflowAlignment(state.parentStyle()->alignItemsOverflowAlignment());
>+            return;
>+        }
>+        if (isInitial) {
>+            state.style()->setAlignItems(RenderStyle::initialAlignItems());
>+            state.style()->setAlignItemsOverflowAlignment(RenderStyle::initialAlignItemsOverflowAlignment());
>+            return;
>+        }
>+        if (Pair* pairValue = primitiveValue->getPairValue()) {
>+            state.style()->setAlignItems(*pairValue->first());
>+            state.style()->setAlignItemsOverflowAlignment(*pairValue->second());
>+        } else
>+            state.style()->setAlignItems(*primitiveValue);
>+        return;
>+    }
>+    case CSSPropertyJustifySelf: {
>+        if (isInherit) {
>+            state.style()->setJustifySelf(state.parentStyle()->justifySelf());
>+            state.style()->setJustifySelfOverflowAlignment(state.parentStyle()->justifySelfOverflowAlignment());
>+            return;
>+        }
>+        if (isInitial) {
>+            state.style()->setJustifySelf(RenderStyle::initialJustifySelf());
>+            state.style()->setJustifySelfOverflowAlignment(RenderStyle::initialJustifySelfOverflowAlignment());
>+            return;
>+        }
>         if (Pair* pairValue = primitiveValue->getPairValue()) {
>             state.style()->setJustifySelf(*pairValue->first());
>             state.style()->setJustifySelfOverflowAlignment(*pairValue->second());
>         } else
>             state.style()->setJustifySelf(*primitiveValue);
>         return;
>-
>+    }
> #if ENABLE(CSS_SCROLL_SNAP)
>     case CSSPropertyWebkitScrollSnapType:
>         HANDLE_INHERIT_AND_INITIAL(scrollSnapType, ScrollSnapType);
>@@ -3128,8 +3177,6 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
>     case CSSPropertyWebkitCursorVisibility:
> #endif
>     case CSSPropertyAlignContent:
>-    case CSSPropertyAlignItems:
>-    case CSSPropertyAlignSelf:
>     case CSSPropertyFlexBasis:
>     case CSSPropertyFlexDirection:
>     case CSSPropertyFlexGrow:
>diff --git a/Source/WebCore/css/StyleResolver.h b/Source/WebCore/css/StyleResolver.h
>index b2ca96b344309fe10989e8b71aab023eda3a17f2..f6f02be641696fc46b43344c49e1014dba17c53e 100644
>--- a/Source/WebCore/css/StyleResolver.h
>+++ b/Source/WebCore/css/StyleResolver.h
>@@ -296,6 +296,7 @@ private:
> #endif
> 
>     void adjustRenderStyle(RenderStyle& styleToAdjust, const RenderStyle& parentStyle, Element*);
>+    void adjustStyleForAlignment(RenderStyle& styleToAdjust);
> #if ENABLE(CSS_GRID_LAYOUT)
>     std::unique_ptr<GridPosition> adjustNamedGridItemPosition(const NamedGridAreaMap&, const NamedGridLinesMap&, const GridPosition&, GridPositionSide) const;
> #endif
>diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
>index e48eb9b675dc9d21759924c8805afa0b89b49837..1d651afe018cec4d60ad54695cf85a973d3f9ca4 100644
>--- a/Source/WebCore/rendering/RenderBox.cpp
>+++ b/Source/WebCore/rendering/RenderBox.cpp
>@@ -2418,7 +2418,7 @@ LayoutUnit RenderBox::computeLogicalWidthInRegionUsing(SizeType widthType, Lengt
> static bool flexItemHasStretchAlignment(const RenderBox& flexitem)
> {
>     auto parent = flexitem.parent();
>-    return flexitem.style().alignSelf() == AlignStretch || (flexitem.style().alignSelf() == AlignAuto && parent->style().alignItems() == AlignStretch);
>+    return flexitem.style().alignSelf() == ItemPositionStretch || (flexitem.style().alignSelf() == ItemPositionAuto && parent->style().alignItems() == ItemPositionStretch);
> }
> 
> static bool isStretchingColumnFlexItem(const RenderBox& flexitem)
>diff --git a/Source/WebCore/rendering/RenderFlexibleBox.cpp b/Source/WebCore/rendering/RenderFlexibleBox.cpp
>index 36ad71e97c042ce3b78152f4c38b69e0c6c53529..59d4b2258671e7a6b4d186cc9f3585089cfa55de 100644
>--- a/Source/WebCore/rendering/RenderFlexibleBox.cpp
>+++ b/Source/WebCore/rendering/RenderFlexibleBox.cpp
>@@ -32,6 +32,7 @@
> #include "RenderFlexibleBox.h"
> 
> #include "LayoutRepainter.h"
>+#include "NotImplemented.h"
> #include "RenderLayer.h"
> #include "RenderView.h"
> #include <limits>
>@@ -186,7 +187,7 @@ int RenderFlexibleBox::firstLineBaseline() const
>     for (RenderBox* child = m_orderIterator.first(); child; child = m_orderIterator.next()) {
>         if (child->isOutOfFlowPositioned())
>             continue;
>-        if (alignmentForChild(*child) == AlignBaseline && !hasAutoMarginsInCrossAxis(*child)) {
>+        if (alignmentForChild(*child) == ItemPositionBaseline && !hasAutoMarginsInCrossAxis(*child)) {
>             baselineChild = child;
>             break;
>         }
>@@ -227,11 +228,11 @@ int RenderFlexibleBox::inlineBlockBaseline(LineDirectionMode direction) const
>     return synthesizedBaselineFromContentBox(*this, direction) + marginAscent;
> }
> 
>-static EAlignItems resolveAlignment(const RenderStyle* parentStyle, const RenderStyle* childStyle)
>+static ItemPosition resolveAlignment(const RenderStyle* parentStyle, const RenderStyle* childStyle)
> {
>-    EAlignItems align = childStyle->alignSelf();
>-    if (align == AlignAuto)
>-        align = parentStyle->alignItems();
>+    ItemPosition align = childStyle->alignSelf();
>+    if (align == ItemPositionAuto)
>+        align = (parentStyle->alignItems() == ItemPositionAuto) ? ItemPositionStretch : parentStyle->alignItems();
>     return align;
> }
> 
>@@ -239,12 +240,12 @@ void RenderFlexibleBox::styleDidChange(StyleDifference diff, const RenderStyle*
> {
>     RenderBlock::styleDidChange(diff, oldStyle);
> 
>-    if (oldStyle && oldStyle->alignItems() == AlignStretch && diff == StyleDifferenceLayout) {
>+    if (oldStyle && oldStyle->alignItems() == ItemPositionStretch && diff == StyleDifferenceLayout) {
>         // Flex items that were previously stretching need to be relayed out so we can compute new available cross axis space.
>         // This is only necessary for stretching since other alignment values don't change the size of the box.
>         for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
>-            EAlignItems previousAlignment = resolveAlignment(oldStyle, &child->style());
>-            if (previousAlignment == AlignStretch && previousAlignment != resolveAlignment(&style(), &child->style()))
>+            ItemPosition previousAlignment = resolveAlignment(oldStyle, &child->style());
>+            if (previousAlignment == ItemPositionStretch && previousAlignment != resolveAlignment(&style(), &child->style()))
>                 child->setChildNeedsLayout(MarkOnlyThis);
>         }
>     }
>@@ -1023,18 +1024,18 @@ void RenderFlexibleBox::prepareChildForPositionedLayout(RenderBox& child, Layout
>     }
> }
> 
>-EAlignItems RenderFlexibleBox::alignmentForChild(RenderBox& child) const
>+ItemPosition RenderFlexibleBox::alignmentForChild(RenderBox& child) const
> {
>-    EAlignItems align = resolveAlignment(&style(), &child.style());
>+    ItemPosition align = resolveAlignment(&style(), &child.style());
> 
>-    if (align == AlignBaseline && hasOrthogonalFlow(child))
>-        align = AlignFlexStart;
>+    if (align == ItemPositionBaseline && hasOrthogonalFlow(child))
>+        align = ItemPositionFlexStart;
> 
>     if (style().flexWrap() == FlexWrapReverse) {
>-        if (align == AlignFlexStart)
>-            align = AlignFlexEnd;
>-        else if (align == AlignFlexEnd)
>-            align = AlignFlexStart;
>+        if (align == ItemPositionFlexStart)
>+            align = ItemPositionFlexEnd;
>+        else if (align == ItemPositionFlexEnd)
>+            align = ItemPositionFlexStart;
>     }
> 
>     return align;
>@@ -1053,7 +1054,7 @@ size_t RenderFlexibleBox::numberOfInFlowPositionedChildren(const OrderedFlexItem
> 
> bool RenderFlexibleBox::needToStretchChild(RenderBox& child)
> {
>-    if (alignmentForChild(child) != AlignStretch)
>+    if (alignmentForChild(child) != ItemPositionStretch)
>         return false;
> 
>     Length crossAxisLength = isHorizontalFlow() ? child.style().height() : child.style().width();
>@@ -1104,7 +1105,7 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
>         updateAutoMarginsInMainAxis(child, autoMarginOffset);
> 
>         LayoutUnit childCrossAxisMarginBoxExtent;
>-        if (alignmentForChild(child) == AlignBaseline && !hasAutoMarginsInCrossAxis(child)) {
>+        if (alignmentForChild(child) == ItemPositionBaseline && !hasAutoMarginsInCrossAxis(child)) {
>             LayoutUnit ascent = marginBoxAscentForChild(child);
>             LayoutUnit descent = (crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child)) - ascent;
> 
>@@ -1265,25 +1266,32 @@ void RenderFlexibleBox::alignChildren(const Vector<LineContext>& lineContexts)
>                 continue;
> 
>             switch (alignmentForChild(*child)) {
>-            case AlignAuto:
>+            case ItemPositionAuto:
>                 ASSERT_NOT_REACHED();
>                 break;
>-            case AlignStretch: {
>+            case ItemPositionStart:
>+                // FIXME: https://webkit.org/b/135460 - The extended grammar is not supported
>+                // yet for FlexibleBox.
>+                // Defaulting to Stretch for now, as it what most of FlexBox based renders
>+                // expect as default.
>+                notImplemented();
>+                FALLTHROUGH;
>+            case ItemPositionStretch: {
>                 applyStretchAlignmentToChild(*child, lineCrossAxisExtent);
>                 // Since wrap-reverse flips cross start and cross end, strech children should be aligned with the cross end.
>                 if (style().flexWrap() == FlexWrapReverse)
>                     adjustAlignmentForChild(*child, availableAlignmentSpaceForChild(lineCrossAxisExtent, *child));
>                 break;
>             }
>-            case AlignFlexStart:
>+            case ItemPositionFlexStart:
>                 break;
>-            case AlignFlexEnd:
>+            case ItemPositionFlexEnd:
>                 adjustAlignmentForChild(*child, availableAlignmentSpaceForChild(lineCrossAxisExtent, *child));
>                 break;
>-            case AlignCenter:
>+            case ItemPositionCenter:
>                 adjustAlignmentForChild(*child, availableAlignmentSpaceForChild(lineCrossAxisExtent, *child) / 2);
>                 break;
>-            case AlignBaseline: {
>+            case ItemPositionBaseline: {
>                 // FIXME: If we get here in columns, we want the use the descent, except we currently can't get the ascent/descent of orthogonal children.
>                 // https://bugs.webkit.org/show_bug.cgi?id=98076
>                 LayoutUnit ascent = marginBoxAscentForChild(*child);
>@@ -1294,6 +1302,19 @@ void RenderFlexibleBox::alignChildren(const Vector<LineContext>& lineContexts)
>                     minMarginAfterBaseline = std::min(minMarginAfterBaseline, availableAlignmentSpaceForChild(lineCrossAxisExtent, *child) - startOffset);
>                 break;
>             }
>+            case ItemPositionLastBaseline:
>+            case ItemPositionSelfStart:
>+            case ItemPositionSelfEnd:
>+            case ItemPositionEnd:
>+            case ItemPositionLeft:
>+            case ItemPositionRight:
>+                // FIXME: https://webkit.org/b/135460 - The extended grammar is not supported
>+                // yet for FlexibleBox.
>+                notImplemented();
>+                FALLTHROUGH;
>+            default:
>+                ASSERT_NOT_REACHED();
>+                break;
>             }
>         }
>         minMarginAfterBaselines.append(minMarginAfterBaseline);
>@@ -1309,7 +1330,7 @@ void RenderFlexibleBox::alignChildren(const Vector<LineContext>& lineContexts)
>         LayoutUnit minMarginAfterBaseline = minMarginAfterBaselines[lineNumber];
>         for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = m_orderIterator.next()) {
>             ASSERT(child);
>-            if (alignmentForChild(*child) == AlignBaseline && !hasAutoMarginsInCrossAxis(*child) && minMarginAfterBaseline)
>+            if (alignmentForChild(*child) == ItemPositionBaseline && !hasAutoMarginsInCrossAxis(*child) && minMarginAfterBaseline)
>                 adjustAlignmentForChild(*child, minMarginAfterBaseline);
>         }
>     }
>diff --git a/Source/WebCore/rendering/RenderFlexibleBox.h b/Source/WebCore/rendering/RenderFlexibleBox.h
>index 2b6efac6181e6e88ee1a3eb1f61bb9cf2f8b0699..3bbb6fe8079608cd442d526d640e798679f13365 100644
>--- a/Source/WebCore/rendering/RenderFlexibleBox.h
>+++ b/Source/WebCore/rendering/RenderFlexibleBox.h
>@@ -118,7 +118,7 @@ private:
>     // FIXME: Supporting layout deltas.
>     void setFlowAwareLocationForChild(RenderBox& child, const LayoutPoint&);
>     void adjustAlignmentForChild(RenderBox& child, LayoutUnit);
>-    EAlignItems alignmentForChild(RenderBox& child) const;
>+    ItemPosition alignmentForChild(RenderBox& child) const;
>     LayoutUnit mainAxisBorderAndPaddingExtentForChild(RenderBox& child) const;
>     LayoutUnit mainAxisScrollbarExtentForChild(RenderBox& child) const;
>     LayoutUnit preferredMainAxisContentExtentForChild(RenderBox& child, bool hasInfiniteLineLength);
>diff --git a/Source/WebCore/rendering/RenderFullScreen.cpp b/Source/WebCore/rendering/RenderFullScreen.cpp
>index e115f7fde31ec11a053a710dda89ca96af7ebfbb..4f08d74b6a31de57eaece26c729bbad5fec842d9 100644
>--- a/Source/WebCore/rendering/RenderFullScreen.cpp
>+++ b/Source/WebCore/rendering/RenderFullScreen.cpp
>@@ -90,7 +90,7 @@ static PassRef<RenderStyle> createFullScreenStyle()
> 
>     fullscreenStyle.get().setDisplay(FLEX);
>     fullscreenStyle.get().setJustifyContent(JustifyCenter);
>-    fullscreenStyle.get().setAlignItems(AlignCenter);
>+    fullscreenStyle.get().setAlignItems(ItemPositionCenter);
>     fullscreenStyle.get().setFlexDirection(FlowColumn);
>     
>     fullscreenStyle.get().setPosition(FixedPosition);
>diff --git a/Source/WebCore/rendering/RenderMenuList.cpp b/Source/WebCore/rendering/RenderMenuList.cpp
>index 44c8d2b3af9f57c1fa9c0d973c11f51eaf9fc1e2..62c4e1103cdf4ca5d4a832897af70c7d266380c9 100644
>--- a/Source/WebCore/rendering/RenderMenuList.cpp
>+++ b/Source/WebCore/rendering/RenderMenuList.cpp
>@@ -119,10 +119,10 @@ void RenderMenuList::adjustInnerStyle()
>     // Use margin:auto instead of align-items:center to get safe centering, i.e.
>     // when the content overflows, treat it the same as align-items: flex-start.
>     // But we only do that for the cases where html.css would otherwise use center.
>-    if (style().alignItems() == AlignCenter) {
>+    if (style().alignItems() == ItemPositionCenter) {
>         innerStyle.setMarginTop(Length());
>         innerStyle.setMarginBottom(Length());
>-        innerStyle.setAlignSelf(AlignFlexStart);
>+        innerStyle.setAlignSelf(ItemPositionFlexStart);
>     }
> 
>     innerStyle.setPaddingLeft(Length(theme().popupInternalPaddingLeft(style()), Fixed));
>diff --git a/Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp b/Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp
>index ed209ad1a68e0647df54988e6307fd08125a2b99..900a2bbc5c7b37b44104c1cf34cb113ccaaa2f42 100644
>--- a/Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp
>+++ b/Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp
>@@ -233,7 +233,7 @@ void RenderMathMLRoot::updateStyle()
>     auto base = baseWrapper();
>     auto baseStyle = RenderStyle::createAnonymousStyleWithDisplay(&style(), FLEX);
>     baseStyle.get().setMarginTop(Length(0, Fixed)); // This will be updated in RenderMathMLRoot::layout().
>-    baseStyle.get().setAlignItems(AlignBaseline);
>+    baseStyle.get().setAlignItems(ItemPositionBaseline);
>     base->setStyle(WTF::move(baseStyle));
>     base->setNeedsLayoutAndPrefWidthsRecalc();
> 
>@@ -244,7 +244,7 @@ void RenderMathMLRoot::updateStyle()
>         indexStyle.get().setMarginTop(Length(0, Fixed)); // This will be updated in RenderMathMLRoot::layout().
>         indexStyle.get().setMarginStart(Length(kernBeforeDegree, Fixed));
>         indexStyle.get().setMarginEnd(Length(kernAfterDegree, Fixed));
>-        indexStyle.get().setAlignItems(AlignBaseline);
>+        indexStyle.get().setAlignItems(ItemPositionBaseline);
>         index->setStyle(WTF::move(indexStyle));
>         index->setNeedsLayoutAndPrefWidthsRecalc();
>     }
>diff --git a/Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp b/Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp
>index 74c99e17d56864ac8720121ec8a55ed5a26925e8..4abdfb892bc5d726dd78b04fa47b19521509ff2d 100644
>--- a/Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp
>+++ b/Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp
>@@ -101,7 +101,7 @@ void RenderMathMLScripts::fixAnonymousStyleForSubSupPair(RenderObject* subSupPai
>     // The MathML specification does not specify vertical alignment of scripts.
>     // Let's right align prescripts and left align postscripts.
>     // See http://lists.w3.org/Archives/Public/www-math/2012Aug/0006.html
>-    scriptsStyle.setAlignItems(isPostScript ? AlignFlexStart : AlignFlexEnd);
>+    scriptsStyle.setAlignItems(isPostScript ? ItemPositionFlexStart : ItemPositionFlexEnd);
> 
>     // We set the order property so that the prescripts are drawn before the base.
>     scriptsStyle.setOrder(isPostScript ? 0 : -1);
>@@ -115,7 +115,7 @@ void RenderMathMLScripts::fixAnonymousStyles()
> {
>     // We set the base wrapper's style so that baseHeight in layout() will be an unstretched height.
>     ASSERT(m_baseWrapper && m_baseWrapper->style().hasOneRef());
>-    m_baseWrapper->style().setAlignSelf(AlignFlexStart);
>+    m_baseWrapper->style().setAlignSelf(ItemPositionFlexStart);
> 
>     // This sets the style for postscript pairs.
>     RenderObject* subSupPair = m_baseWrapper;
>@@ -135,7 +135,7 @@ void RenderMathMLScripts::fixAnonymousStyles()
>             RenderStyle& scriptsStyle = subSupPair->style();
>             scriptsStyle.setFlexDirection(FlowRow);
>             scriptsStyle.setJustifyContent(JustifyFlexStart);
>-            scriptsStyle.setAlignItems(AlignCenter);
>+            scriptsStyle.setAlignItems(ItemPositionCenter);
>             scriptsStyle.setOrder(0);
>             scriptsStyle.setFontSize(style().fontSize());
>         }
>diff --git a/Source/WebCore/rendering/style/RenderStyle.h b/Source/WebCore/rendering/style/RenderStyle.h
>index dbbda1fd8604b2d3123ea9a5b1b676066a9c35e0..9c99c0802e0f8a5876d6cc8ecd9e0ae6566dc316 100644
>--- a/Source/WebCore/rendering/style/RenderStyle.h
>+++ b/Source/WebCore/rendering/style/RenderStyle.h
>@@ -903,15 +903,17 @@ public:
>     float flexShrink() const { return rareNonInheritedData->m_flexibleBox->m_flexShrink; }
>     const Length& flexBasis() const { return rareNonInheritedData->m_flexibleBox->m_flexBasis; }
>     EAlignContent alignContent() const { return static_cast<EAlignContent>(rareNonInheritedData->m_alignContent); }
>-    EAlignItems alignItems() const { return static_cast<EAlignItems>(rareNonInheritedData->m_alignItems); }
>-    EAlignItems alignSelf() const { return static_cast<EAlignItems>(rareNonInheritedData->m_alignSelf); }
>+    ItemPosition alignItems() const { return static_cast<ItemPosition>(rareNonInheritedData->m_alignItems); }
>+    OverflowAlignment alignItemsOverflowAlignment() const { return static_cast<OverflowAlignment>(rareNonInheritedData->m_alignItemsOverflowAlignment); }
>+    ItemPosition alignSelf() const { return static_cast<ItemPosition>(rareNonInheritedData->m_alignSelf); }
>+    OverflowAlignment alignSelfOverflowAlignment() const { return static_cast<OverflowAlignment>(rareNonInheritedData->m_alignSelfOverflowAlignment); }
>     EFlexDirection flexDirection() const { return static_cast<EFlexDirection>(rareNonInheritedData->m_flexibleBox->m_flexDirection); }
>     bool isColumnFlexDirection() const { return flexDirection() == FlowColumn || flexDirection() == FlowColumnReverse; }
>     bool isReverseFlexDirection() const { return flexDirection() == FlowRowReverse || flexDirection() == FlowColumnReverse; }
>     EFlexWrap flexWrap() const { return static_cast<EFlexWrap>(rareNonInheritedData->m_flexibleBox->m_flexWrap); }
>     EJustifyContent justifyContent() const { return static_cast<EJustifyContent>(rareNonInheritedData->m_justifyContent); }
>-    EJustifySelf justifySelf() const { return static_cast<EJustifySelf>(rareNonInheritedData->m_justifySelf); }
>-    EJustifySelfOverflowAlignment justifySelfOverflowAlignment() const { return static_cast<EJustifySelfOverflowAlignment>(rareNonInheritedData->m_justifySelfOverflowAlignment); }
>+    ItemPosition justifySelf() const { return static_cast<ItemPosition>(rareNonInheritedData->m_justifySelf); }
>+    OverflowAlignment justifySelfOverflowAlignment() const { return static_cast<OverflowAlignment>(rareNonInheritedData->m_justifySelfOverflowAlignment); }
> 
> #if ENABLE(CSS_GRID_LAYOUT)
>     const Vector<GridTrackSize>& gridColumns() const { return rareNonInheritedData->m_grid->m_gridColumns; }
>@@ -1475,13 +1477,15 @@ public:
>     void setFlexBasis(Length length) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexBasis, WTF::move(length)); }
>     void setOrder(int o) { SET_VAR(rareNonInheritedData, m_order, o); }
>     void setAlignContent(EAlignContent p) { SET_VAR(rareNonInheritedData, m_alignContent, p); }
>-    void setAlignItems(EAlignItems a) { SET_VAR(rareNonInheritedData, m_alignItems, a); }
>-    void setAlignSelf(EAlignItems a) { SET_VAR(rareNonInheritedData, m_alignSelf, a); }
>+    void setAlignItems(ItemPosition a) { SET_VAR(rareNonInheritedData, m_alignItems, a); }
>+    void setAlignItemsOverflowAlignment(OverflowAlignment overflowAlignment) { SET_VAR(rareNonInheritedData, m_alignItemsOverflowAlignment, overflowAlignment); }
>+    void setAlignSelf(ItemPosition a) { SET_VAR(rareNonInheritedData, m_alignSelf, a); }
>+    void setAlignSelfOverflowAlignment(OverflowAlignment overflowAlignment) { SET_VAR(rareNonInheritedData, m_alignSelfOverflowAlignment, overflowAlignment); }
>     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); }
>     void setJustifyContent(EJustifyContent p) { SET_VAR(rareNonInheritedData, m_justifyContent, p); }
>-    void setJustifySelf(EJustifySelf p) { SET_VAR(rareNonInheritedData, m_justifySelf, p); }
>-    void setJustifySelfOverflowAlignment(EJustifySelfOverflowAlignment overflowAlignment) { SET_VAR(rareNonInheritedData, m_justifySelfOverflowAlignment, overflowAlignment); }
>+    void setJustifySelf(ItemPosition p) { SET_VAR(rareNonInheritedData, m_justifySelf, p); }
>+    void setJustifySelfOverflowAlignment(OverflowAlignment overflowAlignment) { SET_VAR(rareNonInheritedData, m_justifySelfOverflowAlignment, overflowAlignment); }
> #if ENABLE(CSS_GRID_LAYOUT)
>     void setGridAutoColumns(const GridTrackSize& length) { SET_VAR(rareNonInheritedData.access()->m_grid, m_gridAutoColumns, length); }
>     void setGridAutoRows(const GridTrackSize& length) { SET_VAR(rareNonInheritedData.access()->m_grid, m_gridAutoRows, length); }
>@@ -1760,6 +1764,7 @@ public:
>     bool isDisplayReplacedType() const { return isDisplayReplacedType(display()); }
>     bool isDisplayInlineType() const { return isDisplayInlineType(display()); }
>     bool isOriginalDisplayInlineType() const { return isDisplayInlineType(originalDisplay()); }
>+    bool isDisplayFlexibleOrGridBox() const { return isDisplayFlexibleOrGridBox(display()); }
>     bool isDisplayRegionType() const
>     {
>         return display() == BLOCK || display() == INLINE_BLOCK
>@@ -1883,13 +1888,15 @@ public:
>     static Length initialFlexBasis() { return Length(Auto); }
>     static int initialOrder() { return 0; }
>     static EAlignContent initialAlignContent() { return AlignContentStretch; }
>-    static EAlignItems initialAlignItems() { return AlignStretch; }
>-    static EAlignItems initialAlignSelf() { return AlignAuto; }
>+    static ItemPosition initialAlignItems() { return ItemPositionAuto; }
>+    static OverflowAlignment initialAlignItemsOverflowAlignment() { return OverflowAlignmentDefault; }
>+    static ItemPosition initialAlignSelf() { return ItemPositionAuto; }
>+    static OverflowAlignment initialAlignSelfOverflowAlignment() { return OverflowAlignmentDefault; }
>     static EFlexDirection initialFlexDirection() { return FlowRow; }
>     static EFlexWrap initialFlexWrap() { return FlexNoWrap; }
>     static EJustifyContent initialJustifyContent() { return JustifyFlexStart; }
>-    static EJustifySelf initialJustifySelf() { return JustifySelfAuto; }
>-    static EJustifySelfOverflowAlignment initialJustifySelfOverflowAlignment() { return JustifySelfOverflowAlignmentDefault; }
>+    static ItemPosition initialJustifySelf() { return ItemPositionAuto; }
>+    static OverflowAlignment initialJustifySelfOverflowAlignment() { return OverflowAlignmentDefault; }
>     static int initialMarqueeLoopCount() { return -1; }
>     static int initialMarqueeSpeed() { return 85; }
>     static Length initialMarqueeIncrement() { return Length(6, Fixed); }
>@@ -2075,6 +2082,26 @@ private:
>         return display == INLINE || isDisplayReplacedType(display);
>     }
> 
>+    bool isDisplayFlexibleBox(EDisplay display) const
>+    {
>+        return display == FLEX || display == INLINE_FLEX;
>+    }
>+
>+    bool isDisplayGridBox(EDisplay display) const
>+    {
>+#if ENABLE(CSS_GRID_LAYOUT)
>+        return display == GRID || display == INLINE_GRID;
>+#else
>+        UNUSED_PARAM(display);
>+        return false;
>+#endif
>+    }
>+
>+    bool isDisplayFlexibleOrGridBox(EDisplay display) const
>+    {
>+        return isDisplayFlexibleBox(display) || isDisplayGridBox(display);
>+    }
>+
>     // Color accessors are all private to make sure callers use visitedDependentColor instead to access them.
>     Color invalidColor() const { static Color invalid; return invalid; }
>     Color borderLeftColor() const { return surround->border.left().color(); }
>diff --git a/Source/WebCore/rendering/style/RenderStyleConstants.h b/Source/WebCore/rendering/style/RenderStyleConstants.h
>index 582f9a9c65f691ab5ca1600e8c55092981008953..628d6f4b420d3ff6f634288a4ba597b2319efa06 100644
>--- a/Source/WebCore/rendering/style/RenderStyleConstants.h
>+++ b/Source/WebCore/rendering/style/RenderStyleConstants.h
>@@ -244,12 +244,11 @@ enum EBoxDirection { BNORMAL, BREVERSE };
> // CSS3 Flexbox Properties
> 
> enum EAlignContent { AlignContentFlexStart, AlignContentFlexEnd, AlignContentCenter, AlignContentSpaceBetween, AlignContentSpaceAround, AlignContentStretch };
>-enum EAlignItems { AlignAuto, AlignFlexStart, AlignFlexEnd, AlignCenter, AlignStretch, AlignBaseline };
> enum EFlexDirection { FlowRow, FlowRowReverse, FlowColumn, FlowColumnReverse };
> enum EFlexWrap { FlexNoWrap, FlexWrap, FlexWrapReverse };
> enum EJustifyContent { JustifyFlexStart, JustifyFlexEnd, JustifyCenter, JustifySpaceBetween, JustifySpaceAround };
>-enum EJustifySelf {JustifySelfAuto, JustifySelfStretch, JustifySelfBaseline, JustifySelfCenter, JustifySelfStart, JustifySelfEnd, JustifySelfSelfStart, JustifySelfSelfEnd, JustifySelfFlexStart, JustifySelfFlexEnd, JustifySelfLeft, JustifySelfRight};
>-enum EJustifySelfOverflowAlignment {JustifySelfOverflowAlignmentDefault, JustifySelfOverflowAlignmentTrue, JustifySelfOverflowAlignmentSafe};
>+enum ItemPosition {ItemPositionAuto, ItemPositionStretch, ItemPositionBaseline, ItemPositionLastBaseline, ItemPositionCenter, ItemPositionStart, ItemPositionEnd, ItemPositionSelfStart, ItemPositionSelfEnd, ItemPositionFlexStart, ItemPositionFlexEnd, ItemPositionLeft, ItemPositionRight};
>+enum OverflowAlignment {OverflowAlignmentDefault, OverflowAlignmentTrue, OverflowAlignmentSafe};
> 
> 
> enum ETextSecurity {
>diff --git a/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp b/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp
>index c524a0aeac9c8a34af82a5241c180b9f6bf373a7..ef6740c7da7efce76131562af99bcdb9baebbe59 100644
>--- a/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp
>+++ b/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp
>@@ -83,7 +83,9 @@ StyleRareNonInheritedData::StyleRareNonInheritedData()
>     , m_backfaceVisibility(RenderStyle::initialBackfaceVisibility())
>     , m_alignContent(RenderStyle::initialAlignContent())
>     , m_alignItems(RenderStyle::initialAlignItems())
>+    , m_alignItemsOverflowAlignment(RenderStyle::initialAlignItemsOverflowAlignment())
>     , m_alignSelf(RenderStyle::initialAlignSelf())
>+    , m_alignSelfOverflowAlignment(RenderStyle::initialAlignSelfOverflowAlignment())
>     , m_justifyContent(RenderStyle::initialJustifyContent())
>     , m_justifySelf(RenderStyle::initialJustifySelf())
>     , m_justifySelfOverflowAlignment(RenderStyle::initialJustifySelfOverflowAlignment())
>@@ -170,7 +172,9 @@ inline StyleRareNonInheritedData::StyleRareNonInheritedData(const StyleRareNonIn
>     , m_backfaceVisibility(o.m_backfaceVisibility)
>     , m_alignContent(o.m_alignContent)
>     , m_alignItems(o.m_alignItems)
>+    , m_alignItemsOverflowAlignment(o.m_alignItemsOverflowAlignment)
>     , m_alignSelf(o.m_alignSelf)
>+    , m_alignSelfOverflowAlignment(o.m_alignSelfOverflowAlignment)
>     , m_justifyContent(o.m_justifyContent)
>     , m_justifySelf(o.m_justifySelf)
>     , m_justifySelfOverflowAlignment(o.m_justifySelfOverflowAlignment)
>@@ -265,7 +269,9 @@ bool StyleRareNonInheritedData::operator==(const StyleRareNonInheritedData& o) c
>         && m_backfaceVisibility == o.m_backfaceVisibility
>         && m_alignContent == o.m_alignContent
>         && m_alignItems == o.m_alignItems
>+        && m_alignItemsOverflowAlignment == o.m_alignItemsOverflowAlignment
>         && m_alignSelf == o.m_alignSelf
>+        && m_alignSelfOverflowAlignment == o.m_alignSelfOverflowAlignment
>         && m_justifyContent == o.m_justifyContent
>         && userDrag == o.userDrag
>         && textOverflow == o.textOverflow
>diff --git a/Source/WebCore/rendering/style/StyleRareNonInheritedData.h b/Source/WebCore/rendering/style/StyleRareNonInheritedData.h
>index df0beb6d96c1e97ff5274795a51e7ef354afbeb9..b91c968a2facea69bfbf9e5f09594994ea2d6257 100644
>--- a/Source/WebCore/rendering/style/StyleRareNonInheritedData.h
>+++ b/Source/WebCore/rendering/style/StyleRareNonInheritedData.h
>@@ -188,12 +188,14 @@ public:
>     unsigned m_backfaceVisibility : 1; // EBackfaceVisibility
> 
>     unsigned m_alignContent : 3; // EAlignContent
>-    unsigned m_alignItems : 3; // EAlignItems
>-    unsigned m_alignSelf : 3; // EAlignItems
>+    unsigned m_alignItems : 4; // ItemPosition
>+    unsigned m_alignItemsOverflowAlignment : 2; // OverflowAlignment
>+    unsigned m_alignSelf : 4; // ItemPosition
>+    unsigned m_alignSelfOverflowAlignment : 2; // OverflowAlignment
>     unsigned m_justifyContent : 3; // EJustifyContent
> 
>-    unsigned m_justifySelf : 4; // EJustifySelf
>-    unsigned m_justifySelfOverflowAlignment : 2; // EJustifySelfOverflowAlignment
>+    unsigned m_justifySelf : 4; // ItemPosition
>+    unsigned m_justifySelfOverflowAlignment : 2; // OverflowAlignment
> 
>     unsigned userDrag : 2; // EUserDrag
>     unsigned textOverflow : 1; // Whether or not lines that spill out should be truncated with "..."
>diff --git a/Source/WebCore/style/StyleResolveTree.cpp b/Source/WebCore/style/StyleResolveTree.cpp
>index 446ee51bff751413c5f25ba8017bdcaf1aec25d6..d43ffbc5e3cd61053ead986fb9c200066b886287 100644
>--- a/Source/WebCore/style/StyleResolveTree.cpp
>+++ b/Source/WebCore/style/StyleResolveTree.cpp
>@@ -121,6 +121,8 @@ Change determineChange(const RenderStyle& s1, const RenderStyle& s2)
>     // a separate render region object.
>     if (s1.hasFlowFrom() && (s1.specifiesColumns() != s2.specifiesColumns()))
>         return Detach;
>+    if (s1.alignItems() != s2.alignItems())
>+        return Detach;
> 
>     if (s1 != s2) {
>         if (s1.inheritedNotEqual(&s2))
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 190c78d898a54662726f5ff442d5f1c0918a1c77..079968b141f353bbc8c587085caeed0b3fb16e6c 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,33 @@
>+2014-10-27  Javier Fernandez  <jfernandez@igalia.com>
>+
>+        [CSS Grid Layout] Upgrade align-self and align-items parsing to CSS 3
>+        https://bugs.webkit.org/show_bug.cgi?id=133359
>+
>+        Reviewed by David Hyatt.
>+
>+        From Blink r164817 and r165264 by <jchaffraix@chromium.org>
>+
>+        Broaden justify-self's parsing name and upgrade align-self and
>+        align-items parsing to CSS 3.
>+
>+        * css3/flexbox/css-properties-expected.txt:
>+        * css3/flexbox/css-properties.html:
>+        * css3/parse-align-items-expected.txt: Added.
>+        * css3/parse-align-items.html: Added.
>+        * css3/parse-align-self-expected.txt: Added.
>+        * css3/parse-align-self.html: Added.
>+        * css3/resources/alignment-parsing-utils.js: Added.
>+        (checkValues):
>+        (checkBadValues):
>+        (checkInitialValues):
>+        (checkInheritValues):
>+        (checkLegacyValues):
>+        * fast/css/getComputedStyle/computed-style-expected.txt:
>+        * fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
>+        * fast/css/getComputedStyle/resources/property-names.js:
>+        * svg/css/getComputedStyle-basic-expected.txt:
>+        * platform/gtk/TestExpectations: Report new failures and update expectations.
>+
> 2014-11-16  Andreas Kling  <akling@apple.com>
> 
>         Avoid synchronous style recalc when mutating a Node inside FrameSelection.
>diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
>index 745ac2b20b4de6ed54f5f30026febcb423d0080a..a53a298e610513b6b3646ab593eec317f0317c8e 100644
>--- a/LayoutTests/TestExpectations
>+++ b/LayoutTests/TestExpectations
>@@ -67,6 +67,10 @@ webkit.org/b/127860 [ Debug ] js/function-apply-aliased.html [ Skip ]
> # This test verifies dynamic manipulation of the mroot and msqrt elements.
> mathml/roots-removeChild.html [ ImageOnlyFailure ]
> 
>+webkit.org/b/133359 mathml/presentation/style-changed.html [ ImageOnlyFailure ]
>+webkit.org/b/136291 platform/mac/accessibility/webkit-alt-for-css-content.html [ Failure ]
>+webkit.org/b/136291 platform/mac/accessibility/alt-for-css-content.html [ Failure ]
>+
> # This test verifies that a mismatch reftest will fail as intended if both results are same. (introduced in r93187)
> fast/harness/sample-fail-mismatch-reftest.html [ WontFix ImageOnlyFailure ]
> 
>diff --git a/LayoutTests/css3/flexbox/css-properties-expected.txt b/LayoutTests/css3/flexbox/css-properties-expected.txt
>index 16ab20e835c3bc53a381900ded4be99c658945e5..f32934e42bb6200bf3df2ba8879571e3c42c77cc 100644
>--- a/LayoutTests/css3/flexbox/css-properties-expected.txt
>+++ b/LayoutTests/css3/flexbox/css-properties-expected.txt
>@@ -29,11 +29,12 @@ PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "space-betwe
> PASS flexbox.style.webkitJustifyContent is ""
> PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "flex-start"
> PASS flexbox.style.webkitAlignSelf is ""
>-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "stretch"
>-PASS window.getComputedStyle(document.documentElement, null).webkitAlignSelf is "stretch"
>+PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
>+PASS window.getComputedStyle(document.documentElement, null).webkitAlignSelf is "auto"
> PASS flexbox.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
> PASS flexbox.style.webkitAlignSelf is "auto"
>-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "stretch"
>+PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
> PASS flexbox.style.webkitAlignSelf is "flex-start"
> PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "flex-start"
> PASS flexbox.style.webkitAlignSelf is "flex-end"
>@@ -45,15 +46,21 @@ PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "stretch"
> PASS flexbox.style.webkitAlignSelf is "baseline"
> PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "baseline"
> PASS flexbox.style.webkitAlignSelf is ""
>-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "stretch"
>+PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
> PASS flexbox.style.webkitAlignItems is ""
>+PASS flexitem.style.webkitAlignSelf is ""
> PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "stretch"
> PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "stretch"
> PASS flexbox.style.webkitAlignItems is ""
>-PASS flexbox.style.webkitAlignItems is ""
>+PASS flexitem.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "stretch"
>+PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "stretch"
>+PASS flexbox.style.webkitAlignItems is "auto"
>+PASS flexitem.style.webkitAlignSelf is ""
> PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "stretch"
> PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "stretch"
> PASS flexbox.style.webkitAlignItems is "flex-start"
>+PASS flexitem.style.webkitAlignSelf is ""
> PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "flex-start"
> PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "flex-start"
> PASS flexbox.style.webkitAlignItems is "flex-end"
>@@ -72,8 +79,8 @@ PASS flexbox.style.webkitAlignItems is ""
> PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "stretch"
> PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "stretch"
> PASS flexbox.style.webkitAlignItems is ""
>-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "stretch"
>-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "stretch"
>+PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "start"
>+PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "start"
> PASS window.getComputedStyle(detachedFlexbox, null).webkitAlignSelf is ""
> PASS window.getComputedStyle(detachedFlexItem, null).webkitAlignSelf is ""
> PASS flexbox.style.webkitFlexDirection is ""
>diff --git a/LayoutTests/css3/flexbox/css-properties.html b/LayoutTests/css3/flexbox/css-properties.html
>index d721efc872a3d13a0f75087113079d0a40fcf619..51a0a68d080258217a815f58f0309ed73a99bd7d 100644
>--- a/LayoutTests/css3/flexbox/css-properties.html
>+++ b/LayoutTests/css3/flexbox/css-properties.html
>@@ -78,18 +78,20 @@ flexbox.style.webkitJustifyContent = '';
> shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
> shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-start');
> 
>+flexbox.style.display = '-webkit-flex';
> 
> shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
>-// The initial value is 'stretch'.
>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
>-shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).webkitAlignSelf', 'stretch');
>+// The initial value is 'auto', which will be resolved depending on parent's style (except for the 'document' element).
>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
>+shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).webkitAlignSelf', 'auto');
> 
> flexbox.style.webkitAlignSelf = 'foo';
> shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
> 
> flexbox.style.webkitAlignSelf = 'auto';
> shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto');
>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
> 
> flexbox.style.webkitAlignSelf = 'flex-start';
> shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start');
>@@ -113,23 +115,29 @@ shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
> 
> flexbox.style.webkitAlignSelf = '';
> shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
> 
> shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
>-// The initial value is 'stretch'.
>+shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
>+// The initial value is 'auto', which will be resolved to 'stretch' in case of flexbox containers.
> shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
> shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
> 
> flexbox.style.webkitAlignItems = 'foo';
> shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
>+shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
>+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
> 
> flexbox.style.webkitAlignItems = 'auto';
>-shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
>+shouldBeEqualToString('flexbox.style.webkitAlignItems', 'auto');
>+shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
> shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
> shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
> 
> flexbox.style.webkitAlignItems = 'flex-start';
> shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start');
>+shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
> shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-start');
> shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-start');
> 
>@@ -160,8 +168,8 @@ shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
> 
> flexbox.style.display = 'none';
> shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
>-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'start');
>+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'start');
> flexbox.style.display = '';
> 
> 
>diff --git a/LayoutTests/css3/parse-align-items-expected.txt b/LayoutTests/css3/parse-align-items-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..d5ed30e86ceceb82a86dc1d154f9d043c521ff6e
>--- /dev/null
>+++ b/LayoutTests/css3/parse-align-items-expected.txt
>@@ -0,0 +1,137 @@
>+Test that setting and getting align-items works as expected
>+
>+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
>+
>+
>+Test getting align-items set through CSS
>+PASS getComputedStyle(alignItemsBaseline, '').getPropertyValue('-webkit-align-items') is 'baseline'
>+PASS getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('-webkit-align-items') is 'last-baseline'
>+PASS getComputedStyle(alignItemsStretch, '').getPropertyValue('-webkit-align-items') is 'stretch'
>+PASS getComputedStyle(alignItemsStart, '').getPropertyValue('-webkit-align-items') is 'start'
>+PASS getComputedStyle(alignItemsEnd, '').getPropertyValue('-webkit-align-items') is 'end'
>+PASS getComputedStyle(alignItemsCenter, '').getPropertyValue('-webkit-align-items') is 'center'
>+PASS getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('-webkit-align-items') is 'self-end'
>+PASS getComputedStyle(alignItemsSelfStart, '').getPropertyValue('-webkit-align-items') is 'self-start'
>+PASS getComputedStyle(alignItemsLeft, '').getPropertyValue('-webkit-align-items') is 'left'
>+PASS getComputedStyle(alignItemsRight, '').getPropertyValue('-webkit-align-items') is 'right'
>+PASS getComputedStyle(alignItemsFlexStart, '').getPropertyValue('-webkit-align-items') is 'flex-start'
>+PASS getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('-webkit-align-items') is 'flex-end'
>+PASS getComputedStyle(alignItemsEndTrue, '').getPropertyValue('-webkit-align-items') is 'end true'
>+PASS getComputedStyle(alignItemsCenterTrue, '').getPropertyValue('-webkit-align-items') is 'center true'
>+PASS getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('-webkit-align-items') is 'self-end safe'
>+PASS getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('-webkit-align-items') is 'self-start safe'
>+PASS getComputedStyle(alignItemsRightSafe, '').getPropertyValue('-webkit-align-items') is 'right safe'
>+PASS getComputedStyle(alignItemsLeftTrue, '').getPropertyValue('-webkit-align-items') is 'left true'
>+PASS getComputedStyle(alignItemsFlexStartTrue, '').getPropertyValue('-webkit-align-items') is 'flex-start true'
>+PASS getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('-webkit-align-items') is 'flex-end safe'
>+
>+Test initial value of align-items through JS
>+PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is 'start'
>+
>+Test getting and setting align-items through JS
>+PASS element.style.webkitAlignItems is "center"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
>+PASS element.style.webkitAlignItems is "start true"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start true"
>+PASS element.style.webkitAlignItems is "flex-end safe"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "flex-end safe"
>+PASS element.style.webkitAlignItems is "right"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "right"
>+PASS element.style.webkitAlignItems is "center"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
>+PASS element.style.webkitAlignItems is "self-start"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "self-start"
>+PASS element.style.webkitAlignItems is "auto"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is "auto"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
>+PASS element.style.webkitAlignItems is "auto"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
>+PASS element.style.webkitAlignItems is "self-end"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "self-end"
>+
>+Test bad combinations of align-items
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+PASS element.style.webkitAlignItems is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+
>+Test the value 'initial'
>+PASS element.style.webkitAlignItems is "center"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
>+PASS element.style.webkitAlignItems is "initial"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
>+
>+Test the value 'initial' for grid containers
>+PASS element.style.webkitAlignItems is "left safe"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
>+PASS element.style.webkitAlignItems is "initial"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
>+
>+Test the value 'initial' for flex containers
>+PASS element.style.webkitAlignItems is "right true"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "right true"
>+PASS element.style.webkitAlignItems is "initial"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
>+
>+Test the value 'inherit'
>+PASS element.style.webkitAlignItems is "end"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "end"
>+PASS element.style.webkitAlignItems is "inherit"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "end"
>+PASS element.style.webkitAlignItems is "left safe"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
>+PASS element.style.webkitAlignItems is "inherit"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
>+PASS element.style.webkitAlignItems is "center true"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center true"
>+PASS element.style.webkitAlignItems is "inherit"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center true"
>+PASS successfullyParsed is true
>+
>+TEST COMPLETE
>+
>diff --git a/LayoutTests/css3/parse-align-items.html b/LayoutTests/css3/parse-align-items.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..d6f1dabdceadbe911da24b3f99a584f7100240ee
>--- /dev/null
>+++ b/LayoutTests/css3/parse-align-items.html
>@@ -0,0 +1,270 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+<style>
>+#alignItemsBaseline {
>+    -webkit-align-items: baseline;
>+}
>+
>+#alignItemsLastBaseline {
>+    -webkit-align-items: last-baseline;
>+}
>+
>+#alignItemsStretch {
>+    -webkit-align-items: stretch;
>+}
>+
>+#alignItemsStart {
>+    -webkit-align-items: start;
>+}
>+
>+#alignItemsEnd {
>+    -webkit-align-items: end;
>+}
>+
>+#alignItemsCenter {
>+    -webkit-align-items: center;
>+}
>+
>+#alignItemsSelfStart {
>+    -webkit-align-items: self-start;
>+}
>+
>+#alignItemsSelfEnd {
>+    -webkit-align-items: self-end;
>+}
>+
>+#alignItemsLeft {
>+    -webkit-align-items: left;
>+}
>+
>+#alignItemsRight {
>+    -webkit-align-items: right;
>+}
>+
>+#alignItemsFlexStart {
>+    -webkit-align-items: flex-start;
>+}
>+
>+#alignItemsFlexEnd {
>+    -webkit-align-items: flex-end;
>+}
>+
>+#alignItemsEndTrue {
>+    -webkit-align-items: end true;
>+}
>+
>+#alignItemsCenterTrue {
>+    -webkit-align-items: center true;
>+}
>+
>+#alignItemsSelfEndSafe {
>+    -webkit-align-items: self-end safe;
>+}
>+
>+#alignItemsSelfStartSafe {
>+    -webkit-align-items: self-start safe;
>+}
>+
>+#alignItemsRightSafe {
>+    -webkit-align-items: right safe;
>+}
>+
>+#alignItemsLeftTrue {
>+    -webkit-align-items: left true;
>+}
>+
>+#alignItemsFlexStartTrue {
>+    -webkit-align-items: flex-start true;
>+}
>+
>+#alignItemsFlexEndSafe {
>+    -webkit-align-items: flex-end safe;
>+}
>+
>+</style>
>+<script src="../resources/js-test.js"></script>
>+</head>
>+<body>
>+<div id="alignItemsBaseline"></div>
>+<div id="alignItemsLastBaseline"></div>
>+<div id="alignItemsStretch"></div>
>+<div id="alignItemsStart"></div>
>+<div id="alignItemsEnd"></div>
>+<div id="alignItemsCenter"></div>
>+<div id="alignItemsSelfStart"></div>
>+<div id="alignItemsSelfEnd"></div>
>+<div id="alignItemsLeft"></div>
>+<div id="alignItemsRight"></div>
>+<div id="alignItemsFlexStart"></div>
>+<div id="alignItemsFlexEnd"></div>
>+
>+<div id="alignItemsEndTrue"></div>
>+<div id="alignItemsCenterTrue"></div>
>+<div id="alignItemsSelfEndSafe"></div>
>+<div id="alignItemsSelfStartSafe"></div>
>+<div id="alignItemsRightSafe"></div>
>+<div id="alignItemsLeftTrue"></div>
>+<div id="alignItemsFlexStartTrue"></div>
>+<div id="alignItemsFlexEndSafe"></div>
>+<script src="resources/alignment-parsing-utils.js"></script>
>+<script>
>+description('Test that setting and getting align-items works as expected');
>+
>+debug("Test getting align-items set through CSS");
>+var alignItemsBaseline = document.getElementById("alignItemsBaseline");
>+shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('-webkit-align-items')", "'baseline'");
>+
>+var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");
>+shouldBe("getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('-webkit-align-items')", "'last-baseline'");
>+
>+var alignItemsStretch = document.getElementById("alignItemsStretch");
>+shouldBe("getComputedStyle(alignItemsStretch, '').getPropertyValue('-webkit-align-items')", "'stretch'");
>+
>+var alignItemsStart = document.getElementById("alignItemsStart");
>+shouldBe("getComputedStyle(alignItemsStart, '').getPropertyValue('-webkit-align-items')", "'start'");
>+
>+var alignItemsEnd = document.getElementById("alignItemsEnd");
>+shouldBe("getComputedStyle(alignItemsEnd, '').getPropertyValue('-webkit-align-items')", "'end'");
>+
>+var alignItemsCenter = document.getElementById("alignItemsCenter");
>+shouldBe("getComputedStyle(alignItemsCenter, '').getPropertyValue('-webkit-align-items')", "'center'");
>+
>+var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
>+shouldBe("getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('-webkit-align-items')", "'self-end'");
>+
>+var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
>+shouldBe("getComputedStyle(alignItemsSelfStart, '').getPropertyValue('-webkit-align-items')", "'self-start'");
>+
>+var alignItemsLeft = document.getElementById("alignItemsLeft");
>+shouldBe("getComputedStyle(alignItemsLeft, '').getPropertyValue('-webkit-align-items')", "'left'");
>+
>+var alignItemsRight = document.getElementById("alignItemsRight");
>+shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('-webkit-align-items')", "'right'");
>+
>+var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
>+shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('-webkit-align-items')", "'flex-start'");
>+
>+var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
>+shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('-webkit-align-items')", "'flex-end'");
>+
>+var alignItemsEndTrue = document.getElementById("alignItemsEndTrue");
>+shouldBe("getComputedStyle(alignItemsEndTrue, '').getPropertyValue('-webkit-align-items')", "'end true'");
>+
>+var alignItemsCenterTrue = document.getElementById("alignItemsCenterTrue");
>+shouldBe("getComputedStyle(alignItemsCenterTrue, '').getPropertyValue('-webkit-align-items')", "'center true'");
>+
>+var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
>+shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('-webkit-align-items')", "'self-end safe'");
>+
>+var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe");
>+shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('-webkit-align-items')", "'self-start safe'");
>+
>+var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
>+shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('-webkit-align-items')", "'right safe'");
>+
>+var alignItemsLeftTrue = document.getElementById("alignItemsLeftTrue");
>+shouldBe("getComputedStyle(alignItemsLeftTrue, '').getPropertyValue('-webkit-align-items')", "'left true'");
>+
>+var alignItemsFlexStartTrue = document.getElementById("alignItemsFlexStartTrue");
>+shouldBe("getComputedStyle(alignItemsFlexStartTrue, '').getPropertyValue('-webkit-align-items')", "'flex-start true'");
>+
>+var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
>+shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('-webkit-align-items')", "'flex-end safe'");
>+
>+debug("");
>+debug("Test initial value of align-items through JS");
>+element = document.createElement("div");
>+document.body.appendChild(element);
>+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-align-items')", "'start'");
>+
>+debug("");
>+debug("Test getting and setting align-items through JS");
>+element = document.createElement("div");
>+document.body.appendChild(element);
>+element.style.webkitAlignItems = "center";
>+checkValues(element, "webkitAlignItems", "-webkit-align-items",  "center", "center");
>+
>+element.style.webkitAlignItems = "true start";
>+checkValues(element, "webkitAlignItems", "-webkit-align-items",  "start true", "start true");
>+
>+element.style.webkitAlignItems = "flex-end safe";
>+checkValues(element, "webkitAlignItems", "-webkit-align-items",  "flex-end safe", "flex-end safe");
>+
>+element.style.webkitAlignItems = "right";
>+checkValues(element, "webkitAlignItems", "-webkit-align-items",  "right", "right");
>+
>+element.style.webkitAlignItems = "center";
>+checkValues(element, "webkitAlignItems", "-webkit-align-items",  "center", "center");
>+
>+element.style.webkitAlignItems = "self-start";
>+checkValues(element, "webkitAlignItems", "-webkit-align-items",  "self-start", "self-start");
>+
>+element.style.webkitAlignItems = "auto";
>+checkValues(element, "webkitAlignItems", "-webkit-align-items",  "auto", "start");
>+
>+element.style.display = "-webkit-flex";
>+element.style.webkitAlignItems = "auto";
>+checkValues(element, "webkitAlignItems", "-webkit-align-items",  "auto", "stretch");
>+
>+element.style.display = "-webkit-grid";
>+element.style.webkitAlignItems = "auto";
>+checkValues(element, "webkitAlignItems", "-webkit-align-items",  "auto", "stretch");
>+
>+element.style.webkitAlignItems = "self-end";
>+checkValues(element, "webkitAlignItems", "-webkit-align-items",  "self-end", "self-end");
>+
>+debug("");
>+debug("Test bad combinations of align-items");
>+element = document.createElement("div");
>+document.body.appendChild(element);
>+
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true auto");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "auto safe");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "auto left");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "baseline safe");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "baseline center");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "stretch true");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "stretch right");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true true");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true safe");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "center start");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "stretch true");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "safe stretch");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "baseline safe");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true baseline");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true safe left");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "true left safe");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "left safe true safe");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy start");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy end");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy right true");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy auto");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy stretch");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy");
>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy left right");
>+
>+debug("");
>+debug("Test the value 'initial'");
>+element.style.display = "";
>+checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "center", "start");
>+
>+debug("");
>+debug("Test the value 'initial' for grid containers");
>+element.style.display = "-webkit-grid";
>+checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "left safe", "stretch");
>+
>+debug("");
>+debug("Test the value 'initial' for flex containers");
>+element.style.display = "-webkit-flex";
>+checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "right true", "stretch");
>+
>+debug("");
>+debug("Test the value 'inherit'");
>+checkInheritValues("webkitAlignItems", "-webkit-align-items", "end");
>+checkInheritValues("webkitAlignItems", "-webkit-align-items", "left safe");
>+checkInheritValues("webkitAlignItems", "-webkit-align-items", "center true");
>+
>+</script>
>+</body>
>+</html>
>diff --git a/LayoutTests/css3/parse-align-self-expected.txt b/LayoutTests/css3/parse-align-self-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..4a1f1615d0eb7bd0a5595e05ad7d1f1bf8427f9b
>--- /dev/null
>+++ b/LayoutTests/css3/parse-align-self-expected.txt
>@@ -0,0 +1,155 @@
>+Test that setting and getting align-self works as expected
>+
>+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
>+
>+
>+Test getting align-self set through CSS
>+PASS getComputedStyle(alignSelfBaseline, '').getPropertyValue('-webkit-align-self') is 'baseline'
>+PASS getComputedStyle(alignSelfLastBaseline, '').getPropertyValue('-webkit-align-self') is 'last-baseline'
>+PASS getComputedStyle(alignSelfStretch, '').getPropertyValue('-webkit-align-self') is 'stretch'
>+PASS getComputedStyle(alignSelfStart, '').getPropertyValue('-webkit-align-self') is 'start'
>+PASS getComputedStyle(alignSelfEnd, '').getPropertyValue('-webkit-align-self') is 'end'
>+PASS getComputedStyle(alignSelfCenter, '').getPropertyValue('-webkit-align-self') is 'center'
>+PASS getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('-webkit-align-self') is 'self-end'
>+PASS getComputedStyle(alignSelfSelfStart, '').getPropertyValue('-webkit-align-self') is 'self-start'
>+PASS getComputedStyle(alignSelfLeft, '').getPropertyValue('-webkit-align-self') is 'left'
>+PASS getComputedStyle(alignSelfRight, '').getPropertyValue('-webkit-align-self') is 'right'
>+PASS getComputedStyle(alignSelfFlexStart, '').getPropertyValue('-webkit-align-self') is 'flex-start'
>+PASS getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('-webkit-align-self') is 'flex-end'
>+PASS getComputedStyle(alignSelfEndTrue, '').getPropertyValue('-webkit-align-self') is 'end true'
>+PASS getComputedStyle(alignSelfCenterTrue, '').getPropertyValue('-webkit-align-self') is 'center true'
>+PASS getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('-webkit-align-self') is 'self-end safe'
>+PASS getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('-webkit-align-self') is 'self-start safe'
>+PASS getComputedStyle(alignSelfRightSafe, '').getPropertyValue('-webkit-align-self') is 'right safe'
>+PASS getComputedStyle(alignSelfLeftTrue, '').getPropertyValue('-webkit-align-self') is 'left true'
>+PASS getComputedStyle(alignSelfFlexStartTrue, '').getPropertyValue('-webkit-align-self') is 'flex-start true'
>+PASS getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('-webkit-align-self') is 'flex-end safe'
>+
>+Test initial value of align-self through JS
>+PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is 'start'
>+
>+Test getting and setting align-self through JS
>+PASS element.style.webkitAlignSelf is "center"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
>+PASS element.style.webkitAlignSelf is "start true"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start true"
>+PASS element.style.webkitAlignSelf is "flex-end safe"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "flex-end safe"
>+PASS element.style.webkitAlignSelf is "right"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right"
>+PASS element.style.webkitAlignSelf is "center"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
>+PASS element.style.webkitAlignSelf is "self-start"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "self-start"
>+PASS element.style.webkitAlignSelf is "auto"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is "auto"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
>+PASS element.style.webkitAlignSelf is "auto"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
>+PASS element.style.webkitAlignSelf is "self-end"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "self-end"
>+
>+Test bad combinations of align-self
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+PASS element.style.webkitAlignSelf is ""
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+
>+Test the value 'initial'
>+PASS element.style.webkitAlignSelf is "center"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
>+PASS element.style.webkitAlignSelf is "initial"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
>+
>+Test the value 'initial' for grid containers
>+PASS element.style.webkitAlignSelf is "left safe"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left safe"
>+PASS element.style.webkitAlignSelf is "initial"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
>+
>+Test the value 'initial' for flex containers
>+PASS element.style.webkitAlignSelf is "right true"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right true"
>+PASS element.style.webkitAlignSelf is "initial"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
>+
>+Test the value 'initial' for positioned elements
>+PASS element.style.webkitAlignSelf is "left"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left"
>+PASS element.style.webkitAlignSelf is "initial"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
>+
>+Test the value 'initial' for positioned elements in grid containers
>+PASS element.style.webkitAlignSelf is "right"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right"
>+PASS element.style.webkitAlignSelf is "initial"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
>+
>+Test the value 'initial' for positioned elements in grid containers
>+PASS element.style.webkitAlignSelf is "end"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "end"
>+PASS element.style.webkitAlignSelf is "initial"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
>+
>+Test the value 'inherit'
>+PASS element.style.webkitAlignSelf is "end"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "end"
>+PASS element.style.webkitAlignSelf is "inherit"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "end"
>+PASS element.style.webkitAlignSelf is "left safe"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left safe"
>+PASS element.style.webkitAlignSelf is "inherit"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left safe"
>+PASS element.style.webkitAlignSelf is "center true"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center true"
>+PASS element.style.webkitAlignSelf is "inherit"
>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center true"
>+PASS successfullyParsed is true
>+
>+TEST COMPLETE
>+
>diff --git a/LayoutTests/css3/parse-align-self.html b/LayoutTests/css3/parse-align-self.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..aa83209dc3c96a50f304e442f65914aac258f6f0
>--- /dev/null
>+++ b/LayoutTests/css3/parse-align-self.html
>@@ -0,0 +1,291 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+<style>
>+#alignSelfBaseline {
>+    -webkit-align-self: baseline;
>+}
>+
>+#alignSelfLastBaseline {
>+    -webkit-align-self: last-baseline;
>+}
>+
>+#alignSelfStretch {
>+    -webkit-align-self: stretch;
>+}
>+
>+#alignSelfStart {
>+    -webkit-align-self: start;
>+}
>+
>+#alignSelfEnd {
>+    -webkit-align-self: end;
>+}
>+
>+#alignSelfCenter {
>+    -webkit-align-self: center;
>+}
>+
>+#alignSelfSelfStart {
>+    -webkit-align-self: self-start;
>+}
>+
>+#alignSelfSelfEnd {
>+    -webkit-align-self: self-end;
>+}
>+
>+#alignSelfLeft {
>+    -webkit-align-self: left;
>+}
>+
>+#alignSelfRight {
>+    -webkit-align-self: right;
>+}
>+
>+#alignSelfFlexStart {
>+    -webkit-align-self: flex-start;
>+}
>+
>+#alignSelfFlexEnd {
>+    -webkit-align-self: flex-end;
>+}
>+
>+#alignSelfEndTrue {
>+    -webkit-align-self: end true;
>+}
>+
>+#alignSelfCenterTrue {
>+    -webkit-align-self: center true;
>+}
>+
>+#alignSelfSelfEndSafe {
>+    -webkit-align-self: self-end safe;
>+}
>+
>+#alignSelfSelfStartSafe {
>+    -webkit-align-self: self-start safe;
>+}
>+
>+#alignSelfRightSafe {
>+    -webkit-align-self: right safe;
>+}
>+
>+#alignSelfLeftTrue {
>+    -webkit-align-self: left true;
>+}
>+
>+#alignSelfFlexStartTrue {
>+    -webkit-align-self: flex-start true;
>+}
>+
>+#alignSelfFlexEndSafe {
>+    -webkit-align-self: flex-end safe;
>+}
>+</style>
>+<script src="../resources/js-test.js"></script>
>+</head>
>+<body>
>+<div id="alignSelfBaseline"></div>
>+<div id="alignSelfLastBaseline"></div>
>+<div id="alignSelfStretch"></div>
>+<div id="alignSelfStart"></div>
>+<div id="alignSelfEnd"></div>
>+<div id="alignSelfCenter"></div>
>+<div id="alignSelfSelfStart"></div>
>+<div id="alignSelfSelfEnd"></div>
>+<div id="alignSelfLeft"></div>
>+<div id="alignSelfRight"></div>
>+<div id="alignSelfFlexStart"></div>
>+<div id="alignSelfFlexEnd"></div>
>+
>+<div id="alignSelfEndTrue"></div>
>+<div id="alignSelfCenterTrue"></div>
>+<div id="alignSelfSelfEndSafe"></div>
>+<div id="alignSelfSelfStartSafe"></div>
>+<div id="alignSelfRightSafe"></div>
>+<div id="alignSelfLeftTrue"></div>
>+<div id="alignSelfFlexStartTrue"></div>
>+<div id="alignSelfFlexEndSafe"></div>
>+<script src="resources/alignment-parsing-utils.js"></script>
>+<script>
>+description('Test that setting and getting align-self works as expected');
>+
>+debug("Test getting align-self set through CSS");
>+var alignSelfBaseline = document.getElementById("alignSelfBaseline");
>+shouldBe("getComputedStyle(alignSelfBaseline, '').getPropertyValue('-webkit-align-self')", "'baseline'");
>+
>+var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
>+shouldBe("getComputedStyle(alignSelfLastBaseline, '').getPropertyValue('-webkit-align-self')", "'last-baseline'");
>+
>+var alignSelfStretch = document.getElementById("alignSelfStretch");
>+shouldBe("getComputedStyle(alignSelfStretch, '').getPropertyValue('-webkit-align-self')", "'stretch'");
>+
>+var alignSelfStart = document.getElementById("alignSelfStart");
>+shouldBe("getComputedStyle(alignSelfStart, '').getPropertyValue('-webkit-align-self')", "'start'");
>+
>+var alignSelfEnd = document.getElementById("alignSelfEnd");
>+shouldBe("getComputedStyle(alignSelfEnd, '').getPropertyValue('-webkit-align-self')", "'end'");
>+
>+var alignSelfCenter = document.getElementById("alignSelfCenter");
>+shouldBe("getComputedStyle(alignSelfCenter, '').getPropertyValue('-webkit-align-self')", "'center'");
>+
>+var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
>+shouldBe("getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('-webkit-align-self')", "'self-end'");
>+
>+var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
>+shouldBe("getComputedStyle(alignSelfSelfStart, '').getPropertyValue('-webkit-align-self')", "'self-start'");
>+
>+var alignSelfLeft = document.getElementById("alignSelfLeft");
>+shouldBe("getComputedStyle(alignSelfLeft, '').getPropertyValue('-webkit-align-self')", "'left'");
>+
>+var alignSelfRight = document.getElementById("alignSelfRight");
>+shouldBe("getComputedStyle(alignSelfRight, '').getPropertyValue('-webkit-align-self')", "'right'");
>+
>+var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
>+shouldBe("getComputedStyle(alignSelfFlexStart, '').getPropertyValue('-webkit-align-self')", "'flex-start'");
>+
>+var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
>+shouldBe("getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('-webkit-align-self')", "'flex-end'");
>+
>+var alignSelfEndTrue = document.getElementById("alignSelfEndTrue");
>+shouldBe("getComputedStyle(alignSelfEndTrue, '').getPropertyValue('-webkit-align-self')", "'end true'");
>+
>+var alignSelfCenterTrue = document.getElementById("alignSelfCenterTrue");
>+shouldBe("getComputedStyle(alignSelfCenterTrue, '').getPropertyValue('-webkit-align-self')", "'center true'");
>+
>+var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
>+shouldBe("getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('-webkit-align-self')", "'self-end safe'");
>+
>+var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
>+shouldBe("getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('-webkit-align-self')", "'self-start safe'");
>+
>+var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
>+shouldBe("getComputedStyle(alignSelfRightSafe, '').getPropertyValue('-webkit-align-self')", "'right safe'");
>+
>+var alignSelfLeftTrue = document.getElementById("alignSelfLeftTrue");
>+shouldBe("getComputedStyle(alignSelfLeftTrue, '').getPropertyValue('-webkit-align-self')", "'left true'");
>+
>+var alignSelfFlexStartTrue = document.getElementById("alignSelfFlexStartTrue");
>+shouldBe("getComputedStyle(alignSelfFlexStartTrue, '').getPropertyValue('-webkit-align-self')", "'flex-start true'");
>+
>+var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
>+shouldBe("getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('-webkit-align-self')", "'flex-end safe'");
>+
>+debug("");
>+debug("Test initial value of align-self through JS");
>+element = document.createElement("div");
>+document.body.appendChild(element);
>+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-align-self')", "'start'");
>+
>+debug("");
>+debug("Test getting and setting align-self through JS");
>+container = document.createElement("div");
>+element = document.createElement("div");
>+container.appendChild(element);
>+document.body.appendChild(container);
>+element.style.webkitAlignSelf = "center";
>+checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "center", "center");
>+
>+element.style.webkitAlignSelf = "true start";
>+checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "start true", "start true");
>+
>+element.style.webkitAlignSelf = "flex-end safe";
>+checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "flex-end safe", "flex-end safe");
>+
>+element.style.webkitAlignSelf = "right";
>+checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "right", "right");
>+
>+element.style.webkitAlignSelf = "center";
>+checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "center", "center");
>+
>+element.style.webkitAlignSelf = "self-start";
>+checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "self-start", "self-start");
>+
>+element.style.webkitAlignSelf = "auto";
>+checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "auto", "start");
>+
>+container.style.display = "-webkit-flex";
>+element.style.webkitAlignSelf = "auto";
>+checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "auto", "stretch");
>+
>+container.style.display = "-webkit-grid";
>+element.style.webkitAlignSelf = "auto";
>+checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "auto", "stretch");
>+
>+element.style.webkitAlignSelf = "self-end";
>+checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "self-end", "self-end");
>+
>+debug("");
>+debug("Test bad combinations of align-self");
>+container = document.createElement("div");
>+element = document.createElement("div");
>+container.appendChild(element);
>+document.body.appendChild(container);
>+
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "true auto");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "auto safe");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "auto left");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "baseline safe");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "baseline center");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "stretch true");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "stretch right");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "true true");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "true safe");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "center start");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "stretch true");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "safe stretch");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "baseline safe");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "true baseline");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "true safe left");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "true left safe");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "left safe true safe");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy start");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy end");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy right true");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy auto");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy stretch");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy");
>+checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy left right");
>+
>+debug("");
>+debug("Test the value 'initial'");
>+container.style.display = "";
>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "center", "start");
>+
>+debug("");
>+debug("Test the value 'initial' for grid containers");
>+container.style.display = "-webkit-grid";
>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "left safe", "stretch");
>+
>+debug("");
>+debug("Test the value 'initial' for flex containers");
>+container.style.display = "-webkit-flex";
>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "right true", "stretch");
>+
>+debug("");
>+debug("Test the value 'initial' for positioned elements");
>+container.style.display = "";
>+element.style.position = "absolute";
>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "left", "stretch");
>+
>+debug("");
>+debug("Test the value 'initial' for positioned elements in grid containers");
>+container.style.display = "-webkit-grid";
>+element.style.position = "absolute";
>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "right", "stretch");
>+
>+debug("");
>+debug("Test the value 'initial' for positioned elements in grid containers");
>+container.style.display = "-webkit-flex";
>+element.style.position = "absolute";
>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "end", "stretch");
>+
>+debug("");
>+debug("Test the value 'inherit'");
>+checkInheritValues("webkitAlignSelf", "-webkit-align-self", "end");
>+checkInheritValues("webkitAlignSelf", "-webkit-align-self", "left safe");
>+checkInheritValues("webkitAlignSelf", "-webkit-align-self", "center true");
>+
>+</script>
>+</body>
>+</html>
>diff --git a/LayoutTests/css3/resources/alignment-parsing-utils.js b/LayoutTests/css3/resources/alignment-parsing-utils.js
>new file mode 100644
>index 0000000000000000000000000000000000000000..b97022a88c65762a347e2686428d51a24d38ed82
>--- /dev/null
>+++ b/LayoutTests/css3/resources/alignment-parsing-utils.js
>@@ -0,0 +1,46 @@
>+function checkValues(element, property, propertyID, value, computedValue)
>+{
>+    window.element = element;
>+    var elementID = element.id || "element";
>+    shouldBeEqualToString("element.style." + property, value);
>+    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')", computedValue);
>+}
>+
>+function checkBadValues(element, property, propertyID, value)
>+{
>+    element.style[property] = value;
>+    checkValues(element, property, propertyID, "", "start");
>+}
>+
>+function checkInitialValues(element, property, propertyID, value, initial)
>+{
>+    element.style[property] = value;
>+    checkValues(element, property, propertyID, value, value);
>+    element.style[property] = "initial";
>+    checkValues(element, property, propertyID, "initial", initial);
>+}
>+
>+function checkInheritValues(property, propertyID, value)
>+{
>+    var parentElement = document.createElement("div");
>+    document.body.appendChild(parentElement);
>+    parentElement.style[property] = value;
>+    checkValues(parentElement, property, propertyID, value, value);
>+
>+    var element = document.createElement("div");
>+    parentElement.appendChild(element);
>+    element.style[property] = "inherit";
>+    checkValues(element, property, propertyID, "inherit", value);
>+}
>+
>+function checkLegacyValues(property, propertyID, value)
>+{
>+    var parentElement = document.createElement("div");
>+    document.body.appendChild(parentElement);
>+    parentElement.style[property] = value;
>+    checkValues(parentElement, property, propertyID, value, value);
>+
>+    var element = document.createElement("div");
>+    parentElement.appendChild(element);
>+    checkValues(element, property, propertyID, "", value);
>+}
>diff --git a/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt b/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
>index 9fad3beceda9a98cc5ab76a0945873fa210bf4ea..686bf6a95ff44b9abdcff684c38c703b50de5d5c 100644
>--- a/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
>+++ b/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
>@@ -144,11 +144,12 @@ column-rule-width: 0px;
> column-span: none;
> column-width: auto;
> align-content: stretch;
>-align-items: stretch;
>-align-self: stretch;
>+align-items: start;
>+align-self: start;
> flex-direction: row;
> flex-wrap: nowrap;
> justify-content: flex-start;
>+justify-self: auto;
> -webkit-font-kerning: auto;
> -webkit-font-smoothing: auto;
> -webkit-font-variant-ligatures: normal;
>diff --git a/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt b/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
>index 56354f867ef7109964e0a3dc9d685afa578e82e7..30d30db767eb38ba05933285a190a78c425195aa 100644
>--- a/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
>+++ b/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
>@@ -143,11 +143,12 @@ column-rule-width: 0px
> column-span: none
> column-width: auto
> align-content: stretch
>-align-items: stretch
>-align-self: stretch
>+align-items: start
>+align-self: start
> flex-direction: row
> flex-wrap: nowrap
> justify-content: flex-start
>+justify-self: auto
> -webkit-font-kerning: auto
> -webkit-font-smoothing: auto
> -webkit-font-variant-ligatures: normal
>diff --git a/LayoutTests/fast/css/getComputedStyle/resources/property-names.js b/LayoutTests/fast/css/getComputedStyle/resources/property-names.js
>index 4ac0a80db664ce1e01f71c4bbc738ffcb6c0907c..d7e20fe00bf17d11cd1c2b4b1136cada53b4df12 100644
>--- a/LayoutTests/fast/css/getComputedStyle/resources/property-names.js
>+++ b/LayoutTests/fast/css/getComputedStyle/resources/property-names.js
>@@ -65,6 +65,7 @@ var propertiesToTest = {
>     "-webkit-hyphenate-limit-lines": true,
>     "-webkit-hyphens": true,
>     "justify-content": true,
>+    "justify-self": true,
>     "-webkit-line-align": true,
>     "-webkit-line-box-contain": true,
>     "-webkit-line-break": true,
>diff --git a/LayoutTests/svg/css/getComputedStyle-basic-expected.txt b/LayoutTests/svg/css/getComputedStyle-basic-expected.txt
>index 89d6474d903ca8f5e676328b4c551e74acfde125..92c09b82be11ad989407df97bb4c63cd5f88c4ca 100644
>--- a/LayoutTests/svg/css/getComputedStyle-basic-expected.txt
>+++ b/LayoutTests/svg/css/getComputedStyle-basic-expected.txt
>@@ -286,16 +286,18 @@ rect: style.getPropertyValue(column-width) : auto
> rect: style.getPropertyCSSValue(column-width) : [object CSSPrimitiveValue]
> rect: style.getPropertyValue(align-content) : stretch
> rect: style.getPropertyCSSValue(align-content) : [object CSSPrimitiveValue]
>-rect: style.getPropertyValue(align-items) : stretch
>-rect: style.getPropertyCSSValue(align-items) : [object CSSPrimitiveValue]
>-rect: style.getPropertyValue(align-self) : stretch
>-rect: style.getPropertyCSSValue(align-self) : [object CSSPrimitiveValue]
>+rect: style.getPropertyValue(align-items) : start
>+rect: style.getPropertyCSSValue(align-items) : [object CSSValueList]
>+rect: style.getPropertyValue(align-self) : start
>+rect: style.getPropertyCSSValue(align-self) : [object CSSValueList]
> rect: style.getPropertyValue(flex-direction) : row
> rect: style.getPropertyCSSValue(flex-direction) : [object CSSPrimitiveValue]
> rect: style.getPropertyValue(flex-wrap) : nowrap
> rect: style.getPropertyCSSValue(flex-wrap) : [object CSSPrimitiveValue]
> rect: style.getPropertyValue(justify-content) : flex-start
> rect: style.getPropertyCSSValue(justify-content) : [object CSSPrimitiveValue]
>+rect: style.getPropertyValue(justify-self) : auto
>+rect: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
> rect: style.getPropertyValue(-webkit-font-kerning) : auto
> rect: style.getPropertyCSSValue(-webkit-font-kerning) : [object CSSPrimitiveValue]
> rect: style.getPropertyValue(-webkit-font-smoothing) : auto
>@@ -798,16 +800,18 @@ g: style.getPropertyValue(column-width) : auto
> g: style.getPropertyCSSValue(column-width) : [object CSSPrimitiveValue]
> g: style.getPropertyValue(align-content) : stretch
> g: style.getPropertyCSSValue(align-content) : [object CSSPrimitiveValue]
>-g: style.getPropertyValue(align-items) : stretch
>-g: style.getPropertyCSSValue(align-items) : [object CSSPrimitiveValue]
>-g: style.getPropertyValue(align-self) : stretch
>-g: style.getPropertyCSSValue(align-self) : [object CSSPrimitiveValue]
>+g: style.getPropertyValue(align-items) : start
>+g: style.getPropertyCSSValue(align-items) : [object CSSValueList]
>+g: style.getPropertyValue(align-self) : start
>+g: style.getPropertyCSSValue(align-self) : [object CSSValueList]
> g: style.getPropertyValue(flex-direction) : row
> g: style.getPropertyCSSValue(flex-direction) : [object CSSPrimitiveValue]
> g: style.getPropertyValue(flex-wrap) : nowrap
> g: style.getPropertyCSSValue(flex-wrap) : [object CSSPrimitiveValue]
> g: style.getPropertyValue(justify-content) : flex-start
> g: style.getPropertyCSSValue(justify-content) : [object CSSPrimitiveValue]
>+g: style.getPropertyValue(justify-self) : auto
>+g: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
> g: style.getPropertyValue(-webkit-font-kerning) : auto
> g: style.getPropertyCSSValue(-webkit-font-kerning) : [object CSSPrimitiveValue]
> g: style.getPropertyValue(-webkit-font-smoothing) : auto

Actions: View | Formatted Diff | Diff

Attachments on bug 133359: 234786 | 234791 | 234793 | 234794 | 234798 | 235769 | 235775 | 235786 | 235793 | 235798 | 235803 | 235903 | 235908 | 235915 | 235920 | 235926 | 235927 | 235928 | 236927 | 236928 | 236929 | 236930 | 237080 | 237085 | 237088 | 237091 | 237224 | 240511 | 241419 | 241420 | 241423 | 241426 | 241479 | 241547 | 241560 | 241591 | 241596 | 241597 | 241615 | 241707 | 241716 | 241718 | 241719 | 241867 | 241872 | 241874 | 241886 | 241889 | 241893 | 248555 | 248558 | 248559 | 248562 | 248563 | 248569 | 248930 | 248934 | 248935 | 248938