Quelle test_flex_axis_directions.html Sprache: HTML

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

 b {
 background-color: gold;
 width: 100px;
 height: 15px;
 }
 b::after {
 content: "B";
 }

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

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

 .fdR {
 flex-direction: row;
 background-color: lightgrey;
 }
 .fdRR {
 flex-direction: row-reverse;
 background-color: lightgreen;
 }
 .fdC {
 flex-direction: column;
 background-color: lightblue;
 }
 .fdCR {
 flex-direction: column-reverse;
 background-color: lavender;
 }

 .wmHTB {
 writing-mode: horizontal-tb;
 }
 .wmVLR {
 writing-mode: vertical-lr;
 }
 .wmVRL {
 writing-mode: vertical-rl;
 }
 .wmSLR {
 writing-mode: sideways-lr;
 }
 .wmSRL {
 writing-mode: sideways-rl;
 }

 .dLR {
 direction: ltr;
 }
 .dRL {
 direction: rtl;
 }
</style>

<script>
"use strict";

SimpleTest.waitForExplicitFinish();

function testContainerMatchesExpectedValues(flex, values, flexIndex) {
 is(flex.mainAxisDirection, values.m, "Flex index " + flexIndex + " should have expected mainAxisDirection.");
 is(flex.crossAxisDirection, values.c, "Flex index " + flexIndex + " should have expected crossAxisDirection.");
}

function runTests() {
 const expectedValues = [
 { m: "horizontal-lr", c: "vertical-tb" },
 { m: "horizontal-rl", c: "vertical-tb" },
 { m: "vertical-tb", c: "horizontal-lr" },
 { m: "vertical-bt", c: "horizontal-lr" },
 { m: "vertical-tb", c: "horizontal-rl" },
 { m: "vertical-bt", c: "horizontal-rl" },
 { m: "vertical-bt", c: "horizontal-lr" },
 { m: "vertical-tb", c: "horizontal-lr" },
 { m: "vertical-tb", c: "horizontal-rl" },
 { m: "vertical-bt", c: "horizontal-rl" },

 { m: "horizontal-rl", c: "vertical-tb" },
 { m: "horizontal-lr", c: "vertical-tb" },
 { m: "vertical-bt", c: "horizontal-lr" },
 { m: "vertical-tb", c: "horizontal-lr" },
 { m: "vertical-bt", c: "horizontal-rl" },
 { m: "vertical-tb", c: "horizontal-rl" },
 { m: "vertical-tb", c: "horizontal-lr" },
 { m: "vertical-bt", c: "horizontal-lr" },
 { m: "vertical-bt", c: "horizontal-rl" },
 { m: "vertical-tb", c: "horizontal-rl" },

 { m: "vertical-tb", c: "horizontal-lr" },
 { m: "vertical-tb", c: "horizontal-rl" },
 { m: "horizontal-lr", c: "vertical-tb" },
 { m: "horizontal-lr", c: "vertical-bt" },
 { m: "horizontal-rl", c: "vertical-tb" },
 { m: "horizontal-rl", c: "vertical-bt" },
 { m: "horizontal-lr", c: "vertical-bt" },
 { m: "horizontal-lr", c: "vertical-tb" },
 { m: "horizontal-rl", c: "vertical-tb" },
 { m: "horizontal-rl", c: "vertical-bt" },

 { m: "vertical-bt", c: "horizontal-lr" },
 { m: "vertical-bt", c: "horizontal-rl" },
 { m: "horizontal-rl", c: "vertical-tb" },
 { m: "horizontal-rl", c: "vertical-bt" },
 { m: "horizontal-lr", c: "vertical-tb" },
 { m: "horizontal-lr", c: "vertical-bt" },
 { m: "horizontal-rl", c: "vertical-bt" },
 { m: "horizontal-rl", c: "vertical-tb" },
 { m: "horizontal-lr", c: "vertical-tb" },
 { m: "horizontal-lr", c: "vertical-bt" },
 ];

 const 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];
 testContainerMatchesExpectedValues(flex, values, i);
 }
 }

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

<body onLoad="runTests();">

<f class="fdR wmHTB dLR"><c></c><d></d></f>
<f class="fdR wmHTB dRL"><c></c><d></d></f>
<f class="fdR wmVLR dLR"><c></c><d></d></f>
<f class="fdR wmVLR dRL"><c></c><d></d></f>
<f class="fdR wmVRL dLR"><c></c><d></d></f>
<f class="fdR wmVRL dRL"><c></c><d></d></f>
<f class="fdR wmSLR dLR"><c></c><d></d></f>
<f class="fdR wmSLR dRL"><c></c><d></d></f>
<f class="fdR wmSRL dLR"><c></c><d></d></f>
<f class="fdR wmSRL dRL"><c></c><d></d></f>

<f class="fdRR wmHTB dLR"><c></c><d></d></f>
<f class="fdRR wmHTB dRL"><c></c><d></d></f>
<f class="fdRR wmVLR dLR"><c></c><d></d></f>
<f class="fdRR wmVLR dRL"><c></c><d></d></f>
<f class="fdRR wmVRL dLR"><c></c><d></d></f>
<f class="fdRR wmVRL dRL"><c></c><d></d></f>
<f class="fdRR wmSLR dLR"><c></c><d></d></f>
<f class="fdRR wmSLR dRL"><c></c><d></d></f>
<f class="fdRR wmSRL dLR"><c></c><d></d></f>
<f class="fdRR wmSRL dRL"><c></c><d></d></f>

<f class="fdC wmHTB dLR"><c></c><d></d></f>
<f class="fdC wmHTB dRL"><c></c><d></d></f>
<f class="fdC wmVLR dLR"><c></c><d></d></f>
<f class="fdC wmVLR dRL"><c></c><d></d></f>
<f class="fdC wmVRL dLR"><c></c><d></d></f>
<f class="fdC wmVRL dRL"><c></c><d></d></f>
<f class="fdC wmSLR dLR"><c></c><d></d></f>
<f class="fdC wmSLR dRL"><c></c><d></d></f>
<f class="fdC wmSRL dLR"><c></c><d></d></f>
<f class="fdC wmSRL dRL"><c></c><d></d></f>

<f class="fdCR wmHTB dLR"><c></c><d></d></f>
<f class="fdCR wmHTB dRL"><c></c><d></d></f>
<f class="fdCR wmVLR dLR"><c></c><d></d></f>
<f class="fdCR wmVLR dRL"><c></c><d></d></f>
<f class="fdCR wmVRL dLR"><c></c><d></d></f>
<f class="fdCR wmVRL dRL"><c></c><d></d></f>
<f class="fdCR wmSLR dLR"><c></c><d></d></f>
<f class="fdCR wmSLR dRL"><c></c><d></d></f>
<f class="fdCR wmSRL dLR"><c></c><d></d></f>
<f class="fdCR wmSRL dRL"><c></c><d></d></f>

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