Bug 797601 part 2: Tweak flexbox mochitests to run in an iframe and have their parent-document set the pref before loading them. r=bz
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 03 Oct 2012 18:44:15 -0700
changeset 115483 48f68293ee0896c665dd146f04c3607a640b5934
parent 115482 7750345367df1c1411cb9a90cb525df56d751012
child 115484 b768892d382529bf77db3b40de12fb55d2cdd56e
push id1
push usersledru@mozilla.com
push dateThu, 04 Dec 2014 17:57:20 +0000
reviewersbz
bugs797601
milestone18.0a1
Bug 797601 part 2: Tweak flexbox mochitests to run in an iframe and have their parent-document set the pref before loading them. r=bz
layout/style/test/Makefile.in
layout/style/test/file_flexbox_align_self_auto.html
layout/style/test/file_flexbox_flex_grow_and_shrink.html
layout/style/test/file_flexbox_flex_shorthand.html
layout/style/test/file_flexbox_layout.html
layout/style/test/test_flexbox_align_self_auto.html
layout/style/test/test_flexbox_flex_grow_and_shrink.html
layout/style/test/test_flexbox_flex_shorthand.html
layout/style/test/test_flexbox_layout.html
--- a/layout/style/test/Makefile.in
+++ b/layout/style/test/Makefile.in
@@ -187,19 +187,23 @@ MOCHITEST_FILES =	test_acid3_test46.html
 		test_bug721136.html \
 		test_bug732153.html \
 		test_bug732209.html \
 		bug732209-css.sjs \
 		$(NULL)
 
 ifdef MOZ_FLEXBOX
 MOCHITEST_FILES +=	\
+		file_flexbox_align_self_auto.html \
 		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 \
 		$(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 \
copy from layout/style/test/test_flexbox_align_self_auto.html
copy to layout/style/test/file_flexbox_align_self_auto.html
--- a/layout/style/test/test_flexbox_align_self_auto.html
+++ b/layout/style/test/file_flexbox_align_self_auto.html
@@ -1,23 +1,11 @@
 <!DOCTYPE HTML>
 <html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=696253
--->
-<head>
-  <meta charset="utf-8">
-  <title>Test behavior of 'align-self:auto' (Bug 696253)</title>
-  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
-  <style type="text/css">
-  </style>
-</head>
 <body>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
 <div id="display">
   <div id="myDiv"></div>
 </div>
 <pre id="test">
 <script type="application/javascript">
 "use strict";
 
 /**
@@ -48,16 +36,20 @@ https://bugzilla.mozilla.org/show_bug.cg
  * (NOTE: if we instead allowed the child div to directly inherit the value "auto"
  * from its parent, then we'd get different & incorrect behavior. The div would
  * resolve that inherited "auto" value to its own parent's "align-items" value,
  * which is "center" -- not "baseline".)
  *
  * This mochitest tests that situation and a few other similar tricky situations.
  */
 
+// Use "is()" and "ok()" from parent document.
+var is = parent.is;
+var ok = parent.ok;
+
 /*
  * Utility function for getting computed style of "align-self":
  */
 function getComputedAlignSelf(elem) {
   return window.getComputedStyle(elem, "").MozAlignSelf;
 }
 
 /*
@@ -165,16 +157,19 @@ function testNodeThatHasGrandparent(elem
   elem.parentNode.style.MozAlignItems = "";
   elem.parentNode.parentNode.style.MozAlignItems = "";
 }
 
 /*
  * Main test function
  */
 function main() {
+  ok(SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
+     "expecting to be run with flexbox support enabled");
+
   // Test the root node
   // ==================
   // (It's special because it has no parent style context.)
 
   var rootNode = document.documentElement;
 
   // Sanity-check that we actually have the root node, as far as CSS is concerned.
   // (Note: rootNode.parentNode is a HTMLDocument object -- not an element that
@@ -201,16 +196,18 @@ function main() {
 
   var displayNode = document.getElementById("display");
   is(displayNode.parentNode.parentNode, document.documentElement,
      "expecting 'display' node's grandparent to be the root node");
 
   testGeneralNode(displayNode);
   testNodeThatHasParent(displayNode);
   testNodeThatHasGrandparent(displayNode);
+
+  parent.finish();
 }
 
 main();
 
 </script>
 </pre>
 </body>
 </html>
copy from layout/style/test/test_flexbox_flex_grow_and_shrink.html
copy to layout/style/test/file_flexbox_flex_grow_and_shrink.html
--- a/layout/style/test/test_flexbox_flex_grow_and_shrink.html
+++ b/layout/style/test/file_flexbox_flex_grow_and_shrink.html
@@ -1,19 +1,12 @@
 <!DOCTYPE HTML>
 <html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=696253
--->
 <head>
-  <meta charset="utf-8">
-  <title>Test for flex-grow and flex-shrink animation (Bug 696253)</title>
-  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <script type="application/javascript" src="animation_utils.js"></script>
-  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   <style type="text/css">
 
   /* Set -moz-flex-grow and -moz-flex-shrink to nonzero values,
      when no animations are applied. */
 
   * { -moz-flex-grow: 10; -moz-flex-shrink: 20 }
 
   /* These animations SHOULD affect computed style */
@@ -51,30 +44,36 @@ https://bugzilla.mozilla.org/show_bug.cg
   @-moz-keyframes flexShrinkOneToZero {
      0%   { -moz-flex-shrink: 1 }
      100% { -moz-flex-shrink: 0 }
   }
 
   </style>
 </head>
 <body>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
 <div id="display">
   <div id="myDiv"></div>
 </div>
 <pre id="test">
 <script type="application/javascript">
 "use strict";
 
 /** Test for flex-grow and flex-shrink animation (Bug 696253) **/
 
 function advance_clock(milliseconds) {
   SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
 }
 
+// Use "is()" and "ok()" from parent document.
+var is = parent.is;
+var ok = parent.ok;
+
+ok(SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
+   "expecting to be run with flexbox support enabled");
+
 var display = document.getElementById("display");
 var div = null;
 var cs = null;
 function new_div(style) {
   return new_element("div", style);
 }
 function new_element(tagname, style) {
   if (div != null || cs != null) {
@@ -172,12 +171,14 @@ is(cs.MozFlexShrink, 20,  "flexShrinkOne
 advance_clock(500);
 is(cs.MozFlexShrink, 20, "flexShrinkOneToZero at 0.5s");
 advance_clock(1000);
 is(cs.MozFlexShrink, 20, "flexShrinkOneToZero at 1.5s");
 done_div();
 
 SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
 
+parent.finish();
+
 </script>
 </pre>
 </body>
 </html>
copy from layout/style/test/test_flexbox_flex_shorthand.html
copy to layout/style/test/file_flexbox_flex_shorthand.html
--- a/layout/style/test/test_flexbox_flex_shorthand.html
+++ b/layout/style/test/file_flexbox_flex_shorthand.html
@@ -1,30 +1,27 @@
 <!DOCTYPE HTML>
 <html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=696253
--->
 <head>
-  <title>Test for Bug 696253</title>
-  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <script type="text/javascript" src="property_database.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=696253">Mozilla Bug 696253</a>
-<p id="display"></p>
 <div id="content">
 </div>
 <pre id="test">
 <script type="application/javascript;version=1.7">
+"use strict";
 
 /** Test for Bug 696253 **/
 /* (Testing the [-moz-]flex CSS shorthand property) */
 
+// Use "is()" and "ok()" from parent document.
+var is = parent.is;
+var ok = parent.ok;
+
 const gFlexPropName = "-moz-flex";
 const gFlexPropInfo = gCSSProperties[gFlexPropName];
 
 // Default values for shorthand subproperties, when they're not specified
 // explicitly in a testcase.  This lets the testcases be more concise.
 //
 // The values here are from the flexbox spec on the 'flex' shorthand:
 //   "When omitted, [flex-grow and flex-shrink] are set to '1'.
@@ -246,15 +243,22 @@ function runFlexShorthandTest(aFlexShort
        "Computed value of subproperty \"" + aSubPropName + "\" when we set \"" +
        gFlexPropName + ": " + aFlexShorthandTestcase[gFlexPropName] + "\"");
   });
 
   // Clean up
   content.removeChild(elem);
 }
 
-// Run the tests!
-gFlexShorthandTestcases.forEach(runFlexShorthandTest)
+function main() {
+  ok(SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
+     "expecting to be run with flexbox support enabled");
+
+  gFlexShorthandTestcases.forEach(runFlexShorthandTest);
+  parent.finish();
+}
+
+main();
 
 </script>
 </pre>
 </body>
 </html>
copy from layout/style/test/test_flexbox_layout.html
copy to layout/style/test/file_flexbox_layout.html
--- a/layout/style/test/test_flexbox_layout.html
+++ b/layout/style/test/file_flexbox_layout.html
@@ -1,23 +1,15 @@
 <!DOCTYPE HTML>
 <html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=666041
--->
 <head>
-  <title>Test for Bug 666041</title>
-  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <script type="text/javascript" src="flexbox_layout_testcases.js"></script>
   <script type="text/javascript" src="property_database.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>
-<p id="display"></p>
 <div id="content">
 </div>
 <pre id="test">
 <script type="application/javascript;version=1.7">
 "use strict";
 
 /** Test for Bug 666041 **/
 
@@ -25,17 +17,19 @@ https://bugzilla.mozilla.org/show_bug.cg
  * --------------------
  * This mochitest exercises our implementation of the flexbox layout algorithm
  * by creating a flex container, inserting some flexible children, and then
  * verifying that the computed width of those children is what we expect.
  *
  * See flexbox_layout_testcases.js for the actual testcases & testcase format.
  */
 
-SimpleTest.waitForExplicitFinish();
+// Use "is()" and "ok()" from parent document.
+var is = parent.is;
+var ok = parent.ok;
 
 function getComputedStyleWrapper(elem, prop)
 {
   return window.getComputedStyle(elem, null).getPropertyValue(prop);
 }
 
 function setPossiblyAliasedProperty(aElem, aPropertyName, aPropertyValue,
                                     aPropertyMapping)
@@ -127,30 +121,34 @@ function testFlexboxTestcase(aFlexboxTes
   }
 
   // Clean up: drop the flex container.
   content.removeChild(flexContainer);
 }
 
 function main()
 {
+  ok(SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
+     "expecting to be run with flexbox support enabled");
+
   gFlexboxTestcases.forEach(
     function(aTestcase) {
       testFlexboxTestcase(aTestcase, "",
                           gRowPropertyMapping);
       testFlexboxTestcase(aTestcase, "row",
                           gRowPropertyMapping);
       testFlexboxTestcase(aTestcase, "row-reverse",
                           gRowReversePropertyMapping);
       testFlexboxTestcase(aTestcase, "column",
                           gColumnPropertyMapping);
       testFlexboxTestcase(aTestcase, "column-reverse",
                           gColumnReversePropertyMapping);
     }
   );
-  SimpleTest.finish();
+
+  parent.finish();
 }
 
 window.addEventListener("load", main, false);
 </script>
 </pre>
 </body>
 </html>
--- a/layout/style/test/test_flexbox_align_self_auto.html
+++ b/layout/style/test/test_flexbox_align_self_auto.html
@@ -3,214 +3,44 @@
 <!--
 https://bugzilla.mozilla.org/show_bug.cgi?id=696253
 -->
 <head>
   <meta charset="utf-8">
   <title>Test behavior of 'align-self:auto' (Bug 696253)</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
-  <style type="text/css">
-  </style>
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
 <div id="display">
-  <div id="myDiv"></div>
+  <iframe id="iframe"></iframe>
 </div>
 <pre id="test">
 <script type="application/javascript">
 "use strict";
 
-/**
- * Test behavior of 'align-self:auto' (Bug 696253)
- * ===============================================
- *
- * The value "align-self: auto" is special.  It's the initial value for
- * "align-self", and it's supposed to compute to the parent's "align-items" value.
- *
- * However, to allow its style-struct to be shared by default, we internally
- * make it compute to a special "auto" enumerated value, and then we resolve that
- * to the correct value by examining the parent's style struct whenever we actually
- * need to use it.
- *
- * This test makes sure that optimization isn't detectable to content.
- *
- * One special case of this is inheritance -- e.g.:
- *
- *  <html style="align-items: baseline">
- *    <body style="align-self: auto; align-items: center">
- *      <div style="align-self: inherit">
- *
- * In that example, the child div's "inherit" should get the _computed_ value
- * of "align-self" on the body.  That, in turn, is "auto", so it should compute to
- * its parent's "align-items" value, which is "baseline".  So we need to end up 
- * with a computed "align-self" value of "baseline" on the child.
- *
- * (NOTE: if we instead allowed the child div to directly inherit the value "auto"
- * from its parent, then we'd get different & incorrect behavior. The div would
- * resolve that inherited "auto" value to its own parent's "align-items" value,
- * which is "center" -- not "baseline".)
- *
- * This mochitest tests that situation and a few other similar tricky situations.
- */
-
-/*
- * Utility function for getting computed style of "align-self":
- */
-function getComputedAlignSelf(elem) {
-  return window.getComputedStyle(elem, "").MozAlignSelf;
-}
-
-/*
- * Tests that are useful regardless of whether we have a parent node:
- */
-function testGeneralNode(elem) {
-  // Test initial computed style
-  // (Initial value should be 'auto', which should compute to 'stretch')
-  is(getComputedAlignSelf(elem), "stretch",
-     "initial computed value of 'align-self' should be 'stretch', " +
-     "if we haven't explicitly set any style on the parent");
-
-  // Test value after setting align-self explicitly to "auto"
-  elem.style.MozAlignSelf = "auto";
-  is(getComputedAlignSelf(elem), "stretch",
-     "computed value of 'align-self: auto' should be 'stretch', " +
-     "if we haven't explicitly set any style on the parent");
-  elem.style.MozAlignSelf = ""; // clean up
-
-  // Test value after setting align-self explicitly to "inherit"
-  elem.style.MozAlignSelf = "inherit";
-  is(getComputedAlignSelf(elem), "stretch",
-     "computed value of 'align-self: inherit' should be 'stretch', " +
-     "if we haven't explicitly set any style on the parent");
-  elem.style.MozAlignSelf = ""; // clean up
-}
+/** Test behavior of 'align-self:auto' (Bug 696253) **/
 
 /*
- * Tests that depend on us having a parent node:
+ * 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_align_self_auto.html") for the actual
+ * test code and for more documentation.
  */
-function testNodeThatHasParent(elem) {
-  // Sanity-check that we actually do have a styleable parent:
-  ok(elem.parentNode && elem.parentNode.style,
-     "bug in test -- expecting caller to pass us a node with a parent");
-
-  // Test initial computed style when "align-items" has been set on our parent.
-  // (elem's initial "align-self" value should be "auto", which should compute
-  // to its parent's "align-items" value, which in this case is "center".)
-  elem.parentNode.style.MozAlignItems = "center";
-  is(getComputedAlignSelf(elem), "center",
-     "initial computed value of 'align-self' should match parent's " +
-     "specified 'align-items' value");
-
-  // ...and now test computed style after setting "align-self" explicitly to
-  // "auto" (with parent "align-items" still at "center")
-  elem.style.MozAlignSelf = "auto";
-  is(getComputedAlignSelf(elem), "center",
-     "computed value of 'align-self: auto' should match parent's " +
-     "specified 'align-items' value");
-
-  elem.style.MozAlignSelf = ""; // clean up
-  elem.parentNode.style.MozAlignItems = ""; // clean up
 
-  // Finally: test computed style after setting "align-self" to "inherit"
-  // and leaving parent at its initial value (which should be "auto", which
-  // should compute to "stretch")
-  elem.style.MozAlignSelf = "inherit";
-  is(getComputedAlignSelf(elem), "stretch",
-     "computed value of 'align-self: inherit' should take parent's " +
-     "computed 'align-self' value (which should be 'stretch', " +
-     "if we haven't explicitly set any other style");
-  elem.style.MozAlignSelf = ""; // clean up
- }
-
-/*
- * Tests that depend on us having a grandparent node:
- */
-function testNodeThatHasGrandparent(elem) {
-  // Sanity-check that we actually do have a styleable grandparent:
-  ok(elem.parentNode && elem.parentNode.parentNode &&
-     elem.parentNode.parentNode.style,
-     "bug in test -- should be getting a node with a grandparent");
-
-  // Test computed "align-self" after we set "align-self" to "inherit" on our elem
-  // and to "auto" on its parent, and "align-items" to "baseline" on its
-  // grandparent. The parent's "auto" value should resolve to "baseline", and
-  // that's what our elem should inherit.
-
-  elem.style.MozAlignSelf = "inherit";
-  elem.parentNode.style.MozAlignSelf = "auto";
-  elem.parentNode.parentNode.style.MozAlignItems = "baseline";
-
-  is(getComputedAlignSelf(elem), "baseline",
-     "computed value of 'align-self:inherit' on node when parent has " +
-     "'align-self:auto' and grandparent has 'align-items:baseline'")
+SimpleTest.waitForExplicitFinish();
 
-  // clean up:
-  elem.style.MozAlignSelf = "";
-  elem.parentNode.style.MozAlignSelf = "";
-  elem.parentNode.parentNode.style.MozAlignItems = "";
-
-  // Test computed "align-self" after we set it to "auto" on our node, set
-  // "align-items" to "inherit" on its parent, and "align-items" to "baseline"
-  // on its grandparent. The parent's "inherit" should compute to "baseline",
-  // and our elem's "auto" value should resolve to that.
-  elem.style.MozAlignSelf = "auto";
-  elem.parentNode.style.MozAlignItems = "inherit";
-  elem.parentNode.parentNode.style.MozAlignItems = "baseline";
-  is(getComputedAlignSelf(elem), "baseline",
-     "computed value of 'align-self:auto on node when parent has " +
-     "'align-items:inherit' and grandparent has 'align-items:baseline'")
-
-  // clean up:
-  elem.style.MozAlignSelf = "";
-  elem.parentNode.style.MozAlignItems = "";
-  elem.parentNode.parentNode.style.MozAlignItems = "";
-}
-
-/*
- * Main test function
- */
-function main() {
-  // Test the root node
-  // ==================
-  // (It's special because it has no parent style context.)
-
-  var rootNode = document.documentElement;
+ok(!SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
+   "expecting flexbox pref to be disabled by default");
 
-  // Sanity-check that we actually have the root node, as far as CSS is concerned.
-  // (Note: rootNode.parentNode is a HTMLDocument object -- not an element that
-  // we inherit style from.)
-  ok(!rootNode.parentNode.style,
-     "expecting root node to have no node to inherit style from");
-
-  testGeneralNode(rootNode);
-
-  // Test the body node
-  // ==================
-  // (It's special because it has no grandparent style context.)
-
-  var body = document.getElementsByTagName("body")[0];
-  is(body.parentNode, document.documentElement,
-     "expecting body element's parent to be the root node");
+SpecialPowers.setBoolPref("layout.css.flexbox.enabled", true);
+document.getElementById("iframe").src = "file_flexbox_align_self_auto.html";
 
-  testGeneralNode(body);
-  testNodeThatHasParent(body);
-
-  // Test the <div id="display"> node
-  // ================================
-  // (It has both a parent and a grandparent style context.)
-
-  var displayNode = document.getElementById("display");
-  is(displayNode.parentNode.parentNode, document.documentElement,
-     "expecting 'display' node's grandparent to be the root node");
-
-  testGeneralNode(displayNode);
-  testNodeThatHasParent(displayNode);
-  testNodeThatHasGrandparent(displayNode);
+function finish() {
+  SpecialPowers.clearUserPref("layout.css.flexbox.enabled");
+  SimpleTest.finish();
 }
-
-main();
-
 </script>
 </pre>
 </body>
 </html>
--- a/layout/style/test/test_flexbox_flex_grow_and_shrink.html
+++ b/layout/style/test/test_flexbox_flex_grow_and_shrink.html
@@ -2,182 +2,46 @@
 <html>
 <!--
 https://bugzilla.mozilla.org/show_bug.cgi?id=696253
 -->
 <head>
   <meta charset="utf-8">
   <title>Test for flex-grow and flex-shrink animation (Bug 696253)</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
-  <script type="application/javascript" src="animation_utils.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
-  <style type="text/css">
-
-  /* Set -moz-flex-grow and -moz-flex-shrink to nonzero values,
-     when no animations are applied. */
-
-  * { -moz-flex-grow: 10; -moz-flex-shrink: 20 }
-
-  /* These animations SHOULD affect computed style */
-  @-moz-keyframes flexGrowTwoToThree {
-     0%   { -moz-flex-grow: 2 }
-     100% { -moz-flex-grow: 3 }
-  }
-  @-moz-keyframes flexShrinkTwoToThree {
-     0%   { -moz-flex-shrink: 2 }
-     100% { -moz-flex-shrink: 3 }
-  }
-  @-moz-keyframes flexGrowZeroToZero {
-     0%   { -moz-flex-grow: 0 }
-     100% { -moz-flex-grow: 0 }
-  }
-  @-moz-keyframes flexShrinkZeroToZero {
-     0%   { -moz-flex-shrink: 0 }
-     100% { -moz-flex-shrink: 0 }
-  }
-
-  /* These animations SHOULD NOT affect computed style. (flex-grow and
-     flex-shrink are animatable "except between '0' and other values") */
-  @-moz-keyframes flexGrowZeroToOne {
-     0%   { -moz-flex-grow: 0 }
-     100% { -moz-flex-grow: 1 }
-  }
-  @-moz-keyframes flexShrinkZeroToOne {
-     0%   { -moz-flex-shrink: 0 }
-     100% { -moz-flex-shrink: 1 }
-  }
-  @-moz-keyframes flexGrowOneToZero {
-     0%   { -moz-flex-grow: 1 }
-     100% { -moz-flex-grow: 0 }
-  }
-  @-moz-keyframes flexShrinkOneToZero {
-     0%   { -moz-flex-shrink: 1 }
-     100% { -moz-flex-shrink: 0 }
-  }
-
-  </style>
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
 <div id="display">
-  <div id="myDiv"></div>
+  <iframe id="iframe"></iframe>
 </div>
 <pre id="test">
 <script type="application/javascript">
 "use strict";
 
 /** Test for flex-grow and flex-shrink animation (Bug 696253) **/
 
-function advance_clock(milliseconds) {
-  SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
-}
-
-var display = document.getElementById("display");
-var div = null;
-var cs = null;
-function new_div(style) {
-  return new_element("div", style);
-}
-function new_element(tagname, style) {
-  if (div != null || cs != null) {
-    ok(false, "test author forgot to call done_div");
-  }
-  if (typeof(style) != "string") {
-    ok(false, "test author forgot to pass argument");
-  }
-  div = document.createElement(tagname);
-  div.setAttribute("style", style);
-  display.appendChild(div);
-  cs = getComputedStyle(div, "");
-}
+/*
+ * 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_flex_grow_and_shrink.html") for
+ * the actual test code and for more documentation.
+ */
 
-function done_div() {
-  display.removeChild(div);
-  div = null;
-  cs = null;
-}
-// take over the refresh driver
-advance_clock(0);
-
-// ANIMATIONS THAT SHOULD AFFECT COMPUTED STYLE
-// --------------------------------------------
-
-// flexGrowTwoToThree: 2.0 at 0%, 2.5 at 50%, 10 after animation is over
-new_div("-moz-animation: flexGrowTwoToThree linear 1s");
-is_approx(cs.MozFlexGrow, 2, 0.01, "flexGrowTwoToThree at 0.0s");
-advance_clock(500);
-is_approx(cs.MozFlexGrow, 2.5, 0.01, "flexGrowTwoToThree at 0.5s");
-advance_clock(1000);
-is(cs.MozFlexGrow, 10, "flexGrowTwoToThree at 1.5s");
-done_div();
-
-// flexShrinkTwoToThree: 2.0 at 0%, 2.5 at 50%, 20 after animation is over
-new_div("-moz-animation: flexShrinkTwoToThree linear 1s");
-is_approx(cs.MozFlexShrink, 2, 0.01,  "flexShrinkTwoToThree at 0.0s");
-advance_clock(500);
-is_approx(cs.MozFlexShrink, 2.5, 0.01, "flexShrinkTwoToThree at 0.5s");
-advance_clock(1000);
-is(cs.MozFlexShrink, 20, "flexShrinkTwoToThree at 1.5s");
-done_div();
+SimpleTest.waitForExplicitFinish();
 
-// flexGrowZeroToZero: 0 at 0%, 0 at 50%, 10 after animation is over
-new_div("-moz-animation: flexGrowZeroToZero linear 1s");
-is(cs.MozFlexGrow, 0, "flexGrowZeroToZero at 0.0s");
-advance_clock(500);
-is(cs.MozFlexGrow, 0, "flexGrowZeroToZero at 0.5s");
-advance_clock(1000);
-is(cs.MozFlexGrow, 10, "flexGrowZeroToZero at 1.5s");
-done_div();
-
-// flexShrinkZeroToZero: 0 at 0%, 0 at 50%, 20 after animation is over
-new_div("-moz-animation: flexShrinkZeroToZero linear 1s");
-is(cs.MozFlexShrink, 0, "flexShrinkZeroToZero at 0.0s");
-advance_clock(500);
-is(cs.MozFlexShrink, 0, "flexShrinkZeroToZero at 0.5s");
-advance_clock(1000);
-is(cs.MozFlexShrink, 20, "flexShrinkZeroToZero at 1.5s");
-done_div();
-
-// ANIMATIONS THAT SHOULD NOT AFFECT COMPUTED STYLE
-// ------------------------------------------------
-
-// flexGrowZeroToOne: no effect on computed style. 10 all the way through.
-new_div("-moz-animation: flexGrowZeroToOne linear 1s");
-is(cs.MozFlexGrow, 10, "flexGrowZeroToOne at 0.0s");
-advance_clock(500);
-is(cs.MozFlexGrow, 10, "flexGrowZeroToOne at 0.5s");
-advance_clock(1000);
-is(cs.MozFlexGrow, 10, "flexGrowZeroToOne at 1.5s");
-done_div();
+ok(!SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
+   "expecting flexbox pref to be disabled by default");
 
-// flexShrinkZeroToOne: no effect on computed style. 20 all the way through.
-new_div("-moz-animation: flexShrinkZeroToOne linear 1s");
-is(cs.MozFlexShrink, 20,  "flexShrinkZeroToOne at 0.0s");
-advance_clock(500);
-is(cs.MozFlexShrink, 20, "flexShrinkZeroToOne at 0.5s");
-advance_clock(1000);
-is(cs.MozFlexShrink, 20, "flexShrinkZeroToOne at 1.5s");
-done_div();
+SpecialPowers.setBoolPref("layout.css.flexbox.enabled", true);
+document.getElementById("iframe").src =
+  "file_flexbox_flex_grow_and_shrink.html";
 
-// flexGrowOneToZero: no effect on computed style. 10 all the way through.
-new_div("-moz-animation: flexGrowOneToZero linear 1s");
-is(cs.MozFlexGrow, 10, "flexGrowOneToZero at 0.0s");
-advance_clock(500);
-is(cs.MozFlexGrow, 10, "flexGrowOneToZero at 0.5s");
-advance_clock(1000);
-is(cs.MozFlexGrow, 10, "flexGrowOneToZero at 1.5s");
-done_div();
-
-// flexShrinkOneToZero: no effect on computed style. 20 all the way through.
-new_div("-moz-animation: flexShrinkOneToZero linear 1s");
-is(cs.MozFlexShrink, 20,  "flexShrinkOneToZero at 0.0s");
-advance_clock(500);
-is(cs.MozFlexShrink, 20, "flexShrinkOneToZero at 0.5s");
-advance_clock(1000);
-is(cs.MozFlexShrink, 20, "flexShrinkOneToZero at 1.5s");
-done_div();
-
-SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
-
+function finish() {
+  SpecialPowers.clearUserPref("layout.css.flexbox.enabled");
+  SimpleTest.finish();
+}
 </script>
 </pre>
 </body>
 </html>
--- a/layout/style/test/test_flexbox_flex_shorthand.html
+++ b/layout/style/test/test_flexbox_flex_shorthand.html
@@ -1,260 +1,46 @@
 <!DOCTYPE HTML>
 <html>
 <!--
 https://bugzilla.mozilla.org/show_bug.cgi?id=696253
 -->
 <head>
+  <meta charset="utf-8">
   <title>Test for Bug 696253</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
-  <script type="text/javascript" src="property_database.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=696253">Mozilla Bug 696253</a>
-<p id="display"></p>
-<div id="content">
+<div id="display">
+  <iframe id="iframe"></iframe>
 </div>
 <pre id="test">
-<script type="application/javascript;version=1.7">
-
-/** Test for Bug 696253 **/
-/* (Testing the [-moz-]flex CSS shorthand property) */
-
-const gFlexPropName = "-moz-flex";
-const gFlexPropInfo = gCSSProperties[gFlexPropName];
-
-// Default values for shorthand subproperties, when they're not specified
-// explicitly in a testcase.  This lets the testcases be more concise.
-//
-// The values here are from the flexbox spec on the 'flex' shorthand:
-//   "When omitted, [flex-grow and flex-shrink] are set to '1'.
-//   "If omitted, the flex basis defaults to 0%"
-let gFlexShorthandDefaults = {
-    "-moz-flex-grow":   "1",
-    "-moz-flex-shrink": "1",
-    "-moz-flex-basis":  "0%"
-};
-
-let gFlexShorthandTestcases = [
-/*
-  {
-    "-moz-flex":        "SPECIFIED value for flex shorthand",
+<script type="application/javascript">
+"use strict";
 
-    // Expected Computed Values of Subproperties
-    // Semi-optional -- if unspecified, the expected value is taken
-    // from gFlexShorthandDefaults.
-    "-moz-flex-grow":   "EXPECTED computed value for flex-grow property",
-    "-moz-flex-shrink": "EXPECTED computed value for flex-shrink property",
-    "-moz-flex-basis":  "EXPECTED computed value for flex-basis property",
-  }, 
-*/
-
-  // Initial values of subproperties:
-  // --------------------------------
-  // (checked by another test that uses property_database.js, too, but
-  // might as well check here, too, for thoroughness).
-  {
-    "-moz-flex":        "",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "1",
-    "-moz-flex-basis":  "auto",
-  },
-  {
-    "-moz-flex":        "-moz-initial",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "1",
-    "-moz-flex-basis":  "auto",
-  },
+/** Test for Bug 696253, for the [-moz-]flex CSS shorthand property) **/
 
-  // Special keyword "none" --> "0 0 auto"
-  // -------------------------------------
-  {
-    "-moz-flex":        "none",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "0",
-    "-moz-flex-basis":  "auto",
-  },
-
-  // One Value (numeric) --> sets flex-grow
-  // --------------------------------------
-  {
-    "-moz-flex":        "0",
-    "-moz-flex-grow":   "0",
-  },
-  {
-    "-moz-flex":        "5",
-    "-moz-flex-grow":   "5",
-  },
-  {
-    "-moz-flex":        "1000",
-    "-moz-flex-grow":   "1000",
-  },
-  {
-    "-moz-flex":        "0.0000001",
-    "-moz-flex-grow":   "1e-7"
-  },
-  {
-    "-moz-flex":        "20000000",
-    "-moz-flex-grow":   "2e+7"
-  },
-
-  // One Value (length or other nonnumeric) --> sets flex-basis
-  // ----------------------------------------------------------
-  {
-    "-moz-flex":        "0px",
-    "-moz-flex-basis":  "0px",
-  },
-  {
-    "-moz-flex":        "0%",
-    "-moz-flex-basis":  "0%",
-  },
-  {
-    "-moz-flex":        "25px",
-    "-moz-flex-basis":  "25px",
-  },
-  {
-    "-moz-flex":        "5%",
-    "-moz-flex-basis":  "5%",
-  },
-  {
-    "-moz-flex":        "auto",
-    "-moz-flex-basis":  "auto",
-  },
-  {
-    "-moz-flex":        "-moz-fit-content",
-    "-moz-flex-basis":  "-moz-fit-content",
-  },
-  {
-    "-moz-flex":        "calc(5px + 6px)",
-    "-moz-flex-basis":  "11px",
-  },
-  {
-    "-moz-flex":        "calc(15% + 30px)",
-    "-moz-flex-basis":  "calc(30px + 15%)",
-  },
+/*
+ * 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_flex_shorthand.html") for the actual
+ * test code and for more documentation.
+ */
 
-  // Two Values (numeric) --> sets flex-grow, flex-shrink
-  // ----------------------------------------------------
-  {
-    "-moz-flex":        "0 0",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "0",
-  },
-  {
-    "-moz-flex":        "0 2",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "2",
-  },
-  {
-    "-moz-flex":        "3 0",
-    "-moz-flex-grow":   "3",
-    "-moz-flex-shrink": "0",
-  },
-  {
-    "-moz-flex":        "0.5000 2.03",
-    "-moz-flex-grow":   "0.5",
-    "-moz-flex-shrink": "2.03",
-  },
-  {
-    "-moz-flex":        "300.0 500.0",
-    "-moz-flex-grow":   "300",
-    "-moz-flex-shrink": "500",
-  },
+SimpleTest.waitForExplicitFinish();
+
+ok(!SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
+   "expecting flexbox pref to be disabled by default");
 
-  // Two Values (numeric & length-ish) --> sets flex-grow, flex-basis
-  // ----------------------------------------------------------------
-  {
-    "-moz-flex":        "0 0px",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-basis":  "0px",
-  },
-  {
-    "-moz-flex":        "0 0%",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-basis":  "0%",
-  },
-  {
-    "-moz-flex":        "10 30px",
-    "-moz-flex-grow":   "10",
-    "-moz-flex-basis":  "30px",
-  },
-  {
-    "-moz-flex":        "99px 2.3",
-    "-moz-flex-grow":   "2.3",
-    "-moz-flex-basis":  "99px",
-  },
-  {
-    "-moz-flex":        "99% 6",
-    "-moz-flex-grow":   "6",
-    "-moz-flex-basis":  "99%",
-  },
-  {
-    "-moz-flex":        "auto 5",
-    "-moz-flex-grow":   "5",
-    "-moz-flex-basis":  "auto",
-  },
-  {
-    "-moz-flex":        "5 -moz-fit-content",
-    "-moz-flex-grow":   "5",
-    "-moz-flex-basis":  "-moz-fit-content",
-  },
-  {
-    "-moz-flex":        "calc(5% + 10px) 3",
-    "-moz-flex-grow":   "3",
-    "-moz-flex-basis":  "calc(10px + 5%)",
-  },
+SpecialPowers.setBoolPref("layout.css.flexbox.enabled", true);
+document.getElementById("iframe").src = "file_flexbox_flex_shorthand.html";
 
-  // Three Values --> Sets all three subproperties
-  // ---------------------------------------------
-  {
-    "-moz-flex":        "0.0 0.00 0px",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "0",
-    "-moz-flex-basis":  "0px",
-  },
-  {
-    "-moz-flex":        "0% 0 0",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "0",
-    "-moz-flex-basis":  "0%",
-  },
-  {
-    "-moz-flex":        "10px 3 2",
-    "-moz-flex-grow":   "3",
-    "-moz-flex-shrink": "2",
-    "-moz-flex-basis":  "10px",
-  },
-];
-
-function runFlexShorthandTest(aFlexShorthandTestcase)
-{
-  let content = document.getElementById("content");
-
-  let elem = document.createElement("div");
-
-  elem.style[gFlexPropInfo.domProp] = aFlexShorthandTestcase[gFlexPropName];
-  content.appendChild(elem); 
-
-  gFlexPropInfo.subproperties.forEach(function(aSubPropName) {
-    var expectedVal = aSubPropName in aFlexShorthandTestcase ?
-     aFlexShorthandTestcase[aSubPropName] :
-     gFlexShorthandDefaults[aSubPropName];
-
-    // Compare computed value against expected computed value (from testcase)
-    is(window.getComputedStyle(elem, null).getPropertyValue(aSubPropName),
-       expectedVal,
-       "Computed value of subproperty \"" + aSubPropName + "\" when we set \"" +
-       gFlexPropName + ": " + aFlexShorthandTestcase[gFlexPropName] + "\"");
-  });
-
-  // Clean up
-  content.removeChild(elem);
+function finish() {
+  SpecialPowers.clearUserPref("layout.css.flexbox.enabled");
+  SimpleTest.finish();
 }
-
-// Run the tests!
-gFlexShorthandTestcases.forEach(runFlexShorthandTest)
-
 </script>
 </pre>
 </body>
 </html>
--- a/layout/style/test/test_flexbox_layout.html
+++ b/layout/style/test/test_flexbox_layout.html
@@ -1,156 +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>
-  <script type="text/javascript" src="flexbox_layout_testcases.js"></script>
-  <script type="text/javascript" src="property_database.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>
-<p id="display"></p>
-<div id="content">
+<div id="display">
+  <iframe id="iframe"></iframe>
 </div>
 <pre id="test">
-<script type="application/javascript;version=1.7">
+<script type="application/javascript">
 "use strict";
 
 /** Test for Bug 666041 **/
 
-/* Flexbox Layout Tests
- * --------------------
- * This mochitest exercises our implementation of the flexbox layout algorithm
- * by creating a flex container, inserting some flexible children, and then
- * verifying that the computed width of those children is what we expect.
+/*
+ * This mochitest runs in an iframe so that we can selectively turn on the
+ * flexbox about:config pref before its document is instantiated.
  *
- * See flexbox_layout_testcases.js for the actual testcases & testcase format.
+ * See the iframe's source ("file_flexbox_layout.html") for the actual
+ * test code and for more documentation.
  */
 
 SimpleTest.waitForExplicitFinish();
 
-function getComputedStyleWrapper(elem, prop)
-{
-  return window.getComputedStyle(elem, null).getPropertyValue(prop);
-}
-
-function setPossiblyAliasedProperty(aElem, aPropertyName, aPropertyValue,
-                                    aPropertyMapping)
-{
-  let actualPropertyName = (aPropertyName in aPropertyMapping ?
-                            aPropertyMapping[aPropertyName] : aPropertyName);
-
-  if (!gCSSProperties[actualPropertyName]) {
-    ok(false, "Bug in test: property '" + actualPropertyName +
-              "' doesn't exist in gCSSProperties");
-  } else {
-    let domPropertyName = gCSSProperties[actualPropertyName].domProp;
-    aElem.style[domPropertyName] = aPropertyValue;
-  }
-}
-
-// The main test function.
-// aFlexboxTestcase is an entry from the list in flexbox_layout_testcases.js
-function testFlexboxTestcase(aFlexboxTestcase, aFlexDirection, aPropertyMapping)
-{
-  let content = document.getElementById("content");
-
-  // Create flex container
-  let flexContainer = document.createElement("div");
-  flexContainer.style.display = "-moz-flex";
-  flexContainer.style.MozFlexDirection = aFlexDirection;
-  setPossiblyAliasedProperty(flexContainer, "_main-size", gDefaultFlexContainerSize, aPropertyMapping);
-
-  // Apply testcase's customizations for flex container (if any).
-  if (aFlexboxTestcase.container_properties) {
-    for (let propName in aFlexboxTestcase.container_properties) {
-      let propValue = aFlexboxTestcase.container_properties[propName];
-      setPossiblyAliasedProperty(flexContainer, propName, propValue,
-                                 aPropertyMapping);
-    }
-  }
-
-  // Create & append flex items
-  aFlexboxTestcase.items.forEach(function(aChildSpec) {
-    // Create an element for our item
-    let child = document.createElement("div");
-
-    // Set all the specified properties on our item
-    for (let propName in aChildSpec) {
-      // aChildSpec[propName] is either a specified value,
-      // or an array of [specifiedValue, computedValue]
-      let specifiedValue = Array.isArray(aChildSpec[propName]) ?
-        aChildSpec[propName][0] :
-        aChildSpec[propName];
+ok(!SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
+   "expecting flexbox pref to be disabled by default");
 
-      // SANITY CHECK:
-      if (Array.isArray(aChildSpec[propName])) {
-        is(aChildSpec[propName].length, 2,
-           "unexpected number of elements in array within child spec");
-      }
-
-      if (specifiedValue !== null) {
-        setPossiblyAliasedProperty(child, propName, specifiedValue,
-                                   aPropertyMapping);
-      }
-    }
-
-    // Append the item to the flex container
-    flexContainer.appendChild(child);
-  });
-
-  // Append the flex container
-  content.appendChild(flexContainer);
-
-  // NOW: Test the computed style on the flex items
-  let child = flexContainer.firstChild;
-  for (let i = 0; i < aFlexboxTestcase.items.length; i++) {
-    if (!child) { // sanity
-      ok(false, "should have created a child for each child-spec");
-    }
+SpecialPowers.setBoolPref("layout.css.flexbox.enabled", true);
+document.getElementById("iframe").src = "file_flexbox_layout.html";
 
-    let childSpec = aFlexboxTestcase.items[i];
-    for (let propName in childSpec) {
-      if (Array.isArray(childSpec[propName])) {
-        let expectedVal = childSpec[propName][1];
-        let actualPropName = (propName in aPropertyMapping ?
-                              aPropertyMapping[propName] : propName);
-        is(getComputedStyleWrapper(child, actualPropName), expectedVal,
-           "computed value of '" + actualPropName + "' should match expected");
-      }
-    }
-
-    child = child.nextSibling;
-  }
-
-  // Clean up: drop the flex container.
-  content.removeChild(flexContainer);
-}
-
-function main()
-{
-  gFlexboxTestcases.forEach(
-    function(aTestcase) {
-      testFlexboxTestcase(aTestcase, "",
-                          gRowPropertyMapping);
-      testFlexboxTestcase(aTestcase, "row",
-                          gRowPropertyMapping);
-      testFlexboxTestcase(aTestcase, "row-reverse",
-                          gRowReversePropertyMapping);
-      testFlexboxTestcase(aTestcase, "column",
-                          gColumnPropertyMapping);
-      testFlexboxTestcase(aTestcase, "column-reverse",
-                          gColumnReversePropertyMapping);
-    }
-  );
+function finish() {
+  SpecialPowers.clearUserPref("layout.css.flexbox.enabled");
   SimpleTest.finish();
 }
-
-window.addEventListener("load", main, false);
 </script>
 </pre>
 </body>
 </html>