Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/C/Firefox/dom/flex/test/chrome/   (Fast Lexical Analyzer Version 2.6©)  Datei vom 10.2.2025 mit Größe 9 kB image not shown  

Quelle  test_flex_lines.html   Sprache: HTML

 
 products/Sources/formale Sprachen/C/Firefox/dom/flex/test/chrome/test_flex_lines.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>
  f {
    display: flex;
    background-color: grey;
    font: 12px sans-serif;
    width: 800px;
    height: 42px;
    margin-bottom: 5px;
  }

  .withZ::after {
    background-color: pink;
    content: "Z";
    width: 100px;
    height: 10px;
  }

  .wrap {
    flex-wrap: wrap;
  }

  .wrapReverse {
    flex-wrap: wrap-reverse;
  }

  b {
    background-color: gold;
    min-width: 100px;
    height: 20px;
    flex-grow: 1;
  }
  b::after {
    content: "B";
  }

  c {
    background-color: yellow;
    width: 200px;
    height: 15px;
  }
  c::after {
    content: "C";
  }

  d {
    background-color: orange;
    width: 300px;
    height: 10px;
  }
  d::after {
    content: "D";
  }

  e {
    background-color: silver;
    width: 300px;
    height: 10px;
    flex-shrink: 2;
  }
  e::after {
    content: "E";
  }
</style>

<script>
"use strict";

SimpleTest.waitForExplicitFinish();

function testLineMatchesExpectedValues(line, values, lineIndex, flexIndex) {
  if (typeof(values.growthState) != "undefined") {
    is(line.growthState, values.growthState, "Flex index " + flexIndex + " line index " + lineIndex + " has expected growthState.");
  }

  if (typeof(values.crossStart) != "undefined") {
    is(line.crossStart, values.crossStart, "Flex index " + flexIndex + " line index " + lineIndex + " has expected crossStart.");
  }

  if (typeof(values.crossSize) != "undefined") {
    is(line.crossSize, values.crossSize, "Flex index " + flexIndex + " line index " + lineIndex + " has expected crossSize.");
  }

  if (typeof(values.itemCount) != "undefined") {
    is(line.getItems().length, values.itemCount, "Flex index " + flexIndex + " line index " + lineIndex + " has expected number of items.");
  }
}

function runTests() {
  let expectedValues = [
    // items don't fill container, no grow, shrink, or min-width
    [{ crossStart: 0,
       crossSize: 42,
       itemCount: 2,
       growthState: "growing" }],
    [{ crossStart: 0,
       crossSize: 42,
       itemCount: 3,
       growthState: "growing" }],

    // items don't fill container, no grow, shrink, or min-width, with wrap and align-content:center -->
    [{ crossStart: 13.5,
       crossSize: 15,
       itemCount: 2,
       growthState: "growing" }],
    [{ crossStart: 13.5,
       crossSize: 15,
       itemCount: 3,
       growthState: "growing" }],

    // items don't fill container, with grow
    [{ crossStart: 0,
       crossSize: 42,
       itemCount: 3,
       growthState: "growing" }],
    [{ crossStart: 0,
       crossSize: 42,
       itemCount: 4,
       growthState: "growing" }],

    // items overfill container, with min-width, and sometimes with wrap
    [{ crossStart: 0,
       crossSize: 42,
       itemCount: 5,
       growthState: "shrinking" }],
    [{ crossStart: 0,
       crossSize: 21,
       itemCount: 3,
       growthState: "growing" },
     { crossStart: 21,
       crossSize: 21,
       itemCount: 2,
       growthState: "growing" }],
    [{ crossStart: 0,
       crossSize: 42,
       itemCount: 6,
       growthState: "shrinking" }],
    [{ crossStart: 0,
       crossSize: 21,
       itemCount: 3,
       growthState: "growing" },
     { crossStart: 21,
       crossSize: 21,
       itemCount: 3,
       growthState: "growing" }],

    // items overfill container, with shrink and sometimes with wrap
    [{ crossStart: 0,
       crossSize: 42,
       itemCount: 3,
       growthState: "shrinking" }],
    [{ crossStart: 0,
       crossSize: 21,
       itemCount: 2,
       growthState: "growing" },
     { crossStart: 21,
       crossSize: 21,
       itemCount: 1,
       growthState: "growing" }],
    [{ crossStart: 0,
       crossSize: 42,
       itemCount: 4,
       growthState: "shrinking" }],
    [{ crossStart: 0,
       crossSize: 21,
       itemCount: 2,
       growthState: "growing" },
     { crossStart: 21,
       crossSize: 21,
       itemCount: 2,
       growthState: "growing" }],

    // items overfill container, with wrap and different types of align-content
    [{ crossStart: 0,
       crossSize: 26,
       itemCount: 3 },
     { crossStart: 26,
       crossSize: 16,
       itemCount: 1 }],
    [{ crossStart: 0,
       crossSize: 20,
       itemCount: 3 },
     { crossStart: 20,
       crossSize: 10,
       itemCount: 1 }],
    [{ crossStart: 12,
       crossSize: 20,
       itemCount: 3 },
     { crossStart: 32,
       crossSize: 10,
       itemCount: 1 }],
    [{ crossStart: 6,
       crossSize: 20,
       itemCount: 3 },
     { crossStart: 26,
       crossSize: 10,
       itemCount: 1 }],
    [{ crossStart: 0,
       crossSize: 20,
       itemCount: 3 },
     { crossStart: 32,
       crossSize: 10,
       itemCount: 1 }],
    [{ crossStart: 3,
       crossSize: 20,
       itemCount: 3 },
     { crossStart: 29,
       crossSize: 10,
       itemCount: 1 }],

    // items overfill container, with wrap-reverse and different types of align-content
    [{ crossStart: 0,
       crossSize: 26,
       itemCount: 3 },
     { crossStart: 26,
       crossSize: 16,
       itemCount: 2 }],
    [{ crossStart: 0,
       crossSize: 20,
       itemCount: 3 },
     { crossStart: 20,
       crossSize: 10,
       itemCount: 2 }],
    [{ crossStart: 12,
       crossSize: 20,
       itemCount: 3 },
     { crossStart: 32,
       crossSize: 10,
       itemCount: 2 }],
    [{ crossStart: 6,
       crossSize: 20,
       itemCount: 3 },
     { crossStart: 26,
       crossSize: 10,
       itemCount: 2 }],
    [{ crossStart: 0,
       crossSize: 20,
       itemCount: 3 },
     { crossStart: 32,
       crossSize: 10,
       itemCount: 2 }],
    [{ crossStart: 3,
       crossSize: 20,
       itemCount: 3 },
     { crossStart: 29,
       crossSize: 10,
       itemCount: 2 }],

    // other strange types of flex containers
    [{ itemCount: 3 }],
    [{ crossStart: 100,
       crossSize: 300,
       mainSize: 40,
       itemCount: 3 },
     { crossStart: 400,
       crossSize: 300,
       mainSize: 20,
       itemCount: 2 }],
  ];

  let children = document.body.children;
  is(children.length, expectedValues.length, "Document has expected number of flex containers.");

  for (let i = 0; i < children.length; ++i) {
    let flex = children.item(i).getAsFlexContainer();
    ok(flex, "Document child index " + i + " is a flex container.");
    if (flex) {
      let values = expectedValues[i];

      let lines = flex.getLines();
      is(lines.length, values.length, "Flex index " + i + " has expected number of lines.");

       for (let j = 0; j < lines.length; ++j) {
        testLineMatchesExpectedValues(lines[j], values[j], j, i);
      }
    }
  }

  SimpleTest.finish();
}
</script>
</head>

<body onLoad="runTests();">

<!-- items don't fill container, no grow, shrink, or min-width -->
<f><c></c><d></d></f>
<f class="withZ"><c></c><d></d></f>

<!-- items don't fill container, no grow, shrink, or min-width, with wrap and align-content:center -->
<f class="wrap" style="align-content:center"><c></c><d></d></f>
<f class="withZ wrap" style="align-content:center"><c></c><d></d></f>

<!-- items don't fill container, with grow -->
<f><b></b><c></c><d></d></f>
<f class="withZ"><b></b><c></c><d></d></f>

<!-- items overfill container, with min-width, and sometimes with wrap -->
<f><b></b><d></d><d></d><d></d><b></b></f>
<f class="wrap"><b></b><d></d><d></d><d></d><b></b></f>
<f class="withZ"><b></b><d></d><d></d><d></d><b></b></f>
<f class="wrap withZ"><b></b><d></d><d></d><d></d><b></b></f>

<!-- items overfill container, with shrink and sometimes with wrap -->
<f><d></d><d></d><e></e></f>
<f class="wrap"><d></d><d></d><e></e></f>
<f class="withZ"><d></d><d></d><e></e></f>
<f class="wrap withZ"><d></d><d></d><e></e></f>

<!-- items overfill container, with wrap and different types of align-content -->
<f class="wrap"><b></b><c></c><d></d><e></e></f>
<f class="wrap" style="align-content:flex-start"><b></b><c></c><d></d><e></e></f>
<f class="wrap" style="align-content:flex-end"><b></b><c></c><d></d><e></e></f>
<f class="wrap" style="align-content:center"><b></b><c></c><d></d><e></e></f>
<f class="wrap" style="align-content:space-between"><b></b><c></c><d></d><e></e></f>
<f class="wrap" style="align-content:space-around"><b></b><c></c><d></d><e></e></f>

<!-- items overfill container, with wrap-reverse and different types of align-content -->
<f class="wrapReverse withZ"><b></b><c></c><d></d><e></e></f>
<f class="wrapReverse withZ" style="align-content:flex-start"><b></b><c></c><d></d><e></e></f>
<f class="wrapReverse withZ" style="align-content:flex-end"><b></b><c></c><d></d><e></e></f>
<f class="wrapReverse withZ" style="align-content:center"><b></b><c></c><d></d><e></e></f>
<f class="wrapReverse withZ" style="align-content:space-between"><b></b><c></c><d></d><e></e></f>
<f class="wrapReverse withZ" style="align-content:space-around"><b></b><c></c><d></d><e></e></f>

<!-- other strange types of flex containers -->
<f style="overflow:scroll"><d></d><d></d><e></e></f>
<f class="wrap" style="flex-direction:column; align-content:center"><c></c><d></d><c></c><d></d><e></e></f>

</body>
</html>

Messung V0.5
C=98 H=100 G=98

¤ Dauer der Verarbeitung: 0.11 Sekunden  (vorverarbeitet)  ¤

*© 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.