Bug 799775 part 1: General mochitest for 'order' property reordering items in a flex container. rs=dbaron
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 11 Oct 2012 14:33:24 -0700
changeset 110117 7e4cdcd4179873a0fb2ab3d1786020103b11c3df
parent 110116 6a994799088b424e367f451f97cea31cd6e81db7
child 110118 f858236f4e6201dcca2fc7c0583d0aa968b72c9e
push id93
push usernmatsakis@mozilla.com
push dateWed, 31 Oct 2012 21:26:57 +0000
reviewersdbaron
bugs799775
milestone19.0a1
Bug 799775 part 1: General mochitest for 'order' property reordering items in a flex container. rs=dbaron
layout/style/test/Makefile.in
layout/style/test/file_flexbox_order.html
layout/style/test/test_flexbox_order.html
--- a/layout/style/test/Makefile.in
+++ b/layout/style/test/Makefile.in
@@ -196,16 +196,18 @@ MOCHITEST_FILES +=	\
 		test_flexbox_align_self_auto.html \
 		file_flexbox_flex_grow_and_shrink.html \
 		test_flexbox_flex_grow_and_shrink.html \
 		file_flexbox_flex_shorthand.html \
 		test_flexbox_flex_shorthand.html \
 		file_flexbox_layout.html \
 		test_flexbox_layout.html \
 		flexbox_layout_testcases.js \
+		file_flexbox_order.html \
+		test_flexbox_order.html \
 		$(NULL)
 endif
 
 _VISITED_REFTEST_FILES = \
 		$(shell find $(topsrcdir)/layout/reftests/css-visited/ -name '*.html' -o -name '*.xhtml') \
 		$(topsrcdir)/layout/reftests/svg/pseudo-classes-02.svg \
 		$(topsrcdir)/layout/reftests/svg/pseudo-classes-02-ref.svg \
 		$(topsrcdir)/layout/reftests/svg/as-image/lime100x100.svg \
new file mode 100644
--- /dev/null
+++ b/layout/style/test/file_flexbox_order.html
@@ -0,0 +1,189 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <script type="application/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
+  <style type="text/css">
+
+    div.ref {
+      display: none;
+      height: 30px;
+    }
+
+    refA, refB, refC {
+      display: block;
+      float: left;
+    }
+
+    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: -moz-flex;
+      width: 100px;
+      height: 30px;
+    }
+    div#flexContainerParent {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+<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;version=1.7">
+"use strict";
+
+/* This testcase ensures that we honor the "order" property when ordering
+ * 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.
+ */
+
+// Use "is()", "ok()", and "todo()" from parent document.
+var is = parent.is;
+var ok = parent.ok;
+var todo = parent.todo;
+
+// DATA
+// ----
+
+// This will store snapshots of our reference divs
+var 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.
+var 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() {
+  var refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
+  refIds.forEach(function(aRefId) {
+    var elem = document.getElementById(aRefId);
+    elem.style.display = "block";
+    gRefSnapshots[aRefId] = snapshotWindow(window, false);
+    elem.style.display = "";
+  });
+}
+
+function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
+  var 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.MozOrder = aOrderTestcase[0];
+  document.getElementById("b").style.MozOrder = aOrderTestcase[1];
+  document.getElementById("c").style.MozOrder = aOrderTestcase[2];
+
+  var snapshot = snapshotWindow(window, false);
+  complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
+                            aOrderTestcase);
+
+  // Clean up
+  document.getElementById("a").style.MozOrder = "";
+  document.getElementById("b").style.MozOrder = "";
+  document.getElementById("c").style.MozOrder = "";
+}
+
+// Main Function
+function main() {
+  initRefSnapshots();
+
+  // un-hide the flex container's parent
+  var flexContainerParent = document.getElementById("flexContainerParent");
+  flexContainerParent.style.display = "block";
+
+  // Initial sanity-check: should be in expected document order
+  var 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 = "";
+
+  parent.finish();
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_flexbox_order.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=666041
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 666041</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=666041">Mozilla Bug 666041</a>
+<div id="display">
+  <iframe id="iframe" style="height: 100px; width: 200px"></iframe>
+</div>
+<pre id="test">
+<script type="application/javascript;version=1.7">
+"use strict";
+
+/** Test for Bug 666041 **/
+
+/*
+ * This mochitest runs in an iframe so that we can selectively turn on the
+ * flexbox about:config pref before its document is instantiated.
+ *
+ * See the iframe's source ("file_flexbox_order.html") for the actual
+ * test code and for more documentation.
+ */
+
+SimpleTest.waitForExplicitFinish();
+
+ok(!SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
+   "expecting flexbox pref to be disabled by default");
+
+SpecialPowers.setBoolPref("layout.css.flexbox.enabled", true);
+document.getElementById("iframe").src = "file_flexbox_order.html";
+
+function finish() {
+  SpecialPowers.clearUserPref("layout.css.flexbox.enabled");
+  SimpleTest.finish();
+}
+</script>
+</pre>
+</body>
+</html>