[CSSGridLayout] Switch from parentheses to brackets for grid line names

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

 description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
 
 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none", "none");
 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px", "15px");
 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53%", "27%");
 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto", "auto");
 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px");
 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageElement"), "64px", "60px");
 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "minmax(10%, 15px)", "minmax(20px, 50%)");
@@ skipping 66 matching lines @@
 
 debug("");
 debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
 testNonGridDefinitionsSetJSValues("18px", "66px");
 testNonGridDefinitionsSetJSValues("none", "none");
 
 function testInherit()
 {
     var parentElement = document.createElement("div");
     document.body.appendChild(parentElement);
-    parentElement.style.gridTemplateColumns = "50px (last)";
-    parentElement.style.gridTemplateRows = "(first) 101%";
+    parentElement.style.gridTemplateColumns = "50px [last]";
+    parentElement.style.gridTemplateRows = "[first] 101%";
 
     element = document.createElement("div");
     parentElement.appendChild(element);
     element.style.gridTemplateColumns = "inherit";
     element.style.gridTemplateRows = "inherit";
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'50px (last)'");
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 101%'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'50px [last]'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'[first] 101%'");
 
     document.body.removeChild(parentElement);
 }
 debug("");
 debug("Test setting grid-template-columns and grid-template-rows to 'inherit' through JS");
 testInherit();
 
 function testInitial()
 {
     element = document.createElement("div");
     document.body.appendChild(element);
-    element.style.gridTemplateColumns = "150% (last)";
-    element.style.gridTemplateRows = "(first) 1fr";
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'150% (last)'");
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 1fr'");
+    element.style.gridTemplateColumns = "150% [last]";
+    element.style.gridTemplateRows = "[first] 1fr";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'150% [last]'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'[first] 1fr'");
 
     element.style.gridTemplateColumns = "initial";
     element.style.gridTemplateRows = "initial";
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
 
     document.body.removeChild(element);
 }
 debug("");
 debug("Test setting grid-template-columns and grid-template-rows to 'initial' through JS");
 testInitial();