summaryrefslogtreecommitdiffstats
path: root/dom/flex/test/chrome/test_flex_lines.html
diff options
context:
space:
mode:
Diffstat (limited to 'dom/flex/test/chrome/test_flex_lines.html')
-rw-r--r--dom/flex/test/chrome/test_flex_lines.html336
1 files changed, 336 insertions, 0 deletions
diff --git a/dom/flex/test/chrome/test_flex_lines.html b/dom/flex/test/chrome/test_flex_lines.html
new file mode 100644
index 0000000000..aef5a5394b
--- /dev/null
+++ b/dom/flex/test/chrome/test_flex_lines.html
@@ -0,0 +1,336 @@
+<!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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-04 14:45:13 +0000