[CSS Grid Layout] Support dots sequences in grid-template-areas

LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html

Index: LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html
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 ab89756add5118fb62e4ad91ce0600d49d0ee4e1..2644da387e50eb85ac97e6571c1e5a36dcbdfc0b 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
@@ -25,11 +25,21 @@
                          ".";
 }
 
+#gridWithSpanningRowsDotsTemplate {
+    grid-template-areas: "span"
+                         "....";
+}
+
 #gridWithDotColumn {
     grid-template-areas: "header ."
                          "footer .";
 }
 
+#gridWithDotsColumn {
+    grid-template-areas: "header ......"
+                         "footer ......";
+}
+

[svillar, 2015/06/05 10:38:09]

I miss more complex use cases. I know that they should be already there but I
think we should take a chance to add them. I miss things like

"area ...
 area other"

or 

"... bla .
 ..  bla oh
 hei ........... oh"

I guess you get it

[Manuel Rego, 2015/06/05 11:20:09]

Yeah, I also thought about that.
I'm adding some extra cases now.

 #gridWithHorizontalRectangle {
     grid-template-areas: "a a a"
                          "a a a";
@@ -51,7 +61,9 @@
 <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="gridWithHorizontalRectangle"></div>
 <div class="grid" id="gridWithVerticalRectangle"></div>
 <script>
@@ -76,9 +88,15 @@
     var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpanningRowsDotTemplate");
     shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTemplate).getPropertyValue('grid-template-areas')", '"span" "."')
 
+    var gridWithSpanningRowsDotsTemplate = document.getElementById("gridWithSpanningRowsDotsTemplate");
+    shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotsTemplate).getPropertyValue('grid-template-areas')", '"span" "."')
+
     var gridWithDotColumn = document.getElementById("gridWithDotColumn");
     shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropertyValue('grid-template-areas')", '"header ." "footer ."')
 
+    var gridWithDotsColumn = document.getElementById("gridWithDotsColumn");
+    shouldBeEqualToString("window.getComputedStyle(gridWithDotsColumn).getPropertyValue('grid-template-areas')", '"header ." "footer ."')
+

[svillar, 2015/06/05 10:38:09]

Also if you feel like, I think we could create a
testGridTemplateAreasDefinition() or something like that and simplify a bit this
file which is full of

getElement()
shouldBeEqual()

as we do in many other tests.

[Manuel Rego, 2015/06/05 11:20:09]

Good idea, but for a follow-up patch. :-)

     var gridWithHorizontalRectangle = document.getElementById("gridWithHorizontalRectangle");
     shouldBeEqualToString("window.getComputedStyle(gridWithHorizontalRectangle).getPropertyValue('grid-template-areas')", '"a a a" "a a a"');