OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <link href="resources/grid.css" rel="stylesheet"> | |
3 <script src="../../resources/js-test.js"></script> | 2 <script src="../../resources/js-test.js"></script> |
4 <script src="resources/grid-definitions-parsing-utils.js"></script> | 3 <script src="resources/grid-definitions-parsing-utils.js"></script> |
| 4 <style> |
| 5 body { font-size: 10px; } |
| 6 </style> |
5 | 7 |
6 <body> | 8 <body style="width: 800px; height: 600px;"> |
7 </body> | 9 </body> |
8 <script> | 10 <script> |
9 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'); |
10 | 12 |
11 debug("Test auto-repeat syntax."); | 13 debug("Test auto-repeat syntax."); |
12 testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] 10px)", "repeat(
auto-fill, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "repeat(auto-fil
l, [foo bar] 10px)", "repeat(auto-fill, 2em [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]"); |
13 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])"); | 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]"); |
14 testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(10px, 100px)) repea
t(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, min
max(2em, 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(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"
); |
15 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 10px)", "repeat(a
uto-fit, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "repeat(auto-fit,
[foo bar] 10px)", "repeat(auto-fit, 2em [foo bar])"); | 17 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat(
auto-fit, 24em [foo bar])", "none", "none"); |
16 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(au
to-fit, [foo] minmax(2em, max-content) [bar])"); | 18 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr
))", "repeat(auto-fit, [foo] minmax(20em, max-content) [bar])", "none", "none"); |
17 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"); | 19 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"); |
18 | 20 |
19 debug(""); | 21 debug(""); |
20 debug("Test invalid repeat syntax."); | 22 debug("Test invalid repeat syntax."); |
21 function testInvalidSyntax(gridColumn) { | 23 function testInvalidSyntax(gridColumn) { |
22 element = document.createElement("div"); | 24 element = document.createElement("div"); |
23 document.body.appendChild(element); | 25 document.body.appendChild(element); |
24 element.style.gridTemplateColumns = gridColumn; | 26 element.style.gridTemplateColumns = gridColumn; |
25 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV
alue('grid-template-columns')", "none"); | 27 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV
alue('grid-template-columns')", "none"); |
26 document.body.removeChild(element); | 28 document.body.removeChild(element); |
27 } | 29 } |
(...skipping 20 matching lines...) Expand all Loading... |
48 testInvalidSyntax("repeat(auto-fit, 10em [bar]) auto repeat(auto-fit, [foo]
2em)"); | 50 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)"); | 51 testInvalidSyntax("repeat(auto-fill, [foo] 1em [bar]) auto repeat(auto-fit,
[foo] 32px)"); |
50 testInvalidSyntax("repeat(auto-fill, 1em [bar]) repeat(3, max-content [last]
) repeat(auto-fit, 32px)"); | 52 testInvalidSyntax("repeat(auto-fill, 1em [bar]) repeat(3, max-content [last]
) repeat(auto-fit, 32px)"); |
51 | 53 |
52 // <auto-repeat> requires definite minimum track sizes. | 54 // <auto-repeat> requires definite minimum track sizes. |
53 testInvalidSyntax("repeat(auto-fill, 10px) repeat(10, minmax(min-content, au
to))"); | 55 testInvalidSyntax("repeat(auto-fill, 10px) repeat(10, minmax(min-content, au
to))"); |
54 testInvalidSyntax("auto repeat(auto-fit, [foo] 10px)"); | 56 testInvalidSyntax("auto repeat(auto-fit, [foo] 10px)"); |
55 testInvalidSyntax("10% repeat(auto-fit, [foo] 10px) min-content"); | 57 testInvalidSyntax("10% repeat(auto-fit, [foo] 10px) min-content"); |
56 testInvalidSyntax("20px [bar] repeat(4, auto) [foo] repeat(auto-fill, 3em)")
; | 58 testInvalidSyntax("20px [bar] repeat(4, auto) [foo] repeat(auto-fill, 3em)")
; |
57 </script> | 59 </script> |
OLD | NEW |