Quelle test_grid_fragmentation.html Sprache: HTML

products/sources/formale Sprachen/C/Firefox/dom/grid/test/chrome/test_grid_fragmentation.html

<!DOCTYPE HTML>

<html><head>
  <meta charset="utf-8">
  <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page</title>
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
  <link rel="match" href="grid-fragmentation-001-ref.html">

  <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 type="text/css">
html,body {
    color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
body { overflow:hidden; }

.columns {
  position:relative;
      -ms-columns: 5;
  -webkit-columns: 5;
          columns: 5;
      -ms-column-fill: auto;
  -webkit-column-fill: auto;
          column-fill: auto;
  border: 2px dashed;
  margin-bottom: 5px;
}

.grid {
  display: grid;
  grid-template-columns: 30px 30px 30px;
  grid-auto-rows: 50px;
  grid-gap: 12px;
  border:5px solid;
  align-content: start;
}
span { background:lime; border:1px solid black; }
x { display:block; height:20px; }

</style>

<script>
"use strict";

SimpleTest.waitForExplicitFinish();

function runTests() {
  var wrapper = document.getElementById("wrapper");
  var fragments = wrapper.getGridFragments();

  // test fragments of the grid
  is(fragments.length, 2, "Grid is split into two fragments.");

  if (fragments.length == 2) {
    var grid0 = fragments[0];
    var grid1 = fragments[1];

    // test that both fragments have one row track and two lines
    is(grid0.rows.tracks.length, 1, "Fragment 0 has one row track.");
    is(grid0.rows.lines.length, 2, "Fragment 0 has two row lines.");
    is(grid1.rows.tracks.length, 1, "Fragment 1 has one row track.");
    is(grid1.rows.lines.length, 2, "Fragment 1 has two row lines.");
  }

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

<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
<div style="padding-top:10px; background:grey">
<div id="wrapper" class="grid">
<span style="grid-row:span 2"><x></x></span>
<span style="height:60px; background:cyan"><x></x></span>
<span style="align-self:end; background:pink"><x></x></span>
<span style="grid-row:1; height:60px"><x></x></span>
</div></div></div>

</body>
</html>

Messung V0.5

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