[CSS Box Alignment] Upgrade align-content parsing to CSS3 Box Alignment spec
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 May 2015 15:15:38 +0000 (15:15 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 May 2015 15:15:38 +0000 (15:15 +0000)
https://bugs.webkit.org/show_bug.cgi?id=144443

Reviewed by Darin Adler.

Source/WebCore:

Upgrade the align-content property to the last CSS3 Box
Alignment specification. As it uses a different enumeration for
Positional and Distribution alignment, it implies some changes in
the FlexibleBox implementation.

Test: css3/parse-align-content.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::resolveContentAlignmentAuto):
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSParser.cpp:
(WebCore::isValidKeywordPropertyAndValue):
(WebCore::isKeywordPropertyID):
(WebCore::CSSParser::parseValue):
* css/CSSPropertyNames.in:
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse):
(WebCore::initialAlignContentOffset):
(WebCore::alignContentSpaceBetweenChildren):
(WebCore::RenderFlexibleBox::alignFlexLines):
* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::resolveContentAlignment):
(WebCore::RenderStyle::resolveContentJustification):
* rendering/style/RenderStyle.h:
* rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
(WebCore::StyleRareNonInheritedData::operator==):
* rendering/style/StyleRareNonInheritedData.h:

LayoutTests:

Tests to verify the align-content parsing logic. The new Box Alignment spec
requires some changes in the flexbox tests.

* css3/flexbox/css-properties-expected.txt:
* css3/flexbox/css-properties.html:
* css3/parse-align-content-expected.txt: Added.
* css3/parse-align-content.html: Added.

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

19 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/flexbox/css-properties-expected.txt
LayoutTests/css3/flexbox/css-properties.html
LayoutTests/css3/parse-align-content-expected.txt [new file with mode: 0644]
LayoutTests/css3/parse-align-content.html [new file with mode: 0644]
LayoutTests/css3/parse-justify-content-expected.txt
LayoutTests/css3/parse-justify-content.html
LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
LayoutTests/svg/css/getComputedStyle-basic-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSPropertyNames.in
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/style/RenderStyle.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp
Source/WebCore/rendering/style/StyleRareNonInheritedData.h

index 1c2afa6..9dbfc43 100644 (file)
@@ -1,3 +1,18 @@
+2015-05-05  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Box Alignment] Upgrade align-content parsing to CSS3 Box Alignment spec
+        https://bugs.webkit.org/show_bug.cgi?id=144443
+
+        Reviewed by Darin Adler.
+
+        Tests to verify the align-content parsing logic. The new Box Alignment spec
+        requires some changes in the flexbox tests.
+
+        * css3/flexbox/css-properties-expected.txt:
+        * css3/flexbox/css-properties.html:
+        * css3/parse-align-content-expected.txt: Added.
+        * css3/parse-align-content.html: Added.
+
 2015-05-05  Xabier Rodriguez Calvar  <calvaris@igalia.com> and Youenn Fablet  <youenn.fablet@crf.canon.fr>
 
         streams/readable-stream.html is very flaky
index 1dd7378..6fab098 100644 (file)
@@ -16,7 +16,7 @@ PASS flexitem.style.webkitOrder is "0"
 PASS flexitem.style.webkitOrder is "0"
 PASS flexitem.style.webkitOrder is ""
 PASS flexbox.style.webkitJustifyContent is ""
-PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "flex-start"
+PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "stretch"
 PASS flexbox.style.webkitJustifyContent is ""
 PASS flexbox.style.webkitJustifyContent is "flex-start"
 PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "flex-start"
@@ -27,7 +27,7 @@ PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "center"
 PASS flexbox.style.webkitJustifyContent is "space-between"
 PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "space-between"
 PASS flexbox.style.webkitJustifyContent is ""
-PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "flex-start"
+PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "stretch"
 PASS flexbox.style.webkitAlignSelf is ""
 PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
 PASS window.getComputedStyle(document.documentElement, null).webkitAlignSelf is "start"
index dd7292b..90f6489 100644 (file)
@@ -54,8 +54,8 @@ shouldBeEqualToString('flexitem.style.webkitOrder', '');
 flexbox.style.display = '-webkit-flex';
 
 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
-// The initial value is 'flex-start'.
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-start');
+// The initial value is 'auto' which, will be resolve to 'stretch' for flexbox containes (behaving like 'flex-start' for the justify-content property).
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'stretch');
 
 flexbox.style.webkitJustifyContent = 'foo';
 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
@@ -78,7 +78,7 @@ shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte
 
 flexbox.style.webkitJustifyContent = '';
 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-start');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'stretch');
 
 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
 // The initial value is 'auto', which will be resolved depending on parent's style (except for the 'document' element).
@@ -277,6 +277,8 @@ for (var i = 0; i < computedStyle.length; ++i) {
 }
 shouldBeFalse('foundFlexFlow');
 
+flexbox.style.display = '-webkit-flex';
+
 // The initial value is 'stretch'.
 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
diff --git a/LayoutTests/css3/parse-align-content-expected.txt b/LayoutTests/css3/parse-align-content-expected.txt
new file mode 100644 (file)
index 0000000..6eeddbb
--- /dev/null
@@ -0,0 +1,142 @@
+Test that setting and getting align-content works as expected
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Test getting align-content set through CSS
+PASS getComputedStyle(alignContentAuto, '').getPropertyValue('align-content') is "start"
+PASS getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content') is "baseline"
+PASS getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content') is "last-baseline"
+PASS getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content') is "space-between"
+PASS getComputedStyle(alignContentSpaceAround, '').getPropertyValue('align-content') is "space-around"
+PASS getComputedStyle(alignContentSpaceEvenly, '').getPropertyValue('align-content') is "space-evenly"
+PASS getComputedStyle(alignContentStretch, '').getPropertyValue('align-content') is "stretch"
+PASS getComputedStyle(alignContentStart, '').getPropertyValue('align-content') is "start"
+PASS getComputedStyle(alignContentEnd, '').getPropertyValue('align-content') is "end"
+PASS getComputedStyle(alignContentCenter, '').getPropertyValue('align-content') is "center"
+PASS getComputedStyle(alignContentLeft, '').getPropertyValue('align-content') is "left"
+PASS getComputedStyle(alignContentRight, '').getPropertyValue('align-content') is "right"
+PASS getComputedStyle(alignContentFlexStart, '').getPropertyValue('align-content') is "flex-start"
+PASS getComputedStyle(alignContentFlexEnd, '').getPropertyValue('align-content') is "flex-end"
+PASS getComputedStyle(alignContentEndTrue, '').getPropertyValue('align-content') is "end true"
+PASS getComputedStyle(alignContentCenterTrue, '').getPropertyValue('align-content') is "center true"
+PASS getComputedStyle(alignContentRightSafe, '').getPropertyValue('align-content') is "right safe"
+PASS getComputedStyle(alignContentLeftTrue, '').getPropertyValue('align-content') is "left true"
+PASS getComputedStyle(alignContentFlexStartTrue, '').getPropertyValue('align-content') is "flex-start true"
+PASS getComputedStyle(alignContentFlexEndSafe, '').getPropertyValue('align-content') is "flex-end safe"
+PASS getComputedStyle(alignContentSpaceBetweenLeft, '').getPropertyValue('align-content') is "space-between left"
+PASS getComputedStyle(alignContentSpaceAroundCenter, '').getPropertyValue('align-content') is "space-around center"
+PASS getComputedStyle(alignContentSpaceEvenlyRight, '').getPropertyValue('align-content') is "space-evenly right"
+PASS getComputedStyle(alignContentStretchStartSafe, '').getPropertyValue('align-content') is "stretch start safe"
+PASS getComputedStyle(alignContentSpaceAroundEndTrue, '').getPropertyValue('align-content') is "space-around end true"
+PASS getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content') is "space-evenly flex-start safe"
+PASS getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content') is "start"
+PASS getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content') is "start"
+PASS getComputedStyle(alignContentSafe, '').getPropertyValue('align-content') is "start"
+PASS getComputedStyle(alignContentRightSafeTrue, '').getPropertyValue('align-content') is "start"
+PASS getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content') is "start"
+
+Test initial value of align-content through JS
+PASS getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+
+Test getting and setting align-content through JS
+PASS element.style.alignContent is "center"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "center"
+PASS element.style.alignContent is "start true"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start true"
+PASS element.style.alignContent is "flex-end safe"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "flex-end safe"
+PASS element.style.alignContent is "space-between right safe"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "space-between right safe"
+PASS element.style.alignContent is "stretch center"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
+PASS element.style.alignContent is "right true"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right true"
+PASS element.style.alignContent is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch"
+PASS element.style.alignContent is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is "flex-end"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "flex-end"
+
+Test bad combinations of align-content
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+
+Test the value 'initial'
+PASS element.style.alignContent is "stretch center"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
+PASS element.style.alignContent is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+
+Test the value 'initial' for grid containers
+PASS element.style.alignContent is "space-between left"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "space-between left"
+PASS element.style.alignContent is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+
+Test the value 'initial' for flex containers
+PASS element.style.alignContent is "right true"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right true"
+PASS element.style.alignContent is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch"
+
+Test the value 'inherit'
+PASS element.style.alignContent is "end"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "end"
+PASS element.style.alignContent is "inherit"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "end"
+PASS element.style.alignContent is "left safe"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "left safe"
+PASS element.style.alignContent is "inherit"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "left safe"
+PASS element.style.alignContent is "stretch center"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
+PASS element.style.alignContent is "inherit"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/css3/parse-align-content.html b/LayoutTests/css3/parse-align-content.html
new file mode 100644 (file)
index 0000000..b06207c
--- /dev/null
@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#alignContentAuto {
+    align-content: auto;
+}
+
+#alignContentBaseline {
+    align-content: baseline;
+}
+
+#alignContentLastBaseline {
+    align-content: last-baseline;
+}
+
+#alignContentSpaceBetween {
+    align-content: space-between;
+}
+
+#alignContentSpaceAround {
+    align-content: space-around;
+}
+
+#alignContentSpaceEvenly {
+    align-content: space-evenly;
+}
+
+#alignContentStretch {
+    align-content: stretch;
+}
+
+#alignContentStart {
+    align-content: start;
+}
+
+#alignContentEnd {
+    align-content: end;
+}
+
+#alignContentCenter {
+    align-content: center;
+}
+
+#alignContentLeft {
+    align-content: left;
+}
+
+#alignContentRight {
+    align-content: right;
+}
+
+#alignContentFlexStart {
+    align-content: flex-start;
+}
+
+#alignContentFlexEnd {
+    align-content: flex-end;
+}
+
+#alignContentEndTrue {
+    align-content: end true;
+}
+
+#alignContentCenterTrue {
+    align-content: center true;
+}
+
+#alignContentRightSafe {
+    align-content: right safe;
+}
+
+#alignContentLeftTrue {
+    align-content: left true;
+}
+
+#alignContentFlexStartTrue {
+    align-content: flex-start true;
+}
+
+#alignContentFlexEndSafe {
+    align-content: flex-end safe;
+}
+
+#alignContentSpaceBetweenLeft {
+    align-content: space-between left;
+}
+
+#alignContentSpaceAroundCenter {
+    align-content: space-around center;
+}
+
+#alignContentSpaceEvenlyRight {
+    align-content: space-evenly right;
+}
+
+#alignContentStretchStartSafe {
+    align-content: stretch start safe;
+}
+
+#alignContentSpaceAroundEndTrue {
+    align-content: space-around end true;
+}
+
+#alignContentSpaceEvenlyFlexStartSafe {
+    align-content: space-evenly flex-start safe;
+}
+
+<!-- Invalid CSS cases -->
+#alignContentSpaceBetweenSafe {
+    align-content: space-between safe;
+}
+
+#alignContentSpaceBetweenStretch {
+    align-content: space-between stretch;
+}
+
+#alignContentSafe {
+    align-content: safe;
+}
+
+#alignContentRightSafeTrue {
+    align-content: right safe true;
+}
+
+#alignContentCenterLeft {
+    align-content: center left;
+}
+</style>
+<script src="../resources/js-test.js"></script>
+</head>
+<body>
+<div id="alignContentAuto"></div>
+<div id="alignContentBaseline"></div>
+<div id="alignContentLastBaseline"></div>
+<div id="alignContentSpaceBetween"></div>
+<div id="alignContentSpaceAround"></div>
+<div id="alignContentSpaceEvenly"></div>
+<div id="alignContentStretch"></div>
+<div id="alignContentSpaceBetweenSafe"></div>
+<div id="alignContentSpaceAroundTrue"></div>
+<div id="alignContentStretchTrue"></div>
+<div id="alignContentStretchrue"></div>
+<div id="alignContentStart"></div>
+<div id="alignContentEnd"></div>
+<div id="alignContentCenter"></div>
+<div id="alignContentLeft"></div>
+<div id="alignContentRight"></div>
+<div id="alignContentFlexStart"></div>
+<div id="alignContentFlexEnd"></div>
+<div id="alignContentEndTrue"></div>
+<div id="alignContentCenterTrue"></div>
+<div id="alignContentRightSafe"></div>
+<div id="alignContentLeftTrue"></div>
+<div id="alignContentFlexStartTrue"></div>
+<div id="alignContentFlexEndSafe"></div>
+<div id="alignContentSpaceBetweenLeft"></div>
+<div id="alignContentSpaceAroundCenter"></div>
+<div id="alignContentSpaceEvenlyRight"></div>
+<div id="alignContentStretchStartSafe"></div>
+<div id="alignContentSpaceAroundEndTrue"></div>
+<div id="alignContentSpaceEvenlyFlexStartSafe"></div>
+
+<div id="alignContentSpaceBetweenSafe"></div>
+<div id="alignContentSpaceBetweenStretch"></div>
+<div id="alignContentSafe"></div>
+<div id="alignContentRightSafeTrue"></div>
+<div id="alignContentCenterLeft"></div>
+
+<script src="resources/alignment-parsing-utils.js"></script>
+<script>
+description('Test that setting and getting align-content works as expected');
+
+debug("Test getting align-content set through CSS");
+var alignContentAuto = document.getElementById("alignContentAuto");
+shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('align-content')", "start");
+
+var alignContentBaseline = document.getElementById("alignContentBaseline");
+shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content')", "baseline");
+
+var alignContentLastBaseline = document.getElementById("alignContentLastBaseline");
+shouldBeEqualToString("getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content')", "last-baseline");
+
+var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content')", "space-between");
+
+var alignContentSpaceAround = document.getElementById("alignContentSpaceAround");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceAround, '').getPropertyValue('align-content')", "space-around");
+
+var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenly, '').getPropertyValue('align-content')", "space-evenly");
+
+var alignContentStretch = document.getElementById("alignContentStretch");
+shouldBeEqualToString("getComputedStyle(alignContentStretch, '').getPropertyValue('align-content')", "stretch");
+
+var alignContentStart = document.getElementById("alignContentStart");
+shouldBeEqualToString("getComputedStyle(alignContentStart, '').getPropertyValue('align-content')", "start");
+
+var alignContentEnd = document.getElementById("alignContentEnd");
+shouldBeEqualToString("getComputedStyle(alignContentEnd, '').getPropertyValue('align-content')", "end");
+
+var alignContentCenter = document.getElementById("alignContentCenter");
+shouldBeEqualToString("getComputedStyle(alignContentCenter, '').getPropertyValue('align-content')", "center");
+
+var alignContentLeft = document.getElementById("alignContentLeft");
+shouldBeEqualToString("getComputedStyle(alignContentLeft, '').getPropertyValue('align-content')", "left");
+
+var alignContentRight = document.getElementById("alignContentRight");
+shouldBeEqualToString("getComputedStyle(alignContentRight, '').getPropertyValue('align-content')", "right");
+
+var alignContentFlexStart = document.getElementById("alignContentFlexStart");
+shouldBeEqualToString("getComputedStyle(alignContentFlexStart, '').getPropertyValue('align-content')", "flex-start");
+
+var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
+shouldBeEqualToString("getComputedStyle(alignContentFlexEnd, '').getPropertyValue('align-content')", "flex-end");
+
+var alignContentEndTrue = document.getElementById("alignContentEndTrue");
+shouldBeEqualToString("getComputedStyle(alignContentEndTrue, '').getPropertyValue('align-content')", "end true");
+
+var alignContentCenterTrue = document.getElementById("alignContentCenterTrue");
+shouldBeEqualToString("getComputedStyle(alignContentCenterTrue, '').getPropertyValue('align-content')", "center true");
+
+var alignContentRightSafe = document.getElementById("alignContentRightSafe");
+shouldBeEqualToString("getComputedStyle(alignContentRightSafe, '').getPropertyValue('align-content')", "right safe");
+
+var alignContentLeftTrue = document.getElementById("alignContentLeftTrue");
+shouldBeEqualToString("getComputedStyle(alignContentLeftTrue, '').getPropertyValue('align-content')", "left true");
+
+var alignContentFlexStartTrue = document.getElementById("alignContentFlexStartTrue");
+shouldBeEqualToString("getComputedStyle(alignContentFlexStartTrue, '').getPropertyValue('align-content')", "flex-start true");
+
+var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe");
+shouldBeEqualToString("getComputedStyle(alignContentFlexEndSafe, '').getPropertyValue('align-content')", "flex-end safe");
+
+var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenLeft, '').getPropertyValue('align-content')", "space-between left");
+
+var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundCenter, '').getPropertyValue('align-content')", "space-around center");
+
+var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyRight, '').getPropertyValue('align-content')", "space-evenly right");
+
+var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe");
+shouldBeEqualToString("getComputedStyle(alignContentStretchStartSafe, '').getPropertyValue('align-content')", "stretch start safe");
+
+var alignContentSpaceAroundEndTrue = document.getElementById("alignContentSpaceAroundEndTrue");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundEndTrue, '').getPropertyValue('align-content')", "space-around end true");
+
+var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content')", "space-evenly flex-start safe");
+
+var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content')", "start");
+
+var alignContentSpaceAroundTrue = document.getElementById("alignContentSpaceBetweenStretch");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content')", "start");
+
+var alignContentSpaceAroundTrue = document.getElementById("alignContentSafe");
+shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('align-content')", "start");
+
+var alignContentSpaceAroundTrue = document.getElementById("alignContentRightSafeTrue");
+shouldBeEqualToString("getComputedStyle(alignContentRightSafeTrue, '').getPropertyValue('align-content')", "start");
+
+var alignContentSpaceAroundTrue = document.getElementById("alignContentCenterLeft");
+shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content')", "start");
+
+debug("");
+debug("Test initial value of align-content through JS");
+element = document.createElement("div");
+document.body.appendChild(element);
+shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-content')", "start");
+
+debug("");
+debug("Test getting and setting align-content through JS");
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.alignContent = "center";
+checkValues(element, "alignContent", "align-content",  "center", "center");
+
+element.style.alignContent = "true start";
+checkValues(element, "alignContent", "align-content",  "start true", "start true");
+
+element.style.alignContent = "flex-end safe";
+checkValues(element, "alignContent", "align-content",  "flex-end safe", "flex-end safe");
+
+element.style.alignContent = "space-between right safe";
+checkValues(element, "alignContent", "align-content",  "space-between right safe", "space-between right safe");
+
+element.style.alignContent = "stretch center";
+checkValues(element, "alignContent", "align-content",  "stretch center", "stretch center");
+
+element.style.alignContent = "right true";
+checkValues(element, "alignContent", "align-content",  "right true", "right true");
+
+element.style.alignContent = "auto";
+checkValues(element, "alignContent", "align-content",  "auto", "start");
+
+element.style.display = "-webkit-flex";
+element.style.alignContent = "auto";
+checkValues(element, "alignContent", "align-content",  "auto", "stretch");
+
+element.style.display = "-webkit-grid";
+element.style.alignContent = "auto";
+checkValues(element, "alignContent", "align-content",  "auto", "start");
+
+element.style.alignContent = "flex-end";
+checkValues(element, "alignContent", "align-content",  "flex-end", "flex-end");
+
+debug("");
+debug("Test bad combinations of align-content");
+element = document.createElement("div");
+document.body.appendChild(element);
+
+checkBadValues(element, "alignContent", "align-content",  "");
+checkBadValues(element, "alignContent", "align-content",  "true auto");
+checkBadValues(element, "alignContent", "align-content",  "auto safe");
+checkBadValues(element, "alignContent", "align-content",  "auto left");
+checkBadValues(element, "alignContent", "align-content",  "baseline safe");
+checkBadValues(element, "alignContent", "align-content",  "last baseline center");
+checkBadValues(element, "alignContent", "align-content",  "true true");
+checkBadValues(element, "alignContent", "align-content",  "true safe");
+checkBadValues(element, "alignContent", "align-content",  "center start");
+checkBadValues(element, "alignContent", "align-content",  "baseline safe");
+checkBadValues(element, "alignContent", "align-content",  "true baseline");
+checkBadValues(element, "alignContent", "align-content",  "true safe left");
+checkBadValues(element, "alignContent", "align-content",  "true left safe");
+checkBadValues(element, "alignContent", "align-content",  "left safe true safe");
+checkBadValues(element, "alignContent", "align-content",  "start right space-between");
+checkBadValues(element, "alignContent", "align-content",  "safe stretch");
+checkBadValues(element, "alignContent", "align-content",  "space-around stretch");
+checkBadValues(element, "alignContent", "align-content",  "end space-between start");
+checkBadValues(element, "alignContent", "align-content",  "right safe left");
+checkBadValues(element, "alignContent", "align-content",  "true");
+checkBadValues(element, "alignContent", "align-content",  "safe");
+
+debug("");
+debug("Test the value 'initial'");
+element.style.display = "";
+checkInitialValues(element, "alignContent", "align-content", "stretch center", "start");
+
+debug("");
+debug("Test the value 'initial' for grid containers");
+element.style.display = "-webkit-grid";
+checkInitialValues(element, "alignContent", "align-content", "space-between left", "start");
+
+debug("");
+debug("Test the value 'initial' for flex containers");
+element.style.display = "-webkit-flex";
+checkInitialValues(element, "alignContent", "align-content", "right true", "stretch");
+
+debug("");
+debug("Test the value 'inherit'");
+checkInheritValues("alignContent", "align-content", "end");
+checkInheritValues("alignContent", "align-content", "left safe");
+checkInheritValues("alignContent", "align-content", "stretch center");
+
+</script>
+</body>
+</html>
index 791eaf5..ea6f435 100644 (file)
@@ -55,7 +55,7 @@ PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is
 PASS element.style.justifyContent is "auto"
 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
 PASS element.style.justifyContent is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "flex-start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch"
 PASS element.style.justifyContent is "auto"
 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
 PASS element.style.justifyContent is "flex-end"
@@ -121,7 +121,7 @@ Test the value 'initial' for flex containers
 PASS element.style.justifyContent is "right true"
 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right true"
 PASS element.style.justifyContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "flex-start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch"
 
 Test the value 'inherit'
 PASS element.style.justifyContent is "end"
index 6341cb1..4c938c2 100644 (file)
@@ -294,7 +294,7 @@ checkValues(element, "justifyContent", "justify-content",  "auto", "start");
 
 element.style.display = "-webkit-flex";
 element.style.justifyContent = "auto";
-checkValues(element, "justifyContent", "justify-content",  "auto", "flex-start");
+checkValues(element, "justifyContent", "justify-content",  "auto", "stretch");
 
 element.style.display = "-webkit-grid";
 element.style.justifyContent = "auto";
@@ -343,7 +343,7 @@ checkInitialValues(element, "justifyContent", "justify-content", "space-between
 debug("");
 debug("Test the value 'initial' for flex containers");
 element.style.display = "-webkit-flex";
-checkInitialValues(element, "justifyContent", "justify-content", "right true", "flex-start");
+checkInitialValues(element, "justifyContent", "justify-content", "right true", "stretch");
 
 debug("");
 debug("Test the value 'inherit'");
index 1848b5e..100ab1c 100644 (file)
@@ -146,7 +146,7 @@ column-rule-style: none;
 column-rule-width: 0px;
 column-span: none;
 column-width: auto;
-align-content: stretch;
+align-content: start;
 align-items: start;
 align-self: start;
 flex-direction: row;
index 32e5413..e700250 100644 (file)
@@ -145,7 +145,7 @@ column-rule-style: none
 column-rule-width: 0px
 column-span: none
 column-width: auto
-align-content: stretch
+align-content: auto
 align-items: auto
 align-self: auto
 flex-direction: row
index 432d507..2ee1e24 100644 (file)
@@ -290,8 +290,8 @@ rect: style.getPropertyValue(column-span) : none
 rect: style.getPropertyCSSValue(column-span) : [object CSSPrimitiveValue]
 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-content) : start
+rect: style.getPropertyCSSValue(align-content) : [object CSSValueList]
 rect: style.getPropertyValue(align-items) : start
 rect: style.getPropertyCSSValue(align-items) : [object CSSValueList]
 rect: style.getPropertyValue(align-self) : start
@@ -808,8 +808,8 @@ g: style.getPropertyValue(column-span) : none
 g: style.getPropertyCSSValue(column-span) : [object CSSPrimitiveValue]
 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-content) : start
+g: style.getPropertyCSSValue(align-content) : [object CSSValueList]
 g: style.getPropertyValue(align-items) : start
 g: style.getPropertyCSSValue(align-items) : [object CSSValueList]
 g: style.getPropertyValue(align-self) : start
index f7046f0..06eb166 100644 (file)
@@ -1,3 +1,40 @@
+2015-05-05  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Box Alignment] Upgrade align-content parsing to CSS3 Box Alignment spec
+        https://bugs.webkit.org/show_bug.cgi?id=144443
+
+        Reviewed by Darin Adler.
+
+        Upgrade the align-content property to the last CSS3 Box
+        Alignment specification. As it uses a different enumeration for
+        Positional and Distribution alignment, it implies some changes in
+        the FlexibleBox implementation.
+
+        Test: css3/parse-align-content.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::resolveContentAlignmentAuto):
+        (WebCore::ComputedStyleExtractor::propertyValue):
+        * css/CSSParser.cpp:
+        (WebCore::isValidKeywordPropertyAndValue):
+        (WebCore::isKeywordPropertyID):
+        (WebCore::CSSParser::parseValue):
+        * css/CSSPropertyNames.in:
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
+        (WebCore::RenderFlexibleBox::layoutColumnReverse):
+        (WebCore::initialAlignContentOffset):
+        (WebCore::alignContentSpaceBetweenChildren):
+        (WebCore::RenderFlexibleBox::alignFlexLines):
+        * rendering/style/RenderStyle.cpp:
+        (WebCore::RenderStyle::resolveContentAlignment):
+        (WebCore::RenderStyle::resolveContentJustification):
+        * rendering/style/RenderStyle.h:
+        * rendering/style/StyleRareNonInheritedData.cpp:
+        (WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
+        (WebCore::StyleRareNonInheritedData::operator==):
+        * rendering/style/StyleRareNonInheritedData.h:
+
 2015-05-05  Xabier Rodriguez Calvar  <calvaris@igalia.com> and Youenn Fablet  <youenn.fablet@crf.canon.fr>
 
         streams/readable-stream.html is very flaky
index 87d4bf5..df96cdd 100644 (file)
@@ -1733,12 +1733,17 @@ static ItemPosition resolveSelfAlignmentAuto(ItemPosition position, OverflowAlig
     return resolveContainerAlignmentAuto(parent->style().alignItemsPosition(), parent);
 }
 
-static ContentPosition resolveContentAlignmentAuto(ContentPosition position, ContentDistributionType distribution, RenderObject* element)
+static void resolveContentAlignmentAuto(ContentPosition& position, ContentDistributionType& distribution, RenderObject* element)
 {
     if (position != ContentPositionAuto || distribution != ContentDistributionDefault || !element)
-        return position;
+        return;
 
-    return element->style().isDisplayFlexibleBox() ? ContentPositionFlexStart : ContentPositionStart;
+    // Even that both align-content and justify-content 'auto' values are resolved to 'stretch'
+    // in case of flexbox containers, 'stretch' value in justify-content will behave like 'flex-start'. 
+    if (element->style().isDisplayFlexibleBox())
+        distribution = ContentDistributionStretch;
+    else
+        position = ContentPositionStart;
 }
 
 PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(CSSPropertyID propertyID, EUpdateLayout updateLayout) const
@@ -2207,8 +2212,12 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
             return cssValuePool().createValue(style->display());
         case CSSPropertyEmptyCells:
             return cssValuePool().createValue(style->emptyCells());
-        case CSSPropertyAlignContent:
-            return cssValuePool().createValue(style->alignContent());
+        case CSSPropertyAlignContent: {
+            ContentPosition position = style->alignContentPosition();
+            ContentDistributionType distribution = style->alignContentDistribution();
+            resolveContentAlignmentAuto(position, distribution, renderer);
+            return valueForContentPositionAndDistributionWithOverflowAlignment(position, distribution, style->alignContentOverflowAlignment());
+        }
         case CSSPropertyAlignItems:
             return valueForItemPositionWithOverflowAlignment(resolveContainerAlignmentAuto(style->alignItemsPosition(), renderer), style->alignItemsOverflowAlignment(), NonLegacyPosition);
         case CSSPropertyAlignSelf: {
@@ -2230,8 +2239,12 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
             return cssValuePool().createValue(style->flexShrink());
         case CSSPropertyFlexWrap:
             return cssValuePool().createValue(style->flexWrap());
-        case CSSPropertyJustifyContent:
-            return valueForContentPositionAndDistributionWithOverflowAlignment(resolveContentAlignmentAuto(style->justifyContentPosition(), style->justifyContentDistribution(), renderer), style->justifyContentDistribution(), style->justifyContentOverflowAlignment());
+        case CSSPropertyJustifyContent: {
+            ContentPosition position = style->justifyContentPosition();
+            ContentDistributionType distribution = style->justifyContentDistribution();
+            resolveContentAlignmentAuto(position, distribution, renderer);
+            return valueForContentPositionAndDistributionWithOverflowAlignment(position, distribution, style->justifyContentOverflowAlignment());
+        }
         case CSSPropertyJustifyItems:
             return valueForItemPositionWithOverflowAlignment(resolveContainerAlignmentAuto(style->justifyItemsPosition(), renderer), style->justifyItemsOverflowAlignment(), style->justifyItemsPositionType());
         case CSSPropertyJustifySelf: {
index 3882374..aed1acc 100644 (file)
@@ -880,11 +880,6 @@ static inline bool isValidKeywordPropertyAndValue(CSSPropertyID propertyId, int
         if (valueID == CSSValueAuto || valueID == CSSValueBalance)
             return true;
         break;
-    case CSSPropertyAlignContent:
-        // FIXME: Per CSS alignment, this property should accept an optional <overflow-position>. We should share this parsing code with 'justify-self'.
-        if (valueID == CSSValueFlexStart || valueID == CSSValueFlexEnd || valueID == CSSValueCenter || valueID == CSSValueSpaceBetween || valueID == CSSValueSpaceAround || valueID == CSSValueStretch)
-            return true;
-        break;
     case CSSPropertyFlexDirection:
         if (valueID == CSSValueRow || valueID == CSSValueRowReverse || valueID == CSSValueColumn || valueID == CSSValueColumnReverse)
             return true;
@@ -1121,7 +1116,6 @@ static inline bool isKeywordPropertyID(CSSPropertyID propertyId)
     case CSSPropertyWebkitColumnBreakInside:
     case CSSPropertyColumnFill:
     case CSSPropertyColumnRuleStyle:
-    case CSSPropertyAlignContent:
     case CSSPropertyFlexDirection:
     case CSSPropertyFlexWrap:
     case CSSPropertyWebkitFontKerning:
@@ -3043,6 +3037,9 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
         parsedValue = parseImageResolution();
         break;
 #endif
+    case CSSPropertyAlignContent:
+        parsedValue = parseContentDistributionOverflowPosition();
+        break;
     case CSSPropertyAlignSelf:
         return parseItemPositionOverflowPosition(propId, important);
 
@@ -3108,7 +3105,6 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
     case CSSPropertyWebkitColumnBreakInside:
     case CSSPropertyColumnFill:
     case CSSPropertyColumnRuleStyle:
-    case CSSPropertyAlignContent:
     case CSSPropertyFlexDirection:
     case CSSPropertyFlexWrap:
     case CSSPropertyWebkitFontKerning:
index 303b9e0..ef94364 100644 (file)
@@ -453,7 +453,7 @@ mix-blend-mode [NameForMethods=BlendMode]
 isolation
 #endif
 -webkit-filter [ConditionalConverter=FilterOperations]
-align-content
+align-content [Initial=initialContentAlignment, Converter=ContentAlignmentData]
 -webkit-align-content = align-content
 align-items [Initial=initialSelfAlignment, Converter=SelfOrDefaultAlignmentData]
 -webkit-align-items = align-items
index b26ed9a..e281a9d 100644 (file)
@@ -1057,10 +1057,14 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
 {
     ASSERT(childSizes.size() == children.size());
 
+    ContentPosition position = style().justifyContentPosition();
+    ContentDistributionType distribution = style().justifyContentDistribution();
+    RenderStyle::resolveContentJustification(style(), position);
+
     size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
     LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
     LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
-    mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, style().justifyContentPosition(), style().justifyContentDistribution(), numberOfChildrenForJustifyContent);
+    mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, position, distribution, numberOfChildrenForJustifyContent);
     if (style().flexDirection() == FlowRowReverse)
         mainAxisOffset += isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
 
@@ -1117,7 +1121,7 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
 
         ++seenInFlowPositionedChildren;
         if (seenInFlowPositionedChildren < numberOfChildrenForJustifyContent)
-            mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style().justifyContentDistribution(), numberOfChildrenForJustifyContent);
+            mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, distribution, numberOfChildrenForJustifyContent);
     }
 
     if (isColumnFlow())
@@ -1138,12 +1142,16 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
 
 void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
 {
+    ContentPosition position = style().justifyContentPosition();
+    ContentDistributionType distribution = style().justifyContentDistribution();
+    RenderStyle::resolveContentJustification(style(), position);
+
     // This is similar to the logic in layoutAndPlaceChildren, except we place the children
     // starting from the end of the flexbox. We also don't need to layout anything since we're
     // just moving the children to a new position.
     size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
     LayoutUnit mainAxisOffset = logicalHeight() - flowAwareBorderEnd() - flowAwarePaddingEnd();
-    mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, style().justifyContentPosition(), style().justifyContentDistribution(), numberOfChildrenForJustifyContent);
+    mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, position, distribution, numberOfChildrenForJustifyContent);
     mainAxisOffset -= isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
 
     size_t seenInFlowPositionedChildren = 0;
@@ -1161,17 +1169,17 @@ void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children,
 
         ++seenInFlowPositionedChildren;
         if (seenInFlowPositionedChildren < numberOfChildrenForJustifyContent)
-            mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style().justifyContentDistribution(), numberOfChildrenForJustifyContent);
+            mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, distribution, numberOfChildrenForJustifyContent);
     }
 }
 
-static LayoutUnit initialAlignContentOffset(LayoutUnit availableFreeSpace, EAlignContent alignContent, unsigned numberOfLines)
+static LayoutUnit initialAlignContentOffset(LayoutUnit availableFreeSpace, ContentPosition alignContent, ContentDistributionType alignContentDistribution, unsigned numberOfLines)
 {
-    if (alignContent == AlignContentFlexEnd)
+    if (alignContent == ContentPositionFlexEnd)
         return availableFreeSpace;
-    if (alignContent == AlignContentCenter)
+    if (alignContent == ContentPositionCenter)
         return availableFreeSpace / 2;
-    if (alignContent == AlignContentSpaceAround) {
+    if (alignContentDistribution == ContentDistributionSpaceAround) {
         if (availableFreeSpace > 0 && numberOfLines)
             return availableFreeSpace / (2 * numberOfLines);
         if (availableFreeSpace < 0)
@@ -1180,12 +1188,12 @@ static LayoutUnit initialAlignContentOffset(LayoutUnit availableFreeSpace, EAlig
     return 0;
 }
 
-static LayoutUnit alignContentSpaceBetweenChildren(LayoutUnit availableFreeSpace, EAlignContent alignContent, unsigned numberOfLines)
+static LayoutUnit alignContentSpaceBetweenChildren(LayoutUnit availableFreeSpace, ContentDistributionType alignContentDistribution, unsigned numberOfLines)
 {
     if (availableFreeSpace > 0 && numberOfLines > 1) {
-        if (alignContent == AlignContentSpaceBetween)
+        if (alignContentDistribution == ContentDistributionSpaceBetween)
             return availableFreeSpace / (numberOfLines - 1);
-        if (alignContent == AlignContentSpaceAround || alignContent == AlignContentStretch)
+        if (alignContentDistribution == ContentDistributionSpaceAround || alignContentDistribution == ContentDistributionStretch)
             return availableFreeSpace / numberOfLines;
     }
     return 0;
@@ -1193,7 +1201,11 @@ static LayoutUnit alignContentSpaceBetweenChildren(LayoutUnit availableFreeSpace
 
 void RenderFlexibleBox::alignFlexLines(Vector<LineContext>& lineContexts)
 {
-    if (!isMultiline() || style().alignContent() == AlignContentFlexStart)
+    ContentPosition position = style().alignContentPosition();
+    ContentDistributionType distribution = style().alignContentDistribution();
+    RenderStyle::resolveContentAlignment(style(), position, distribution);
+
+    if (!isMultiline() || position == ContentPositionFlexStart)
         return;
 
     LayoutUnit availableCrossAxisSpace = crossAxisContentExtent();
@@ -1201,16 +1213,16 @@ void RenderFlexibleBox::alignFlexLines(Vector<LineContext>& lineContexts)
         availableCrossAxisSpace -= lineContexts[i].crossAxisExtent;
 
     RenderBox* child = m_orderIterator.first();
-    LayoutUnit lineOffset = initialAlignContentOffset(availableCrossAxisSpace, style().alignContent(), lineContexts.size());
+    LayoutUnit lineOffset = initialAlignContentOffset(availableCrossAxisSpace, position, distribution, lineContexts.size());
     for (unsigned lineNumber = 0; lineNumber < lineContexts.size(); ++lineNumber) {
         lineContexts[lineNumber].crossAxisOffset += lineOffset;
         for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = m_orderIterator.next())
             adjustAlignmentForChild(*child, lineOffset);
 
-        if (style().alignContent() == AlignContentStretch && availableCrossAxisSpace > 0)
+        if (distribution == ContentDistributionStretch && availableCrossAxisSpace > 0)
             lineContexts[lineNumber].crossAxisExtent += availableCrossAxisSpace / static_cast<unsigned>(lineContexts.size());
 
-        lineOffset += alignContentSpaceBetweenChildren(availableCrossAxisSpace, style().alignContent(), lineContexts.size());
+        lineOffset += alignContentSpaceBetweenChildren(availableCrossAxisSpace, distribution, lineContexts.size());
     }
 }
 
index 96c4a09..223ae3f 100644 (file)
@@ -208,6 +208,28 @@ OverflowAlignment RenderStyle::resolveJustificationOverflow(const RenderStyle& p
     return resolveJustificationData(parentStyle, childStyle, ItemPositionStretch).overflow();
 }
 
+void RenderStyle::resolveContentAlignment(const RenderStyle& style, ContentPosition& position, ContentDistributionType& distribution)
+{
+    if (position != ContentPositionAuto || distribution != ContentDistributionDefault)
+        return;
+
+    if (style.isDisplayFlexibleBox())
+        distribution = ContentDistributionStretch;
+    else
+        position = ContentPositionStart;
+}
+
+void RenderStyle::resolveContentJustification(const RenderStyle& style, ContentPosition& position)
+{
+    if (position != ContentPositionAuto || style.justifyContentDistribution() != ContentDistributionDefault)
+        return;
+
+    if (style.isDisplayFlexibleBox())
+        position = ContentPositionFlexStart;
+    else
+        position = ContentPositionStart;
+}
+
 void RenderStyle::inheritFrom(const RenderStyle* inheritParent, IsAtShadowBoundary isAtShadowBoundary)
 {
     if (isAtShadowBoundary == AtShadowBoundary) {
index 23c7285..34ec4b3 100644 (file)
@@ -491,6 +491,8 @@ public:
     // Create a RenderStyle for generated content by inheriting from a pseudo style.
     static Ref<RenderStyle> createStyleInheritingFromPseudoStyle(const RenderStyle& pseudoStyle);
 
+    static void resolveContentAlignment(const RenderStyle&, ContentPosition&, ContentDistributionType&);
+    static void resolveContentJustification(const RenderStyle&, ContentPosition&);
     static ItemPosition resolveAlignment(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer);
     static OverflowAlignment resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle);
     static ItemPosition resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer);
@@ -911,7 +913,10 @@ public:
     float flexGrow() const { return rareNonInheritedData->m_flexibleBox->m_flexGrow; }
     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); }
+    const StyleContentAlignmentData& alignContent() const { return rareNonInheritedData->m_alignContent; }
+    ContentPosition alignContentPosition() const { return rareNonInheritedData->m_alignContent.position(); }
+    ContentDistributionType alignContentDistribution() const { return rareNonInheritedData->m_alignContent.distribution(); }
+    OverflowAlignment alignContentOverflowAlignment() const { return rareNonInheritedData->m_alignContent.overflow(); }
     const StyleSelfAlignmentData& alignItems() const { return rareNonInheritedData->m_alignItems; }
     ItemPosition alignItemsPosition() const { return rareNonInheritedData->m_alignItems.position(); }
     OverflowAlignment alignItemsOverflowAlignment() const { return rareNonInheritedData->m_alignItems.overflow(); }
@@ -1504,7 +1509,10 @@ public:
     void setFlexShrink(float f) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexShrink, f); }
     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 setAlignContent(const StyleContentAlignmentData& data) { SET_VAR(rareNonInheritedData, m_alignContent, data); }
+    void setAlignContentPosition(ContentPosition position) { rareNonInheritedData.access()->m_alignContent.setPosition(position); }
+    void setAlignContentOverflow(OverflowAlignment overflow) { rareNonInheritedData.access()->m_alignContent.setOverflow(overflow); }
+    void setAlignContentDistribution(ContentDistributionType distribution) { rareNonInheritedData.access()->m_alignContent.setDistribution(distribution); }
     void setAlignItems(const StyleSelfAlignmentData& data) { SET_VAR(rareNonInheritedData, m_alignItems, data); }
     void setAlignItemsPosition(ItemPosition position) { rareNonInheritedData.access()->m_alignItems.setPosition(position); }
     void setAlignItemsOverflow(OverflowAlignment overflow) { rareNonInheritedData.access()->m_alignItems.setOverflow(overflow); }
@@ -1933,7 +1941,6 @@ public:
     static float initialFlexShrink() { return 1; }
     static Length initialFlexBasis() { return Length(Auto); }
     static int initialOrder() { return 0; }
-    static EAlignContent initialAlignContent() { return AlignContentStretch; }
     static StyleSelfAlignmentData initialSelfAlignment() { return StyleSelfAlignmentData(ItemPositionAuto, OverflowAlignmentDefault); }
     static StyleContentAlignmentData initialContentAlignment() { return StyleContentAlignmentData(ContentPositionAuto, ContentDistributionDefault, OverflowAlignmentDefault); }
     static EFlexDirection initialFlexDirection() { return FlowRow; }
index 5f03e39..16dd8b6 100644 (file)
@@ -71,6 +71,7 @@ StyleRareNonInheritedData::StyleRareNonInheritedData()
     , m_order(RenderStyle::initialOrder())
     , m_flowThread(RenderStyle::initialFlowThread())
     , m_regionThread(RenderStyle::initialRegionThread())
+    , m_alignContent(RenderStyle::initialContentAlignment())
     , m_alignItems(RenderStyle::initialSelfAlignment())
     , m_alignSelf(RenderStyle::initialSelfAlignment())
     , m_justifyContent(RenderStyle::initialContentAlignment())
@@ -86,7 +87,6 @@ StyleRareNonInheritedData::StyleRareNonInheritedData()
     , m_pageSizeType(PAGE_SIZE_AUTO)
     , m_transformStyle3D(RenderStyle::initialTransformStyle3D())
     , m_backfaceVisibility(RenderStyle::initialBackfaceVisibility())
-    , m_alignContent(RenderStyle::initialAlignContent())
     , userDrag(RenderStyle::initialUserDrag())
     , textOverflow(RenderStyle::initialTextOverflow())
     , marginBeforeCollapse(MCOLLAPSE)
@@ -159,6 +159,7 @@ inline StyleRareNonInheritedData::StyleRareNonInheritedData(const StyleRareNonIn
     , m_order(o.m_order)
     , m_flowThread(o.m_flowThread)
     , m_regionThread(o.m_regionThread)
+    , m_alignContent(o.m_alignContent)
     , m_alignItems(o.m_alignItems)
     , m_alignSelf(o.m_alignSelf)
     , m_justifyContent(o.m_justifyContent)
@@ -174,7 +175,6 @@ inline StyleRareNonInheritedData::StyleRareNonInheritedData(const StyleRareNonIn
     , m_pageSizeType(o.m_pageSizeType)
     , m_transformStyle3D(o.m_transformStyle3D)
     , m_backfaceVisibility(o.m_backfaceVisibility)
-    , m_alignContent(o.m_alignContent)
     , userDrag(o.userDrag)
     , textOverflow(o.textOverflow)
     , marginBeforeCollapse(o.marginBeforeCollapse)
@@ -256,6 +256,7 @@ bool StyleRareNonInheritedData::operator==(const StyleRareNonInheritedData& o) c
         && m_visitedLinkBorderBottomColor == o.m_visitedLinkBorderBottomColor
         && m_order == o.m_order
         && m_flowThread == o.m_flowThread
+        && m_alignContent == o.m_alignContent
         && m_alignItems == o.m_alignItems
         && m_alignSelf == o.m_alignSelf
         && m_justifyContent == o.m_justifyContent
@@ -269,7 +270,6 @@ bool StyleRareNonInheritedData::operator==(const StyleRareNonInheritedData& o) c
         && m_pageSizeType == o.m_pageSizeType
         && m_transformStyle3D == o.m_transformStyle3D
         && m_backfaceVisibility == o.m_backfaceVisibility
-        && m_alignContent == o.m_alignContent
         && userDrag == o.userDrag
         && textOverflow == o.textOverflow
         && marginBeforeCollapse == o.marginBeforeCollapse
index 1c7eef0..dc97e15 100644 (file)
@@ -177,6 +177,7 @@ public:
     AtomicString m_flowThread;
     AtomicString m_regionThread;
 
+    StyleContentAlignmentData m_alignContent;
     StyleSelfAlignmentData m_alignItems;
     StyleSelfAlignmentData m_alignSelf;
     StyleContentAlignmentData m_justifyContent;
@@ -197,7 +198,6 @@ public:
     unsigned m_transformStyle3D : 1; // ETransformStyle3D
     unsigned m_backfaceVisibility : 1; // EBackfaceVisibility
 
-    unsigned m_alignContent : 3; // EAlignContent
 
     unsigned userDrag : 2; // EUserDrag
     unsigned textOverflow : 1; // Whether or not lines that spill out should be truncated with "..."