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 4 kB image not shown  

Quelle  test_flex_item_clamp.html   Sprache: HTML

 
 products/Sources/formale Sprachen/C/Firefox/dom/flex/test/chrome/test_flex_item_clamp.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;
  width: 400px;
  height: 20px;
  margin-bottom: 5px;
}

b {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 1;
  background-color: gold;
}

c {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 1;
  background-color: yellow;
}

d {
  flex: none;
  background-color: orange;
}

b::after, c::after, d::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid teal;
}


.min50 {
  min-width: 50px;
}
.min370 {
  min-width: 370px;
}
.min400 {
  min-width: 400px;
}

.max5 {
  max-width: 5px;
}
.max50 {
  max-width: 50px;
}

</style>

<script>
"use strict";

SimpleTest.waitForExplicitFinish();

const TEXT_NODE = Node.TEXT_NODE;

function testItemMatchesExpectedValues(item, values, index) {
  is(item.clampState, values.cs, "Item index " + index + " should have expected clampState.");
}

function runTests() {
  /**
   * The expectedValues array contains one element for each flex container child of
   * of the body. The values in this object are compared against the returned flex
   * API values of the first flex item in the first line of the corresponding flex
   * container. The "cs" value is compared against the flex item's clampState.
   **/
  const expectedValues = [
    { cs: "unclamped" },
    { cs: "unclamped" },
    { cs: "unclamped" },
    { cs: "unclamped" },

    { cs: "clamped_to_min" },
    { cs: "clamped_to_min" },
    { cs: "clamped_to_min" },
    { cs: "clamped_to_min" },
    { cs: "clamped_to_min" },

    { cs: "clamped_to_max" },
    { cs: "clamped_to_max" },
    { cs: "clamped_to_max" },
    { cs: "clamped_to_max" },
    { cs: "clamped_to_max" },
  ];

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

  for (let i = 0; i < children.length; ++i) {
    const flex = children.item(i).getAsFlexContainer();
    ok(flex, "Document child index " + i + " should be a flex container.");
    if (flex) {
      const values = expectedValues[i];
      const item = flex.getLines()[0].getItems()[0];
      testItemMatchesExpectedValues(item, values, i);
    }
  }

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

<body onLoad="runTests();">
  <!-- unclamped cases -->
  <!-- a flex:none item -->
  <f><d></d></f>

  <!-- a flex-grow item with room to grow -->
  <f><b class="min370"></b></f>

  <!-- a flex-shrink item with room to shrink -->
  <f><b class="max50"></b><c class="min370"></c></f>

  <!-- a flex-grow basis 100px item paired with a basis 200px item, where the second item is clamped,
       and the first item then can grow past its minimum -->
  <f><b style="min-width: 170px"></b><c class="max50" style="flex-basis:200px"></c></f>


  <!-- clamped_to_min cases -->
  <!-- a flex-grow item with a min smaller than the container -->
  <f><b class="min370"></b><c></c></f>

  <!-- a flex-shrink item with a min, paired with another that in total exceeds the container -->
  <f><b class="min50"></b><c class="min370"></c></f>

  <!-- a flex-shrink item shrunk to its (content-based) automatic minimum size -->
  <f><b></b><c class="min400"></c></f>

  <!-- a flex:none item with a min that is larger than its flex base size -->
  <f><d class="min50"></d><c></c></f>

  <!-- a flex-grow item paired with another flex-grow item that have equal-sized violations of
       the first item's min with the second item's max -->
  <f><b style="min-width: 200px"></b><c style="flex-basis:150px; max-width:200px"></c></f>


  <!-- clamped_to_max cases -->
  <!-- a flexible item with a max -->
  <f><b class="max50"></b></f>

  <!-- a flexible item with a max, paired with another flex-grow item -->
  <f><b class="max50"></b><c></c></f>

  <!-- a flexible item with a max smaller than its content size -->
  <f><b class="max5"></b><c></c></f>

  <!-- a flex:none item with a max smaller than its content size -->
  <f><d class="max5"></d><c></c></f>

  <!-- a flex-grow item paired with another flex-grow item that have equal-sized violations of
       the first item's max with the second item's min -->
  <f><b style="flex-basis:150px; max-width:200px"></b><c style="min-width: 200px"></c></f>
</body>
</html>

Messung V0.5
C=95 H=98 G=96

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