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

LayoutTests/fast/css-grid-layout/resources/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"), "400px", "150px");
 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px", "0px");
 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "7px", "11px");
 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px", "0px");
 testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElement"), "0px", "0px");
@@ skipping 84 matching lines @@
 
 debug("");
 debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
 testGridDefinitionsSetJSValues("18px", "66px");
 testGridDefinitionsSetJSValues("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.display = "grid";
     element.style.height = "100px";
     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) 101px'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'50px [last]'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'[first] 101px'");
 
     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.display = "grid";
     element.style.width = "300px";
     element.style.height = "150px";
-    element.style.gridTemplateColumns = "150% (last)";
-    element.style.gridTemplateRows = "(first) 1fr";
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'450px (last)'");
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 150px'");
+    element.style.gridTemplateColumns = "150% [last]";
+    element.style.gridTemplateRows = "[first] 1fr";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'450px [last]'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'[first] 150px'");
 
     element.style.display = "grid";
     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();