Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/C/Firefox/dom/grid/test/chrome/   (Browser von der Mozilla Stiftung Version 136.0.1©)  Datei vom 10.2.2025 mit Größe 16 kB image not shown  

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
C=92 H=96 G=93

¤ Dauer der Verarbeitung: 0.5 Sekunden  ¤

*© Formatika GbR, Deutschland




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.