[css-grid] Add parsing support for <auto-repeat> syntax
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-element-auto-repeat-get-set.html
1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet">
3 <script src="../../resources/js-test.js"></script>
4 <script src="resources/grid-definitions-parsing-utils.js"></script>
5
6 <body>
7 </body>
8 <script>
9     description('Test that setting/getting -webkit-grid-template-{columns|rows} with repeat(auto-fill|auto-fit,) works as expected');
10
11     debug("Test auto-repeat syntax.");
12     testGridTemplatesSetJSValues("repeat(auto-fill, [foo bar] 10px)", "repeat(auto-fill, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "[foo bar] 10px", "2em [foo bar]");
13     testGridTemplatesSetJSValues("repeat(auto-fill, [foo bar] minmax(10px, 1fr))", "repeat(auto-fill, [foo] minmax(2em, -webkit-max-content) [bar])", "[foo bar] 800px", "[foo] 20px [bar]", "[foo bar] minmax(10px, 1fr)", "[foo] minmax(2em, -webkit-max-content) [bar]");
14     testGridTemplatesSetJSValues("repeat(auto-fill, minmax(10px, 100px)) repeat(2, 20px)", "repeat(1, 70px) repeat(auto-fill, minmax(2em, -webkit-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, -webkit-max-content) [bar] [foo] 1em [foo] 1em");
15     testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] 10px)", "repeat(auto-fit, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "[foo bar] 10px", "2em [foo bar]");
16     testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] minmax(10px, 1fr))", "repeat(auto-fit, [foo] minmax(2em, -webkit-max-content) [bar])", "[foo bar] 800px", "[foo] 20px [bar]", "[foo bar] minmax(10px, 1fr)", "[foo] minmax(2em, -webkit-max-content) [bar]");
17     testGridTemplatesSetJSValues("repeat(auto-fit, minmax(10px, -webkit-min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(2em, -webkit-max-content) [bar]) repeat(2, [foo] 1em)", "10px 20px 20px", "60px 20px [bar foo] 10px [foo] 10px", "minmax(10px, -webkit-min-content) 20px 20px", "10% minmax(2em, -webkit-max-content) [bar] [foo] 1em [foo] 1em");
18
19     debug("");
20     debug("Test invalid repeat syntax.");
21     function testInvalidSyntax(gridColumn) {
22         element = document.createElement("div");
23         document.body.appendChild(element);
24         element.style.webkitGridTemplateColumns = gridColumn;
25         shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "none");
26         document.body.removeChild(element);
27     }
28
29     testInvalidSyntax("repeat(auto-fill, 1fr)");
30     testInvalidSyntax("repeat(auto-fill, minmax(-webkit-min-content, 20px))");
31     testInvalidSyntax("repeat(auto-fill, [bar] auto)");
32     testInvalidSyntax("repeat(auto-fill, 20px 10px)");
33     testInvalidSyntax("repeat(auto-fill, 20px [foo bar] 10px)");
34     testInvalidSyntax("repeat(auto-fill,)");
35     testInvalidSyntax("repeat(auto-fill, [foo])");
36     testInvalidSyntax("repeat(auto-fit, 1fr)");
37     testInvalidSyntax("repeat(auto-fit, minmax(-webkit-min-content, 20px))");
38     testInvalidSyntax("repeat(auto-fit, [bar] auto)");
39     testInvalidSyntax("repeat(auto-fit, 20px 10px)");
40     testInvalidSyntax("repeat(auto-fit, 20px [foo bar] 10px)");
41     testInvalidSyntax("repeat(auto-fit,)");
42     testInvalidSyntax("repeat(auto-fit, [foo])");
43
44     // <auto-repeat> can only be used once in a <track-list>.
45     testInvalidSyntax("repeat(auto-fill, 10px) repeat(auto-fill, [foo] 2em)");
46     testInvalidSyntax("repeat(auto-fill, 10em [bar]) auto repeat(auto-fill, [foo] 2em)");
47     testInvalidSyntax("repeat(auto-fit, 10px) repeat(auto-fit, [foo] 2em)");
48     testInvalidSyntax("repeat(auto-fit, 10em [bar]) auto repeat(auto-fit, [foo] 2em)");
49     testInvalidSyntax("repeat(auto-fill, [foo] 1em [bar]) auto repeat(auto-fit, [foo] 32px)");
50     testInvalidSyntax("repeat(auto-fill, 1em [bar]) repeat(3, -webkit-max-content [last]) repeat(auto-fit, 32px)");
51
52     // <auto-repeat> requires definite minimum track sizes.
53     testInvalidSyntax("repeat(auto-fill, 10px) repeat(10, minmax(-webkit-min-content, auto))");
54     testInvalidSyntax("auto repeat(auto-fit, [foo] 10px)");
55     testInvalidSyntax("10% repeat(auto-fit, [foo] 10px) -webkit-min-content");
56     testInvalidSyntax("20px [bar] repeat(4, auto) [foo] repeat(auto-fill, 3em)");
57 </script>