gecko-dev/layout/style/test/test_grid_shorthand_seriali...

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>Test serialization of CSS 'grid' shorthand property</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 isGridTemplateSubgridValueEnabled =
    SpecialPowers.getBoolPref("layout.css.grid-template-subgrid-value.enabled");

var initial_values = {
    gridTemplateAreas: "none",
    gridTemplateRows: "none",
    gridTemplateColumns: "none",
    gridAutoFlow: "row",
    gridAutoRows: "auto",
    gridAutoColumns: "auto",
    gridRowGap: "0px",
    gridColumnGap: "0px",
};

// For various specified values of the 'grid' subproperties,
// test the serialization of the shorthand.
var grid_test_cases = [
    {
        gridTemplateColumns: "100px",
        shorthand: "none / 100px",
    },
    {
        gridTemplateRows: "40px",
        shorthand: "40px / none",
    },
    {
        gridTemplateRows: "40px",
        gridTemplateColumns: "subgrid",
        shorthand: isGridTemplateSubgridValueEnabled ? "40px / subgrid" : "",
    },
    {
        gridTemplateRows: "[foo] 40px [bar]",
        gridTemplateColumns: "[baz] 100px [fizz]",
        shorthand: "[foo] 40px [bar] / [baz] 100px [fizz]",
    },
    {
        gridTemplateAreas: "\"a\"",
        gridTemplateRows: "20px",
        shorthand: "\"a\" 20px",
    },
    {
        gridTemplateAreas: "\"a\"",
        gridTemplateRows: "[foo] 20px [bar]",
        shorthand: "[foo] \"a\" 20px [bar]",
    },
    // Combinations of longhands that make the shorthand non-serializable:
    {
        gridTemplateAreas: "\"a\"",
        gridTemplateRows: "20px 100px",
        shorthand: "",
    },
    {
        gridTemplateAreas: "\"a\" \"b\"",
        gridTemplateRows: "20px",
        shorthand: "",
    },
    {
        gridTemplateAreas: "\"a\"",
        gridTemplateRows: "subgrid",
        shorthand: "",
    },
    {
        gridTemplateAreas: "\"a\"",
        gridTemplateRows: "subgrid [foo]",
        shorthand: "",
    },
    {
        gridTemplateAreas: "\"a\"",
        gridTemplateRows: "20px",
        gridTemplateColumns: "subgrid",
        shorthand: "",
    },
    {
        gridAutoFlow: "row",
        shorthand: "row auto / auto",
    },
    {
        gridAutoRows: "40px",
        shorthand: "row 40px / auto",
    },
    {
        gridAutoFlow: "column dense",
        gridAutoRows: "minmax(min-content, max-content)",
        shorthand: "column dense minmax(min-content, max-content) / auto",
    },
    {
        gridAutoFlow: "row dense",
        gridAutoColumns: "minmax(min-content, 2fr)",
        shorthand: "row dense auto / minmax(min-content, 2fr)",
    },
    {
        gridAutoFlow: "row",
        gridAutoRows: "40px",
        gridAutoColumns: "100px",
        shorthand: "row 40px / 100px",
    },
    {
        gridAutoFlow: "row",
        gridRowGap: "0px",
        shorthand: "row auto / auto",
    },
    {
        gridAutoFlow: "row",
        gridRowGap: "1px",
        shorthand: "",
    },
    {
        gridAutoFlow: "row",
        gridColumnGap: "1px",
        shorthand: "",
    },
];

var grid_important_test_cases = [
    {
        "grid-auto-flow": "row",
        "grid-row-gap": "0px",
        shorthand: "",
    },
    {
        "grid-auto-flow": "row",
        "grid-column-gap": "1px",
        shorthand: "",
    },
];


function run_tests(test_cases, shorthand, subproperties) {
    test_cases.forEach(function(test_case) {
        test(function() {
            var element = document.createElement('div');
            document.body.appendChild(element);
            subproperties.forEach(function(longhand) {
                element.style[longhand] = test_case[longhand] ||
                                          initial_values[longhand];
            });
            assert_equals(element.style[shorthand], test_case.shorthand);
        }, "test shorthand serialization " + JSON.stringify(test_case));
    });
}

function run_important_tests(test_cases, shorthand, subproperties) {
    test_cases.forEach(function(test_case) {
        test(function() {
            var element = document.createElement('div');
            document.body.appendChild(element);
            subproperties.forEach(function(longhand) {
                element.style.setProperty(longhand,
                                          test_case[longhand] || initial_values[longhand],
                                          "important");
            });
            assert_equals(element.style[shorthand], test_case.shorthand);
        }, "test shorthand serialization " + JSON.stringify(test_case));
    });
}

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

run_important_tests(grid_important_test_cases, "grid", [
    "grid-template-areas", "grid-template-columns", "grid-template-rows",
    "grid-auto-flow", "grid-auto-columns", "grid-auto-rows", "grid-column-gap", "grid-row-gap"]);

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