layout/style/test/test_grid_container_shorthands.html

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>Test parsing of grid container shorthands (grid-template, grid)</title>
  <link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <link rel='stylesheet' href='/resources/testharness.css'>
</head>
<body>

<script>

var initial_values = {
    gridTemplateAreas: "none",
    gridTemplateRows: "none",
    gridTemplateColumns: "none",
    gridAutoFlow: "row",
    // Computed value for 'auto'
    gridAutoRows: "auto",
    gridAutoColumns: "auto",
};

// For various specified values of the grid-template shorthand,
// test the computed values of the corresponding longhands.
var grid_template_test_cases = [
    {
        specified: "none",
    },
    {
        specified: "40px / 100px",
        gridTemplateRows: "40px",
        gridTemplateColumns: "100px",
    },
    {
        specified: "minmax(auto,1fr) / minmax(auto,1fr)",
        gridTemplateRows: "1fr",
        gridTemplateColumns: "1fr",
    },
    {
        specified: "[foo] 40px [bar] / [baz] 100px [fizz]",
        gridTemplateRows: "[foo] 40px [bar]",
        gridTemplateColumns: "[baz] 100px [fizz]",
    },
    {
        specified: " none/100px",
        gridTemplateRows: "none",
        gridTemplateColumns: "100px",
    },
    {
        specified: "40px/none",
        gridTemplateRows: "40px",
        gridTemplateColumns: "none",
    },
    {
        specified: "40px/repeat(1, 20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(1, 20px)",
    },
    {
        specified: "40px/[a]repeat(1, 20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "[a] repeat(1, 20px)",
    },
    {
        specified: "40px/repeat(1, [a] 20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(1, [a] 20px)",
    },
    {
        specified: "40px/[a]repeat(2, [b]20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "[a] repeat(2, [b] 20px)",
    },
    {
        specified: "40px/[a]repeat(2, 20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "[a] repeat(2, 20px)",
    },
    {
        specified: "40px/repeat(2, [a] 20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(2, [a] 20px)",
    },
    {
        specified: "40px/[a]repeat(2, [b]20px)",
        gridTemplateRows: "40px",
        gridTemplateColumns: "[a] repeat(2, [b] 20px)",
    },
    {
        specified: "40px/repeat(2, 20px[a])",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(2, 20px [a])",
    },
    {
        specified: "40px/repeat(2, 20px[a]) [b]",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(2, 20px [a]) [b]",
    },
    {
        specified: "40px/repeat(2, [a] 20px[b]) [c]",
        gridTemplateRows: "40px",
        gridTemplateColumns: "repeat(2, [a] 20px [b]) [c]",
    },
    {
        specified: "40px/[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]",
        gridTemplateRows: "40px",
        gridTemplateColumns: "[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]",
    },
    {
        specified: "'fizz'",
        gridTemplateAreas: "\"fizz\"",
        gridTemplateRows: "auto",
    },
    {
        specified: "[bar] 'fizz'",
        gridTemplateAreas: "\"fizz\"",
        gridTemplateRows: "[bar] auto",
    },
    {
        specified: "'fizz' / [foo] 40px",
        gridTemplateAreas: "\"fizz\"",
        gridTemplateRows: "auto",
        gridTemplateColumns: "[foo] 40px",
    },
    {
        specified: "[bar] 'fizz' / [foo] 40px",
        gridTemplateAreas: "\"fizz\"",
        gridTemplateRows: "[bar] auto",
        gridTemplateColumns: "[foo] 40px",
    },
    {
        specified: "'fizz' 100px / [foo] 40px",
        gridTemplateAreas: "\"fizz\"",
        gridTemplateRows: "100px",
        gridTemplateColumns: "[foo] 40px",
    },
    {
        specified: "[bar] 'fizz' 100px [buzz] \n [a] '.' 200px [b] / [foo] 40px",
        gridTemplateAreas: "\"fizz\" \".\"",
        gridTemplateRows: "[bar] 100px [buzz a] 200px [b]",
        gridTemplateColumns: "[foo] 40px",
    },
    {
        specified: "subgrid / subgrid",
        gridTemplateColumns: "subgrid",
        gridTemplateRows: "subgrid",
    },
    {
        specified: "subgrid [foo] / subgrid",
        gridTemplateColumns: "subgrid",
        gridTemplateRows: "subgrid [foo]",
    },
    {
        specified: "subgrid [foo] repeat(3, [] [a b] [c]) / subgrid",
        gridTemplateColumns: "subgrid",
        gridTemplateRows: "subgrid [foo] repeat(3, [] [a b] [c])",
    },
    {
        // Test that the number of lines is clamped to kMaxLine = 10000.
        // https://drafts.csswg.org/css-grid/#overlarge-grids
        specified: "subgrid [foo] repeat(999999999, [a]) / subgrid",
        gridTemplateColumns: "subgrid",
        gridTemplateRows: "subgrid [foo] repeat(10000, [a])",
    },
    {
        specified: "subgrid [bar]/ subgrid [] [foo",
        gridTemplateColumns: "subgrid [] [foo]",
        gridTemplateRows: "subgrid [bar]",
    },
    {
        specified: "'fizz' repeat(1, 100px)",
    },
    {
        specified: "'fizz' repeat(auto-fill, 100px)",
    },
    {
        specified: "'fizz' / repeat(1, 100px)",
    },
    {
        specified: "'fizz' / repeat(auto-fill, 100px)",
    },
];

grid_test_cases = grid_template_test_cases.concat([
    {
        specified: "auto-flow / 0",
        gridAutoFlow: "row",
        gridAutoRows: "auto",
        gridTemplateColumns: "0px",
    },
    {
        specified: "auto-flow dense / 0",
        gridAutoFlow: "dense",
        gridAutoRows: "auto",
        gridTemplateColumns: "0px",
    },
    {
        specified: "auto-flow minmax(auto,1fr) / none",
        gridAutoFlow: "row",
        gridAutoRows: "1fr",
    },
    {
        specified: "auto-flow 40px / none",
        gridAutoFlow: "row",
        gridAutoRows: "40px",
    },
    {
        specified: "none / auto-flow 40px",
        gridAutoFlow: "column",
        gridAutoRows: "auto",
        gridAutoColumns: "40px",
    },
    {
        specified: "none / auto-flow minmax(auto,1fr)",
        gridAutoFlow: "column",
        gridAutoRows: "auto",
        gridAutoColumns: "1fr",
    },
    {
        specified: "0 / auto-flow dense auto",
        gridAutoFlow: "column dense",
        gridAutoRows: "auto",
        gridAutoColumns: "auto",
        gridTemplateRows: "0px",
    },
    {
        specified: "dense auto-flow minmax(min-content, 2fr) / 0",
        gridAutoFlow: "dense",
        gridAutoRows: "minmax(min-content, 2fr)",
        gridAutoColumns: "auto",
        gridTemplateColumns: "0px",
    },
    {
        specified: "auto-flow 40px / 100px",
        gridAutoFlow: "row",
        gridAutoRows: "40px",
        gridAutoColumns: "auto",
        gridTemplateColumns: "100px",
    },
]);

function run_tests(test_cases, shorthand, subproperties) {
    test_cases.forEach(function(test_case) {
        test(function() {
            var element = document.createElement('div');
            document.body.appendChild(element);
            element.style[shorthand] = test_case.specified;
            var computed = window.getComputedStyle(element);
            subproperties.forEach(function(longhand) {
                assert_equals(
                    computed[longhand],
                    test_case[longhand] || initial_values[longhand],
                    longhand
                );
            });
        }, "test parsing of 'grid-template: " + test_case.specified + "'");
    });
}

run_tests(grid_template_test_cases, "gridTemplate", [
    "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);

run_tests(grid_test_cases, "grid", [
    "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
    "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]);

</script>
</body>
</html>