Quelle test_grid_implicit.html Sprache: HTML

products/sources/formale Sprachen/C/Firefox/dom/grid/test/chrome/test_grid_implicit.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;
  grid-gap: 10px;
  grid-auto-columns: 20px;
  grid-auto-rows: 20px;
  background-color: #f00;
}

.template1 {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 50px [areaD-start middle] 50px [areaD-end];
  grid-template-areas: "areaA areaA ....."
             "..... areaC areaC";
}

.template2 {
  grid-template-areas: "..... areaA ......";
    grid-template-columns: [areaA-start] 50px 50px 50px;
}

.template3 {
  grid-template-columns: [areaA-start areaB-end areaC-end areaD-start] 50px [areaA-end areaB-start areaC-start areaD-end];
  grid-template-rows: [areaA-end areaB-start areaC-end] 50px [areaA-start areaB-end areaC-start];
}

.template4 {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 50px;
}

.template5 {
  grid-template-columns: [a-end] 100px [b];
}

.template6 {
  grid-template-columns: [foo-end] 100px [foo-start];
}

.box {
  background-color: #444;
  color: #fff;
}
.a {
  grid-area: areaA;
}
.b {
  grid-row: span got-this-name-implicitly / 2;
  grid-column: areaA-end / span 2;
}
.c {
  grid-area: areaC;
}
.d {
  grid-area: areaD;
}
.e {
  grid-column: -7 / 5;
}
.f {
  grid-column: a-start / a-end;
}
.g {
  grid-column: a-start / 2 a-end;
}
.h {
  grid-column: foo-start;
}
</style>

<script>
"use strict";

SimpleTest.waitForExplicitFinish();

function runTests() {
  // test the first grid wrapper
  let wrapper = document.getElementById("wrapper1");
  let grid = wrapper.getGridFragments()[0];

  // test column and row line counts
  is(grid.cols.lines.length, 6,
    "Grid.cols.lines property has length that respects implicit expansion."
  );
  is(grid.rows.lines.length, 4,
    "Grid.rows.lines property has length that respects implicit expansion."
  );

  if ((grid.cols.lines.length == 6) &&
      (grid.rows.lines.length == 4)) {
    // test explicit / implicit lines
    is(grid.cols.lines[0].type, "explicit", "Grid column line 1 is explicit.");
    is(grid.cols.lines[4].type, "implicit", "Grid column line 5 is implicit.");
    is(grid.cols.lines[5].type, "implicit", "Grid column line 6 is implicit.");

    is(grid.rows.lines[0].type, "implicit", "Grid row line 0 is implicit.");
    is(grid.rows.lines[0].number, 0, "Grid row line 0 has correct number.");
    is(grid.rows.lines[1].type, "explicit", "Grid row line 1 is explicit.");
    is(grid.rows.lines[1].number, 1, "Grid row line 1 has correct number.");
    is(grid.rows.lines[3].type, "explicit", "Grid row line 3 is explicit.");
    is(grid.rows.lines[3].number, 3, "Grid row line 3 has correct number.");

    // test that row line 1 gets the name forced on it by placement of item B
    todo_isnot(grid.rows.lines[0].names.indexOf("got-this-name-implicitly"), -1,
      "Grid row line 1 has the name 'got-this-name-implicitly'."
    );

    // test that row line 3 gets its explicit name
    isnot(grid.rows.lines[2].names.indexOf("middle"), -1,
      "Grid row line 3 has the name 'middle'."
    );

    // test the names of the implicit column lines that were created for area 'areaD'
    isnot(grid.cols.lines[4].names.indexOf("areaD-start"), -1,
      "Grid column line 5 has the name 'areaD-start'."
    );
    isnot(grid.cols.lines[5].names.indexOf("areaD-end"), -1,
      "Grid column line 6 has the name 'areaD-end'."
    );
  }

  // test column and row track counts
  is(grid.cols.tracks.length, 5,
    "Grid.cols.tracks property has length that respects implicit expansion."
  );
  is(grid.rows.tracks.length, 3,
    "Grid.rows.tracks property has length that respects implicit expansion."
  );

  if ((grid.cols.tracks.length == 5) &&
      (grid.rows.tracks.length == 3)) {
    // test explicit / implicit tracks
    is(grid.cols.tracks[0].type, "explicit", "Grid column track 1 is explicit.");
    is(grid.cols.tracks[3].type, "implicit", "Grid column track 4 is implicit.");
    is(grid.cols.tracks[4].type, "implicit", "Grid column track 5 is implicit.");

    is(grid.rows.tracks[0].type, "implicit", "Grid row track 1 is implicit.");
    is(grid.rows.tracks[1].type, "explicit", "Grid row track 2 is explicit.");
    is(grid.rows.tracks[2].type, "explicit", "Grid row track 3 is explicit.");
  }

  // test area count
  is(grid.areas.length, 3,
    "Grid.areas property has length that respects implicit expansion."
  );

  for (let i = 0; i < grid.areas.length; i++) {
    let area = grid.areas[i];
    if (area.name == "areaD") {
      is(area.type, "implicit", area.name + " is implicit.");

      // test lines of implicit areas
      is(area.rowStart, 3, area.name + " has start row line of 3.");
      is(area.rowEnd, 4, area.name + " has end row line of 4.");
      is(area.columnStart, 5, area.name + " has start column line of 5.");
      is(area.columnEnd, 6, area.name + " has end column line of 6.");
    } else {
      is(area.type, "explicit", area.name + " is explicit.");
    }
  }

  // test the second grid wrapper
  wrapper = document.getElementById("wrapper2");
  grid = wrapper.getGridFragments()[0];

  // test column and row line counts
  is(grid.cols.lines.length, 4,
    "Grid.cols.lines property doesn't expand due to an explicit line declaration."
  );
  is(grid.rows.lines.length, 2,
    "Grid.rows.lines property has length that respects implicit expansion."
  );

  // test area count
  is(grid.areas.length, 1,
    "Grid.areas property has length that respects implicit expansion."
  );

  for (let i = 0; i < grid.areas.length; i++) {
    let area = grid.areas[i];
    if (area.name == "areaA") {
      is(area.type, "implicit", area.name + " is implicit.");

      // test lines of implicit areas
      is(area.rowStart, 1, area.name + " has start row line of 1.");
      is(area.rowEnd, 2, area.name + " has end row line of 2.");
      is(area.columnStart, 1, area.name + " has start column line of 1.");
      is(area.columnEnd, 3, area.name + " has end column line of 3.");
    }
  }

  // test the third grid wrapper
  wrapper = document.getElementById("wrapper3");
  grid = wrapper.getGridFragments()[0];

  // test column and row line counts
  is(grid.cols.lines.length, 2,
    "Grid.cols.lines property doesn't expand due to an explicit line declaration."
  );
  is(grid.rows.lines.length, 2,
    "Grid.rows.lines property doesn't expand due to an explicit line declaration."
  );

  if (grid.cols.lines.length == 2 && grid.rows.lines.length == 2) {
    // check that areaC gets only the explicit line names and
    // doesn't get the implicit line names
    is(grid.cols.lines[0].names.indexOf("areaC-start"), -1,
      "Grid row line 1 doesn't have the name 'areaC-start'."
    );

    isnot(grid.cols.lines[0].names.indexOf("areaC-end"), -1,
      "Grid row line 1 has the name 'areaC-end'."
    );

    isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1,
      "Grid row line 2 has the name 'areaC-start'."
    );

    is(grid.cols.lines[1].names.indexOf("areaC-end"), -1,
      "Grid row line 2 doesn't have the name 'areaC-end'."
    );
  }

  // test area count
  is(grid.areas.length, 4,
    "Grid.areas property reports 4 areas."
  );

  for (let i = 0; i < grid.areas.length; i++) {
    let area = grid.areas[i];
    if (area.name == "areaC") {
      // test lines of implicit area
      is(area.rowStart, 1, area.name + " has start row line of 1.");
      is(area.rowEnd, 2, area.name + " has end row line of 2.");
      is(area.columnStart, 1, area.name + " has start column line of 1.");
      is(area.columnEnd, 2, area.name + " has end column line of 2.");
    }
  }

  // test the fourth grid wrapper
  wrapper = document.getElementById("wrapper4");
  grid = wrapper.getGridFragments()[0];

  // test column and row line counts
  is(grid.cols.lines.length, 8,
    "Grid.cols.lines property expands properly with implicit columns on both sides."
  );
  is(grid.rows.lines.length, 2,
    "Grid.rows.lines property is as expected"
  );

  if (grid.cols.lines.length == 8) {
    // check that all the lines get correct implict/explicit type and number
    let expectedType = [
      "implicit",
      "implicit",
      "implicit",
      "explicit",
      "explicit",
      "explicit",
      "explicit",
      "implicit",
    ];
    let expectedNumber = [
      0,
      0,
      0,
      1,
      2,
      3,
      4,
      5,
    ];
    let expectedNegativeNumber = [
      -7,
      -6,
      -5,
      -4,
      -3,
      -2,
      -1,
      0,
    ];

    for (let i = 0; i < grid.cols.lines.length; i++) {
      let line = grid.cols.lines[i];
      is(line.type, expectedType[i], "Line index " + i + " has expected type.");
      is(line.number, expectedNumber[i], "Line index " + i + " has expected number.");
      is(line.negativeNumber, expectedNegativeNumber[i], "Line index " + i + " has expected negative number.");
    }
  }

  // Test the fifth grid wrapper
  wrapper = document.getElementById("wrapper5");
  grid = wrapper.getGridFragments()[0];

  // Test that lineName-reversed implicit areas have the correct names.
  for (let i = 0; i < grid.areas.length; i++) {
    let area = grid.areas[i];
    // test the resulting start/end lines of the areas has:
    // Start line: [a-end]
    // End Line: [a-start]
    if (area.name == "a") {
      const startLineNames = grid.cols.lines[area.columnStart - 1].names;
      const endLineNames = grid.cols.lines[area.columnEnd - 1].names;

      isnot(startLineNames.indexOf("a-end"), -1,
        `Grid column line ${area.columnStart} has the name a-end`);
      is(startLineNames.indexOf("a-start"), -1,
        `Grid column line ${area.columnStart} does not have the name a-start`);

      isnot(endLineNames.indexOf("a-start"), -1,
        `Grid column line ${area.columnEnd} has the name a-start`);
      todo_isnot(endLineNames.indexOf("a-end"), -1,
        `Grid column line ${area.columnEnd} has the name a-end`);

      // Also test that the fourth line has the name a-end.
      todo_isnot(grid.cols.lines[3].names.indexOf("a-end"), -1,
        "Grid column line 4 has the line name a-end");
    }
  }

  // Test the sixth grid wrapper
  wrapper = document.getElementById("wrapper6");
  grid = wrapper.getGridFragments()[0];

  // Test that the grid has two explicit lines: [foo-end][foo-start] and a third implicit
  // line that follows.
  is(grid.cols.lines.length, 3, "Grid should have three lines.");

  isnot(grid.cols.lines[0].names.indexOf("foo-end"), -1,
    "Grid column line 1 has the name 'foo-end'",
  );

  isnot(grid.cols.lines[1].names.indexOf("foo-start"), -1,
    "Grid column line 2 has the name 'foo-start'",
  );

  is(grid.cols.lines[2].type, "implicit", "Grid column line 3 is implicit");

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

  <div id="wrapper1" class="wrapper template1">
    <div id="boxA" class="box a">A</div>
    <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="wrapper2" class="wrapper template2">
    <div id="boxA" class="box a">A</div>
  </div>

  <br/>

  <div id="wrapper3" class="wrapper template3">
    <div id="boxC" class="box c">C</div>
  </div>

  <div id="wrapper4" class="wrapper template4">
    <div id="boxE" class="box e">E</div>
  </div>

  <div id="wrapper5" class="wrapper template5">
    <div id="boxF" class="box f">F</div>
    <div id="boxG" class="box g">G</div>
  </div>
  <div id="wrapper6" class="wrapper template6">
    <div id="boxH" class="box h">H</div>
  </div>
</body>
</html>

Messung V0.5

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