From: rego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Fri, 5 Jun 2015 15:19:43 +0000 (+0000)
Subject: [CSS Grid Layout] Support dots sequences in grid-template-areas
X-Git-Url: http://git.webkit.org/?p=WebKit-https.git;a=commitdiff_plain;h=a8c2bd729ba095ee86cd2f8051d9349cea36967d;ds=sidebyside

[CSS Grid Layout] Support dots sequences in grid-template-areas
https://bugs.webkit.org/show_bug.cgi?id=145693

Reviewed by Sergio Villar Senin.

Source/WebCore:

The CSS WG agreed to consider a sequence of "." characters a single null
cell token for grid-template-areas. That way authors can match the
number of dots to the width of the column.

For more information see:
https://lists.w3.org/Archives/Public/www-style/2015May/0175.html

Added new test cases to check the new behavior.

* css/CSSParser.cpp:
(WebCore::containsOnlyDots): New helper function to check that the grid
area name is composed by only dots.
(WebCore::CSSParser::parseGridTemplateAreasRow): Use the new helper
function to look for unnamed areas.

LayoutTests:

Added new test cases to check the new behavior.

* fast/css-grid-layout/grid-template-areas-get-set-expected.txt:
* fast/css-grid-layout/grid-template-areas-get-set.html:


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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 0ecb7c4..15419e4 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,15 @@
+2015-06-05  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Support dots sequences in grid-template-areas
+        https://bugs.webkit.org/show_bug.cgi?id=145693
+
+        Reviewed by Sergio Villar Senin.
+
+        Added new test cases to check the new behavior.
+
+        * fast/css-grid-layout/grid-template-areas-get-set-expected.txt:
+        * fast/css-grid-layout/grid-template-areas-get-set.html:
+
 2015-06-03  Filip Pizlo  <fpizlo@apple.com>
 
         Simplify unboxing of double JSValues known to be not NaN and not Int32
diff --git a/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt b/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt
index dde64fc..0d384c2 100644
--- a/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt
+++ b/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt
@@ -10,7 +10,14 @@ PASS getComputedStyle(gridWithTwoColumnsTemplate).getPropertyValue('-webkit-grid
 PASS getComputedStyle(gridWithTwoRowsTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"first\" \"second\""
 PASS getComputedStyle(gridWithSpanningColumnsTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"span span\""
 PASS getComputedStyle(gridWithSpanningRowsDotTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"span\" \".\""
+PASS getComputedStyle(gridWithSpanningRowsDotsTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"span\" \".\""
 PASS getComputedStyle(gridWithDotColumn).getPropertyValue('-webkit-grid-template-areas') is "\"header .\" \"footer .\""
+PASS getComputedStyle(gridWithDotsColumn).getPropertyValue('-webkit-grid-template-areas') is "\"header .\" \"footer .\""
+PASS getComputedStyle(gridWithDotCells).getPropertyValue('-webkit-grid-template-areas') is "\"first .\" \". second\""
+PASS getComputedStyle(gridWithDotsCells).getPropertyValue('-webkit-grid-template-areas') is "\"first .\" \". second\""
+PASS getComputedStyle(gridWithComplexDotAreas).getPropertyValue('-webkit-grid-template-areas') is "\". header header .\" \". . . .\" \"nav main main aside\" \"nav main main aside\" \". . . aside\" \". footer footer aside\""
+PASS getComputedStyle(gridWithComplexDotsAreas).getPropertyValue('-webkit-grid-template-areas') is "\". header header .\" \". . . .\" \"nav main main aside\" \"nav main main aside\" \". . . aside\" \". footer footer aside\""
+PASS getComputedStyle(gridWithMixedDotAndDotsAreas).getPropertyValue('-webkit-grid-template-areas') is "\". title .\" \". main main\" \"nav . aside\" \". footer .\""
 PASS getComputedStyle(gridWithHorizontalRectangle).getPropertyValue('-webkit-grid-template-areas') is "\"a a a\" \"a a a\""
 PASS getComputedStyle(gridWithVerticalRectangle).getPropertyValue('-webkit-grid-template-areas') is "\"a a\" \"a a\" \"a a\""
 Test grid-template-areas: initial
diff --git a/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html b/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html
index 504464e..dfb03d8 100644
--- a/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html
+++ b/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<!DOCTYPE html>
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
@@ -25,11 +25,56 @@
                                  ".";
 }
 
+#gridWithSpanningRowsDotsTemplate {
+    -webkit-grid-template-areas: "span"
+                                 "....";
+}
+
 #gridWithDotColumn {
     -webkit-grid-template-areas: "header ."
                                  "footer .";
 }
 
+#gridWithDotsColumn {
+    -webkit-grid-template-areas: "header ......"
+                                 "footer ......";
+}
+
+#gridWithDotCells {
+    -webkit-grid-template-areas: "first ."
+                                 ". second";
+}
+
+#gridWithDotsCells {
+    -webkit-grid-template-areas: "first ......"
+                                 "..... second";
+}
+
+#gridWithComplexDotAreas {
+    -webkit-grid-template-areas: ". header header ."
+                                 ". . . ."
+                                 "nav main main aside"
+                                 "nav main main aside"
+                                 ". . . aside"
+                                 ". footer footer aside";
+}
+
+#gridWithComplexDotsAreas {
+    -webkit-grid-template-areas: "... header header ....."
+                                 "... ...... ...... ....."
+                                 "nav main   main   aside"
+                                 "nav main   main   aside"
+                                 "... ...... ...... aside"
+                                 "... footer footer aside";
+}
+
+#gridWithMixedDotAndDotsAreas {
+    -webkit-grid-template-areas: "... title ."
+                                 "..  main main"
+                                 "nav ................... aside"
+                                 ". footer ......";
+}
+
 #gridWithHorizontalRectangle {
     -webkit-grid-template-areas: "a a a"
                                  "a a a";
@@ -51,7 +96,14 @@
 <div class="grid" id="gridWithTwoRowsTemplate"></div>
 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
+<div class="grid" id="gridWithSpanningRowsDotsTemplate"></div>
 <div class="grid" id="gridWithDotColumn"></div>
+<div class="grid" id="gridWithDotsColumn"></div>
+<div class="grid" id="gridWithDotCells"></div>
+<div class="grid" id="gridWithDotsCells"></div>
+<div class="grid" id="gridWithComplexDotAreas"></div>
+<div class="grid" id="gridWithComplexDotsAreas"></div>
+<div class="grid" id="gridWithMixedDotAndDotsAreas"></div>
 <div class="grid" id="gridWithHorizontalRectangle"></div>
 <div class="grid" id="gridWithVerticalRectangle"></div>
 <script>
@@ -73,7 +125,14 @@
     testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"');
     testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"');
     testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."');
+    testGridTemplateAreas("gridWithSpanningRowsDotsTemplate", '"span" "."');
     testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."');
+    testGridTemplateAreas("gridWithDotsColumn", '"header ." "footer ."');
+    testGridTemplateAreas("gridWithDotCells", '"first ." ". second"');
+    testGridTemplateAreas("gridWithDotsCells", '"first ." ". second"');
+    testGridTemplateAreas("gridWithComplexDotAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
+    testGridTemplateAreas("gridWithComplexDotsAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
+    testGridTemplateAreas("gridWithMixedDotAndDotsAreas", '". title ." ". main main" "nav . aside" ". footer ."');
     testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"');
     testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"');
 
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index a81a77c..f394501 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,25 @@
+2015-06-05  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Support dots sequences in grid-template-areas
+        https://bugs.webkit.org/show_bug.cgi?id=145693
+
+        Reviewed by Sergio Villar Senin.
+
+        The CSS WG agreed to consider a sequence of "." characters a single null
+        cell token for grid-template-areas. That way authors can match the
+        number of dots to the width of the column.
+
+        For more information see:
+        https://lists.w3.org/Archives/Public/www-style/2015May/0175.html
+
+        Added new test cases to check the new behavior.
+
+        * css/CSSParser.cpp:
+        (WebCore::containsOnlyDots): New helper function to check that the grid
+        area name is composed by only dots.
+        (WebCore::CSSParser::parseGridTemplateAreasRow): Use the new helper
+        function to look for unnamed areas.
+
 2015-06-04  Joonghun Park  <jh718.park@samsung.com>
 
         Purge PassRefPtr create() factory functions in WebCore/css
diff --git a/Source/WebCore/css/CSSParser.cpp b/Source/WebCore/css/CSSParser.cpp
index 5f1cf40..584c0c5 100644
--- a/Source/WebCore/css/CSSParser.cpp
+++ b/Source/WebCore/css/CSSParser.cpp
@@ -5961,6 +5961,17 @@ bool CSSParser::parseDashboardRegions(CSSPropertyID propId, bool important)
 #endif /* ENABLE(DASHBOARD_SUPPORT) */
 
 #if ENABLE(CSS_GRID_LAYOUT)
+static bool containsOnlyDots(const String& string)
+{
+    ASSERT(!string.isEmpty());
+    StringImpl& text = *string.impl();
+    for (unsigned i = 0; i < text.length(); ++i) {
+        if (text[i] != '.')
+            return false;
+    }
+    return true;
+}
+
 bool CSSParser::parseGridTemplateAreasRow(NamedGridAreaMap& gridAreaMap, const unsigned rowCount, unsigned& columnCount)
 {
     CSSParserValue* currentValue = m_valueList->current();
@@ -5986,7 +5997,7 @@ bool CSSParser::parseGridTemplateAreasRow(NamedGridAreaMap& gridAreaMap, const u
         const String& gridAreaName = columnNames[currentColumn];
 
         // Unamed areas are always valid (we consider them to be 1x1).
-        if (gridAreaName == ".")
+        if (containsOnlyDots(gridAreaName))
             continue;
 
         // We handle several grid areas with the same name at once to simplify the validation code.