From 0038724369434044c15fa3538437a6e11d18ff9e Mon Sep 17 00:00:00 2001
From: Daniel Holbert <dholbert@cs.stanford.edu>
Date: Wed, 7 Nov 2012 11:29:00 -0800
Subject: [PATCH] Bug 783415 part 2: Add mochitest to check the computed value
 of various specified "display" values on flex-container-children. r=dbaron

---
 layout/style/test/Makefile.in                 |   2 +
 .../file_flexbox_child_display_values.xhtml   | 188 ++++++++++++++++++
 .../test_flexbox_child_display_values.html    |  47 +++++
 3 files changed, 237 insertions(+)
 create mode 100644 layout/style/test/file_flexbox_child_display_values.xhtml
 create mode 100644 layout/style/test/test_flexbox_child_display_values.html
diff --git a/layout/style/test/Makefile.in b/layout/style/test/Makefile.in
index 40f3170169e3..a1772cca1cba 100644
--- a/layout/style/test/Makefile.in
+++ b/layout/style/test/Makefile.in
@@ -198,6 +198,8 @@ ifdef MOZ_FLEXBOX
 MOCHITEST_FILES +=	\
 		file_flexbox_align_self_auto.html \
 		test_flexbox_align_self_auto.html \
+		file_flexbox_child_display_values.xhtml \
+		test_flexbox_child_display_values.html \
 		file_flexbox_flex_grow_and_shrink.html \
 		test_flexbox_flex_grow_and_shrink.html \
 		file_flexbox_flex_shorthand.html \
diff --git a/layout/style/test/file_flexbox_child_display_values.xhtml b/layout/style/test/file_flexbox_child_display_values.xhtml
new file mode 100644
index 000000000000..53d646c19287
--- /dev/null
+++ b/layout/style/test/file_flexbox_child_display_values.xhtml
@@ -0,0 +1,188 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body>
+<div>
+  <div id="wrapper"></div>
+</div>
+<pre id="test">
+<script type="application/javascript;version=1.7">
+<![CDATA[
+"use strict";
+
+/**
+ * Test "display" values of content in a flex container (Bug 783415)
+ * ================================================================
+ *
+ * This test creates content with a variety of specified "display" values
+ * and checks what the computed "display" is when we put that content
+ * in a flex container.  (Generally, it'll be the "blockified" form of the
+ * specified display-value.)
+ */
+
+// Use "is()" and "ok()" from parent document.
+let is = parent.is;
+let ok = parent.ok;
+
+/*
+ * Utility function for getting computed style of "display".
+ *
+ * @arg aElem The element to query for its computed "display" value.
+ * @return    The computed display value
+ */
+function getComputedDisplay(aElem) {
+  return window.getComputedStyle(aElem, "").display;
+}
+
+/*
+ * Function used for testing a given specified "display" value and checking
+ * its computed value against expectations.
+ *
+ * @arg aSpecifiedDisplay
+ *        The specified value of "display" that we should test.
+ *
+ * @arg aExpectedDisplayAsFlexContainerChild
+ *        (optional) The expected computed "display" when an element with
+ *        aSpecifiedDisplay is a child of a flex container. If omitted,
+ *        this argument defaults to aSpecifiedDisplay.
+ *
+ * @arg aExpectedDisplayAsOutOfFlowFlexContainerChild
+ *        (optional) The expected computed "display" when an element with
+ *        aSpecifiedDisplay is a child of a flex container *and* has
+ *        position:[fixed|absolute] or float: [left|right] set. If omitted,
+ *        this argument defaults to aExpectedDisplayAsFlexContainerChild.
+ */
+function testDisplayValue(aSpecifiedDisplay,
+                          aExpectedDisplayAsFlexContainerChild,
+                          aExpectedDisplayAsOutOfFlowFlexContainerChild) {
+  // DEFAULT-ARGUMENT-VALUES MAGIC: Make 2nd and 3rd args each default to
+  // the preceding arg, if they're unspecified.
+  if (typeof aExpectedDisplayAsFlexContainerChild == "undefined") {
+    aExpectedDisplayAsFlexContainerChild = aSpecifiedDisplay;
+  }
+  if (typeof aExpectedDisplayAsOutOfFlowFlexContainerChild == "undefined") {
+    aExpectedDisplayAsOutOfFlowFlexContainerChild =
+      aExpectedDisplayAsFlexContainerChild;
+  }
+
+  // FIRST: Create a node with display:aSpecifiedDisplay, and make sure that
+  // this original display-type is honored in a non-flex-container context.
+  let wrapper = document.getElementById("wrapper");
+  let node = document.createElement("div");
+  wrapper.appendChild(node);
+
+  node.style.display = aSpecifiedDisplay;
+  is(getComputedDisplay(node), aSpecifiedDisplay,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "should be the same as specified value, when parent is a block");
+
+
+  // SECOND: We make our node's parent into a flex container, and make sure
+  // that this produces the correct computed "display" value.
+  wrapper.style.display = "flex";
+  is(getComputedDisplay(node), aExpectedDisplayAsFlexContainerChild,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "when parent is a flex container");
+
+
+  // THIRD: We set "float" and "position" on our node (still inside of a
+  // flex container), and make sure that this produces the correct computed
+  // "display" value.
+  node.style.cssFloat = "left";
+  is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "when parent is a flex container and we're floated left");
+  node.style.cssFloat = "";
+
+  node.style.cssFloat = "right";
+  is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "when parent is a flex container and we're floated right");
+  node.style.cssFloat = "";
+
+  node.style.position = "absolute";
+  is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "when parent is a flex container and we're abs-pos");
+  node.style.position = "";
+
+  node.style.position = "fixed";
+  is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "when parent is a flex container and we're fixed-pos");
+  node.style.position = "";
+
+  // FINALLY: Clean up -- remove the node we created, and turn the wrapper
+  // back into its original display type (a block).
+  wrapper.removeChild(node);
+  wrapper.style.display = "";
+}
+
+/*
+ * Main test function
+ */
+function main() {
+  ok(SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
+     "expecting to be run with flexbox support enabled");
+
+  testDisplayValue("none");
+  testDisplayValue("block");
+  testDisplayValue("flex");
+  testDisplayValue("inline-flex", "flex");
+  testDisplayValue("list-item");
+  testDisplayValue("table");
+  testDisplayValue("inline-table", "table");
+
+  // These values all compute to "block" in a flex container. Do them in a
+  // loop, so that I don't have to type "block" a zillion times.
+  var dispValsThatComputeToBlockInAFlexContainer = [
+    "inline",
+    "inline-block",
+    "-moz-box",
+    "-moz-inline-box",
+    "-moz-grid",
+    "-moz-inline-grid",
+    "-moz-grid-group",
+    "-moz-grid-line",
+    "-moz-stack",
+    "-moz-inline-stack",
+    "-moz-deck",
+    "-moz-popup",
+    "-moz-groupbox",
+  ];
+
+  dispValsThatComputeToBlockInAFlexContainer.forEach(
+    function(aSpecifiedDisplay) {
+      testDisplayValue(aSpecifiedDisplay, "block");
+  });
+
+  // Table-parts are special. When they're a child of a flex container,
+  // they normally don't get blockified -- instead, they trigger table-fixup
+  // and get wrapped in a table.  So, their expected display as the child of
+  // a flex container is the same as their specified display. BUT, if
+  // we apply out-of-flow styling, then *that* blockifies them before
+  // we get to the table-fixup stage -- so then, their computed display
+  // is "block".
+  let tablePartsDispVals = [
+    "table-row-group",
+    "table-column",
+    "table-column-group",
+    "table-header-group",
+    "table-footer-group",
+    "table-row",
+    "table-cell",
+    "table-caption"
+  ];
+
+  tablePartsDispVals.forEach(
+    function(aSpecifiedDisplay) {
+      testDisplayValue(aSpecifiedDisplay, aSpecifiedDisplay, "block");
+  });
+
+  parent.finish();
+}
+
+main();
+]]>
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_flexbox_child_display_values.html b/layout/style/test/test_flexbox_child_display_values.html
new file mode 100644
index 000000000000..d9f46962571c
--- /dev/null
+++ b/layout/style/test/test_flexbox_child_display_values.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=783415
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test "display" values of content in a flex container (Bug 783415)</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=783415">Mozilla Bug 783415</a>
+<div id="display">
+  <iframe id="iframe"></iframe>
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test "display" values of content in a flex container (Bug 783415) **/
+
+/*
+ * 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_child_display_values.xhtml") 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_child_display_values.xhtml";
+
+function finish() {
+  SpecialPowers.clearUserPref("layout.css.flexbox.enabled");
+  SimpleTest.finish();
+}
+</script>
+</pre>
+</body>
+</html>
