Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: dom/flex/test/chrome.toml
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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>