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

LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html

Index: LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html
diff --git a/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html b/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html
index c9aa5c2ff40936ba4fe2ed1889ba23b31e622a26..d6cb26f8e2a9aeadc3cb56ece4355ccf204a86db 100644
--- a/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html
+++ b/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html
@@ -10,36 +10,36 @@
     width: 77px;
 }
 .gridWithFixed {
-    grid-template-columns: (first) 10px;
-    grid-template-rows: (first) 15px;
+    grid-template-columns: [first] 10px;
+    grid-template-rows: [first] 15px;
 }
 .gridWithPercent {
-    grid-template-columns: 53% (last);
-    grid-template-rows: 27% (last);
+    grid-template-columns: 53% [last];
+    grid-template-rows: 27% [last];
 }
 .gridWithAuto {
-    grid-template-columns: (first) auto;
-    grid-template-rows: auto (last);
+    grid-template-columns: [first] auto;
+    grid-template-rows: auto [last];
 }
 .gridWithMinMax {
-    grid-template-columns: (first) minmax(10%, 15px);
-    grid-template-rows: minmax(20px, 50%) (last);
+    grid-template-columns: [first] minmax(10%, 15px);
+    grid-template-rows: minmax(20px, 50%) [last];
 }
 .gridWithFixedMultiple {
-    grid-template-columns: (first nav) 10px (last);
-    grid-template-rows: (first nav) 15px (last);
+    grid-template-columns: [first nav] 10px [last];
+    grid-template-rows: [first nav] 15px [last];
 }
 .gridWithPercentageSameStringMultipleTimes {
-    grid-template-columns: (first nav) 10% (nav) 15% (last);
-    grid-template-rows: (first nav2) 25% (nav2) 75% (last);
+    grid-template-columns: [first nav] 10% [nav] 15% [last];
+    grid-template-rows: [first nav2] 25% [nav2] 75% [last];
 }
 .gridWithRepeat {
-    grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%);
-    grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last);
+    grid-template-columns: [first] 10px repeat(2, [nav nav2] 50%);
+    grid-template-rows: 100px repeat(2, [nav nav2] 25%) [last];
 }
-.gridWithEmptyParentheses {
-    grid-template-columns: () 10px;
-    grid-template-rows: 20px (  ) 50px ();
+.gridWithEmptyBrackets {
+    grid-template-columns: [] 10px;
+    grid-template-rows: 20px [ ] 50px [];
 }
 </style>
 <script src="../../resources/js-test.js"></script>
@@ -55,36 +55,36 @@
 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
 <div class="gridWithRepeat" id="gridWithRepeatElement"></div>
-<div class="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div>
+<div class="gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
 
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script>
     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("gridWithFixedElement"), "(first) 10px", "(first) 15px");
-    testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% (last)", "27% (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "(first) auto", "auto (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first) minmax(10%, 15px)", "minmax(20px, 50%) (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "(first nav) 10% (nav) 15% (last)", "(first nav2) 25% (nav2) 75% (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "(first) 10px (nav nav2) 50% (nav nav2) 50%", "100px (nav nav2) 25% (nav nav2) 25% (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses"), "10px", "20px 50px");
+    testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
+    testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% [last]", "27% [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[first] auto", "auto [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first] minmax(10%, 15px)", "minmax(20px, 50%) [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "[first nav] 10% [nav] 15% [last]", "[first nav2] 25% [nav2] 75% [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 50% [nav nav2] 50%", "100px [nav nav2] 25% [nav nav2] 25% [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px");
 
     debug("");
     debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
-    testNonGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "(first) 18px", "66px (last)", "(first) 18px", "66px (last)");
-    testNonGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "(first) 55%", "40% (last)", "(first) 55%", "40% (last)");
-    testNonGridDefinitionsSetJSValues("(first) auto", "auto (last)", "(first) auto", "auto (last)", "(first) auto", "auto (last)");
-    testNonGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "(first) min-content", "min-content (last)", "(first) min-content", "min-content (last)");
-    testNonGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "(first) max-content", "max-content (last)", "(first) max-content", "max-content (last)");
-    testNonGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)");
-    testNonGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-content, 50px) (last)", "(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-content, 50px) (last)", "minmax(max-content, 50px) (last)");
-    testNonGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-content, 50px) (last)", "(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-content, 50px) (last)", "minmax(min-content, 50px) (last)");
-    testNonGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)");
-    testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)");
-    testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)");;
-    testNonGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)");
+    testNonGridDefinitionsSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]");
+    testNonGridDefinitionsSetJSValues("[first] 55%", "40% [last]", "[first] 55%", "40% [last]", "[first] 55%", "40% [last]");
+    testNonGridDefinitionsSetJSValues("[first] auto", "auto [last]", "[first] auto", "auto [last]", "[first] auto", "auto [last]");
+    testNonGridDefinitionsSetJSValues("[first] min-content", "min-content [last]", "[first] min-content", "min-content [last]", "[first] min-content", "min-content [last]");
+    testNonGridDefinitionsSetJSValues("[first] max-content", "max-content [last]", "[first] max-content", "max-content [last]", "[first] max-content", "max-content [last]");
+    testNonGridDefinitionsSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]");
+    testNonGridDefinitionsSetJSValues("[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]", "[first] minmax(220px, max-content)", "minmax(max-content, 50px) [last]", "[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]", "[first] minmax(220px, max-content)", "minmax(max-content, 50px) [last]", "minmax(max-content, 50px) [last]");
+    testNonGridDefinitionsSetJSValues("[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]", "[first] minmax(220px, min-content)", "minmax(min-content, 50px) [last]", "[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]", "[first] minmax(220px, min-content)", "minmax(min-content, 50px) [last]", "minmax(min-content, 50px) [last]");
+    testNonGridDefinitionsSetJSValues("[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]");
+    testNonGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]");
+    testNonGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]");;
+    testNonGridDefinitionsSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]");
 
     debug("");
     debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS");