test_grid_computed_values.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

  <meta charset=utf-8>

  <title>Test computed grid values</title>

  <link rel="author" title="Tobias Schneider" href="mailto:schneider@jancona.com">

  <script src="/resources/testharness.js"></script>

  <script src="/resources/testharnessreport.js"></script>

  <link rel='stylesheet' href='/resources/testharness.css'>

  <style>

    #grid {

      display: grid;

      width: 500px;

      height: 400px;

      grid-template-columns:

        [a]     auto

        [b]     minmax(min-content, 1fr)

        [b c d] repeat(2, [e] 40px)

                repeat(5, auto);

      grid-template-rows:

        [a]       minmax(min-content, 1fr)

        [b]       auto

        [b c d e] 30px 30px

                  auto auto;

      grid-auto-columns: 3fr;

      grid-auto-rows: 2fr;

    #grid2 {

      display: grid;

      width: 500px;

      height: 400px;

      grid-auto-columns: 10px;

      grid-auto-rows: 2fr;

  </style>

</head>

<body>

<div>

  <div id="grid">

    <div style="grid-column-start:1; width:50px"></div>

    <div style="grid-column-start:9; width:50px"></div>

  </div>

  <div id="grid2">

    <div style="grid-column: span X / 1"></div>

    <div style="grid-column: 1 / span X 2"></div>

  </div>

<div>

<script>

  var gridElement = document.getElementById("grid");

  function test_grid_template(assert_fn, width, height, desc) {

    test(function() {

      assert_fn(getComputedStyle(gridElement).gridTemplateColumns,

                "[a] 50px [b] " + width + "px [b c d e] 40px [e] 40px 0px 0px 0px 0px 50px");

      assert_fn(getComputedStyle(gridElement).gridTemplateRows,

                "[a] " + height + "px [b] 0px [b c d e] 30px 30px 0px 0px");

    }, desc);

  test_grid_template(assert_equals, 320, 340, "test computed grid-template-{columns,rows} values");

  gridElement.style.overflow = 'scroll';

  var v_scrollbar = gridElement.offsetWidth - gridElement.clientWidth;

  var h_scrollbar = gridElement.offsetHeight - gridElement.clientHeight;

  test_grid_template(assert_equals, 320 - v_scrollbar, 340 - h_scrollbar,

                     "test computed grid-template-{columns,rows} values, overflow: scroll");

  gridElement.style.width = '600px';

  gridElement.style.overflow = 'visible';

  test_grid_template(assert_equals, 420, 340,

                     "test computed grid-template-{columns,rows} values, after reflow");

  gridElement.style.display = 'none';

  test_grid_template(assert_not_equals, 420, 340,

                     "test computed grid-template-{columns,rows} values, display: none");

  gridElement.style.display = 'grid';

  gridElement.parentNode.style.display = 'none';

  test_grid_template(assert_not_equals, 420, 340,

                     "test computed grid-template-{columns,rows} values, display: none on parent");

  gridElement.parentNode.style.display = '';

  function test_grid2() {

    gridElement = document.getElementById("grid2");

    test(function() {

      const expectedCols = SpecialPowers.getBoolPref("layout.css.serialize-grid-implicit-tracks")

        ? "10px 10px 10px"

        : "none";

      const expectedRows = SpecialPowers.getBoolPref("layout.css.serialize-grid-implicit-tracks")

        ? "400px"

        : "none";

      assert_equals(getComputedStyle(gridElement).gridTemplateColumns,

                    expectedCols);

      assert_equals(getComputedStyle(gridElement).gridTemplateRows,

                    expectedRows);

    }, "test #grid2 computed grid-template-{columns,rows} values");

  test(function() {

    assert_equals(getComputedStyle(gridElement).gridAutoColumns, "3fr");

    assert_equals(getComputedStyle(gridElement).gridAutoRows, "2fr");

    test_grid2();

  }, "test computed grid-auto-{columns,rows} values");

</script>

</body>

</html>