[CSS Grid Layout] Upgrade align-self and align-items parsing to CSS 3
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 17 Nov 2014 19:52:42 +0000 (19:52 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 17 Nov 2014 19:52:42 +0000 (19:52 +0000)
https://bugs.webkit.org/show_bug.cgi?id=133359

Reviewed by David Hyatt.

Source/WebCore:

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.

LayoutTests:

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.

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

34 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/css3/flexbox/css-properties-expected.txt
LayoutTests/css3/flexbox/css-properties.html
LayoutTests/css3/parse-align-items-expected.txt [new file with mode: 0644]
LayoutTests/css3/parse-align-items.html [new file with mode: 0644]
LayoutTests/css3/parse-align-self-expected.txt [new file with mode: 0644]
LayoutTests/css3/parse-align-self.html [new file with mode: 0644]
LayoutTests/css3/resources/alignment-parsing-utils.js [new file with mode: 0644]
LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
LayoutTests/fast/css/getComputedStyle/resources/property-names.js
LayoutTests/svg/css/getComputedStyle-basic-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSParser.h
Source/WebCore/css/CSSPrimitiveValueMappings.h
Source/WebCore/css/CSSPropertyNames.in
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/css/StyleResolver.h
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.h
Source/WebCore/rendering/RenderFullScreen.cpp
Source/WebCore/rendering/RenderMenuList.cpp
Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp
Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/RenderStyleConstants.h
Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp
Source/WebCore/rendering/style/StyleRareNonInheritedData.h
Source/WebCore/style/StyleResolveTree.cpp

index b8e06d1..9c66c85 100644 (file)
@@ -1,3 +1,33 @@
+2014-11-17  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-17  Shivakumar JM  <shiva.jm@samsung.com>
 
         Attribute text in HTMLAnchorElement should behave as per specification.
index 745ac2b..a53a298 100644 (file)
@@ -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 ]
 
index 16ab20e..f32934e 100644 (file)
@@ -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 ""
index d721efc..51a0a68 100644 (file)
@@ -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 (file)
index 0000000..d5ed30e
--- /dev/null
@@ -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 (file)
index 0000000..d6f1dab
--- /dev/null
@@ -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 (file)
index 0000000..4a1f161
--- /dev/null
@@ -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 (file)
index 0000000..aa83209
--- /dev/null
@@ -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 (file)
index 0000000..b97022a
--- /dev/null
@@ -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);
+}
index 9fad3be..686bf6a 100644 (file)
@@ -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;
index 56354f8..30d30db 100644 (file)
@@ -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
index 4ac0a80..d7e20fe 100644 (file)
@@ -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,
index 89d6474..92c09b8 100644 (file)
@@ -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
index e4993fc..81c59ac 100644 (file)
@@ -1,3 +1,86 @@
+2014-11-17  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-17  Shivakumar JM  <shiva.jm@samsung.com>
 
         Attribute text in HTMLAnchorElement should behave as per specification.
index 1ad341a..8ba8eca 100644 (file)
@@ -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:
index 1dc777f..5c1f749 100644 (file)
@@ -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;
 
index a2a450f..a0c5be4 100644 (file)
@@ -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);
index 8165e3b..f2313ed 100644 (file)
@@ -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;
 }
 
 
index 024c7ef..9c53fc1 100644 (file)
@@ -364,9 +364,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
@@ -387,7 +387,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
index 66dfd38..1a6495e 100644 (file)
@@ -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
index caa6fd1..ac2fa74 100644 (file)
@@ -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:
index b2ca96b..f6f02be 100644 (file)
@@ -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
index e48eb9b..1d651af 100644 (file)
@@ -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)
index 36ad71e..59d4b22 100644 (file)
@@ -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);
         }
     }
index 2b6efac..3bbb6fe 100644 (file)
@@ -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);
index e115f7f..4f08d74 100644 (file)
@@ -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);
index 44c8d2b..62c4e11 100644 (file)
@@ -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));
index ed209ad..900a2bb 100644 (file)
@@ -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();
     }
index 74c99e1..4abdfb8 100644 (file)
@@ -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());
         }
index dbbda1f..9c99c08 100644 (file)
@@ -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(); }
index 582f9a9..628d6f4 100644 (file)
@@ -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 {
index c524a0a..ef6740c 100644 (file)
@@ -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
index df0beb6..b91c968 100644 (file)
@@ -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 "..."
index 446ee51..d43ffbc 100644 (file)
@@ -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))