336 lines
9.1 KiB
HTML
336 lines
9.1 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;
|
|
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();">
|
|
|
|
<!-- items don't fill container, no grow, shrink, or min-width -->
|
|
<f><c></c><d></d></f>
|
|
<f class="withZ"><c></c><d></d></f>
|
|
|
|
<!-- items don't fill container, no grow, shrink, or min-width, with wrap and align-content:center -->
|
|
<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>
|
|
|
|
<!-- items don't fill container, with grow -->
|
|
<f><b></b><c></c><d></d></f>
|
|
<f class="withZ"><b></b><c></c><d></d></f>
|
|
|
|
<!-- items overfill container, with min-width, and sometimes with wrap -->
|
|
<f><b></b><d></d><d></d><d></d><b></b></f>
|
|
<f class="wrap"><b></b><d></d><d></d><d></d><b></b></f>
|
|
<f class="withZ"><b></b><d></d><d></d><d></d><b></b></f>
|
|
<f class="wrap withZ"><b></b><d></d><d></d><d></d><b></b></f>
|
|
|
|
<!-- items overfill container, with shrink and sometimes with wrap -->
|
|
<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>
|
|
|
|
<!-- items overfill container, with wrap and different types of align-content -->
|
|
<f class="wrap"><b></b><c></c><d></d><e></e></f>
|
|
<f class="wrap" style="align-content:flex-start"><b></b><c></c><d></d><e></e></f>
|
|
<f class="wrap" style="align-content:flex-end"><b></b><c></c><d></d><e></e></f>
|
|
<f class="wrap" style="align-content:center"><b></b><c></c><d></d><e></e></f>
|
|
<f class="wrap" style="align-content:space-between"><b></b><c></c><d></d><e></e></f>
|
|
<f class="wrap" style="align-content:space-around"><b></b><c></c><d></d><e></e></f>
|
|
|
|
<!-- items overfill container, with wrap-reverse and different types of align-content -->
|
|
<f class="wrapReverse withZ"><b></b><c></c><d></d><e></e></f>
|
|
<f class="wrapReverse withZ" style="align-content:flex-start"><b></b><c></c><d></d><e></e></f>
|
|
<f class="wrapReverse withZ" style="align-content:flex-end"><b></b><c></c><d></d><e></e></f>
|
|
<f class="wrapReverse withZ" style="align-content:center"><b></b><c></c><d></d><e></e></f>
|
|
<f class="wrapReverse withZ" style="align-content:space-between"><b></b><c></c><d></d><e></e></f>
|
|
<f class="wrapReverse withZ" style="align-content:space-around"><b></b><c></c><d></d><e></e></f>
|
|
|
|
<!-- other strange types of flex containers -->
|
|
<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>
|