| <!DOCTYPE html> |
| <script src="../../resources/js-test.js"></script> |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <style> |
| body { font-size: 10px; } |
| </style> |
| |
| <body style="width: 800px; height: 600px;"> |
| </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] 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]"); |
| testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] minmax(300px, 1fr))", "repeat(auto-fill, [foo] minmax(175px, max-content) [bar])", "[foo bar] 400px [foo bar] 400px", "[foo] 175px [bar foo] 175px [bar foo] 175px [bar]"); |
| testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(50px, 100px)) repeat(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"); |
| testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat(auto-fit, 24em [foo bar])", "none", "none"); |
| testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr))", "repeat(auto-fit, [foo] minmax(20em, max-content) [bar])", "none", "none"); |
| testGridDefinitionsSetJSValues("repeat(auto-fit, minmax(300px, min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(30em, max-content) [bar]) repeat(2, [foo] 1em)", "20px 20px", "60px [foo] 10px [foo] 10px", "repeat(auto-fit, minmax(300px, min-content)) 20px 20px", "10% repeat(auto-fit, minmax(30em, 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> |
