[css-grid] Add parsing support for <auto-repeat> syntax

The repeat() notation allows now to specify auto-fill or auto-fit instead of
a fixed number of repetitions meaning that it will be automatically computed
depending on the available space.

This CL just adds the parsing support, the expansion of the repeat notation
will be implemented in a follow up patch because it cannot be done at
parsing level (since it requires knowing about the available space).

BUG=579104

Review URL: https://codereview.chromium.org/1582793002

Cr-Commit-Position: refs/heads/master@{#370951}

2 files changed, 117 insertions, 0 deletions

diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt
new file mode 100644
index 0000000..3953b477
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt
@@ -0,0 +1,60 @@
+Test that setting/getting grid-template-{columns|rows} with repeat(auto-fill|auto-fit,) works as expected
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Test auto-repeat syntax.
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 10px"
+PASS element.style.gridTemplateColumns is "[foo bar] 10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [foo bar]"
+PASS element.style.gridTemplateRows is "2em [foo bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 800px"
+PASS element.style.gridTemplateColumns is "[foo bar] minmax(10px, 1fr)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 20px [bar]"
+PASS element.style.gridTemplateRows is "[foo] minmax(2em, max-content) [bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "100px 20px 20px"
+PASS element.style.gridTemplateColumns is "minmax(10px, 100px) 20px 20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "70px 20px [bar foo] 10px [foo] 10px"
+PASS element.style.gridTemplateRows is "70px minmax(2em, max-content) [bar] [foo] 1em [foo] 1em"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 10px"
+PASS element.style.gridTemplateColumns is "[foo bar] 10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [foo bar]"
+PASS element.style.gridTemplateRows is "2em [foo bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 800px"
+PASS element.style.gridTemplateColumns is "[foo bar] minmax(10px, 1fr)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 20px [bar]"
+PASS element.style.gridTemplateRows is "[foo] minmax(2em, max-content) [bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px 20px 20px"
+PASS element.style.gridTemplateColumns is "minmax(10px, min-content) 20px 20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "60px 20px [bar foo] 10px [foo] 10px"
+PASS element.style.gridTemplateRows is "10% minmax(2em, max-content) [bar] [foo] 1em [foo] 1em"
+
+Test invalid repeat syntax.
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html
new file mode 100644
index 0000000..94f18a5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/js-test.js"></script>
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+
+<body>
+</body>
+<script>
+    description('Test that setting/getting grid-template-{columns|rows} with repeat(auto-fill|auto-fit,) works as expected');
+
+    debug("Test auto-repeat syntax.");
+    testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] 10px)", "repeat(auto-fill, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "[foo bar] 10px", "2em [foo bar]");
+    testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] minmax(10px, 1fr))", "repeat(auto-fill, [foo] minmax(2em, max-content) [bar])", "[foo bar] 800px", "[foo] 20px [bar]", "[foo bar] minmax(10px, 1fr)", "[foo] minmax(2em, max-content) [bar]");
+    testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(10px, 100px)) repeat(2, 20px)", "repeat(1, 70px) repeat(auto-fill, minmax(2em, max-content) [bar]) repeat(2, [foo] 1em)", "100px 20px 20px", "70px 20px [bar foo] 10px [foo] 10px", "minmax(10px, 100px) 20px 20px", "70px minmax(2em, max-content) [bar] [foo] 1em [foo] 1em");
+    testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 10px)", "repeat(auto-fit, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "[foo bar] 10px", "2em [foo bar]");
+    testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] minmax(10px, 1fr))", "repeat(auto-fit, [foo] minmax(2em, max-content) [bar])", "[foo bar] 800px", "[foo] 20px [bar]", "[foo bar] minmax(10px, 1fr)", "[foo] minmax(2em, max-content) [bar]");
+    testGridDefinitionsSetJSValues("repeat(auto-fit, minmax(10px, min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(2em, max-content) [bar]) repeat(2, [foo] 1em)", "10px 20px 20px", "60px 20px [bar foo] 10px [foo] 10px", "minmax(10px, min-content) 20px 20px", "10% minmax(2em, max-content) [bar] [foo] 1em [foo] 1em");
+
+    debug("");
+    debug("Test invalid repeat syntax.");
+    function testInvalidSyntax(gridColumn) {
+        element = document.createElement("div");
+        document.body.appendChild(element);
+        element.style.gridTemplateColumns = gridColumn;
+        shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
+        document.body.removeChild(element);
+    }
+
+    testInvalidSyntax("repeat(auto-fill, 1fr)");
+    testInvalidSyntax("repeat(auto-fill, minmax(min-content, 20px))");
+    testInvalidSyntax("repeat(auto-fill, [bar] auto)");
+    testInvalidSyntax("repeat(auto-fill, 20px 10px)");
+    testInvalidSyntax("repeat(auto-fill, 20px [foo bar] 10px)");
+    testInvalidSyntax("repeat(auto-fill,)");
+    testInvalidSyntax("repeat(auto-fill, [foo])");
+    testInvalidSyntax("repeat(auto-fit, 1fr)");
+    testInvalidSyntax("repeat(auto-fit, minmax(min-content, 20px))");
+    testInvalidSyntax("repeat(auto-fit, [bar] auto)");
+    testInvalidSyntax("repeat(auto-fit, 20px 10px)");
+    testInvalidSyntax("repeat(auto-fit, 20px [foo bar] 10px)");
+    testInvalidSyntax("repeat(auto-fit,)");
+    testInvalidSyntax("repeat(auto-fit, [foo])");
+
+    // <auto-repeat> can only be used once in a <track-list>.
+    testInvalidSyntax("repeat(auto-fill, 10px) repeat(auto-fill, [foo] 2em)");
+    testInvalidSyntax("repeat(auto-fill, 10em [bar]) auto repeat(auto-fill, [foo] 2em)");
+    testInvalidSyntax("repeat(auto-fit, 10px) repeat(auto-fit, [foo] 2em)");
+    testInvalidSyntax("repeat(auto-fit, 10em [bar]) auto repeat(auto-fit, [foo] 2em)");
+    testInvalidSyntax("repeat(auto-fill, [foo] 1em [bar]) auto repeat(auto-fit, [foo] 32px)");
+    testInvalidSyntax("repeat(auto-fill, 1em [bar]) repeat(3, max-content [last]) repeat(auto-fit, 32px)");
+
+    // <auto-repeat> requires definite minimum track sizes.
+    testInvalidSyntax("repeat(auto-fill, 10px) repeat(10, minmax(min-content, auto))");
+    testInvalidSyntax("auto repeat(auto-fit, [foo] 10px)");
+    testInvalidSyntax("10% repeat(auto-fit, [foo] 10px) min-content");
+    testInvalidSyntax("20px [bar] repeat(4, auto) [foo] repeat(auto-fill, 3em)");
+</script>