[css-align] Implement the place-self shorthand
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 13 May 2017 21:36:59 +0000 (21:36 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 13 May 2017 21:36:59 +0000 (21:36 +0000)
https://bugs.webkit.org/show_bug.cgi?id=168846

Reviewed by Zalan Bujtas.

Source/WebCore:

The CSS Box Alignment specification defines a new shorthand to set the
Content Alignment properties (align-self and justify-self) at the
same time.

This patch provides the implementation of the CSS parsing logic and the
required regression tests.

Test: css3/parse-place-self.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSProperties.json:
* css/StyleProperties.cpp:
(WebCore::StyleProperties::getPropertyValue):
* css/parser/CSSPropertyParser.cpp:
(WebCore::CSSPropertyParser::consumePlaceSelfShorthand):
(WebCore::CSSPropertyParser::parseShorthand):
* css/parser/CSSPropertyParser.h:

LayoutTests:

Regression tests for the new place-self alignment shorthand.

* css3/parse-place-self-expected.txt: Added.
* css3/parse-place-self.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/css3/parse-place-self-expected.txt [new file with mode: 0644]
LayoutTests/css3/parse-place-self.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSProperties.json
Source/WebCore/css/StyleProperties.cpp
Source/WebCore/css/parser/CSSPropertyParser.cpp
Source/WebCore/css/parser/CSSPropertyParser.h

index a7068d3..3277be0 100644 (file)
@@ -1,3 +1,15 @@
+2017-05-13  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align] Implement the place-self shorthand
+        https://bugs.webkit.org/show_bug.cgi?id=168846
+
+        Reviewed by Zalan Bujtas.
+
+        Regression tests for the new place-self alignment shorthand.
+
+        * css3/parse-place-self-expected.txt: Added.
+        * css3/parse-place-self.html: Added.
+
 2017-05-13  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r216801.
diff --git a/LayoutTests/css3/parse-place-self-expected.txt b/LayoutTests/css3/parse-place-self-expected.txt
new file mode 100644 (file)
index 0000000..6ab0a1d
--- /dev/null
@@ -0,0 +1,28 @@
+Test to verify that the new place-self alignment shorthand is parsed as expected and correctly sets the longhand values.
+
+
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'normal' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'center auto' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'baseline' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'first baseline' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'last baseline' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'start' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'flex-start' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'end' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'self-start' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'stretch' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'start end' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'start self-end' value through CSS. 
+PASS Test getting the Computed Value of place-self's longhand properties when setting 'start baseline' value through CSS. 
+PASS Test setting '' as incorrect value through CSS. 
+PASS Test setting 'auto' as incorrect value through CSS. 
+PASS Test setting 'none' as incorrect value through CSS. 
+PASS Test setting 'safe' as incorrect value through CSS. 
+PASS Test setting 'start safe' as incorrect value through CSS. 
+PASS Test setting 'baseline safe' as incorrect value through CSS. 
+PASS Test setting 'start end left' as incorrect value through CSS. 
+PASS Test setting values through JS. 
+PASS Test setting incorrect values through JS. 
+PASS Test the 'initial' value of the place-self shorthand and its longhand properties' Computed value 
+PASS Test the 'inherit' value of the place-self shorthand and its longhand properties' Computed value 
+
diff --git a/LayoutTests/css3/parse-place-self.html b/LayoutTests/css3/parse-place-self.html
new file mode 100644 (file)
index 0000000..8338f17
--- /dev/null
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#placeSelfNormal {
+  place-self: normal;
+}
+#placeSelfCenterAuto {
+  place-self: center auto;
+}
+#placeSelfBaseline {
+  place-self: baseline;
+}
+#placeSelfFirstBaseline {
+  place-self: first baseline;
+}
+#placeSelfLastBaseline {
+  place-self: last baseline;
+}
+#placeSelfStart {
+  place-self: start;
+}
+#placeSelfFlexStart {
+  place-self: flex-start;
+}
+#placeSelfEnd {
+  place-self: end;
+}
+#placeSelfSelfStart {
+  place-self: self-start;
+}
+#placeSelfStretch {
+  place-self: stretch;
+}
+#placeSelfStartEnd {
+  place-self: start end;
+}
+#placeSelfStartSelfEnd {
+  place-self: start self-end;
+}
+#placeSelfStartBaseline {
+  place-self: start baseline;
+}
+
+<!-- Invalid CSS cases -->
+#placeSelfEmpty {
+  place-self:;
+}
+#placeSelfAuto {
+  place-self: auto;
+}
+#placeSelfNone {
+  place-self: none;
+}
+#placeSelfSafe {
+  place-self: safe;
+}
+#placeSelfStartSafe {
+  place-self: start safe;
+}
+#placeSelfStartEndLeft {
+  place-self: start end left;
+}
+</style>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<script src="resources/alignment-parsing-utils-th.js"></script>
+</head>
+<body>
+  <p>Test to verify that the new place-self alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
+  <div id="log"></div>
+
+  <div id="placeSelfNormal"></div>
+  <div id="placeSelfCenterAuto"></div>
+  <div id="placeSelfBaseline"></div>
+  <div id="placeSelfFirstBaseline"></div>
+  <div id="placeSelfLastBaseline"></div>
+  <div id="placeSelfStart"></div>
+  <div id="placeSelfFlexStart"></div>
+  <div id="placeSelfEnd"></div>
+  <div id="placeSelfSelfStart"></div>
+  <div id="placeSelfStretch"></div>
+  <div id="placeSelfStartEnd"></div>
+  <div id="placeSelfStartSelfEnd"></div>
+  <div id="placeSelfStartBaseline"></div>
+
+  <div id="placeSelfEmpty"></div>
+  <div id="placeSelfAuto"></div>
+  <div id="placeSelfNone"></div>
+  <div id="placeSelfSafe"></div>
+  <div id="placeSelfStartSafe"></div>
+  <div id="placeSelfBaselineSafe"></div>
+  <div id="placeSelfStartEndLeft"></div>
+<script>
+function checkPlaceSelfValues(element, value, alignValue, justifyValue) {
+  var res = value.split(" ");
+  if (res.length < 2)
+    res[1] = res[0];
+  checkValues(element, "alignSelf", "align-self", res[0], alignValue);
+  checkValues(element, "justifySelf", "justify-self", res[1], justifyValue);
+}
+
+function checkPlaceSelfValuesJS(value, alignValue, justifyValue)
+{
+  element = document.createElement("div");
+  document.body.appendChild(element);
+  element.style.placeSelf = value;
+  checkValues(element, "placeSelf", "place-self", value, alignValue + ' ' + justifyValue)
+  checkPlaceSelfValues(element, value, alignValue, justifyValue)
+}
+
+function checkPlaceSelfValuesBadJS(value)
+{
+  element.style.placeSelf = "";
+  element.style.placeSelf = value;
+  checkPlaceSelfValues(element, "", "normal", "normal")
+}
+
+test(function() {
+  checkValues(placeSelfNormal, "placeSelf", "place-self", "", "normal normal");
+  checkPlaceSelfValues(placeSelfNormal, "", "normal", "normal");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'normal' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center normal");
+  checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "normal");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'center auto' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfBaseline, "placeSelf", "place-self", "", "baseline baseline");
+  checkPlaceSelfValues(placeSelfBaseline, "", "baseline", "baseline");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'baseline' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfFirstBaseline, "placeSelf", "place-self", "", "baseline baseline");
+  checkPlaceSelfValues(placeSelfFirstBaseline, "", "baseline", "baseline");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'first baseline' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfLastBaseline, "placeSelf", "place-self", "", "last baseline last baseline");
+  checkPlaceSelfValues(placeSelfLastBaseline, "", "last baseline", "last baseline");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'last baseline' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfStart, "placeSelf", "place-self", "", "start start");
+  checkPlaceSelfValues(placeSelfStart, "", "start", "start");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'start' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfFlexStart, "placeSelf", "place-self", "", "flex-start flex-start");
+  checkPlaceSelfValues(placeSelfFlexStart, "", "flex-start", "flex-start");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'flex-start' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfEnd, "placeSelf", "place-self", "", "end end");
+  checkPlaceSelfValues(placeSelfEnd, "", "end", "end");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'end' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfSelfStart, "placeSelf", "place-self", "", "self-start self-start");
+  checkPlaceSelfValues(placeSelfSelfStart, "", "self-start", "self-start");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'self-start' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfStretch, "placeSelf", "place-self", "", "stretch stretch");
+  checkPlaceSelfValues(placeSelfStretch, "", "stretch", "stretch");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'stretch' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfStartEnd, "placeSelf", "place-self", "", "start end");
+  checkPlaceSelfValues(placeSelfStartEnd, "", "start", "end");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'start end' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfStartSelfEnd, "placeSelf", "place-self", "", "start self-end");
+  checkPlaceSelfValues(placeSelfStartSelfEnd, "", "start", "self-end");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'start self-end' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfStartBaseline, "placeSelf", "place-self", "", "start baseline");
+  checkPlaceSelfValues(placeSelfStartBaseline, "", "start", "baseline");
+}, "Test getting the Computed Value of place-self's longhand properties when setting 'start baseline' value through CSS.");
+
+test(function() {
+  checkValues(placeSelfAuto, "placeSelf", "place-self", "", "normal normal");
+  checkPlaceSelfValues(placeSelfAuto, "", "normal", "normal");
+}, "Test setting '' as incorrect value through CSS.");
+
+test(function() {
+  checkValues(placeSelfAuto, "placeSelf", "place-self", "", "normal normal");
+  checkPlaceSelfValues(placeSelfAuto, "", "normal", "normal");
+}, "Test setting 'auto' as incorrect value through CSS.");
+
+test(function() {
+  checkValues(placeSelfNone, "placeSelf", "place-self", "", "normal normal");
+  checkPlaceSelfValues(placeSelfNone, "", "normal", "normal");
+}, "Test setting 'none' as incorrect value through CSS.");
+
+test(function() {
+  checkValues(placeSelfSafe, "placeSelf", "place-self", "", "normal normal");
+  checkPlaceSelfValues(placeSelfSafe, "", "normal", "normal");
+}, "Test setting 'safe' as incorrect value through CSS.");
+
+test(function() {
+  checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "normal normal");
+  checkPlaceSelfValues(placeSelfStartSafe, "", "normal", "normal");
+}, "Test setting 'start safe' as incorrect value through CSS.");
+
+test(function() {
+  checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "normal normal");
+  checkPlaceSelfValues(placeSelfStartSafe, "", "normal", "normal");
+}, "Test setting 'baseline safe' as incorrect value through CSS.");
+
+test(function() {
+  checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "normal normal");
+  checkPlaceSelfValues(placeSelfStartEndLeft, "", "normal", "normal");
+}, "Test setting 'start end left' as incorrect value through CSS.");
+
+test(function() {
+  checkPlaceSelfValuesJS("center", "center", "center");
+  checkPlaceSelfValuesJS("center start", "center", "start");
+  checkPlaceSelfValuesJS("self-start end", "self-start", "end");
+  checkPlaceSelfValuesJS("normal end", "normal", "end");
+}, "Test setting values through JS.");
+
+test(function() {
+  checkPlaceSelfValuesBadJS("space-between", "normal", "normal");
+  checkPlaceSelfValuesBadJS("center safe", "normal", "normal");
+  checkPlaceSelfValuesBadJS("center self-start center", "normal", "normal");
+  checkPlaceSelfValuesBadJS("asrt", "normal", "normal");
+  checkPlaceSelfValuesBadJS("10px", "normal", "normal");
+  checkPlaceSelfValuesBadJS("stretch safe", "normal", "normal");
+  checkPlaceSelfValuesBadJS("self-start start end", "normal", "normal");
+  checkPlaceSelfValuesBadJS("", "normal", "normal");
+}, "Test setting incorrect values through JS.");
+
+test(function() {
+  element = document.createElement("div");
+  document.body.appendChild(element);
+  checkValues(element, "placeSelf", "place-self", "", "normal normal");
+  element.style.placeSelf = "center";
+  checkPlaceSelfValues(element, "center", "center", "center");
+  element.style.placeSelf = "initial";
+  checkValues(element, "placeSelf", "place-self", "initial", "normal normal");
+  checkPlaceSelfValues(element, "initial", "normal", "normal");
+}, "Test the 'initial' value of the place-self shorthand and its longhand properties' Computed value");
+
+test(function() {
+  document.body.style.placeSelf = "start";
+  var anotherElement = document.createElement("div");
+  document.body.appendChild(anotherElement);
+  checkPlaceSelfValues(anotherElement, "", "normal", "normal");
+  anotherElement.style.placeSelf = "inherit";
+  checkPlaceSelfValues(anotherElement, "inherit", "start", "start");
+}, "Test the 'inherit' value of the place-self shorthand and its longhand properties' Computed value");
+</script>
+</body>
+</html>
index 7ad535c..2ac788d 100644 (file)
@@ -1,3 +1,29 @@
+2017-05-13  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align] Implement the place-self shorthand
+        https://bugs.webkit.org/show_bug.cgi?id=168846
+
+        Reviewed by Zalan Bujtas.
+
+        The CSS Box Alignment specification defines a new shorthand to set the
+        Content Alignment properties (align-self and justify-self) at the
+        same time.
+
+        This patch provides the implementation of the CSS parsing logic and the
+        required regression tests.
+
+        Test: css3/parse-place-self.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::ComputedStyleExtractor::propertyValue):
+        * css/CSSProperties.json:
+        * css/StyleProperties.cpp:
+        (WebCore::StyleProperties::getPropertyValue):
+        * css/parser/CSSPropertyParser.cpp:
+        (WebCore::CSSPropertyParser::consumePlaceSelfShorthand):
+        (WebCore::CSSPropertyParser::parseShorthand):
+        * css/parser/CSSPropertyParser.h:
+
 2017-05-13  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r216801.
index c05cc3c..75e1b5d 100644 (file)
@@ -328,6 +328,7 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyJustifyItems,
     CSSPropertyPlaceContent,
     CSSPropertyPlaceItems,
+    CSSPropertyPlaceSelf,
 #if ENABLE(FILTERS_LEVEL_2)
     CSSPropertyWebkitBackdropFilter,
 #endif
@@ -2961,6 +2962,8 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return getCSSPropertyValuesForShorthandProperties(placeContentShorthand());
         case CSSPropertyPlaceItems:
             return getCSSPropertyValuesForShorthandProperties(placeItemsShorthand());
+        case CSSPropertyPlaceSelf:
+            return getCSSPropertyValuesForShorthandProperties(placeSelfShorthand());
         case CSSPropertyOrder:
             return cssValuePool.createValue(style->order(), CSSPrimitiveValue::CSS_NUMBER);
         case CSSPropertyFloat:
index a20c690..1abcb50 100644 (file)
                 "url": "https://drafts.csswg.org/css-align-3/#propdef-place-items"
             }
         },
+        "place-self": {
+            "codegen-properties": {
+                "longhands": [
+                    "align-self",
+                    "justify-self"
+                ]
+            },
+            "specification": {
+                "category": "css-align",
+                "url": "https://drafts.csswg.org/css-align-3/#propdef-place-self"
+            }
+        },
         "grid": {
             "codegen-properties": {
                 "longhands": [
index 98d25e3..62dd48c 100644 (file)
@@ -189,6 +189,8 @@ String StyleProperties::getPropertyValue(CSSPropertyID propertyID) const
         return getAlignmentShorthandValue(placeContentShorthand());
     case CSSPropertyPlaceItems:
         return getAlignmentShorthandValue(placeItemsShorthand());
+    case CSSPropertyPlaceSelf:
+        return getAlignmentShorthandValue(placeSelfShorthand());
     case CSSPropertyFont:
         return fontValue();
     case CSSPropertyMargin:
index 93125fc..77540ad 100644 (file)
@@ -5545,6 +5545,25 @@ bool CSSPropertyParser::consumePlaceItemsShorthand(bool important)
     return true;
 }
 
+bool CSSPropertyParser::consumePlaceSelfShorthand(bool important)
+{
+    ASSERT(shorthandForProperty(CSSPropertyPlaceSelf).length() == 2);
+
+    RefPtr<CSSValue> alignSelfValue = consumeSimplifiedItemPosition(m_range);
+    if (!alignSelfValue)
+        return false;
+    RefPtr<CSSValue> justifySelfValue = m_range.atEnd() ? alignSelfValue : consumeSimplifiedItemPosition(m_range);
+    if (!justifySelfValue)
+        return false;
+
+    if (!m_range.atEnd())
+        return false;
+
+    addProperty(CSSPropertyAlignSelf, CSSPropertyPlaceSelf, alignSelfValue.releaseNonNull(), important);
+    addProperty(CSSPropertyJustifySelf, CSSPropertyPlaceSelf, justifySelfValue.releaseNonNull(), important);
+    return true;
+}
+
 bool CSSPropertyParser::parseShorthand(CSSPropertyID property, bool important)
 {
     switch (property) {
@@ -5730,6 +5749,8 @@ bool CSSPropertyParser::parseShorthand(CSSPropertyID property, bool important)
         return consumePlaceContentShorthand(important);
     case CSSPropertyPlaceItems:
         return consumePlaceItemsShorthand(important);
+    case CSSPropertyPlaceSelf:
+        return consumePlaceSelfShorthand(important);
     case CSSPropertyWebkitMarquee:
         return consumeShorthandGreedily(webkitMarqueeShorthand(), important);
     default:
index ea95092..2ed4932 100644 (file)
@@ -82,6 +82,7 @@ private:
 
     bool consumePlaceContentShorthand(bool important);
     bool consumePlaceItemsShorthand(bool important);
+    bool consumePlaceSelfShorthand(bool important);
 
     bool consumeFont(bool important);
     bool consumeFontVariantShorthand(bool important);