Quelle test_flex_parent.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/dom/flex/test/chrome/test_flex_parent.html

<!doctype html>
<html id="nonitem0">
<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>
  .container {
    display: flex;
    background-color: grey;
    font: 14px sans-serif;
    height: 20px;
  }

  .lime        { background: lime;   }
  .yellow      { background: yellow; }
  .orange      { background: orange; }
</style>

<script>
"use strict";

SimpleTest.waitForExplicitFinish();

function testFlexParentExpectedValues(values) {
  let expectedParent;
  if (values.parent) {
    expectedParent = document.getElementById(values.parent);
  }

  let item, itemLabel;

  if (values.id) {
    item = document.getElementById(values.id);
    itemLabel = values.id;
  } else {
    item = expectedParent.firstChild;
    itemLabel = "[text node]";
  }

  const actualParent = item.parentFlexElement;

  if (values.parent) {
    is(actualParent, expectedParent, "Item " + itemLabel + " should have a parent with id " + values.parent + ".");
  } else {
    is(actualParent, null, "Non-item " + itemLabel + " should not have a parent.");
  }
}

function testFlexParents() {
  let expectedValues = [
    // These items expect to have a flex parent.
    { id: "item0", parent: "container0" },
    { id: "item1", parent: "container1" },
    { id: "item2", parent: "container2" },
    { id: "item3", parent: "container3" },
    { id: "item4", parent: "container4" },
    { id: null /* choose the first child of the expected parent */, parent: "container5" },

    // These elements do NOT expect to have a flex parent.
    { id: "nonitem0" },
    { id: "nonitem1" },
    { id: "nonitem2" },
    { id: "nonitem3" },
  ];

  for (let i = 0; i < expectedValues.length; ++i) {
    testFlexParentExpectedValues(expectedValues[i]);
  }
}

function runTests() {
  testFlexParents();
  SimpleTest.finish();
}
</script>
</head>

<body onLoad="runTests();">
  
  <div id="container0" class="container">
    <div id="item0" class="lime">first item</div>
  </div>

  <div id="container1" class="container">
    <div class="orange">first item</div>
    <div id="item1" class="lime">second item</div>
  </div>

  <div id="container2" class="container">
    <div style="display:contents">
      <div id="item2" class="lime">display-contents-child item</div>
    </div>
  </div>

  <div id="container3" class="container">
    A <span id="item3" class="lime">middle item</span> surrounded by anonymous text items</div>
  </div>

  <div id="container4" class="container">
    <div id="item4" style="display: table-cell">display: table-cell item</div>
  </div>

  <div id="container5" class="container">
    Text that gets wrapped in anonymous flex item
  </div>

  

  

  <div class="container">
    <div>
      <div id="nonitem1" class="yellow">child element of an item</div>
    </div>
  </div>

  <div class="container">
    <div>
      <div id="nonitem2" style="position: absolute" class="yellow">position: absolute element</div>
    </div>
  </div>

  <div class="container" style="position:relative">
    <div>
      <div id="nonitem3" style="position: absolute" class="yellow">
        position: absolute element, with flex as containing block
      </div>
    </div>
  </div>
</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.3 Sekunden ¤

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.