Quelle test_grid_object.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/dom/grid/test/chrome/test_grid_object.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<style>
body {
  margin: 40px;
}
.wrapper {
  display: grid;
  width: 400px;
  grid-gap: 10px;
  grid-template-columns: 100px 1fr 1fr 100px;
}
.oh {
  overflow: hidden;
}
.box {
  background-color: #444;
  color: #fff;
}
</style>

<script>
"use strict";

SimpleTest.waitForExplicitFinish();

function runTests() {
  // Test 1: elements styled with display:grid
  let idsWithGrid = [
    "gridDiv",
    "gridFieldset",
    "gridButton",
    "gridDivOh",
    "gridFieldsetOh",
    "gridButtonOh",
  ];

  for (let id of idsWithGrid) {
    let wrapper = document.getElementById(id);

    // test function existence
    is(typeof(wrapper.getGridFragments), "function",
      id + ": getGridFragments function exists."
    );

    // test that wrapper has one grid
    let gridFragments = wrapper.getGridFragments();
    is(gridFragments.length, 1,
      id + ": one grid on an un-fragmented display:grid styled element."
    );

    // test that the grid has cols and rows properties
    if (gridFragments.length) {
      let grid = gridFragments[0];
      isnot(typeof(grid.cols), "undefined", id + ": Grid.cols property exists.");
      isnot(typeof(grid.rows), "undefined", id + ": Grid.rows property exists.");
    }
  }

  // Test 2: elements styled without display:grid
  let idsWithoutGrid = [
    "boxA",
  ];

  for (let id of idsWithoutGrid) {
    let wrapper = document.getElementById(id);

    // test that wrapper has no grid
    let gridFragments = wrapper.getGridFragments();
    is(gridFragments.length, 0,
      id + ": no grid on element."
    );
  }

  SimpleTest.finish();
}
</script>
</head>
<body onLoad="runTests();">

  <div id="gridDiv" class="wrapper">
    <div id="boxA" class="box">A</div>
  </div>

  <fieldset id="gridFieldset" class="wrapper">
  <legend>a fieldset</legend>
  <label for="name">name</label>
  <input id="name">
  </fieldset>

  <button id="gridButton" class="wrapper">
  <span style="grid-row:2">test</span>
  </button>

  <div id="gridDivOh" class="wrapper oh">
    <div id="boxAOh" class="box">A</div>
  </div>

  <fieldset id="gridFieldsetOh" class="wrapper oh">
  <legend>a fieldset</legend>
  <label for="nameOh">name</label>
  <input id="nameOh">
  </fieldset>

  <button id="gridButtonOh" class="wrapper oh">
  <span style="grid-row:2">test</span>
  </button>

</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.0 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.