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 109169 48f68293ee0896c665dd146f04c3607a640b5934
parent 109168 7750345367df1c1411cb9a90cb525df56d751012
child 109170 b768892d382529bf77db3b40de12fb55d2cdd56e
push id15880
push userdholbert@mozilla.com
push dateThu, 04 Oct 2012 01:47:54 +0000
treeherdermozilla-inbound@b768892d3825 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz
bugs797601
milestone18.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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>