layout/style/test/test_grid_item_shorthands.html
author Cristian Tuns <ctuns@mozilla.com>
Fri, 24 Sep 2021 14:42:22 -0400
changeset 593147 0b4005ebc9776ff43d99d1427c1a1fd2e14d9a44
parent 174895 9c4e79053a4e05f0b230e142184251720be6dd91
permissions -rw-r--r--
Backed out changeset dd075a074e45 (bug 1730518) for causing content crashes (bug 1732479). CLOSED TREE

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>Test parsing of grid item shorthands (grid-column, grid-row, grid-area)</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>

// For various specified values of the grid-column and grid-row shorthands,
// test the computed values of the corresponding longhands.
var grid_column_row_test_cases = [
    {
        specified: "3 / 4",
        expected_start: "3",
        expected_end: "4",
    },
    {
        specified: "foo / span bar",
        expected_start: "foo",
        expected_end: "span bar",
    },
    // http://dev.w3.org/csswg/css-grid/#placement-shorthands
    // "When the second value is omitted,
    //  if the first value is a <custom-ident>,
    //  the grid-row-end/grid-column-end longhand
    //  is also set to that <custom-ident>;
    //  otherwise, it is set to auto."
    {
        specified: "foo",
        expected_start: "foo",
        expected_end: "foo",
    },
    {
        specified: "7",
        expected_start: "7",
        expected_end: "auto",
    },
    {
        specified: "foo 7",
        expected_start: "7 foo",
        expected_end: "auto",
    },
    {
        specified: "span foo",
        expected_start: "span foo",
        expected_end: "auto",
    },
    {
        specified: "foo 7 span",
        expected_start: "span 7 foo",
        expected_end: "auto",
    },
    {
        specified: "7 span",
        expected_start: "span 7",
        expected_end: "auto",
    },
];

// For various specified values of the grid-area shorthand,
// test the computed values of the corresponding longhands.
var grid_area_test_cases = [
    {
        specified: "10 / 20 / 30 / 40",
        gridRowStart: "10",
        gridColumnStart: "20",
        gridRowEnd: "30",
        gridColumnEnd: "40",
    },
    {
        specified: "foo / bar / baz",
        gridRowStart: "foo",
        gridColumnStart: "bar",
        gridRowEnd: "baz",
        gridColumnEnd: "bar",
    },
    {
        specified: "foo / span bar / baz",
        gridRowStart: "foo",
        gridColumnStart: "span bar",
        gridRowEnd: "baz",
        gridColumnEnd: "auto",
    },
    {
        specified: "foo / bar",
        gridRowStart: "foo",
        gridColumnStart: "bar",
        gridRowEnd: "foo",
        gridColumnEnd: "bar",
    },
    {
        specified: "foo / 4",
        gridRowStart: "foo",
        gridColumnStart: "4",
        gridRowEnd: "foo",
        gridColumnEnd: "auto",
    },
    {
        specified: "foo",
        gridRowStart: "foo",
        gridColumnStart: "foo",
        gridRowEnd: "foo",
        gridColumnEnd: "foo",
    },
    {
        specified: "7",
        gridRowStart: "7",
        gridColumnStart: "auto",
        gridRowEnd: "auto",
        gridColumnEnd: "auto",
    },
]

grid_column_row_test_cases.forEach(function(test_case) {
    ["Column", "Row"].forEach(function(axis) {
        var shorthand = "grid" + axis;
        var start_longhand = "grid" + axis + "Start";
        var end_longhand = "grid" + axis + "End";
        test(function() {
            var element = document.createElement('div');
            document.body.appendChild(element);
            element.style[shorthand] = test_case.specified;
            var computed = window.getComputedStyle(element);
            assert_equals(computed[start_longhand], test_case.expected_start);
            assert_equals(computed[end_longhand], test_case.expected_end);
        }, "test parsing of '" + shorthand + ": " + test_case.specified + "'");
    });
});

grid_area_test_cases.forEach(function(test_case) {
    test(function() {
        var element = document.createElement('div');
        document.body.appendChild(element);
        element.style.gridArea = test_case.specified;
        var computed = window.getComputedStyle(element);
        [
            "gridRowStart", "gridColumnStart", "gridRowEnd", "gridColumnEnd"
        ].forEach(function(longhand) {
            assert_equals(computed[longhand], test_case[longhand], longhand);
        });
    }, "test parsing of 'grid-area: " + test_case.specified + "'");
});

</script>

</body>
</html>