layout/style/test/test_flexbox_order_table.html

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=799775
-->
<head>
  <meta charset="utf-8">
  <title>Test for Bug 799775</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <style type="text/css">

    div.ref {
      display: none;
      height: 30px;
    }

    refA, refB, refC {
      display: block;
      float: left;
    }

    div#a, div#b, div#c {
      display: table;
    }

    div#a, refA {
      background: lightgreen;
      width: 20px;
      height: 30px;
    }
    div#b, refB {
      background: orange;
      width: 30px;
      height: 30px;
    }
    div#c, refC {
      background: blue;
      width: 50px;
      height: 30px;
    }
    div#flexContainer {
      display: flex;
      width: 100px;
      height: 30px;
    }
    div#flexContainerParent {
      display: none;
    }
  </style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=799775">Mozilla Bug 799775</a>
<div id="display">

  <!-- Reference cases (display:none; only shown during initRefSnapshots) -->
  <div id="references">
    <div class="ref" id="abc"><refA></refA><refB></refB><refC></refC></div>
    <div class="ref" id="acb"><refA></refA><refC></refC><refB></refB></div>
    <div class="ref" id="bac"><refB></refB><refA></refA><refC></refC></div>
    <div class="ref" id="bca"><refB></refB><refC></refC><refA></refA></div>
    <div class="ref" id="cab"><refC></refC><refA></refA><refB></refB></div>
    <div class="ref" id="cba"><refC></refC><refB></refB><refA></refA></div>
  </div>

  <div id="flexContainerParent">
    <!-- The flex container that we'll be testing
         (its parent is display:none initially) -->
    <div id="flexContainer">
      <div id="a"></div>
      <div id="b"></div>
      <div id="c"></div>
    </div>
  </div>

</div>
<pre id="test">
<script type="application/javascript">
"use strict";

/** Test for Bug 799775 **/

/* This testcase ensures that we honor the "order" property when ordering
 * tables as flex items within a flex container.
 *
 * Note: The items in this testcase don't overlap, so this testcase does _not_
 * test paint ordering.  It only tests horizontal ordering in a flex container.
 */

// DATA
// ----

// This will store snapshots of our reference divs
let gRefSnapshots = {};

// These are the sets of 'order' values that we'll test.
// The first three values in each array are the 'order' values that we'll
// assign to elements a, b, and c (respectively).  The final value in each
// array is the ID of the expected reference rendering.
let gOrderTestcases = [
  // The 6 basic permutations:
  [ 1, 2, 3, "abc"],
  [ 1, 3, 2, "acb"],
  [ 2, 1, 3, "bac"],
  [ 2, 3, 1, "cab"],
  [ 3, 1, 2, "bca"],
  [ 3, 2, 1, "cba"],

  // Test negative values
  [ 1, -5, -2, "bca"],
  [ -50, 0, -2, "acb"],

  // Non-integers should be ignored.
  // (So, they'll leave their div with the initial 'order' value, which is 0.)
  [ 1,   1.5, 2,   "bac"],
  [ 2.5, 3.4, 1,   "abc"],
  [ 0.5, 1,   1.5, "acb"],

  // Decimal values that happen to be equal to integers (e.g. "3.0") are still
  // <numbers>, and are _not_ <integers>.
  //  Source: http://www.w3.org/TR/CSS21/syndata.html#value-def-integer
  // (So, they'll leave their div with the initial 'order' value, which is 0.)
  // (NOTE: We have to use quotes around "3.0" and "2.0" to be sure JS doesn't
  // coerce them into integers before we get a chance to set them in CSS.)
  [ "3.0", "2.0", "1.0", "abc"],
  [ 3, "2.0", 1, "bca"],
];

// FUNCTIONS
// ---------

function initRefSnapshots() {
  let refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
  for (let id of refIds) {
    let elem = document.getElementById(id);
    elem.style.display = "block";
    gRefSnapshots[id] = snapshotWindow(window, false);
    elem.style.display = "";
  }
}

function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
  let compareResult = compareSnapshots(aSnap1, aSnap2, true);
  ok(compareResult[0],
     "flex container rendering should match expected (" + aMsg +")");
  if (!compareResult[0]) {
    todo(false, "TESTCASE: " + compareResult[1]);
    todo(false, "REFERENCE: "+ compareResult[2]);
  }
}

function runOrderTestcase(aOrderTestcase) {
  // Sanity-check
  ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
  is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");

  document.getElementById("a").style.order = aOrderTestcase[0];
  document.getElementById("b").style.order = aOrderTestcase[1];
  document.getElementById("c").style.order = aOrderTestcase[2];

  let snapshot = snapshotWindow(window, false);
  complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
                            aOrderTestcase);

  // Clean up
  for (let id of ["a", "b", "c"]) {
    document.getElementById(id).style.order = "";
  }
}

// Main Function
function main() {
  initRefSnapshots();

  // un-hide the flex container's parent
  let flexContainerParent = document.getElementById("flexContainerParent");
  flexContainerParent.style.display = "block";

  // Initial sanity-check: should be in expected document order
  let initialSnapshot = snapshotWindow(window, false);
  complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots.abc,
                            "initial flex container rendering, " +
                            "no 'order' value yet");

  // OK, now we run our tests
  gOrderTestcases.forEach(runOrderTestcase);

  // Re-hide the flex container at the end
  flexContainerParent.style.display = "";
}

main();

</script>
</pre>
</body>
</html>