Quelle test_grid_computed_values.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/style/test/test_grid_computed_values.html

<!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>

Messung V0.5

¤ Dauer der Verarbeitung: 0.9 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.