[CSS Grid Layout] Implementation of the grid-template shorthand.

This shorthand sets the values for the grid-template-columns, 
grid-template-rows and grid-template-areas, so the 
implementation tries to reuse as much available parsing 
functions as possible.

The "parsingGridTrackList" was refactored to return a 
CSSValue and let the "parseValue" function to assign the 
property value. The "forwardSlash" operator is now valid 
when the track-list clause is part of a shorthand. The  
"parseValue" function checkouts that only additional 
clauses are allowed when processing shorthands; the 
grid-columns-rows-get-set.html tests was modified to verify 
this.

The "parseGridTemplateAreas" was refactored too, in order 
to process single areas's rows. This is very useful for the 
gris-template secondary syntax, which mixes areas and rows 
values.


Finally, the "parseGirdLineNames" function was modified as 
well by defining an new argument to concatenate head/tail 
custom-ident elements and ensure the identList is at the 
heading index, since it's now possible the parseList was 
rewound.

The implementation of the grid-template shorthand tries 
first to match the <grid-template-columns> / <grid-template-rows> 
syntax, failing back to the secondary syntax if needed. 
This approach requires to rewind the parseList but it 
produces a clearer code.
 
TEST=fast/css-grid-layout/grid-template-shorthand-get-set.html

BUG=79180

Review URL: https://codereview.chromium.org/149373004

git-svn-id: svn://svn.chromium.org/blink/trunk@170552 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt

@@ -162,6 +162,8 @@ PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 
 Test setting grid-template-columns and grid-template-rows back to 'none' through JS
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"

third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js

@@ -90,6 +90,8 @@ testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)");
 // Invalid expressions with calc
 testGridDefinitionsSetBadJSValues("calc(16px 30px)", "calc(25px + auto)");
 testGridDefinitionsSetBadJSValues("minmax(min-content, calc())", "calc(10%(");
+// Forward slash not allowed if not part of a shorthand
+testGridDefinitionsSetBadJSValues("10px /", "15px /");
 
 debug("");
 debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");

third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js

+function testGridDefinitionsValues(element, computedColumnsValue, computedRowsValue, computedAreasValue)
+{
+    window.element = element;
+    var elementID = element.id || "element";
+    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-columns')", computedColumnsValue);
+    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-rows')", computedRowsValue);
+    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-areas')", computedAreasValue);
+}
+
+function testGridDefinitionsSetJSValues(shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, jsColumnsValue, jsRowsValue, jsAreasValue)
+{
+    checkGridDefinitionsSetJSValues(true, shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, jsColumnsValue, jsRowsValue, jsAreasValue);
+}
+
+function testNonGridDefinitionsSetJSValues(shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, jsColumnsValue, jsRowsValue, jsAreasValue)
+{
+    checkGridDefinitionsSetJSValues(false, shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, jsColumnsValue, jsRowsValue, jsAreasValue);
+}
+
+function checkGridDefinitionsSetJSValues(useGrid, shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, jsColumnsValue, jsRowsValue, jsAreasValue)
+{
+    window.element = document.createElement("div");
+    document.body.appendChild(element);
+    if (useGrid) {
+        element.style.display = "grid";
+        element.style.width = "800px";
+        element.style.height = "600px";
+    }
+
+    element.style.font = "10px Ahem"; // Used to resolve em font consistently.
+    element.style.gridTemplate = shorthandValue;
+    shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", computedColumnsValue);
+    shouldBeEqualToString("element.style.gridTemplateColumns", jsColumnsValue || computedColumnsValue);
+    shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", computedRowsValue);
+    shouldBeEqualToString("element.style.gridTemplateRows", jsRowsValue || computedRowsValue);
+    shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", computedAreasValue);
+    shouldBeEqualToString("element.style.gridTemplateAreas", jsAreasValue || computedAreasValue);
+    document.body.removeChild(element);
+
+}
+
+function testGridDefinitionsSetBadJSValues(shorthandValue)
+{
+    window.element = document.createElement("div");
+    document.body.appendChild(element);
+
+    element.style.gridTemplate = shorthandValue;
+    // We can't use testSetJSValues as element.style.gridTemplateRows returns "".
+    testGridDefinitionsValues(element, "none", "none", "none");
+    document.body.removeChild(element);
+}
\ No newline at end of file

third_party/WebKit/LayoutTests/platform/android/webexposed/css-properties-as-js-properties-expected.txt

@@ -121,6 +121,7 @@ gridColumnStart
 gridRow
 gridRowEnd
 gridRowStart
+gridTemplate
 gridTemplateAreas
 gridTemplateColumns
 gridTemplateRows

third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt

@@ -122,6 +122,7 @@ gridColumnStart
 gridRow
 gridRowEnd
 gridRowStart
+gridTemplate
 gridTemplateAreas
 gridTemplateColumns
 gridTemplateRows

third_party/WebKit/Source/core/css/CSSComputedStyleDeclaration.cpp

@@ -1983,7 +1983,8 @@ PassRefPtrWillBeRawPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValu
             return valuesForGridShorthand(gridRowShorthand());
         case CSSPropertyGridArea:
             return valuesForGridShorthand(gridAreaShorthand());
-
+        case CSSPropertyGridTemplate:
+            return valuesForGridShorthand(gridTemplateShorthand());
         case CSSPropertyGridTemplateAreas:
             if (!style->namedGridAreaRowCount()) {
                 ASSERT(!style->namedGridAreaColumnCount());

third_party/WebKit/Source/core/css/CSSParserValues.h

@@ -191,6 +191,12 @@ public:
         --m_current;
         return current();
     }
+    void setCurrentIndex(unsigned index)
+    {
+        ASSERT(index < m_values.size());
+        if (index < m_values.size())
+            m_current = index;
+    }
 
     CSSParserValue* valueAt(unsigned i) { return i < m_values.size() ? &m_values[i] : 0; }
 

third_party/WebKit/Source/core/css/CSSProperty.cpp

@@ -588,6 +588,7 @@ bool CSSProperty::isInheritedProperty(CSSPropertyID propertyID)
     case CSSPropertyGridColumn:
     case CSSPropertyGridColumnEnd:
     case CSSPropertyGridColumnStart:
+    case CSSPropertyGridTemplate:
     case CSSPropertyGridTemplateColumns:
     case CSSPropertyGridTemplateRows:
     case CSSPropertyGridRow:

third_party/WebKit/Source/core/css/CSSPropertyNames.in

@@ -323,6 +323,7 @@ grid-area
 grid-column
 grid-column-end
 grid-column-start
+grid-template
 grid-template-columns
 grid-template-rows
 grid-row

third_party/WebKit/Source/core/css/CSSShorthands.in

@@ -21,6 +21,7 @@ border-width longhands=border-top-width;border-right-width;border-bottom-width;b
 flex longhands=flex-grow;flex-shrink;flex-basis
 flex-flow longhands=flex-direction;flex-wrap
 font longhands=font-family;font-size;font-style;font-variant;font-weight;line-height
+grid-template longhands=grid-template-columns;grid-template-rows;grid-template-areas
 grid-area longhands=grid-row-start;grid-column-start;grid-row-end;grid-column-end
 grid-column longhands=grid-column-start;grid-column-end
 grid-row longhands=grid-row-start;grid-row-end

third_party/WebKit/Source/core/css/RuntimeCSSEnabled.cpp

@@ -83,6 +83,7 @@ static void setPropertySwitchesFromRuntimeFeatures()
         CSSPropertyGridArea,
         CSSPropertyGridAutoFlow,
         CSSPropertyGridTemplateAreas,
+        CSSPropertyGridTemplate,
         CSSPropertyJustifySelf
     };
     setCSSPropertiesEnabled(cssGridLayoutProperties, WTF_ARRAY_LENGTH(cssGridLayoutProperties), RuntimeEnabledFeatures::cssGridLayoutEnabled());

third_party/WebKit/Source/core/css/parser/CSSPropertyParser.h

@@ -29,6 +29,7 @@
 #include "core/css/CSSCalculationValue.h"
 #include "core/css/CSSFilterValue.h"
 #include "core/css/CSSGradientValue.h"
+#include "core/css/CSSGridTemplateAreasValue.h"
 #include "core/css/CSSParserMode.h"
 #include "core/css/CSSParserValues.h"
 #include "core/css/CSSProperty.h"
@@ -50,6 +51,7 @@ class CSSValue;
 class CSSValueList;
 class CSSBasicShape;
 class CSSBasicShapeInset;
+class CSSGridLineNamesValue;
 class Document;
 class Element;
 class ImmutableStylePropertySet;
@@ -150,14 +152,17 @@ private:
     PassRefPtrWillBeRawPtr<CSSValue> parseGridPosition();
     bool parseIntegerOrStringFromGridPosition(RefPtrWillBeRawPtr<CSSPrimitiveValue>& numericValue, RefPtrWillBeRawPtr<CSSPrimitiveValue>& gridLineName);
     bool parseGridItemPositionShorthand(CSSPropertyID, bool important);
+    bool parseGridTemplateRowsAndAreas(PassRefPtrWillBeRawPtr<CSSValue>, bool important);
+    bool parseGridTemplateShorthand(bool important);
     bool parseGridAreaShorthand(bool important);
     bool parseSingleGridAreaLonghand(RefPtrWillBeRawPtr<CSSValue>&);
-    bool parseGridTrackList(CSSPropertyID, bool important);
+    PassRefPtrWillBeRawPtr<CSSValue> parseGridTrackList(bool important);
     bool parseGridTrackRepeatFunction(CSSValueList&);
     PassRefPtrWillBeRawPtr<CSSValue> parseGridTrackSize(CSSParserValueList& inputList);
     PassRefPtrWillBeRawPtr<CSSPrimitiveValue> parseGridBreadth(CSSParserValue*);
+    bool parseGridTemplateAreasRow(NamedGridAreaMap&, const size_t, size_t&);
     PassRefPtrWillBeRawPtr<CSSValue> parseGridTemplateAreas();
-    void parseGridLineNames(CSSParserValueList* inputList, CSSValueList&);
+    void parseGridLineNames(CSSParserValueList&, CSSValueList&, CSSGridLineNamesValue* = 0);
 
     bool parseClipShape(CSSPropertyID, bool important);
 

third_party/WebKit/Source/core/css/resolver/StyleBuilderCustom.cpp

@@ -1454,6 +1454,7 @@ void StyleBuilder::oldApplyProperty(CSSPropertyID id, StyleResolverState& state,
     case CSSPropertyWebkitColumnRule:
     case CSSPropertyFlex:
     case CSSPropertyFlexFlow:
+    case CSSPropertyGridTemplate:
     case CSSPropertyGridColumn:
     case CSSPropertyGridRow:
     case CSSPropertyGridArea:

third_party/WebKit/Source/core/frame/UseCounter.cpp

@@ -506,6 +506,7 @@ int UseCounter::mapCSSPropertyIdToCSSSampleIdForHistogram(int id)
     case CSSPropertyPerspective: return 449;
     case CSSPropertyPerspectiveOrigin: return 450;
     case CSSPropertyBackfaceVisibility: return 451;
+    case CSSPropertyGridTemplate: return 452;
 
     // Add new features above this line (don't change the assigned numbers of the existing
     // items) and update maximumCSSSampleId() with the new maximum value.