dom/flex/test/chrome/test_flex_lines.html
author Brad Werth <bwerth@mozilla.com>
Tue, 23 Oct 2018 16:24:00 +0000
changeset 490950 ec3c914d6136944e6803e1596d383d9cd64fba64
parent 440449 890da77f0442ae018101b77945c56834c5abebd6
permissions -rw-r--r--
Bug 1501109 Part 2: Update test expectations for flex line growth state. r=dholbert Depends on D9454 Differential Revision: https://phabricator.services.mozilla.com/D9455

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" 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: 16,
       itemCount: 2 },
     { crossStart: 16,
       crossSize: 26,
       itemCount: 3 }],
    [{ crossStart: 12,
       crossSize: 10,
       itemCount: 2 },
     { crossStart: 22,
       crossSize: 20,
       itemCount: 3 }],
    [{ crossStart: 0,
       crossSize: 10,
       itemCount: 2 },
     { crossStart: 10,
       crossSize: 20,
       itemCount: 3 }],
    [{ crossStart: 6,
       crossSize: 10,
       itemCount: 2 },
     { crossStart: 16,
       crossSize: 20,
       itemCount: 3 }],
    [{ crossStart: 0,
       crossSize: 10,
       itemCount: 2 },
     { crossStart: 22,
       crossSize: 20,
       itemCount: 3 }],
    [{ crossStart: 3,
       crossSize: 10,
       itemCount: 2 },
     { 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.");
	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>