Ziele Untersuchung
mit Columbo Integrität von
Datenbanken Interaktion und
Portierbarkeit Ergonomie der
Schnittstellen

Angebot Produkte Projekt Beratung

Mittel Analytik Modellierung Sprachen Algebra Logik Hardware Denken Kreativität

Zusammenhänge Gesellschaft Wirtschaft Branche Firma

Benutzer


products/Sources/formale Sprachen/C/Firefox/dom/grid/test/chrome/ (Firefox Browser Version 136.0.1^©) Datei vom 10.2.2025 mit Größe 16 kB

Quelle test_grid_repeat_auto_fill.html

Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/dom/grid/test/chrome/test_grid_repeat_auto_fill.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: 600px;
  grid-gap: 0px;
  grid-auto-column: 50px;
  background-color: #f00;
}
.grid1 {
  grid-template-columns: 50px 0px repeat(auto-fill, 100px);
}
.grid2 {
  grid-template-columns: 50px 0px [real-before] repeat(auto-fill, [before] 100px [after]) [real-after] 0px [final];
}
.grid3 {
  grid-template-columns: repeat(3, 66px) [real-before] repeat(auto-fill, [before] 100px [after]) [real-after];
}
.grid4 {
  grid-template-columns: repeat(2, 100px) repeat(auto-fill, 50px);
}
.grid5 {
  grid-template-columns: [real-before] repeat(auto-fill, [before] 100px [after]) [real-after];
}
.grid6 {
  grid-template-columns: [first] 0px [real-before] repeat(auto-fill, [before] 100px [after]) [real-after];
}
.grid7 {
  grid-template-columns: [real-before before] repeat(auto-fill, [before] 100px [after]) [after real-after] 0px [final];
}
.grid8 {
  grid-template-columns: [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after];
}
.grid9 {
  grid-template-columns: [real-before] repeat(auto-fill, 100px [after]) [real-after];
}
.grid10 {
  grid-template-columns: [real-before] repeat(auto-fill, [before] 100px) [real-after];
}
.grid11 {
  grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after];
}
.grid12 {
  grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after] 10px;
}
.grid13 {
  grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) 10px;
}
.grid14 {
  grid-template-columns: [real-before] repeat(auto-fill, [before] 1000px [after]) 10px;
}
.grid15 {
  grid-template-columns: repeat(auto-fill, [before] 1000px [after]) 10px;
}
.grid16 {
  grid-template-columns: repeat(auto-fill, [before] 1000px [after]) [real-after] 10px;
}
.grid17 {
  grid-template-columns: repeat(auto-fill, [before] 1000px [after]) [real-after] 10px [final];
}
.grid18 {
  grid-template-columns: repeat(auto-fill, [before] 1000px [after]) 10px [final];
}
.grid19 {
  grid-template-columns: repeat(auto-fill, [before] 1000px);
}
.grid20 {
  grid-column: 4 / -1;
  grid-template-columns: subgrid repeat(auto-fill, [x]);
}
.grid21 {
  grid-column: 4 / -1;
  grid-template-columns: subgrid [a] repeat(auto-fill, [x]) [b];
}

.box {
  background-color: #444;
  color: #fff;
}
.a {
  grid-column: auto;
}
.b {
  grid-column: 4;
}
.c {
  grid-column: 6;
}
.d {
  grid-column: 7;
}
.e {
  grid-column: 5;
}
.f {
  grid-column: -9;
}

</style>

<script>
"use strict";

SimpleTest.waitForExplicitFinish();

function testLines(elementName, grid, expectedValues) {
  is(grid.cols.lines.length, expectedValues.length, elementName + " has expected number of lines.");

  for (let i = 0; i < grid.cols.lines.length; i++) {
    // 'number' is optional.
    if (typeof(expectedValues[i].number) != "undefined") {
      is(grid.cols.lines[i].number, expectedValues[i].number, elementName + " line " + (i + 1) + " has expected number.");
    } else {
      // If 'number' is omitted, assume that first line is line 1 and increase from there.
      is(grid.cols.lines[i].number, (i + 1), elementName + " line " + (i + 1) + " has expected number.");
    }

    // 'negativeNumber' is optional.
    if (typeof(expectedValues[i].negativeNumber) != "undefined") {
      // Check for the supplied number.
      is(grid.cols.lines[i].negativeNumber, expectedValues[i].negativeNumber, elementName + " line " + (i + 1) + " has expected negativeNumber.");
    }

    // 'start' is optional.
    if (typeof(expectedValues[i].start) != "undefined") {
      is(grid.cols.lines[i].start, expectedValues[i].start, elementName + " line " + (i + 1) + " has expected start.");
    }

    // 'breadth' is optional.
    if (typeof(expectedValues[i].breadth) != "undefined") {
      is(grid.cols.lines[i].breadth, 0, elementName + " line " + (i + 1) + " has zero breadth.");
    }

    // 'names' is optional.
    if (typeof(expectedValues[i].names) != "undefined") {
      is(grid.cols.lines[i].names + "", expectedValues[i].names, elementName + " line " + (i + 1) + " has expected names.");
    }

    // 'todo_names' is optional.
    if (typeof(expectedValues[i].todo_names) != "undefined") {
      todo_is(grid.cols.lines[i].names + "", expectedValues[i].todo_names, elementName + " line " + (i + 1) + " has expected names.");
    }
  }
}

function runTests() {
  let wrapper;
  let grid;
  let expectedValues;

  wrapper = document.getElementById("wrapper1");
  grid = wrapper.getGridFragments()[0];

  // test auto-fill count
  is(grid.cols.tracks.length, 7, "Grid column track array reports removed auto-fill columns.");

  // test resolved value of grid-template-columns
  let templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
  is(templateColumnsText, "50px 0px 100px 100px 100px 100px 100px",
    "Resolved value of grid-template-columns is as expected.");

  // test starts, breadths, and states
  expectedValues = [
    { "start": 0,
      "breadth": 50,
      "state": "static" },
    { "start": 50,
      "breadth": 0,
      "state": "static" },
    { "start": 50,
      "breadth": 100,
      "state": "repeat" },
    { "start": 150,
      "breadth": 100,
      "state": "repeat" },
    { "start": 250,
      "breadth": 100,
      "state": "repeat" },
    { "start": 350,
      "breadth": 100,
      "state": "repeat" },
    { "start": 450,
      "breadth": 100,
      "state": "repeat" },
  ];
  for (let i = 0; i < grid.cols.tracks.length; i++) {
    is(grid.cols.tracks[i].start, expectedValues[i].start, "Column " + (i + 1) + " has expected start.");
    is(grid.cols.tracks[i].breadth, expectedValues[i].breadth, "Column " + (i + 1) + " has expected breadth.");
    is(grid.cols.tracks[i].state, expectedValues[i].state, "Column " + (i + 1) + " has expected state.");
  }

  wrapper = document.getElementById("wrapper2");
  grid = wrapper.getGridFragments()[0];

  // test auto-fill count
  is(grid.cols.lines.length, 9, "Grid column line array reports removed auto-fill columns.");

  // test resolved value of grid-template-columns
  templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
  is(templateColumnsText, "50px 0px [real-before before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after] 0px [final]",
    "Resolved value of grid-template-columns is as expected.");

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "" },
    { "start": 50,
      "names": "" },
    { "start": 50,
      "names": "real-before,before" },
    { "start": 150,
      "names": "after,before" },
    { "start": 250,
      "names": "after,before" },
    { "start": 350,
      "names": "after,before" },
    { "start": 450,
      "names": "after,before" },
    { "start": 550,
      "names": "after,real-after" },
    { "start": 550,
      "names": "final" },
  ];
  testLines("wrapper2", grid, expectedValues);

  wrapper = document.getElementById("wrapper3");
  grid = wrapper.getGridFragments()[0];

  // test resolved value of grid-template-columns
  templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
  is(templateColumnsText, "66px 66px 66px [real-before before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after]",
    "Resolved value of grid-template-columns is as expected.");

  wrapper = document.getElementById("wrapper4");
  grid = wrapper.getGridFragments()[0];

  // test auto-fill count of tracks
  is(grid.cols.tracks.length, 10, "Grid column track array respects auto-fill columns.");

  if (grid.cols.tracks.length == 10) {
    // test for static and repeat
    is(grid.cols.tracks[1].state, "static", "Grid column track 2 is marked as static.");
    is(grid.cols.tracks[2].state, "repeat", "Grid column track 3 is marked as repeat.");
  }

  wrapper = document.getElementById("wrapper5");
  grid = wrapper.getGridFragments()[0];

  // test resolved value of grid-template-columns
  templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
  is(templateColumnsText, "[real-before before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after]", "Resolved value of grid-template-columns is as expected.");

  wrapper = document.getElementById("wrapper6");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "first" },
    { "start": 0,
      "names": "real-before,before" },
    { "start": 100,
      "names": "after,before" },
    { "start": 200,
      "names": "after,before" },
    { "start": 300,
      "names": "after,before" },
    { "start": 400,
      "names": "after,before" },
    { "start": 500,
      "names": "after,before" },
    { "start": 600,
      "names": "after,real-after" },
  ];
  testLines("wrapper6", grid, expectedValues);

  wrapper = document.getElementById("wrapper7");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "real-before,before" },
    { "start": 100,
      "names": "after,before" },
    { "start": 200,
      "names": "after,before" },
    { "start": 300,
      "names": "after,before" },
    { "start": 400,
      "names": "after,before" },
    { "start": 500,
      "names": "after,before" },
    { "start": 600,
      "names": "after,real-after" },
    { "start": 600,
      "names": "final" },
  ];
  testLines("wrapper7", grid, expectedValues);

  wrapper = document.getElementById("wrapper8");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "real-before,before" },
    { "start": 1000,
      "names": "after,real-after" },
  ];
  testLines("wrapper8", grid, expectedValues);

  wrapper = document.getElementById("wrapper8b");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "number": 0 },
    { "number": 0 },
    { "number": 0 },
    { "number": 0 },
    { "number": 0 },
    { "number": 0 },
    { "number": 0 },
    { "number": 1,
      "names": "real-before,before" },
    { "number": 2,
      "names": "after,real-after" },
  ];
  testLines("wrapper8b", grid, expectedValues);

  wrapper = document.getElementById("wrapper9");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "real-before" },
    { "start": 100,
      "names": "after" },
    { "start": 200,
      "names": "after" },
    { "start": 300,
      "names": "after" },
    { "start": 400,
      "names": "after" },
    { "start": 500,
      "names": "after" },
    { "start": 600,
      "names": "after,real-after" },
  ];
  testLines("wrapper9", grid, expectedValues);

  wrapper = document.getElementById("wrapper10");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "real-before,before" },
    { "start": 100,
      "names": "before" },
    { "start": 200,
      "names": "before" },
    { "start": 300,
      "names": "before" },
    { "start": 400,
      "names": "before" },
    { "start": 500,
      "names": "before" },
    { "start": 600,
      "names": "real-after" },
  ];
  testLines("wrapper10", grid, expectedValues);

  wrapper = document.getElementById("wrapper11");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "" },
    { "start": 10,
      "names": "real-before,before" },
    { "start": 1010,
      "names": "after,real-after" },
  ];
  testLines("wrapper11", grid, expectedValues);

  wrapper = document.getElementById("wrapper12");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "" },
    { "start": 10,
      "names": "real-before,before" },
    { "start": 1010,
      "names": "after,real-after" },
    { "start": 1020,
      "names": "" },
  ];
  testLines("wrapper12", grid, expectedValues);

  wrapper = document.getElementById("wrapper13");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "" },
    { "start": 10,
      "names": "real-before,before" },
    { "start": 1010,
      "names": "after" },
    { "start": 1020,
      "names": "" },
  ];
  testLines("wrapper13", grid, expectedValues);

  wrapper = document.getElementById("wrapper14");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "real-before,before" },
    { "start": 1000,
      "names": "after" },
    { "start": 1010,
      "names": "" },
  ];
  testLines("wrapper14", grid, expectedValues);

  wrapper = document.getElementById("wrapper15");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "before" },
    { "start": 1000,
      "names": "after" },
    { "start": 1010,
      "names": "" },
  ];
  testLines("wrapper15", grid, expectedValues);

  wrapper = document.getElementById("wrapper16");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "before" },
    { "start": 1000,
      "names": "after,real-after" },
    { "start": 1010,
      "names": "" },
  ];
  testLines("wrapper16", grid, expectedValues);

  wrapper = document.getElementById("wrapper17");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "before" },
    { "start": 1000,
      "names": "after,real-after" },
    { "start": 1010,
      "names": "final" },
  ];
  testLines("wrapper17", grid, expectedValues);

  wrapper = document.getElementById("wrapper18");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "before" },
    { "start": 1000,
      "names": "after" },
    { "start": 1010,
      "names": "final" },
  ];
  testLines("wrapper18", grid, expectedValues);

  wrapper = document.getElementById("wrapper19");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "start": 0,
      "names": "before" },
    { "start": 1000,
      "names": "" },
  ];
  testLines("wrapper19", grid, expectedValues);

  wrapper = document.getElementById("wrapper20");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "names": "x" },
    { "names": "x" },
    { "names": "x" },
    { "names": "x" },
  ];
  testLines("wrapper20", grid, expectedValues);

  wrapper = document.getElementById("wrapper21");
  grid = wrapper.getGridFragments()[0];

  // test starts and names
  expectedValues = [
    { "names": "a" },
    { "names": "x" },
    { "names": "x" },
    { "names": "b" },
  ];
  testLines("wrapper21", grid, expectedValues);

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

  <div id="wrapper1" class="wrapper grid1">
    <div id="boxB" class="box b">B</div>
  </div>

  <br/>
  <div id="wrapper2" class="wrapper grid2">
    <div id="boxB" class="box b">B</div>
    <div id="boxC" class="box c">C</div>
  </div>

  <br/>
  <div id="wrapper3" class="wrapper grid3">
    <div id="boxB" class="box b">B</div>
    <div id="boxC" class="box c">C</div>
    <div id="boxD" class="box d">D</div>
  </div>

  <br/>
  <div id="wrapper4" class="wrapper grid4">
    <div id="boxA" class="box a">A</div>
  </div>

  <br/>
  <div id="wrapper5" class="wrapper grid5">
  </div>

  <br/>
  <div id="wrapper6" class="wrapper grid6">
    <div id="boxB" class="box b">B</div>
  </div>

  <br/>
  <div id="wrapper7" class="wrapper grid7">
    <div id="boxB" class="box b">B</div>
  </div>

  <br/>
  <div id="wrapper8" class="wrapper grid8">
  </div>

  <br/>
  <div id="wrapper8b" class="wrapper grid8">
    <div id="boxF" class="box f">F</div>
  </div>

  <br/>
  <div id="wrapper9" class="wrapper grid9">
    <div id="boxB" class="box b">B</div>
    <div id="boxE" class="box e">E</div>
    <div id="wrapper20" class="wrapper grid20"><x style="grid-column:x">x</x></div>
  </div>

  <br/>
  <div id="wrapper10" class="wrapper grid10">
    <div id="boxB" class="box b">B</div>
    <div id="boxE" class="box e">E</div>
    <div id="wrapper21" class="wrapper grid21"><x style="grid-column:y">y</x></div>
  </div>

  <br/>
  <div id="wrapper11" class="wrapper grid11">
  </div>

  <br/>
  <div id="wrapper12" class="wrapper grid12">
  </div>

  <br/>
  <div id="wrapper13" class="wrapper grid13">
  </div>

  <br/>
  <div id="wrapper14" class="wrapper grid14">
  </div>

  <br/>
  <div id="wrapper15" class="wrapper grid15">
  </div>

  <br/>
  <div id="wrapper16" class="wrapper grid16">
  </div>

  <br/>
  <div id="wrapper17" class="wrapper grid17">
  </div>

  <br/>
  <div id="wrapper18" class="wrapper grid18">
  </div>

  <br/>
  <div id="wrapper19" class="wrapper grid19">
  </div>

</body>
</html>

Messung V0.5 in Prozent

¤ Diese beiden folgenden Angebotsgruppen bietet das Unternehmen0.13Angebot (Wie Sie bei der Firma Beratungs- und Dienstleistungen beauftragen können 2026-06-06) ¤

*Eine klare Vorstellung vom Zielzustand

Wurzel

Suchen

PVS Prover

Isabelle Prover

NIST Cobol Testsuite

Cephes Mathematical Library

Vienna Development Method

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.