1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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]", "repeat(auto-fill, [foo bar] 10px)", "repeat(auto-fill, 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]", "repeat(auto-fill, [foo bar] minmax(10px, 1fr))", "repeat(auto-fill, [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", "repeat(auto-fill, minmax(10px, 100px)) 20px 20px", "70px repeat(auto-fill, 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]", "repeat(auto-fit, [foo bar] 10px)", "repeat(auto-fit, 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]", "repeat(auto-fit, [foo bar] minmax(10px, 1fr))", "repeat(auto-fit, [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", "repeat(auto-fit, minmax(10px, min-content)) 20px 20px", "10% repeat(auto-fit, 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>
|
