<!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.");
    testGridTemplatesSetJSValues("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]");
    testGridTemplatesSetJSValues("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]");
    testGridTemplatesSetJSValues("repeat(auto-fill, minmax(50px, 100px)) repeat(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");
    testGridTemplatesSetJSValues("[start] 10% repeat(auto-fill, [foo bar] 200px) [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]");
    testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat(auto-fit, 24em [foo bar])", "[foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px", "0px [foo bar] 0px [foo bar]");
    testGridTemplatesSetJSValues("repeat(auto-fill, [start] 200px 100px [end])", "100px [foo] repeat(auto-fill, [a] 2em [b] 10% [c]) [bar] 3em", "[start] 200px 100px [end start] 200px 100px [end]", "100px [foo a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c bar] 30px");
    testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr))", "repeat(auto-fit, [foo] minmax(20em, max-content) [bar])", "[foo bar] 0px [foo bar] 0px", "[foo] 0px [bar foo] 0px [bar foo] 0px [bar]");
    testGridTemplatesSetJSValues("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)", "0px 0px 20px 20px", "60px 0px [bar 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");
    testGridTemplatesSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c d] 20px [e]", "repeat(auto-fit, [z] 100px [y]) [a b] 30px [c d] 20px [e]", "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c d] 20px [e]", "[z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y a b] 30px [c d] 20px [e]");
    testGridTemplatesSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) repeat(1, [b] 30px [c]) 20px [e]", "[a b] 30px [c d] 20px [e] repeat(auto-fit, [z] 100px [y])", "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c] 20px [e]", "[a b] 30px [c d] 20px [e z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y]", "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c] 20px [e]");
    testGridTemplatesSetJSValues("repeat(auto-fit, [start] 200px 100px [end])", "100px [foo] repeat(auto-fit, [a] 2em [b] 10% [c]) [bar] 3em", "[start] 0px 0px [end start] 0px 0px [end]", "100px [foo a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c bar] 30px");

    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, [bar] auto)");
    testInvalidSyntax("repeat(auto-fill, 20px min-content)");
    testInvalidSyntax("repeat(auto-fill, auto [foo bar] 10px)");
    testInvalidSyntax("repeat(auto-fill,)");
    testInvalidSyntax("repeat(auto-fill, [foo])");
    testInvalidSyntax("repeat(auto-fit, 1fr)");
    testInvalidSyntax("repeat(auto-fit, [bar] auto)");
    testInvalidSyntax("repeat(auto-fit, minmax(20px, 30px) auto)");
    testInvalidSyntax("repeat(auto-fit, max-content 2em)");
    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>