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

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

Index: LayoutTests/fast/css-grid-layout/grid-template-shorthand-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-shorthand-areas-get-set.html
similarity index 86%
copy from LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html
copy to LayoutTests/fast/css-grid-layout/grid-template-shorthand-areas-get-set.html
index 2567ecbaddceccad1adba76352e41caabc32e8d7..1621231f8a5de194e990222fd0fc19c3d82556ff 100644
--- a/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html
+++ b/LayoutTests/fast/css-grid-layout/grid-template-shorthand-areas-get-set.html
@@ -8,30 +8,30 @@ if (window.testRunner)
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 #gridWithSingleStringTemplate {
-    grid-template-areas: "area";
+    grid-template: "area";
 }
 
 #gridWithTwoColumnsTemplate {
-    grid-template-areas: "first second";
+    grid-template: "first second";
 }
 
 #gridWithTwoRowsTemplate {
-    grid-template-areas: "first"
-                         "second";
+    grid-template: "first"
+                   "second";
 }
 
 #gridWithSpanningColumnsTemplate {
-    grid-template-areas: "span span";
+    grid-template: "span span";
 }
 
 #gridWithSpanningRowsDotTemplate {
-    grid-template-areas: "span"
-                         ".";
+    grid-template: "span"
+                   ".";
 }
 
 #gridWithDotColumn {
-    grid-template-areas: "header ."
-                         "footer .";
+    grid-template: "header ."
+                   "footer .";
 }
 </style>
 <script src="../../resources/js-test.js"></script>
@@ -80,12 +80,12 @@ if (window.testRunner)
     debug("Test grid-template-areas: inherit");
     var parentElement = document.createElement("div");
     document.body.appendChild(parentElement);
-    parentElement.style.gridTemplateAreas = "'foo bar'";
+    parentElement.style.gridTemplate = "'foo bar'";
     shouldBeEqualToString("window.getComputedStyle(parentElement).getPropertyValue('grid-template-areas')", '"foo bar"')
 
     var element = document.createElement("div");
     parentElement.appendChild(element);
-    element.style.gridTemplateAreas = "inherit";
+    element.style.gridTemplate = "inherit";
     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", '"foo bar"')
     document.body.removeChild(parentElement);
 
@@ -94,29 +94,29 @@ if (window.testRunner)
     document.body.appendChild(element);
 
     // 'nav' is not a rectangular definition.
-    element.style.gridTemplateAreas = "'nav head' 'nav nav'";
+    element.style.gridTemplate = "'nav head' 'nav nav'";
     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
 
     // 'nav' is not contiguous in the column direction.
-    element.style.gridTemplateAreas = "'nav head nav'";
+    element.style.gridTemplate = "'nav head nav'";
     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
 
     // 'nav' is not contiguous in the row direction.
-    element.style.gridTemplateAreas = "'nav head' 'middle middle' 'nav footer'";
+    element.style.gridTemplate = "'nav head' 'middle middle' 'nav footer'";
     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
 
     // The rows don't have the same number of columns.
-    element.style.gridTemplateAreas = "'nav head' 'foot'";
+    element.style.gridTemplate = "'nav head' 'foot'";
     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
 
     // Empty rows.
-    element.style.gridTemplateAreas = "'' ''";
+    element.style.gridTemplate = "'' ''";
     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
 
     debug("");
     debug("FIXME: We currently don't validate that the named grid areas are &lt;indent&gt;.");
     // <ident> only allows a leading '-'.
-    element.style.gridTemplateAreas = '"nav-up"';
+    element.style.gridTemplate = '"nav-up"';
     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
 </script>
 </body>