Bug 880104 part 1: Rewrite flexbox-align-self-* reftests to not depend on prefixed intrinsic sizing keywords. rs=dbaron
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 06 Jun 2013 00:27:23 -0700
changeset 145708 5e74b815c3327efacc29394a205af1363d5baec7
parent 145707 971b1e4b4c46e9cc01202bd7d496fd20a4033f22
child 145709 1e838ba3ecb5b914556119d1d5c3a311630df322
push id2697
push userbbajaj@mozilla.com
push dateMon, 05 Aug 2013 18:49:53 +0000
treeherdermozilla-beta@dfec938c7b63 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs880104
milestone24.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 880104 part 1: Rewrite flexbox-align-self-* reftests to not depend on prefixed intrinsic sizing keywords. rs=dbaron
layout/reftests/flexbox/flexbox-align-self-horiz-1-block.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-1-table.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-2-ref.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-4-ref.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-1-ref.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-2-ref.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-3-ref.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-4-ref.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-rtl-1-ref.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-rtl-2-ref.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-rtl-3-ref.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-rtl-4-ref.xhtml
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-1-block.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-1-block.xhtml
@@ -6,18 +6,17 @@
 <!-- Testcase for align-items / align-self behavior, with all the possible
      values included on different items within a flex container. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         height: 200px;
-        width: -moz-fit-content;
-        display: flex;
+        display: inline-flex;
         font-size: 10px;
         line-height: 10px;
 
         /* Any children whose align-self is 'auto' (or unspecified, or
            initial) will end up taking this value from us: */
         align-items: center;
 
         /* Any children whose align-self is 'inherit' will end up
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-1-table.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-1-table.xhtml
@@ -6,18 +6,17 @@
 <!-- Testcase for align-items / align-self behavior, with all the possible
      values included on different items within a flex container. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         height: 200px;
-        width: -moz-fit-content;
-        display: flex;
+        display: inline-flex;
         font-size: 10px;
         line-height: 10px;
 
         /* Any children whose align-self is 'auto' (or unspecified, or
            initial) will end up taking this value from us: */
         align-items: center;
 
         /* Any children whose align-self is 'inherit' will end up
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-2-ref.xhtml
@@ -7,19 +7,20 @@
      in place of flex items and using relative positioning in place of the
      align-items / align-self properties. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         height: 200px;
-        width: -moz-fit-content;
+        display: inline-block;
         font-size: 10px;
         line-height: 10px;
+        vertical-align: top;
       }
 
       .flexbox > div {  float: left }
       .flex-start, .flex-end, .center, .baseline, .stretch,
       .auto, .unspecified, .initial, .inherit {
         width: 40px;
         margin:       1px 2px 3px 4px;
         border-width: 2px 3px 4px 5px;
@@ -56,24 +57,25 @@
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end" style="top: 172px">end</div>
       <div class="flex-end big"  style="top: 82px">a b c d e f</div>
       <div class="center" style="top: 86px">center</div>
       <div class="center big" style="top: 41px">a b c d e f</div>
     </div>
+    <br/>
     <div class="flexbox">
       <!-- We use inline-blocks inside of a wrapper-block as references for the
            baseline-aligned flex items, since inline-blocks get
            baseline-aligned in block layout. We also need to specify the widths
            manually here since the "flexbox > div" child-selector doesn't
            handle these guys (since they're grandchildren).
         -->
-      <div style="width: -moz-fit-content;">
+      <div>
         <div class="baseline"
              style="display: inline-block">base</div
        ><div class="baseline big"
              style="display: inline-block">abc</div>
       </div>
       <div class="stretch" style="height: 182px">stretch</div>
       <div class="stretch big">a b c d e f</div>
     </div>
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml
@@ -7,28 +7,27 @@
      values included on different items within a flex container, and with
      margin/border/padding values on each item. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         height: 200px;
-        width: -moz-fit-content;
-        display: flex;
+        display: inline-flex;
         font-size: 10px;
         line-height: 10px;
+        vertical-align: top;
       }
 
       .flexbox > div {
         width: 40px;
         margin:       1px 2px 3px 4px;
         border-width: 2px 3px 4px 5px;
         padding:      3px 4px 5px 6px;
-
         border-style: dotted;
       }
 
       .big {
         height: 100px;
         font-size: 20px;
         line-height: 20px;
       }
@@ -60,16 +59,17 @@
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b c d e f</div>
       <div class="center">center</div>
       <div class="center big">a b c d e f</div>
     </div>
+    <br/>
     <div class="flexbox">
       <div class="baseline">base</div>
       <div class="baseline big">abc</div>
       <div class="stretch">stretch</div>
       <div class="stretch big">a b c d e f</div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml
@@ -8,18 +8,17 @@
      flex container being shorter than its items. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         padding: 3px;
         height: 4px;
-        width: -moz-fit-content;
-        display: flex;
+        display: inline-flex;
         font-size: 10px;
         line-height: 10px;
         font-family: sans-serif;
       }
 
       .flexbox > div {
         width: 40px;
       }
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-4-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-4-ref.xhtml
@@ -8,22 +8,23 @@
      align-items / align-self properties. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         padding: 3px;
         height: 4px;
-        width: -moz-fit-content;
+        display: inline-block;
         font-size: 10px;
         line-height: 10px;
         font-family: sans-serif;
         margin-top: 20px;
         margin-bottom: 120px;
+        vertical-align: top;
       }
 
       .flexbox > div {  float: left }
       .flex-start, .flex-end, .center, .baseline, .stretch,
       .auto, .unspecified, .initial, .inherit {
         width: 40px;
         margin:       1px 2px 3px 4px;
         border-width: 2px 3px 4px 5px;
@@ -60,24 +61,25 @@
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end" style="top: -24px">end</div>
       <div class="flex-end big"  style="top: -114px">a b c d e f</div>
       <div class="center" style="top: -12px">center</div>
       <div class="center big" style="top: -57px">a b c d e f</div>
     </div>
+    <br/>
     <div class="flexbox">
       <!-- We use inline-blocks inside of a wrapper-block as references for the
            baseline-aligned flex items, since inline-blocks get
            baseline-aligned in block layout. We also need to specify the widths
            manually here since the "flexbox > div" child-selector doesn't
            handle these guys (since they're grandchildren).
         -->
-      <div style="width: -moz-fit-content;">
+      <div>
         <div class="baseline"
              style="display: inline-block">base</div
        ><div class="baseline big"
              style="display: inline-block">abc</div>
       </div>
       <div class="stretch" style="height: 2px">stretch</div>
       <div class="stretch big">a b c d e f</div>
     </div>
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml
@@ -8,31 +8,30 @@
      flex container being shorter than its items. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         padding: 3px;
         height: 4px;
-        width: -moz-fit-content;
-        display: flex;
+        display: inline-flex;
         font-size: 10px;
         line-height: 10px;
         font-family: sans-serif;
         margin-top: 20px;
         margin-bottom: 120px;
+        vertical-align: top;
       }
 
       .flexbox > div {
         width: 40px;
         margin:       1px 2px 3px 4px;
         border-width: 2px 3px 4px 5px;
         padding:      3px 4px 5px 6px;
-
         border-style: dotted;
       }
 
       .big {
         height: 100px;
         font-size: 20px;
         line-height: 20px;
       }
@@ -65,16 +64,17 @@
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b c d e f</div>
       <div class="center">center</div>
       <div class="center big">a b c d e f</div>
     </div>
+    <br/>
     <div class="flexbox">
       <div class="baseline">base</div>
       <div class="baseline big">abc</div>
       <div class="stretch">stretch</div>
       <div class="stretch big">a b c d e f</div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-1-ref.xhtml
@@ -22,73 +22,86 @@
 
       .flexbox > * {
         clear: both;
       }
 
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        width: -moz-max-content;
+        float: left;
       }
       .flex-end {
         background: orange;
         float: right;
-        width: -moz-max-content;
       }
       .center {
         background: lightblue;
         margin: auto;
-        width: -moz-max-content;
       }
       .baseline {
         background: teal;
-        width: -moz-max-content;
+        float: left;
       }
       .stretch {
         background: pink;
         width: 100%;
       }
       .auto {
         background: yellow;
         margin: auto;
-        width: -moz-max-content;
       }
       .unspecified {
         background: lightgreen;
         margin: auto;
-        width: -moz-max-content;
       }
       .initial {
         background: aqua;
         margin: auto;
-        width: -moz-max-content;
       }
       .inherit {
         background: violet;
         float: right;
-        width: -moz-max-content;
+      }
+
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. -->
+      .centerParent {
+        text-align: center;
+      }
+      .centerParent > * {
+        display: inline-block;
+        text-align: left; /* Keep parent's centering from tweaking my text */
       }
    </style>
   </head>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b c d e f</div>
-      <div class="center">center</div>
+      <div class="centerParent">
+        <div class="center">center</div>
+      </div>
       <div class="center big">a b c d e f</div>
       <div class="baseline">base</div>
       <div class="baseline big">abc</div>
       <div class="stretch">stretch</div>
       <div class="stretch big">a b c d e f</div>
-      <div class="auto">auto</div>
-      <div class="unspecified">unspec</div>
-      <div class="initial">initial</div>
+      <div class="centerParent">
+        <div class="auto">auto</div>
+      </div>
+      <div class="centerParent">
+        <div class="unspecified">unspec</div>
+      </div>
+      <div class="centerParent">
+        <div class="initial">initial</div>
+      </div>
       <div class="inherit">inherit</div>
       <!-- Since that last div is floated right, the container doesn't include
            its height by default. So we add some invisible hacky text (of the
            same font) to make sure our container is tall enough. -->
       <span style="visibility:hidden">hacky text</span>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-2-ref.xhtml
@@ -27,66 +27,62 @@
       div.big {
         font-size: 20px;
         width: 50px;
       }
 
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        width: -moz-max-content;
         float: left;
       }
       .flex-end {
         background: orange;
-        width: -moz-max-content;
         float: right;
       }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. -->
+      .centerParent {
+        text-align: center;
+      }
       .center {
         background: lightblue;
-        width: -moz-max-content;
-        float: left;
+        display: inline-block;
+        text-align: left; /* Keep parent's centering from tweaking my text */
       }
       .baseline {
         background: teal;
-        width: -moz-max-content;
+        float: left;
       }
       .stretch {
         background: pink;
-        width: auto;
       }
+      .clearFloats { clear: both }
    </style>
   </head>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b c d e f</div>
-      <div style="margin: auto; width: -moz-max-content">
+      <div class="clearFloats"></div>
+      <div class="centerParent">
         <div class="center">center</div>
       </div>
-      <div style="margin: auto; width: -moz-max-content">
+      <div class="centerParent">
         <div class="center big">a b c d e f</div>
       </div>
     </div>
-    <!-- NOTE: I'm not using floats in this flex container, since floating
-         makes it harder to emulate the "stretch" behavior.
-         (We need to use width: auto - not width:100% - because we need to
-         allow space for our margins/borders/padding. And width:auto doesn't do
-         what we want if we're floated.)
-
-         However, since our children aren't floated, their adjacent vertical
-         margins will collapse by default (which doesn't match what happens in
-         the testcase, since margins don't collapse in a flexbox).  So, we
-         compensate for that by bumping up the margin-top value on every
-         collapsed top-margin to "4px", which is the total amount of vertical
-         margin we're expecting between consecutive flex items in the testcase.
-         (4px = 3px margin-bottom + 1px margin-top)
-      -->
     <div class="flexbox">
       <div class="baseline">base</div>
-      <div class="baseline big" style="margin-top: 4px">abc</div>
-      <div class="stretch" style="margin-top: 4px">stretch</div>
+      <div class="baseline big">abc</div>
+      <div class="clearFloats"></div>
+      <div class="stretch">stretch</div>
+      <!-- Force a 3px + 1px = 4px margin between this and the previous div
+           (to thwart the effects of margin-collapsing). This is the only
+           place we need this hack, because everywhere else in this test
+           we use floats or inline-blocks, whose margins don't collapse. -->
       <div class="stretch big" style="margin-top: 4px">a b c d e f</div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-3-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-3-ref.xhtml
@@ -17,60 +17,62 @@
         margin-left: 80px;
       }
 
       div.big {
         font-size: 18px;
         width: 50px;
       }
 
-      .flexbox > * {
-        clear: both;
-      }
-
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        width: -moz-max-content;
+        float: left;
       }
       .flex-end {
         background: orange;
         float: right;
-        width: -moz-max-content;
+      }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. For this to work, the parent has to be at
+           least as wide as the centered content inside of it, so we make it
+           large with a negative margin such that its center aligns with the
+           4px-wide container's center. -->
+      .centerParent {
+        text-align: center;
+        width: 100px;
+        margin-left: -48px;
       }
       .center {
         background: lightblue;
-        margin: auto;
-        width: -moz-max-content;
+        display: inline-block;
+        text-align: left; /* Keep parent's centering from tweaking my text */
       }
       .baseline {
         background: teal;
-        width: -moz-max-content;
+        float: left;
       }
       .stretch {
         background: pink;
       }
+      .clearFloats { clear: both }
    </style>
   </head>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b</div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b</div>
-      <!-- We're using auto margins as references for "align-self:center", but
-           auto margins only work if we've got extra space available, and we
-           don't have extra space available in this case.  So, we create a
-           wide wrapper-div that _will_ have space available.  We position
-           that wrapper-div using a negative margin, so that centering in it
-           is equivalent to centering in our reference for the flex container.
-        -->
-      <div style="width: 100px; margin-left: -48px">
+      <div class="centerParent clearFloats">
         <div class="center">center</div>
+      </div>
+      <div class="centerParent">
         <div class="center big">a b</div>
       </div>
       <div class="baseline">base</div>
       <div class="baseline big">abc</div>
-      <div class="stretch">stretch</div>
+      <div class="stretch clearFloats">stretch</div>
       <div class="stretch big">a b</div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-4-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-4-ref.xhtml
@@ -29,74 +29,66 @@
       div.big {
         font-size: 18px;
         width: 50px;
       }
 
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        width: -moz-max-content;
         float: left;
       }
       .flex-end {
         background: orange;
-        width: -moz-max-content;
         float: right;
       }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. For this to work, the parent has to be at
+           least as wide as the centered content inside of it, so we make it
+           large with a negative margin such that its center aligns with the
+           4px-wide container's center. -->
+      .centerParent {
+        text-align: center;
+        width: 100px;
+        margin-left: -48px;
+      }
       .center {
         background: lightblue;
-        width: -moz-max-content;
+        display: inline-block;
+        text-align: left; /* Keep parent's centering from tweaking my text */
       }
       .baseline {
         background: teal;
-        width: -moz-max-content;
+        float: left;
       }
       .stretch {
         background: pink;
-        width: auto;
       }
+      .clearFloats { clear: both }
    </style>
   </head>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b</div>
       <div class="flex-end">end</div>
-      <div class="flex-end big" style="margin-bottom: 4px">a b</div>
-      <!-- We're using auto margins as references for "align-self:center", but
-           auto margins only work if we've got extra space available, and we
-           don't have extra space available in this case.  So, we create a
-           wide wrapper-div that _will_ have space available.  We position
-           that wrapper-div using a negative margin, so that centering in it
-           is equivalent to centering in our reference for the flex container.
-        -->
-      <div style="width: 100px; margin-left: -48px">
-        <div style="margin: auto; width: -moz-max-content">
-          <div class="center">center</div>
-        </div>
-        <div style="margin: auto; width: -moz-max-content">
-          <div class="center big" style="margin-top: 4px">a b</div>
-        </div>
+      <div class="flex-end big">a b</div>
+      <div class="centerParent">
+        <div class="center">center</div>
+      </div>
+      <div class="centerParent">
+        <div class="center big">a b</div>
       </div>
     </div>
-    <!-- NOTE: I'm not using floats in this flex container, since floating
-         makes it harder to emulate the "stretch" behavior.
-         (We need to use width: auto - not width:100% - because we need to
-         allow space for our margins/borders/padding. And width:auto doesn't do
-         what we want if we're floated.)
-
-         However, since our children aren't floated, their adjacent vertical
-         margins will collapse by default (which doesn't match what happens in
-         the testcase, since margins don't collapse in a flexbox).  So, we
-         compensate for that by bumping up the margin-top value on every
-         collapsed top-margin to "4px", which is the total amount of vertical
-         margin we're expecting between consecutive flex items in the testcase.
-         (4px = 3px margin-bottom + 1px margin-top)
-      -->
     <div class="flexbox">
       <div class="baseline">base</div>
-      <div class="baseline big" style="margin-top: 4px">abc</div>
-      <div class="stretch" style="margin-top: 4px">stretch</div>
+      <div class="baseline big">abc</div>
+      <div class="clearFloats"></div>
+      <div class="stretch">stretch</div>
+      <!-- Force a 3px + 1px = 4px margin between this and the previous div
+           (to thwart the effects of margin-collapsing). This is the only
+           place we need this hack, because everywhere else in this test
+           we use floats or inline-blocks, whose margins don't collapse. -->
       <div class="stretch big" style="margin-top: 4px">a b</div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1-ref.xhtml
@@ -25,84 +25,86 @@
 
       .flexbox > * {
         clear: both;
       }
 
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        width: -moz-max-content;
+        float: right;
       }
       .flex-end {
         background: orange;
         float: left;
-        width: -moz-max-content;
       }
       .center {
         background: lightblue;
         margin: auto;
-        width: -moz-max-content;
       }
       .baseline {
         background: teal;
-        width: -moz-max-content;
+        float: right;
       }
       .stretch {
         background: pink;
         width: 100%;
       }
       .auto {
         background: yellow;
         margin: auto;
-        width: -moz-max-content;
       }
       .unspecified {
         background: lightgreen;
         margin: auto;
-        width: -moz-max-content;
       }
       .initial {
         background: aqua;
         margin: auto;
-        width: -moz-max-content;
       }
       .inherit {
         background: violet;
         float: left;
-        width: -moz-max-content;
       }
-      .hack {
+
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. -->
+      .centerParent {
+        text-align: center;
+      }
+      .centerParent > * {
         display: inline-block;
-        width: 100px;
+        text-align: left; /* Keep parent's centering from tweaking my text */
       }
    </style>
   </head>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b c d e f</div>
-      <div class="center">center</div>
+      <div class="centerParent">
+        <div class="center">center</div>
+      </div>
       <div class="center big">a b c d e f</div>
       <div class="baseline">base</div>
       <div class="baseline big">abc</div>
       <div class="stretch">stretch</div>
       <div class="stretch big">a b c d e f</div>
-      <div class="auto">auto</div>
-      <!-- This particular text ("unspec") appears to trigger a slight
-           difference in behavior between the testcase's & reference case's
-           centering techniques - the "s" ends up being shifted by ~1px.
-           (Probably because the length of the text is a fractional amount of
-           pixels, or something like that.) To hack around that, we add a
-           fixed-width wrapper-div - we should be able to center _that_
-           consistently. -->
-      <div class="unspecified"><div class="hack">unspec</div></div>
-      <div class="initial">initial</div>
+      <div class="centerParent">
+        <div class="auto">auto</div>
+      </div>
+      <div class="centerParent">
+        <div class="unspecified">unspec</div>
+      </div>
+      <div class="centerParent">
+        <div class="initial">initial</div>
+      </div>
       <div class="inherit">inherit</div>
       <!-- Since that last div is floated right, the container doesn't include
            its height by default. So we add some invisible hacky text (of the
            same font) to make sure our container is tall enough. -->
       <span style="visibility:hidden">hacky text</span>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml
@@ -63,40 +63,29 @@
       .initial {
         background: aqua;
         align-self: initial;
       }
       .inherit {
         background: violet;
         align-self: inherit;
       }
-      .hack {
-        display: inline-block;
-        width: 100px;
-      }
    </style>
   </head>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b c d e f</div>
       <div class="center">center</div>
       <div class="center big">a b c d e f</div>
       <div class="baseline">base</div>
       <div class="baseline big">abc</div>
       <div class="stretch">stretch</div>
       <div class="stretch big">a b c d e f</div>
       <div class="auto">auto</div>
-      <!-- This particular text ("unspec") appears to trigger a slight
-           difference in behavior between the testcase's & reference case's
-           centering techniques - the "s" ends up being shifted by ~1px.
-           (Probably because the length of the text is a fractional amount of
-           pixels, or something like that.) To hack around that, we add a
-           fixed-width wrapper-div - we should be able to center _that_
-           consistently. -->
-      <div class="unspecified"><div class="hack">unspec</div></div>
+      <div class="unspecified">unspec</div>
       <div class="initial">initial</div>
       <div class="inherit">inherit</div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-2-ref.xhtml
@@ -30,66 +30,62 @@
       div.big {
         font-size: 20px;
         width: 50px;
       }
 
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        width: -moz-max-content;
         float: right;
       }
       .flex-end {
         background: orange;
-        width: -moz-max-content;
         float: left;
       }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. -->
+      .centerParent {
+        text-align: center;
+      }
       .center {
         background: lightblue;
-        width: -moz-max-content;
-        float: right;
+        display: inline-block;
+        text-align: right; /* Keep parent's centering from tweaking my text */
       }
       .baseline {
         background: teal;
-        width: -moz-max-content;
+        float: right;
       }
       .stretch {
         background: pink;
-        width: auto;
       }
+      .clearFloats { clear: both }
    </style>
   </head>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b c d e f</div>
-      <div style="margin: auto; width: -moz-max-content">
+      <div class="clearFloats"></div>
+      <div class="centerParent">
         <div class="center">center</div>
       </div>
-      <div style="margin: auto; width: -moz-max-content">
+      <div class="centerParent">
         <div class="center big">a b c d e f</div>
       </div>
     </div>
-    <!-- NOTE: I'm not using floats in this flex container, since floating
-         makes it harder to emulate the "stretch" behavior.
-         (We need to use width: auto - not width:100% - because we need to
-         allow space for our margins/borders/padding. And width:auto doesn't do
-         what we want if we're floated.)
-
-         However, since our children aren't floated, their adjacent vertical
-         margins will collapse by default (which doesn't match what happens in
-         the testcase, since margins don't collapse in a flexbox).  So, we
-         compensate for that by bumping up the margin-top value on every
-         collapsed top-margin to "4px", which is the total amount of vertical
-         margin we're expecting between consecutive flex items in the testcase.
-         (4px = 3px margin-bottom + 1px margin-top)
-      -->
     <div class="flexbox">
       <div class="baseline">base</div>
-      <div class="baseline big" style="margin-top: 4px">abc</div>
-      <div class="stretch" style="margin-top: 4px">stretch</div>
+      <div class="baseline big">abc</div>
+      <div class="clearFloats"></div>
+      <div class="stretch">stretch</div>
+      <!-- Force a 3px + 1px = 4px margin between this and the previous div
+           (to thwart the effects of margin-collapsing). This is the only
+           place we need this hack, because everywhere else in this test
+           we use floats or inline-blocks, whose margins don't collapse. -->
       <div class="stretch big" style="margin-top: 4px">a b c d e f</div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-3-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-3-ref.xhtml
@@ -19,60 +19,62 @@
         margin-left: 80px;
       }
 
       div.big {
         font-size: 18px;
         width: 50px;
       }
 
-      .flexbox > * {
-        clear: both;
-      }
-
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        width: -moz-max-content;
+        float: right;
       }
       .flex-end {
         background: orange;
         float: left;
-        width: -moz-max-content;
+      }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. For this to work, the parent has to be at
+           least as wide as the centered content inside of it, so we make it
+           large with a negative margin such that its center aligns with the
+           4px-wide container's center. -->
+      .centerParent {
+        text-align: center;
+        width: 100px;
+        margin-right: -48px;
       }
       .center {
         background: lightblue;
-        margin: auto;
-        width: -moz-max-content;
+        display: inline-block;
+        text-align: right; /* Keep parent's centering from tweaking my text */
       }
       .baseline {
         background: teal;
-        width: -moz-max-content;
+        float: right;
       }
       .stretch {
         background: pink;
       }
+      .clearFloats { clear: both }
    </style>
   </head>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b</div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b</div>
-      <!-- We're using auto margins as references for "align-self:center", but
-           auto margins only work if we've got extra space available, and we
-           don't have extra space available in this case.  So, we create a
-           wide wrapper-div that _will_ have space available.  We position
-           that wrapper-div using a negative margin, so that centering in it
-           is equivalent to centering in our reference for the flex container.
-        -->
-      <div style="width: 100px; margin-right: -48px">
+      <div class="centerParent clearFloats">
         <div class="center">center</div>
+      </div>
+      <div class="centerParent">
         <div class="center big">a b</div>
       </div>
       <div class="baseline">base</div>
       <div class="baseline big">abc</div>
-      <div class="stretch">stretch</div>
+      <div class="stretch clearFloats">stretch</div>
       <div class="stretch big">a b</div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-4-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-4-ref.xhtml
@@ -31,73 +31,66 @@
       div.big {
         font-size: 18px;
         width: 50px;
       }
 
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        width: -moz-max-content;
+        float: right;
       }
       .flex-end {
         background: orange;
-        width: -moz-max-content;
         float: left;
       }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. For this to work, the parent has to be at
+           least as wide as the centered content inside of it, so we make it
+           large with a negative margin such that its center aligns with the
+           4px-wide container's center. -->
+      .centerParent {
+        text-align: center;
+        width: 100px;
+        margin-right: -48px;
+      }
       .center {
         background: lightblue;
-        width: -moz-max-content;
+        display: inline-block;
+        text-align: right; /* Keep parent's centering from tweaking my text */
       }
       .baseline {
         background: teal;
-        width: -moz-max-content;
+        float: right;
       }
       .stretch {
         background: pink;
-        width: auto;
       }
+      .clearFloats { clear: both }
    </style>
   </head>
   <body>
-    <!-- NOTE: I'm not using floats in this flex container, since floating
-         makes it harder to emulate the "stretch" behavior.
-         (We need to use width: auto - not width:100% - because we need to
-         allow space for our margins/borders/padding. And width:auto doesn't do
-         what we want if we're floated.)
-
-         However, since our children aren't floated, their adjacent vertical
-         margins will collapse by default (which doesn't match what happens in
-         the testcase, since margins don't collapse in a flexbox).  So, we
-         compensate for that by bumping up the margin-top value on every
-         collapsed top-margin to "4px", which is the total amount of vertical
-         margin we're expecting between consecutive flex items in the testcase.
-         (4px = 3px margin-bottom + 1px margin-top)
-      -->
     <div class="flexbox">
       <div class="flex-start">start</div>
-      <div class="flex-start big" style="margin-top: 4px">a b</div>
-      <div class="stretch"  style="margin-top: 4px">stretch</div>
+      <div class="flex-start big">a b</div>
+      <div class="clearFloats"></div>
+      <div class="stretch">stretch</div>
+      <!-- Force a 3px + 1px = 4px margin between this and the previous div
+           (to thwart the effects of margin-collapsing). This is the only
+           place we need this hack, because everywhere else in this test
+           we use floats or inline-blocks, whose margins don't collapse. -->
       <div class="stretch big" style="margin-top: 4px">a b</div>
-      <!-- We're using auto margins as references for "align-self:center", but
-           auto margins only work if we've got extra space available, and we
-           don't have extra space available in this case.  So, we create a
-           wide wrapper-div that _will_ have space available.  We position
-           that wrapper-div using a negative margin, so that centering in it
-           is equivalent to centering in our reference for the flex container.
-        -->
-      <div style="width: 100px; margin-right: -48px">
-        <div style="margin: auto; width: -moz-max-content">
-          <div class="center" style="margin-top: 4px">center</div>
-        </div>
-        <div style="margin: auto; width: -moz-max-content">
-          <div class="center big" style="margin-top: 4px">a b</div>
-        </div>
+      <div class="centerParent">
+        <div class="center">center</div>
+      </div>
+      <div class="centerParent">
+        <div class="center big">a b</div>
       </div>
     </div>
     <div class="flexbox">
       <div class="baseline">base</div>
-      <div class="baseline big" style="margin-top: 4px">abc</div>
+      <div class="baseline big">abc</div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b</div>
     </div>
   </body>
 </html>