204 lines
6 KiB
HTML
204 lines
6 KiB
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"><b></b><c></c><d></d></f>
|
|
<f class="fdR wmHTB dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdR wmVLR dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdR wmVLR dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdR wmVRL dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdR wmVRL dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdR wmSLR dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdR wmSLR dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdR wmSRL dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdR wmSRL dRL"><b></b><c></c><d></d></f>
|
|
|
|
<f class="fdRR wmHTB dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdRR wmHTB dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdRR wmVLR dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdRR wmVLR dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdRR wmVRL dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdRR wmVRL dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdRR wmSLR dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdRR wmSLR dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdRR wmSRL dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdRR wmSRL dRL"><b></b><c></c><d></d></f>
|
|
|
|
<f class="fdC wmHTB dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdC wmHTB dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdC wmVLR dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdC wmVLR dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdC wmVRL dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdC wmVRL dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdC wmSLR dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdC wmSLR dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdC wmSRL dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdC wmSRL dRL"><b></b><c></c><d></d></f>
|
|
|
|
<f class="fdCR wmHTB dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdCR wmHTB dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdCR wmVLR dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdCR wmVLR dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdCR wmVRL dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdCR wmVRL dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdCR wmSLR dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdCR wmSLR dRL"><b></b><c></c><d></d></f>
|
|
<f class="fdCR wmSRL dLR"><b></b><c></c><d></d></f>
|
|
<f class="fdCR wmSRL dRL"><b></b><c></c><d></d></f>
|
|
|
|
</body>
|
|
</html>
|