OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../../resources/js-test.js"></script> | 2 <script src="../../resources/js-test.js"></script> |
3 <script src="resources/grid-definitions-parsing-utils.js"></script> | 3 <script src="resources/grid-definitions-parsing-utils.js"></script> |
4 <style> | 4 <style> |
5 body { font-size: 10px; } | 5 body { font-size: 10px; } |
6 </style> | 6 </style> |
7 | 7 |
8 <body style="width: 800px; height: 600px;"> | 8 <body style="width: 800px; height: 600px;"> |
9 </body> | 9 </body> |
10 <script> | 10 <script> |
11 description('Test that setting/getting grid-template-{columns|rows} with rep
eat(auto-fill|auto-fit,) works as expected'); | 11 description('Test that setting/getting grid-template-{columns|rows} with rep
eat(auto-fill|auto-fit,) works as expected'); |
12 | 12 |
13 debug("Test auto-repeat syntax."); | 13 debug("Test auto-repeat syntax."); |
14 testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] 200px)", "repeat
(auto-fill, 20em [foo bar])", "[foo bar] 200px [foo bar] 200px [foo bar] 200px [
foo bar] 200px", "200px [foo bar] 200px [foo bar] 200px [foo bar]"); | 14 testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] 200px)", "repeat
(auto-fill, 20em [foo bar])", "[foo bar] 200px [foo bar] 200px [foo bar] 200px [
foo bar] 200px", "200px [foo bar] 200px [foo bar] 200px [foo bar]"); |
15 testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] minmax(300px, 1f
r))", "repeat(auto-fill, [foo] minmax(175px, max-content) [bar])", "[foo bar] 40
0px [foo bar] 400px", "[foo] 175px [bar foo] 175px [bar foo] 175px [bar]"); | 15 testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] minmax(300px, 1f
r))", "repeat(auto-fill, [foo] minmax(175px, max-content) [bar])", "[foo bar] 40
0px [foo bar] 400px", "[foo] 175px [bar foo] 175px [bar foo] 175px [bar]"); |
16 testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(50px, 100px)) repea
t(2, 250px)", "repeat(1, 450px) repeat(auto-fill, minmax(5em, max-content) [bar]
) repeat(2, [foo] 1em)", "100px 100px 100px 250px 250px", "450px 50px [bar] 50px
[bar foo] 10px [foo] 10px", "repeat(auto-fill, minmax(50px, 100px)) 250px 250px
", "450px repeat(auto-fill, minmax(5em, max-content) [bar]) [foo] 1em [foo] 1em"
); | 16 testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(50px, 100px)) repea
t(2, 250px)", "repeat(1, 450px) repeat(auto-fill, minmax(max-content, 5em) [bar]
) repeat(2, [foo] 1em)", "100px 100px 100px 250px 250px", "450px 50px [bar] 50px
[bar foo] 10px [foo] 10px", "repeat(auto-fill, minmax(50px, 100px)) 250px 250px
", "450px repeat(auto-fill, minmax(max-content, 5em) [bar]) [foo] 1em [foo] 1em"
); |
17 testGridDefinitionsSetJSValues("[start] 10% repeat(auto-fill, [foo bar] 200p
x) [end]", "75px [prev] repeat(auto-fill, 20em [foo bar]) [next] 15em [last end]
", "[start] 80px [foo bar] 200px [foo bar] 200px [foo bar] 200px [end]", "75px [
prev] 200px [foo bar next] 150px [last end]"); | 17 testGridDefinitionsSetJSValues("[start] 10% repeat(auto-fill, [foo bar] 200p
x) [end]", "75px [prev] repeat(auto-fill, 20em [foo bar]) [next] 15em [last end]
", "[start] 80px [foo bar] 200px [foo bar] 200px [foo bar] 200px [end]", "75px [
prev] 200px [foo bar next] 150px [last end]"); |
18 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat(
auto-fit, 24em [foo bar])", "none", "none"); | 18 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat(
auto-fit, 24em [foo bar])", "none", "none"); |
19 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr
))", "repeat(auto-fit, [foo] minmax(20em, max-content) [bar])", "none", "none"); | 19 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr
))", "repeat(auto-fit, [foo] minmax(20em, max-content) [bar])", "none", "none"); |
20 testGridDefinitionsSetJSValues("repeat(auto-fit, minmax(300px, min-content))
repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(30em, max-content) [b
ar]) repeat(2, [foo] 1em)", "20px 20px", "60px [foo] 10px [foo] 10px", "repeat(a
uto-fit, minmax(300px, min-content)) 20px 20px", "10% repeat(auto-fit, minmax(30
em, max-content) [bar]) [foo] 1em [foo] 1em"); | 20 testGridDefinitionsSetJSValues("repeat(auto-fit, minmax(300px, min-content))
repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(30em, max-content) [b
ar]) repeat(2, [foo] 1em)", "20px 20px", "60px [foo] 10px [foo] 10px", "repeat(a
uto-fit, minmax(300px, min-content)) 20px 20px", "10% repeat(auto-fit, minmax(30
em, max-content) [bar]) [foo] 1em [foo] 1em"); |
21 | 21 |
22 debug(""); | 22 debug(""); |
23 debug("Test invalid repeat syntax."); | 23 debug("Test invalid repeat syntax."); |
24 function testInvalidSyntax(gridColumn) { | 24 function testInvalidSyntax(gridColumn) { |
25 element = document.createElement("div"); | 25 element = document.createElement("div"); |
26 document.body.appendChild(element); | 26 document.body.appendChild(element); |
27 element.style.gridTemplateColumns = gridColumn; | 27 element.style.gridTemplateColumns = gridColumn; |
28 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV
alue('grid-template-columns')", "none"); | 28 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV
alue('grid-template-columns')", "none"); |
29 document.body.removeChild(element); | 29 document.body.removeChild(element); |
30 } | 30 } |
31 | 31 |
32 testInvalidSyntax("repeat(auto-fill, 1fr)"); | 32 testInvalidSyntax("repeat(auto-fill, 1fr)"); |
33 testInvalidSyntax("repeat(auto-fill, minmax(min-content, 20px))"); | |
34 testInvalidSyntax("repeat(auto-fill, [bar] auto)"); | 33 testInvalidSyntax("repeat(auto-fill, [bar] auto)"); |
35 testInvalidSyntax("repeat(auto-fill, 20px 10px)"); | 34 testInvalidSyntax("repeat(auto-fill, 20px 10px)"); |
36 testInvalidSyntax("repeat(auto-fill, 20px [foo bar] 10px)"); | 35 testInvalidSyntax("repeat(auto-fill, 20px [foo bar] 10px)"); |
37 testInvalidSyntax("repeat(auto-fill,)"); | 36 testInvalidSyntax("repeat(auto-fill,)"); |
38 testInvalidSyntax("repeat(auto-fill, [foo])"); | 37 testInvalidSyntax("repeat(auto-fill, [foo])"); |
39 testInvalidSyntax("repeat(auto-fit, 1fr)"); | 38 testInvalidSyntax("repeat(auto-fit, 1fr)"); |
40 testInvalidSyntax("repeat(auto-fit, minmax(min-content, 20px))"); | |
41 testInvalidSyntax("repeat(auto-fit, [bar] auto)"); | 39 testInvalidSyntax("repeat(auto-fit, [bar] auto)"); |
42 testInvalidSyntax("repeat(auto-fit, 20px 10px)"); | 40 testInvalidSyntax("repeat(auto-fit, 20px 10px)"); |
43 testInvalidSyntax("repeat(auto-fit, 20px [foo bar] 10px)"); | 41 testInvalidSyntax("repeat(auto-fit, 20px [foo bar] 10px)"); |
44 testInvalidSyntax("repeat(auto-fit,)"); | 42 testInvalidSyntax("repeat(auto-fit,)"); |
45 testInvalidSyntax("repeat(auto-fit, [foo])"); | 43 testInvalidSyntax("repeat(auto-fit, [foo])"); |
46 | 44 |
47 // <auto-repeat> can only be used once in a <track-list>. | 45 // <auto-repeat> can only be used once in a <track-list>. |
48 testInvalidSyntax("repeat(auto-fill, 10px) repeat(auto-fill, [foo] 2em)"); | 46 testInvalidSyntax("repeat(auto-fill, 10px) repeat(auto-fill, [foo] 2em)"); |
49 testInvalidSyntax("repeat(auto-fill, 10em [bar]) auto repeat(auto-fill, [foo
] 2em)"); | 47 testInvalidSyntax("repeat(auto-fill, 10em [bar]) auto repeat(auto-fill, [foo
] 2em)"); |
50 testInvalidSyntax("repeat(auto-fit, 10px) repeat(auto-fit, [foo] 2em)"); | 48 testInvalidSyntax("repeat(auto-fit, 10px) repeat(auto-fit, [foo] 2em)"); |
51 testInvalidSyntax("repeat(auto-fit, 10em [bar]) auto repeat(auto-fit, [foo]
2em)"); | 49 testInvalidSyntax("repeat(auto-fit, 10em [bar]) auto repeat(auto-fit, [foo]
2em)"); |
52 testInvalidSyntax("repeat(auto-fill, [foo] 1em [bar]) auto repeat(auto-fit,
[foo] 32px)"); | 50 testInvalidSyntax("repeat(auto-fill, [foo] 1em [bar]) auto repeat(auto-fit,
[foo] 32px)"); |
53 testInvalidSyntax("repeat(auto-fill, 1em [bar]) repeat(3, max-content [last]
) repeat(auto-fit, 32px)"); | 51 testInvalidSyntax("repeat(auto-fill, 1em [bar]) repeat(3, max-content [last]
) repeat(auto-fit, 32px)"); |
54 | 52 |
55 // <auto-repeat> requires definite minimum track sizes. | 53 // <auto-repeat> requires definite minimum track sizes. |
56 testInvalidSyntax("repeat(auto-fill, 10px) repeat(10, minmax(min-content, au
to))"); | 54 testInvalidSyntax("repeat(auto-fill, 10px) repeat(10, minmax(min-content, au
to))"); |
57 testInvalidSyntax("auto repeat(auto-fit, [foo] 10px)"); | 55 testInvalidSyntax("auto repeat(auto-fit, [foo] 10px)"); |
58 testInvalidSyntax("10% repeat(auto-fit, [foo] 10px) min-content"); | 56 testInvalidSyntax("10% repeat(auto-fit, [foo] 10px) min-content"); |
59 testInvalidSyntax("20px [bar] repeat(4, auto) [foo] repeat(auto-fill, 3em)")
; | 57 testInvalidSyntax("20px [bar] repeat(4, auto) [foo] repeat(auto-fill, 3em)")
; |
60 </script> | 58 </script> |
OLD | NEW |