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();">


<f><c></c><d></d></f>
<f class="withZ"><c></c><d></d></f>


<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>


<f><c></c><d></d></f>
<f class="withZ"><c></c><d></d></f>


<f><d></d><d></d><d></d></f>
<f class="wrap"><d></d><d></d><d></d></f>
<f class="withZ"><d></d><d></d><d></d></f>
<f class="wrap withZ"><d></d><d></d><d></d></f>


<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>


<f class="wrap"><c></c><d></d><e></e></f>
<f class="wrap" style="align-content:flex-start"><c></c><d></d><e></e></f>
<f class="wrap" style="align-content:flex-end"><c></c><d></d><e></e></f>
<f class="wrap" style="align-content:center"><c></c><d></d><e></e></f>
<f class="wrap" style="align-content:space-between"><c></c><d></d><e></e></f>
<f class="wrap" style="align-content:space-around"><c></c><d></d><e></e></f>


<f class="wrapReverse withZ"><c></c><d></d><e></e></f>
<f class="wrapReverse withZ" style="align-content:flex-start"><c></c><d></d><e></e></f>
<f class="wrapReverse withZ" style="align-content:flex-end"><c></c><d></d><e></e></f>
<f class="wrapReverse withZ" style="align-content:center"><c></c><d></d><e></e></f>
<f class="wrapReverse withZ" style="align-content:space-between"><c></c><d></d><e></e></f>
<f class="wrapReverse withZ" style="align-content:space-around"><c></c><d></d><e></e></f>


<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

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