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

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

Index: LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
diff --git a/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html b/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
index b163ce77aca409362c5b80d336e096c20e6092bc..6e7c714bef2302efb38eab0da62994bbed36a4d4 100644
--- a/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
+++ b/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
@@ -15,56 +15,60 @@
     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 [];
 }
-.gridWithoutParentheses {
+.gridWithoutBrackets {
     grid-template-columns: first nav 10px;
     grid-template-rows: first 50% last;
 }
-.gridWithInvalidNestedParentheses {
-    grid-template-columns: (first (nav)) 10px (last);
-    grid-template-rows: (first) 50% (last (nav) nav2);
+.gridWithInvalidNestedBrackets {
+    grid-template-columns: [first [nav]] 10px [last];
+    grid-template-rows: [first] 50% [last [nav] nav2];
 }
-.gridWithUnbalancedParentheses {
-    grid-template-columns: (first nav 10px;
-    grid-template-rows: (first) 50% last);
+.gridWithUnbalancedBrackets {
+    grid-template-columns: [first nav 10px;
+    grid-template-rows: [first] 50% last];
 }
-.gridWithMisplacedParentheses {
-    grid-template-columns: (first 10px) 50%;
-    grid-template-rows: (first) (nav 50%);
+.gridWithMisplacedBrackets {
+    grid-template-columns: [first 10px] 50%;
+    grid-template-rows: [first] [nav 50%];
 }
-.gridWithContiguousParentheses {
-    grid-template-columns: (first) (nav) 10px;
-    grid-template-rows: 50px (nav nav2) (middle) 10px;
+.gridWithContiguousBrackets {
+    grid-template-columns: [first] [nav] 10px;
+    grid-template-rows: 50px [nav nav2] [middle] 10px;
+}
+.gridWithInvalidCustomIdents {
+    grid-template-columns: [first span] 10px;
+    grid-template-rows: 50px [inherit] 10px;
 }
 </style>
 <script src="../../resources/js-test.js"></script>
@@ -84,62 +88,65 @@
 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div>
-<div class="grid gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div>
-<div class="grid gridWithoutParentheses" id="gridWithoutParentheses"></div>
-<div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedParentheses"></div>
-<div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParentheses"></div>
-<div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParentheses"></div>
-<div class="grid gridWithContiguousParentheses" id="gridWithContiguousParentheses"></div>
+<div class="grid gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
+<div class="grid gridWithoutBrackets" id="gridWithoutBrackets"></div>
+<div class="grid gridWithInvalidNestedBrackets" id="gridWithInvalidNestedBrackets"></div>
+<div class="grid gridWithUnbalancedBrackets" id="gridWithUnbalancedBrackets"></div>
+<div class="grid gridWithMisplacedBrackets" id="gridWithMisplacedBrackets"></div>
+<div class="grid gridWithContiguousBrackets" id="gridWithContiguousBrackets"></div>
+<div class="grid gridWithInvalidCustomIdents" id="gridWithInvalidCustomIdents"></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"), "424px (last)", "162px (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px (last)", "0px (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "77px (last)", "22px (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "(first) 0px", "0px (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "(first) 77px", "22px (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first) 80px", "300px (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "(first nav) 80px (nav) 120px (last)", "(first nav2) 150px (nav2) 450px (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "(first) 10px (nav nav2) 400px (nav nav2) 400px", "100px (nav nav2) 150px (nav nav2) 150px (last)");
-    testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses"), "10px", "20px 50px");
+    testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
+    testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px [last]", "162px [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px [last]", "0px [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "77px [last]", "22px [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[first] 0px", "0px [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "[first] 77px", "22px [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first] 80px", "300px [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [nav2] 450px [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav nav2] 150px [last]");
+    testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px");
 
     debug("");
     debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
-    testGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "(first) 18px", "66px (last)", "(first) 18px", "66px (last)");
-    testGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "(first) 440px", "240px (last)", "(first) 55%", "40% (last)");
-    testGridDefinitionsSetJSValues("(first) auto", "auto (last)", "(first) 0px", "0px (last)", "(first) auto", "auto (last)");
-    testGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "(first) 0px", "0px (last)", "(first) min-content", "min-content (last)");
-    testGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "(first) 0px", "0px (last)", "(first) max-content", "max-content (last)");
-    testGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) 440px", "240px (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)");
-    testGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)", "(first) 220px", "50px (last)", "(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)");
-    testGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)", "(first) 220px", "50px (last)", "(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)");
-    testGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)", "(first) 0px", "0px (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)");
-    testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) 0px (last)", "(first nav) 0px (last)", "(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)");
-    testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)", "(first nav) 0px (nav) 0px (last)", "(first nav2) 0px (nav2) 15px (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)");
-    testGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) 0px (foo) 0px (bar)", "(foo bar) 0px (foo) 0px (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)");
-    testGridDefinitionsSetJSValues("(first) auto repeat(2, (foo bar) 20px)", "220px (foo) repeat(1, 50% (baz)", "(first) 0px (foo bar) 20px (foo bar) 20px", "220px (foo) 300px (baz)", "(first) auto (foo bar) 20px (foo bar) 20px", "220px (foo) 50% (baz)");
+    testGridDefinitionsSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]");
+    testGridDefinitionsSetJSValues("[first] 55%", "40% [last]", "[first] 440px", "240px [last]", "[first] 55%", "40% [last]");
+    testGridDefinitionsSetJSValues("[first] auto", "auto [last]", "[first] 0px", "0px [last]", "[first] auto", "auto [last]");
+    testGridDefinitionsSetJSValues("[first] min-content", "min-content [last]", "[first] 0px", "0px [last]", "[first] min-content", "min-content [last]");
+    testGridDefinitionsSetJSValues("[first] max-content", "max-content [last]", "[first] 0px", "0px [last]", "[first] max-content", "max-content [last]");
+    testGridDefinitionsSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] 440px", "240px [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]");
+    testGridDefinitionsSetJSValues("[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]", "[first] 220px", "50px [last]", "[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]");
+    testGridDefinitionsSetJSValues("[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]", "[first] 220px", "50px [last]", "[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]");
+    testGridDefinitionsSetJSValues("[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] 0px", "0px [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]");
+    testGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] 0px [last]", "[first nav] 0px [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]");
+    testGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] 0px [nav] 0px [last]", "[first nav2] 0px [nav2] 15px [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]");
+    testGridDefinitionsSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]");
+    testGridDefinitionsSetJSValues("[first] auto repeat(2, [foo bar] 20px)", "220px [foo] repeat(1, 50% [baz]", "[first] 0px [foo bar] 20px [foo bar] 20px", "220px [foo] 300px [baz]", "[first] auto [foo bar] 20px [foo bar] 20px", "220px [foo] 50% [baz]");
 
     debug("");
     debug("Test getting invalid grid-template-columns and grid-template-rows set through CSS");
-    testGridDefinitionsValues(document.getElementById("gridWithoutParentheses"), "none", "none");
-    testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedParentheses"), "none", "none");
-    testGridDefinitionsValues(document.getElementById("gridWithUnbalancedParentheses"), "none", "none");
-    testGridDefinitionsValues(document.getElementById("gridWithMisplacedParentheses"), "none", "none");
-    testGridDefinitionsValues(document.getElementById("gridWithContiguousParentheses"), "none", "none");
+    testGridDefinitionsValues(document.getElementById("gridWithoutBrackets"), "none", "none");
+    testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedBrackets"), "none", "none");
+    testGridDefinitionsValues(document.getElementById("gridWithUnbalancedBrackets"), "none", "none");
+    testGridDefinitionsValues(document.getElementById("gridWithMisplacedBrackets"), "none", "none");
+    testGridDefinitionsValues(document.getElementById("gridWithContiguousBrackets"), "none", "none");
+    testGridDefinitionsValues(document.getElementById("gridWithInvalidCustomIdents"), "none", "none");
 
     debug("");
     debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS");
-    testGridDefinitionsSetBadJSValues("(foo)", "(bar");
-    testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)");
+    testGridDefinitionsSetBadJSValues("[foo]", "[bar");
+    testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]");
     testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
-    testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2em");
-    testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em");
-    testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)");
+    testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2em");
+    testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em");
+    testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]");
+    testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]");
 </script>
 </body>
 </html>