--- a/dom/flex/test/chrome/test_flex_lines.html
+++ b/dom/flex/test/chrome/test_flex_lines.html
@@ -73,145 +73,199 @@
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
- [{ crossSize: 42,
+ [{ crossStart: 0,
+ crossSize: 42,
itemCount: 2,
growthState: "unchanged" }],
- [{ crossSize: 42,
+ [{ crossStart: 0,
+ crossSize: 42,
itemCount: 3,
growthState: "unchanged" }],
// items don't fill container, no grow, shrink, or min-width, with wrap and align-content:center -->
- [{ crossSize: 15,
+ [{ crossStart: 13.5,
+ crossSize: 15,
itemCount: 2,
growthState: "unchanged" }],
- [{ crossSize: 15,
+ [{ crossStart: 13.5,
+ crossSize: 15,
itemCount: 3,
growthState: "unchanged" }],
// items don't fill container, with grow
- [{ crossSize: 42,
+ [{ crossStart: 0,
+ crossSize: 42,
itemCount: 3,
growthState: "growing" }],
- [{ crossSize: 42,
+ [{ crossStart: 0,
+ crossSize: 42,
itemCount: 4,
growthState: "growing" }],
// items overfill container, with min-width, and sometimes with wrap
- [{ crossSize: 42,
+ [{ crossStart: 0,
+ crossSize: 42,
itemCount: 5,
growthState: "shrinking" }],
- [{ crossSize: 21,
+ [{ crossStart: 0,
+ crossSize: 21,
itemCount: 3,
growthState: "growing" },
- { crossSize: 21,
+ { crossStart: 21,
+ crossSize: 21,
itemCount: 2,
growthState: "growing" }],
- [{ crossSize: 42,
+ [{ crossStart: 0,
+ crossSize: 42,
itemCount: 6,
growthState: "shrinking" }],
- [{ crossSize: 21,
+ [{ crossStart: 0,
+ crossSize: 21,
itemCount: 3,
growthState: "growing" },
- { crossSize: 21,
+ { crossStart: 21,
+ crossSize: 21,
itemCount: 3,
growthState: "growing" }],
// items overfill container, with shrink and sometimes with wrap
- [{ crossSize: 42,
+ [{ crossStart: 0,
+ crossSize: 42,
itemCount: 3,
growthState: "shrinking" }],
- [{ crossSize: 21,
+ [{ crossStart: 0,
+ crossSize: 21,
itemCount: 2,
growthState: "unchanged" },
- { crossSize: 21,
+ { crossStart: 21,
+ crossSize: 21,
itemCount: 1,
growthState: "unchanged" }],
- [{ crossSize: 42,
+ [{ crossStart: 0,
+ crossSize: 42,
itemCount: 4,
growthState: "shrinking" }],
- [{ crossSize: 21,
+ [{ crossStart: 0,
+ crossSize: 21,
itemCount: 2,
growthState: "unchanged" },
- { crossSize: 21,
+ { crossStart: 21,
+ crossSize: 21,
itemCount: 2,
growthState: "unchanged" }],
// items overfill container, with wrap and different types of align-content
- [{ crossSize: 26,
+ [{ crossStart: 0,
+ crossSize: 26,
itemCount: 3 },
- { crossSize: 16,
+ { crossStart: 26,
+ crossSize: 16,
itemCount: 1 }],
- [{ crossSize: 20,
+ [{ crossStart: 0,
+ crossSize: 20,
itemCount: 3 },
- { crossSize: 10,
+ { crossStart: 20,
+ crossSize: 10,
itemCount: 1 }],
- [{ crossSize: 20,
+ [{ crossStart: 12,
+ crossSize: 20,
itemCount: 3 },
- { crossSize: 10,
+ { crossStart: 32,
+ crossSize: 10,
itemCount: 1 }],
- [{ crossSize: 20,
+ [{ crossStart: 6,
+ crossSize: 20,
itemCount: 3 },
- { crossSize: 10,
+ { crossStart: 26,
+ crossSize: 10,
itemCount: 1 }],
- [{ crossSize: 20,
+ [{ crossStart: 0,
+ crossSize: 20,
itemCount: 3 },
- { crossSize: 10,
+ { crossStart: 32,
+ crossSize: 10,
itemCount: 1 }],
- [{ crossSize: 20,
+ [{ crossStart: 3,
+ crossSize: 20,
itemCount: 3 },
- { crossSize: 10,
+ { crossStart: 29,
+ crossSize: 10,
itemCount: 1 }],
// items overfill container, with wrap-reverse and different types of align-content
- [{ crossSize: 16,
+ [{ crossStart: 0,
+ crossSize: 16,
itemCount: 2 },
- { crossSize: 26,
+ { crossStart: 16,
+ crossSize: 26,
itemCount: 3 }],
- [{ crossSize: 10,
+ [{ crossStart: 12,
+ crossSize: 10,
itemCount: 2 },
- { crossSize: 20,
+ { crossStart: 22,
+ crossSize: 20,
itemCount: 3 }],
- [{ crossSize: 10,
+ [{ crossStart: 0,
+ crossSize: 10,
itemCount: 2 },
- { crossSize: 20,
+ { crossStart: 10,
+ crossSize: 20,
itemCount: 3 }],
- [{ crossSize: 10,
+ [{ crossStart: 6,
+ crossSize: 10,
itemCount: 2 },
- { crossSize: 20,
+ { crossStart: 16,
+ crossSize: 20,
itemCount: 3 }],
- [{ crossSize: 10,
+ [{ crossStart: 0,
+ crossSize: 10,
itemCount: 2 },
- { crossSize: 20,
+ { crossStart: 22,
+ crossSize: 20,
itemCount: 3 }],
- [{ crossSize: 10,
+ [{ crossStart: 3,
+ crossSize: 10,
itemCount: 2 },
- { crossSize: 20,
+ { crossStart: 19,
+ crossSize: 20,
itemCount: 3 }],
// 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.");
@@ -272,11 +326,12 @@ function runTests() {
<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>