[CSS Grid Layout] Implement justify-self css property
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 11 Jul 2014 20:26:00 +0000 (20:26 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 11 Jul 2014 20:26:00 +0000 (20:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=134419

Reviewed by Dean Jackson.

This change adds the justify-self property from CSS 3 Box Alignment
and implements the parsing.

From Blink r164685 by <jchaffraix@chromium.org>

Source/WebCore:
Test: fast/css/parse-justify-self.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSParser.cpp:
(WebCore::isValidKeywordPropertyAndValue):
(WebCore::CSSParser::parseValue):
(WebCore::isItemPositionKeyword):
(WebCore::CSSParser::parseJustifySelf):
* css/CSSParser.h:
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
(WebCore::CSSPrimitiveValue::operator EJustifySelf):
(WebCore::CSSPrimitiveValue::operator EJustifySelfOverflowAlignment):
* css/CSSPropertyNames.in:
* css/CSSValueKeywords.in:
* css/DeprecatedStyleBuilder.cpp:
(WebCore::DeprecatedStyleBuilder::DeprecatedStyleBuilder):
* css/StyleResolver.cpp:
(WebCore::StyleResolver::applyProperty):
* rendering/style/RenderStyle.h:
* rendering/style/RenderStyleConstants.h:
* rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
(WebCore::StyleRareNonInheritedData::operator==):
* rendering/style/StyleRareNonInheritedData.h:

LayoutTests:
* fast/css/parse-justify-self-expected.txt: Added.
* fast/css/parse-justify-self.html: Added.

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

15 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/parse-justify-self-expected.txt [new file with mode: 0644]
LayoutTests/fast/css/parse-justify-self.html [new file with mode: 0644]
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/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/RenderStyleConstants.h
Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp
Source/WebCore/rendering/style/StyleRareNonInheritedData.h

index c0710c4..66385fd 100644 (file)
@@ -1,3 +1,18 @@
+2014-07-11  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] Implement justify-self css property
+        https://bugs.webkit.org/show_bug.cgi?id=134419
+
+        Reviewed by Dean Jackson.
+
+        This change adds the justify-self property from CSS 3 Box Alignment
+        and implements the parsing.
+
+        From Blink r164685 by <jchaffraix@chromium.org>
+
+        * fast/css/parse-justify-self-expected.txt: Added.
+        * fast/css/parse-justify-self.html: Added.
+
 2014-07-11  Brent Fulgham  <bfulgham@apple.com>
 
         Use a separate backdrop element to allow cues to have highlight and background color
diff --git a/LayoutTests/fast/css/parse-justify-self-expected.txt b/LayoutTests/fast/css/parse-justify-self-expected.txt
new file mode 100644 (file)
index 0000000..f176c38
--- /dev/null
@@ -0,0 +1,61 @@
+Test that setting and getting justify-self works as expected
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Test getting justify-self set through CSS
+PASS getComputedStyle(justifySelfBaseline, '').getPropertyValue('-webkit-justify-self') is 'baseline'
+PASS getComputedStyle(justifySelfStretch, '').getPropertyValue('-webkit-justify-self') is 'stretch'
+PASS getComputedStyle(justifySelfStart, '').getPropertyValue('-webkit-justify-self') is 'start'
+PASS getComputedStyle(justifySelfEnd, '').getPropertyValue('-webkit-justify-self') is 'end'
+PASS getComputedStyle(justifySelfCenter, '').getPropertyValue('-webkit-justify-self') is 'center'
+PASS getComputedStyle(justifySelfSelfEnd, '').getPropertyValue('-webkit-justify-self') is 'self-end'
+PASS getComputedStyle(justifySelfSelfStart, '').getPropertyValue('-webkit-justify-self') is 'self-start'
+PASS getComputedStyle(justifySelfLeft, '').getPropertyValue('-webkit-justify-self') is 'left'
+PASS getComputedStyle(justifySelfRight, '').getPropertyValue('-webkit-justify-self') is 'right'
+PASS getComputedStyle(justifySelfEndTrue, '').getPropertyValue('-webkit-justify-self') is 'end true'
+PASS getComputedStyle(justifySelfCenterTrue, '').getPropertyValue('-webkit-justify-self') is 'center true'
+PASS getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('-webkit-justify-self') is 'self-end safe'
+PASS getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('-webkit-justify-self') is 'self-start safe'
+PASS getComputedStyle(justifySelfRightSafe, '').getPropertyValue('-webkit-justify-self') is 'right safe'
+PASS getComputedStyle(justifySelfLeftTrue, '').getPropertyValue('-webkit-justify-self') is 'left true'
+
+Test initial value of justify-self through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+
+Test getting and setting justify-self through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'center'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'start true'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+
+Test bad combinaisons of justify-self
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+
+Test the value 'initial'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'center'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'auto'
+
+Test the value 'inherit'
+PASS getComputedStyle(parentElement, '').getPropertyValue('-webkit-justify-self') is 'end'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-justify-self') is 'end'
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css/parse-justify-self.html b/LayoutTests/fast/css/parse-justify-self.html
new file mode 100644 (file)
index 0000000..868620b
--- /dev/null
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#justifySelfBaseline {
+    -webkit-justify-self: baseline;
+}
+
+#justifySelfStretch {
+    -webkit-justify-self: stretch;
+}
+
+#justifySelfStart {
+    -webkit-justify-self: start;
+}
+
+#justifySelfEnd {
+    -webkit-justify-self: end;
+}
+
+#justifySelfCenter {
+    -webkit-justify-self: center;
+}
+
+#justifySelfSelfStart {
+    -webkit-justify-self: self-start;
+}
+
+#justifySelfSelfEnd {
+    -webkit-justify-self: self-end;
+}
+
+#justifySelfLeft {
+    -webkit-justify-self: left;
+}
+
+#justifySelfRight {
+    -webkit-justify-self: right;
+}
+
+#justifySelfEndTrue {
+    -webkit-justify-self: end true;
+}
+
+#justifySelfCenterTrue {
+    -webkit-justify-self: center true;
+}
+
+#justifySelfSelfEndSafe {
+    -webkit-justify-self: self-end safe;
+}
+
+#justifySelfSelfStartSafe {
+    -webkit-justify-self: self-start safe;
+}
+
+#justifySelfRightSafe {
+    -webkit-justify-self: right safe;
+}
+
+#justifySelfLeftTrue {
+    -webkit-justify-self: left true;
+}
+</style>
+<script src="../../resources/js-test.js"></script>
+</head>
+<body>
+<div id="justifySelfBaseline"></div>
+<div id="justifySelfStretch"></div>
+<div id="justifySelfStart"></div>
+<div id="justifySelfEnd"></div>
+<div id="justifySelfCenter"></div>
+<div id="justifySelfSelfStart"></div>
+<div id="justifySelfSelfEnd"></div>
+<div id="justifySelfLeft"></div>
+<div id="justifySelfRight"></div>
+
+<div id="justifySelfEndTrue"></div>
+<div id="justifySelfCenterTrue"></div>
+<div id="justifySelfSelfEndSafe"></div>
+<div id="justifySelfSelfStartSafe"></div>
+<div id="justifySelfRightSafe"></div>
+<div id="justifySelfLeftTrue"></div>
+<script>
+description('Test that setting and getting justify-self works as expected');
+
+debug("Test getting justify-self set through CSS");
+var justifySelfBaseline = document.getElementById("justifySelfBaseline");
+shouldBe("getComputedStyle(justifySelfBaseline, '').getPropertyValue('-webkit-justify-self')", "'baseline'");
+
+var justifySelfStretch = document.getElementById("justifySelfStretch");
+shouldBe("getComputedStyle(justifySelfStretch, '').getPropertyValue('-webkit-justify-self')", "'stretch'");
+
+var justifySelfStart = document.getElementById("justifySelfStart");
+shouldBe("getComputedStyle(justifySelfStart, '').getPropertyValue('-webkit-justify-self')", "'start'");
+
+var justifySelfEnd = document.getElementById("justifySelfEnd");
+shouldBe("getComputedStyle(justifySelfEnd, '').getPropertyValue('-webkit-justify-self')", "'end'");
+
+var justifySelfCenter = document.getElementById("justifySelfCenter");
+shouldBe("getComputedStyle(justifySelfCenter, '').getPropertyValue('-webkit-justify-self')", "'center'");
+
+var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
+shouldBe("getComputedStyle(justifySelfSelfEnd, '').getPropertyValue('-webkit-justify-self')", "'self-end'");
+
+var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
+shouldBe("getComputedStyle(justifySelfSelfStart, '').getPropertyValue('-webkit-justify-self')", "'self-start'");
+
+var justifySelfLeft = document.getElementById("justifySelfLeft");
+shouldBe("getComputedStyle(justifySelfLeft, '').getPropertyValue('-webkit-justify-self')", "'left'");
+
+var justifySelfRight = document.getElementById("justifySelfRight");
+shouldBe("getComputedStyle(justifySelfRight, '').getPropertyValue('-webkit-justify-self')", "'right'");
+
+var justifySelfEndTrue = document.getElementById("justifySelfEndTrue");
+shouldBe("getComputedStyle(justifySelfEndTrue, '').getPropertyValue('-webkit-justify-self')", "'end true'");
+
+var justifySelfCenterTrue = document.getElementById("justifySelfCenterTrue");
+shouldBe("getComputedStyle(justifySelfCenterTrue, '').getPropertyValue('-webkit-justify-self')", "'center true'");
+
+var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe");
+shouldBe("getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('-webkit-justify-self')", "'self-end safe'");
+
+var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe");
+shouldBe("getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('-webkit-justify-self')", "'self-start safe'");
+
+var justifySelfRightSafe = document.getElementById("justifySelfRightSafe");
+shouldBe("getComputedStyle(justifySelfRightSafe, '').getPropertyValue('-webkit-justify-self')", "'right safe'");
+
+var justifySelfLeftTrue = document.getElementById("justifySelfLeftTrue");
+shouldBe("getComputedStyle(justifySelfLeftTrue, '').getPropertyValue('-webkit-justify-self')", "'left true'");
+
+debug("");
+debug("Test initial value of justify-self through JS");
+element = document.createElement("div");
+document.body.appendChild(element);
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+debug("");
+debug("Test getting and setting justify-self through JS");
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.webkitJustifySelf = "center";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'center'");
+
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.webkitJustifySelf = "true start";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'start true'");
+
+element.style.webkitJustifySelf = "auto";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+debug("");
+debug("Test bad combinaisons of justify-self");
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.webkitJustifySelf = "true auto";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "auto safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "auto left";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "baseline safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "baseline center";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "stretch true";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "stretch right";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "true true";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "true safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "center start";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "stretch true";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "safe stretch";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "baseline safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "true baseline";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "true safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "true safe left";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "true left safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+element.style.webkitJustifySelf = "left safe true safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+debug("");
+debug("Test the value 'initial'");
+element.style.webkitJustifySelf = "center";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'center'");
+element.style.webkitJustifySelf = "initial";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
+
+debug("");
+debug("Test the value 'inherit'");
+parentElement = document.createElement("div");
+document.body.appendChild(parentElement);
+parentElement.style.webkitJustifySelf = "end";
+shouldBe("getComputedStyle(parentElement, '').getPropertyValue('-webkit-justify-self')", "'end'");
+
+element = document.createElement("div");
+parentElement.appendChild(element);
+element.style.webkitJustifySelf = "inherit";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'end'");
+</script>
+</body>
+</html>
index 6536e48..919f1c0 100644 (file)
@@ -1,3 +1,42 @@
+2014-07-11  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] Implement justify-self css property
+        https://bugs.webkit.org/show_bug.cgi?id=134419
+
+        Reviewed by Dean Jackson.
+
+        This change adds the justify-self property from CSS 3 Box Alignment
+        and implements the parsing.
+
+        From Blink r164685 by <jchaffraix@chromium.org>
+
+        Test: fast/css/parse-justify-self.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::ComputedStyleExtractor::propertyValue):
+        * css/CSSParser.cpp:
+        (WebCore::isValidKeywordPropertyAndValue):
+        (WebCore::CSSParser::parseValue):
+        (WebCore::isItemPositionKeyword):
+        (WebCore::CSSParser::parseJustifySelf):
+        * css/CSSParser.h:
+        * css/CSSPrimitiveValueMappings.h:
+        (WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
+        (WebCore::CSSPrimitiveValue::operator EJustifySelf):
+        (WebCore::CSSPrimitiveValue::operator EJustifySelfOverflowAlignment):
+        * css/CSSPropertyNames.in:
+        * css/CSSValueKeywords.in:
+        * css/DeprecatedStyleBuilder.cpp:
+        (WebCore::DeprecatedStyleBuilder::DeprecatedStyleBuilder):
+        * css/StyleResolver.cpp:
+        (WebCore::StyleResolver::applyProperty):
+        * rendering/style/RenderStyle.h:
+        * rendering/style/RenderStyleConstants.h:
+        * rendering/style/StyleRareNonInheritedData.cpp:
+        (WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
+        (WebCore::StyleRareNonInheritedData::operator==):
+        * rendering/style/StyleRareNonInheritedData.h:
+
 2014-07-11  Bear Travis  <betravis@adobe.com>
 
         [Feature Queries] Feature Query CSS Grammar Productions Should Return a Value
index 58f4b73..bc496a7 100644 (file)
@@ -283,6 +283,7 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyWebkitFlexDirection,
     CSSPropertyWebkitFlexWrap,
     CSSPropertyWebkitJustifyContent,
+    CSSPropertyWebkitJustifySelf,
     CSSPropertyWebkitFontKerning,
     CSSPropertyWebkitFontSmoothing,
     CSSPropertyWebkitFontVariantLigatures,
@@ -2006,6 +2007,13 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
             return cssValuePool().createValue(style->flexWrap());
         case CSSPropertyWebkitJustifyContent:
             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 CSSPropertyWebkitOrder:
             return cssValuePool().createValue(style->order(), CSSPrimitiveValue::CSS_NUMBER);
         case CSSPropertyFloat:
index 53b896c..125267e 100644 (file)
@@ -848,14 +848,17 @@ static inline bool isValidKeywordPropertyAndValue(CSSPropertyID propertyId, int
             return true;
         break;
     case CSSPropertyWebkitAlignContent:
-         if (valueID == CSSValueFlexStart || valueID == CSSValueFlexEnd || valueID == CSSValueCenter || valueID == CSSValueSpaceBetween || valueID == CSSValueSpaceAround || valueID == CSSValueStretch)
-             return true;
-         break;
+        // 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 CSSPropertyWebkitAlignItems:
+        // 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)
             return true;
         break;
     case CSSPropertyWebkitAlignSelf:
+        // FIXME: Per CSS alignment, this property should accept the same arguments as 'justify-self' so we should share its parsing code.
         if (valueID == CSSValueAuto || valueID == CSSValueFlexStart || valueID == CSSValueFlexEnd || valueID == CSSValueCenter || valueID == CSSValueBaseline || valueID == CSSValueStretch)
             return true;
         break;
@@ -868,9 +871,14 @@ static inline bool isValidKeywordPropertyAndValue(CSSPropertyID propertyId, int
              return true;
         break;
     case CSSPropertyWebkitJustifyContent:
+        // 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)
             return true;
         break;
+    case CSSPropertyWebkitJustifySelf:
+        if (valueID == CSSValueAuto || valueID == CSSValueFlexStart || valueID == CSSValueFlexEnd || valueID == CSSValueCenter || valueID == CSSValueBaseline || valueID == CSSValueStretch)
+            return true;
+        break;
     case CSSPropertyWebkitFontKerning:
         if (valueID == CSSValueAuto || valueID == CSSValueNormal || valueID == CSSValueNone)
             return true;
@@ -2566,6 +2574,8 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
         }
         return false;
     }
+    case CSSPropertyWebkitJustifySelf:
+        return parseJustifySelf(propId, important);
 #if ENABLE(CSS_GRID_LAYOUT)
     case CSSPropertyWebkitGridAutoColumns:
     case CSSPropertyWebkitGridAutoRows:
@@ -3069,6 +3079,63 @@ void CSSParser::addFillValue(RefPtr<CSSValue>& lval, PassRefPtr<CSSValue> rval)
         lval = rval;
 }
 
+static bool isItemPositionKeyword(CSSValueID id)
+{
+    return id == CSSValueStart || id == CSSValueEnd || id == CSSValueCenter
+        || id == CSSValueSelfStart || id == CSSValueSelfEnd || id == CSSValueFlexStart
+        || id == CSSValueFlexEnd || id == CSSValueLeft || id == CSSValueRight;
+}
+
+bool CSSParser::parseJustifySelf(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;
+    // <overflow-position> = true | safe
+
+    CSSParserValue* value = m_valueList->current();
+
+    if (value->id == CSSValueAuto || value->id == CSSValueBaseline || value->id == CSSValueStretch) {
+        if (m_valueList->next())
+            return false;
+
+        addProperty(propId, cssValuePool().createIdentifierValue(value->id), important);
+        return true;
+    }
+
+    RefPtr<CSSPrimitiveValue> position = 0;
+    RefPtr<CSSPrimitiveValue> overflowAlignmentKeyword = 0;
+    if (isItemPositionKeyword(value->id)) {
+        position = cssValuePool().createIdentifierValue(value->id);
+        value = m_valueList->next();
+        if (value) {
+            if (value->id != CSSValueTrue && value->id != CSSValueSafe)
+                return false;
+            overflowAlignmentKeyword = cssValuePool().createIdentifierValue(value->id);
+        }
+    } else if (value->id != CSSValueTrue && value->id != CSSValueSafe)
+        return false;
+    else {
+        overflowAlignmentKeyword = cssValuePool().createIdentifierValue(value->id);
+        value = m_valueList->next();
+        if (value) {
+            if (!isItemPositionKeyword(value->id))
+                return false;
+            position = cssValuePool().createIdentifierValue(value->id);
+        }
+    }
+
+    if (m_valueList->next())
+        return false;
+
+    ASSERT(position);
+    if (overflowAlignmentKeyword)
+        addProperty(propId, createPrimitiveValuePair(position.release(), overflowAlignmentKeyword.release()), important);
+    else
+        addProperty(propId, position.release(), important);
+
+    return true;
+}
+
 static bool parseBackgroundClip(CSSParserValue* parserValue, RefPtr<CSSValue>& cssValue)
 {
     if (parserValue->id == CSSValueBorderBox || parserValue->id == CSSValuePaddingBox
index 9d3c194..aed9374 100644 (file)
@@ -183,6 +183,8 @@ public:
 
     bool parseClipShape(CSSPropertyID, bool important);
 
+    bool parseJustifySelf(CSSPropertyID, bool important);
+
 #if ENABLE(CSS_SHAPES)
     PassRefPtr<CSSValue> parseShapeProperty(CSSPropertyID);
 #endif
index 081eaaf..ef2be89 100644 (file)
@@ -5089,6 +5089,118 @@ template<> inline CSSPrimitiveValue::operator CSSBoxType() const
     return BoxMissing;
 }
 
+template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EJustifySelf justifySelf)
+    : CSSValue(PrimitiveClass)
+{
+    m_primitiveUnitType = CSS_VALUE_ID;
+    switch (justifySelf) {
+    case JustifySelfAuto:
+        m_value.valueID = CSSValueAuto;
+        break;
+    case JustifySelfStretch:
+        m_value.valueID = CSSValueStretch;
+        break;
+    case JustifySelfBaseline:
+        m_value.valueID = CSSValueBaseline;
+        break;
+    case JustifySelfCenter:
+        m_value.valueID = CSSValueCenter;
+        break;
+    case JustifySelfStart:
+        m_value.valueID = CSSValueStart;
+        break;
+    case JustifySelfEnd:
+        m_value.valueID = CSSValueEnd;
+        break;
+    case JustifySelfSelfStart:
+        m_value.valueID = CSSValueSelfStart;
+        break;
+    case JustifySelfSelfEnd:
+        m_value.valueID = CSSValueSelfEnd;
+        break;
+    case JustifySelfFlexStart:
+        m_value.valueID = CSSValueFlexStart;
+        break;
+    case JustifySelfFlexEnd:
+        m_value.valueID = CSSValueFlexEnd;
+        break;
+    case JustifySelfLeft:
+        m_value.valueID = CSSValueLeft;
+        break;
+    case JustifySelfRight:
+        m_value.valueID = CSSValueRight;
+        break;
+    default:
+        m_value.valueID = CSSValueAuto;
+        break;
+    }
+}
+
+template<> inline CSSPrimitiveValue::operator EJustifySelf() const
+{
+    switch (m_value.valueID) {
+    case CSSValueAuto:
+        return JustifySelfAuto;
+    case CSSValueStretch:
+        return JustifySelfStretch;
+    case CSSValueBaseline:
+        return JustifySelfBaseline;
+    case CSSValueCenter:
+        return JustifySelfCenter;
+    case CSSValueStart:
+        return JustifySelfStart;
+    case CSSValueEnd:
+        return JustifySelfEnd;
+    case CSSValueSelfStart:
+        return JustifySelfSelfStart;
+    case CSSValueSelfEnd:
+        return JustifySelfSelfEnd;
+    case CSSValueFlexStart:
+        return JustifySelfFlexStart;
+    case CSSValueFlexEnd:
+        return JustifySelfFlexEnd;
+    case CSSValueLeft:
+        return JustifySelfLeft;
+    case CSSValueRight:
+        return JustifySelfRight;
+    default:
+        break;
+    }
+    ASSERT_NOT_REACHED();
+    return JustifySelfAuto;
+}
+
+template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EJustifySelfOverflowAlignment overflowAlignment)
+    : CSSValue(PrimitiveClass)
+{
+    m_primitiveUnitType = CSS_VALUE_ID;
+    switch (overflowAlignment) {
+    case JustifySelfOverflowAlignmentDefault:
+        m_value.valueID = CSSValueDefault;
+        break;
+    case JustifySelfOverflowAlignmentTrue:
+        m_value.valueID = CSSValueTrue;
+        break;
+    case JustifySelfOverflowAlignmentSafe:
+        m_value.valueID = CSSValueSafe;
+        break;
+    }
+}
+
+template<> inline CSSPrimitiveValue::operator EJustifySelfOverflowAlignment() const
+{
+    switch (m_value.valueID) {
+    case CSSValueTrue:
+        return JustifySelfOverflowAlignmentTrue;
+    case CSSValueSafe:
+        return JustifySelfOverflowAlignmentSafe;
+    default:
+        break;
+    }
+    ASSERT_NOT_REACHED();
+    return JustifySelfOverflowAlignmentTrue;
+}
+
 }
 
 #endif
index fc30c3f..b66abad 100644 (file)
@@ -303,6 +303,7 @@ isolation
 -webkit-flex-shrink
 -webkit-flex-wrap
 -webkit-justify-content
+-webkit-justify-self
 -webkit-font-size-delta
 #if defined(ENABLE_CSS_GRID_LAYOUT) && ENABLE_CSS_GRID_LAYOUT
 -webkit-grid
index f8136ab..f4b58f0 100644 (file)
@@ -544,6 +544,22 @@ space-around
 // space-between
 // space-around
 
+// CSS_PROP_JUSTIFY_SELF
+// auto
+// stretch
+// baseline
+// center
+// start
+// end
+self-start
+self-end
+// flex-start
+// flex-end
+// left
+// right
+true
+safe
+
 // CSS_PROP_FLEX_FLOW
 row
 row-reverse
index 3c03197..2ab2e97 100644 (file)
@@ -2827,6 +2827,16 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
         return;
     }
 #endif /* ENABLE(CSS_GRID_LAYOUT) */
+    case CSSPropertyWebkitJustifySelf: {
+        HANDLE_INHERIT_AND_INITIAL(justifySelf, JustifySelf);
+        CSSPrimitiveValue* primitiveValue = toCSSPrimitiveValue(value);
+        if (Pair* pairValue = primitiveValue->getPairValue()) {
+            state.style()->setJustifySelf(*pairValue->first());
+            state.style()->setJustifySelfOverflowAlignment(*pairValue->second());
+        } else
+            state.style()->setJustifySelf(*primitiveValue);
+        return;
+    }
     // These properties are aliased and DeprecatedStyleBuilder already applied the property on the prefixed version.
     case CSSPropertyTransitionDelay:
     case CSSPropertyTransitionDuration:
index 91cc322..ac27f5b 100644 (file)
@@ -914,6 +914,8 @@ public:
     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); }
 
 #if ENABLE(CSS_GRID_LAYOUT)
     const Vector<GridTrackSize>& gridColumns() const { return rareNonInheritedData->m_grid->m_gridColumns; }
@@ -1461,6 +1463,8 @@ public:
     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); }
 #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); }
@@ -1825,6 +1829,8 @@ public:
     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 int initialMarqueeLoopCount() { return -1; }
     static int initialMarqueeSpeed() { return 85; }
     static Length initialMarqueeIncrement() { return Length(6, Fixed); }
index 0ec2df0..654c567 100644 (file)
@@ -184,6 +184,9 @@ enum EAlignItems { AlignAuto, AlignFlexStart, AlignFlexEnd, AlignCenter, AlignSt
 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 ETextSecurity {
     TSNONE, TSDISC, TSCIRCLE, TSSQUARE
index 31a4398..c33b269 100644 (file)
@@ -76,6 +76,8 @@ StyleRareNonInheritedData::StyleRareNonInheritedData()
     , m_alignItems(RenderStyle::initialAlignItems())
     , m_alignSelf(RenderStyle::initialAlignSelf())
     , m_justifyContent(RenderStyle::initialJustifyContent())
+    , m_justifySelf(RenderStyle::initialJustifySelf())
+    , m_justifySelfOverflowAlignment(RenderStyle::initialJustifySelfOverflowAlignment())
     , userDrag(RenderStyle::initialUserDrag())
     , textOverflow(RenderStyle::initialTextOverflow())
     , marginBeforeCollapse(MCOLLAPSE)
@@ -153,6 +155,8 @@ inline StyleRareNonInheritedData::StyleRareNonInheritedData(const StyleRareNonIn
     , m_alignItems(o.m_alignItems)
     , m_alignSelf(o.m_alignSelf)
     , m_justifyContent(o.m_justifyContent)
+    , m_justifySelf(o.m_justifySelf)
+    , m_justifySelfOverflowAlignment(o.m_justifySelfOverflowAlignment)
     , userDrag(o.userDrag)
     , textOverflow(o.textOverflow)
     , marginBeforeCollapse(o.marginBeforeCollapse)
@@ -255,7 +259,9 @@ bool StyleRareNonInheritedData::operator==(const StyleRareNonInheritedData& o) c
         && m_isolation == o.m_isolation
 #endif
         && m_aspectRatioType == o.m_aspectRatioType
-        && m_objectFit == o.m_objectFit;
+        && m_objectFit == o.m_objectFit
+        && m_justifySelf == o.m_justifySelf
+        && m_justifySelfOverflowAlignment == o.m_justifySelfOverflowAlignment;
 }
 
 bool StyleRareNonInheritedData::contentDataEquivalent(const StyleRareNonInheritedData& o) const
index c40c604..ff585eb 100644 (file)
@@ -176,6 +176,9 @@ public:
     unsigned m_alignSelf : 3; // EAlignItems
     unsigned m_justifyContent : 3; // EJustifyContent
 
+    unsigned m_justifySelf : 4; // EJustifySelf
+    unsigned m_justifySelfOverflowAlignment : 2; // EJustifySelfOverflowAlignment
+
     unsigned userDrag : 2; // EUserDrag
     unsigned textOverflow : 1; // Whether or not lines that spill out should be truncated with "..."
     unsigned marginBeforeCollapse : 2; // EMarginCollapse