Bug 1472843 - Implement justify-content:left/right/start/end, align-content:start/end, align-self:self-start/self-end for flexbox. r=dholbert
authorMihir Iyer <miyer@mozilla.com>
Fri, 03 Aug 2018 07:56:32 -0700
changeset 486894 809eca6fc4b705a51ddf3381ee20bad9864b06bc
parent 486893 38eb12ded659d380f4140ebf087277e040c5d4b8
child 486895 c97a717558569f49b0c14e362225f65267b0fa95
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1472843
milestone63.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 1472843 - Implement justify-content:left/right/start/end, align-content:start/end, align-self:self-start/self-end for flexbox. r=dholbert This commit also removes some cases & warnings about unsupported values that have now been removed from the css alignment spec. Specifically: "justify-content:[last] baseline" and "align-self/align-content: left/right".
layout/generic/nsFlexContainerFrame.cpp
layout/reftests/flexbox/flexbox-justify-content-horizrev-001-ref.xhtml
layout/reftests/flexbox/flexbox-justify-content-vertrev-001-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001b.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001b.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-wmvert-001-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-wmvert-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-005-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-005.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-006-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-006.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-006-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-006.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-wmvert-001-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-wmvert-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/reftest.list
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -2927,16 +2927,18 @@ MainAxisPositionTracker::
   : PositionTracker(aAxisTracker.GetMainAxis(),
                     aAxisTracker.IsMainAxisReversed()),
     mPackingSpaceRemaining(aContentBoxMainSize), // we chip away at this below
     mNumAutoMarginsInMainAxis(0),
     mNumPackingSpacesRemaining(0),
     mJustifyContent(aJustifyContent)
 {
   // Extract the flag portion of mJustifyContent and strip off the flag bits
+  // NOTE: This must happen before any assignment to mJustifyContent to
+  // avoid overwriting the flag bits.
   uint8_t justifyContentFlags = mJustifyContent & NS_STYLE_JUSTIFY_FLAG_BITS;
   mJustifyContent &= ~NS_STYLE_JUSTIFY_FLAG_BITS;
 
   // 'normal' behaves as 'stretch', and 'stretch' behaves as 'flex-start',
   // in the main axis
   // https://drafts.csswg.org/css-align-3/#propdef-justify-content
   if (mJustifyContent == NS_STYLE_JUSTIFY_NORMAL ||
       mJustifyContent == NS_STYLE_JUSTIFY_STRETCH) {
@@ -2973,16 +2975,34 @@ MainAxisPositionTracker::
     if (mJustifyContent == NS_STYLE_JUSTIFY_SPACE_BETWEEN) {
       mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
     } else if (mJustifyContent == NS_STYLE_JUSTIFY_SPACE_AROUND ||
                mJustifyContent == NS_STYLE_JUSTIFY_SPACE_EVENLY) {
       mJustifyContent = NS_STYLE_JUSTIFY_CENTER;
     }
   }
 
+  // If our main axis is (internally) reversed, swap the justify-content
+  // "flex-start" and "flex-end" behaviors:
+  // NOTE: This must happen ...
+  //  - *after* value-simplification for values that are dependent on our
+  //    flex-axis reversedness; e.g. for "space-between" which specifically
+  //    behaves like "flex-start" in some cases (per spec), and hence depends on
+  //    the reversedness of flex axes.
+  //  - *before* value simplification for values that don't care about
+  //    flex-relative axis direction; e.g. for "start" which purely depends on
+  //    writing-mode and isn't affected by reversedness of flex axes.
+  if (aAxisTracker.AreAxesInternallyReversed()) {
+    if (mJustifyContent == NS_STYLE_JUSTIFY_FLEX_START) {
+      mJustifyContent = NS_STYLE_JUSTIFY_FLEX_END;
+    } else if (mJustifyContent == NS_STYLE_JUSTIFY_FLEX_END) {
+      mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
+    }
+  }
+
   // Map 'left'/'right' to 'start'/'end'
   if (mJustifyContent == NS_STYLE_JUSTIFY_LEFT ||
       mJustifyContent == NS_STYLE_JUSTIFY_RIGHT) {
     if (aAxisTracker.IsColumnOriented()) {
       // Container's alignment axis is not parallel to the inline axis,
       // so we map both 'left' and 'right' to 'start'.
       mJustifyContent = NS_STYLE_JUSTIFY_START;
     } else {
@@ -2992,41 +3012,31 @@ MainAxisPositionTracker::
       const bool isJustifyLeft = (mJustifyContent == NS_STYLE_JUSTIFY_LEFT);
       mJustifyContent = (isJustifyLeft == isLTR) ? NS_STYLE_JUSTIFY_START
                                                  : NS_STYLE_JUSTIFY_END;
     }
   }
 
   // Map 'start'/'end' to 'flex-start'/'flex-end'.
   if (mJustifyContent == NS_STYLE_JUSTIFY_START) {
-    mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
+    mJustifyContent = aAxisTracker.IsMainAxisReversed()
+                      ? NS_STYLE_JUSTIFY_FLEX_END
+                      : NS_STYLE_JUSTIFY_FLEX_START;
   } else if (mJustifyContent == NS_STYLE_JUSTIFY_END) {
-    mJustifyContent = NS_STYLE_JUSTIFY_FLEX_END;
-  }
-
-  // If our main axis is (internally) reversed, swap the justify-content
-  // "flex-start" and "flex-end" behaviors:
-  if (aAxisTracker.AreAxesInternallyReversed()) {
-    if (mJustifyContent == NS_STYLE_JUSTIFY_FLEX_START) {
-      mJustifyContent = NS_STYLE_JUSTIFY_FLEX_END;
-    } else if (mJustifyContent == NS_STYLE_JUSTIFY_FLEX_END) {
-      mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
-    }
+    mJustifyContent = aAxisTracker.IsMainAxisReversed()
+                      ? NS_STYLE_JUSTIFY_FLEX_START
+                      : NS_STYLE_JUSTIFY_FLEX_END;
   }
 
   // Figure out how much space we'll set aside for auto margins or
   // packing spaces, and advance past any leading packing-space.
   if (mNumAutoMarginsInMainAxis == 0 &&
       mPackingSpaceRemaining != 0 &&
       !aLine->IsEmpty()) {
     switch (mJustifyContent) {
-      case NS_STYLE_JUSTIFY_BASELINE:
-      case NS_STYLE_JUSTIFY_LAST_BASELINE:
-        NS_WARNING("NYI: justify-content:left/right/baseline/last baseline");
-        MOZ_FALLTHROUGH;
       case NS_STYLE_JUSTIFY_FLEX_START:
         // All packing space should go at the end --> nothing to do here.
         break;
       case NS_STYLE_JUSTIFY_FLEX_END:
         // All packing space goes at the beginning
         mPosition += mPackingSpaceRemaining;
         break;
       case NS_STYLE_JUSTIFY_CENTER:
@@ -3192,56 +3202,43 @@ CrossAxisPositionTracker::
     if (mAlignContent == NS_STYLE_ALIGN_SPACE_BETWEEN) {
       mAlignContent = NS_STYLE_ALIGN_FLEX_START;
     } else if (mAlignContent == NS_STYLE_ALIGN_SPACE_AROUND ||
                mAlignContent == NS_STYLE_ALIGN_SPACE_EVENLY) {
       mAlignContent = NS_STYLE_ALIGN_CENTER;
     }
   }
 
-  // Map 'left'/'right' to 'start'/'end'
-  if (mAlignContent == NS_STYLE_ALIGN_LEFT ||
-      mAlignContent == NS_STYLE_ALIGN_RIGHT) {
-    if (aAxisTracker.IsRowOriented()) {
-      // Container's alignment axis is not parallel to the inline axis,
-      // so we map both 'left' and 'right' to 'start'.
-      mAlignContent = NS_STYLE_ALIGN_START;
-    } else {
-      // Column-oriented, so we map 'left' and 'right' to 'start' or 'end',
-      // depending on left-to-right writing mode.
-      const bool isLTR = aAxisTracker.GetWritingMode().IsBidiLTR();
-      const bool isAlignLeft = (mAlignContent == NS_STYLE_ALIGN_LEFT);
-      mAlignContent = (isAlignLeft == isLTR) ? NS_STYLE_ALIGN_START
-                                             : NS_STYLE_ALIGN_END;
-    }
-  }
-
-  // Map 'start'/'end' to 'flex-start'/'flex-end'.
-  if (mAlignContent == NS_STYLE_ALIGN_START) {
-    mAlignContent = NS_STYLE_ALIGN_FLEX_START;
-  } else if (mAlignContent == NS_STYLE_ALIGN_END) {
-    mAlignContent = NS_STYLE_ALIGN_FLEX_END;
-  }
-
   // If our cross axis is (internally) reversed, swap the align-content
   // "flex-start" and "flex-end" behaviors:
+  // NOTE: It matters precisely when we do this; see comment alongside
+  // MainAxisPositionTracker's AreAxesInternallyReversed check.
   if (aAxisTracker.AreAxesInternallyReversed()) {
     if (mAlignContent == NS_STYLE_ALIGN_FLEX_START) {
       mAlignContent = NS_STYLE_ALIGN_FLEX_END;
     } else if (mAlignContent == NS_STYLE_ALIGN_FLEX_END) {
       mAlignContent = NS_STYLE_ALIGN_FLEX_START;
     }
   }
 
+  // Map 'start'/'end' to 'flex-start'/'flex-end'.
+  if (mAlignContent == NS_STYLE_ALIGN_START) {
+    mAlignContent = aAxisTracker.IsCrossAxisReversed()
+                    ? NS_STYLE_ALIGN_FLEX_END
+                    : NS_STYLE_ALIGN_FLEX_START;
+  } else if (mAlignContent == NS_STYLE_ALIGN_END) {
+    mAlignContent = aAxisTracker.IsCrossAxisReversed()
+                    ? NS_STYLE_ALIGN_FLEX_START
+                    : NS_STYLE_ALIGN_FLEX_END;
+  }
+
   // Figure out how much space we'll set aside for packing spaces, and advance
   // past any leading packing-space.
   if (mPackingSpaceRemaining != 0) {
     switch (mAlignContent) {
-      case NS_STYLE_ALIGN_SELF_START:
-      case NS_STYLE_ALIGN_SELF_END:
       case NS_STYLE_ALIGN_BASELINE:
       case NS_STYLE_ALIGN_LAST_BASELINE:
         NS_WARNING("NYI: align-items/align-self:left/right/self-start/self-end/baseline/last baseline");
         MOZ_FALLTHROUGH;
       case NS_STYLE_ALIGN_FLEX_START:
         // All packing space should go at the end --> nothing to do here.
         break;
       case NS_STYLE_ALIGN_FLEX_END:
@@ -3500,62 +3497,60 @@ SingleLineCrossAxisPositionTracker::
 
   uint8_t alignSelf = aItem.GetAlignSelf();
   // NOTE: 'stretch' behaves like 'flex-start' once we've stretched any
   // auto-sized items (which we've already done).
   if (alignSelf == NS_STYLE_ALIGN_STRETCH) {
     alignSelf = NS_STYLE_ALIGN_FLEX_START;
   }
 
-  // Map 'left'/'right' to 'start'/'end'
-  if (alignSelf == NS_STYLE_ALIGN_LEFT || alignSelf == NS_STYLE_ALIGN_RIGHT) {
-    if (aAxisTracker.IsRowOriented()) {
-      // Container's alignment axis is not parallel to the inline axis,
-      // so we map both 'left' and 'right' to 'start'.
-      alignSelf = NS_STYLE_ALIGN_START;
-    } else {
-      // Column-oriented, so we map 'left' and 'right' to 'start' or 'end',
-      // depending on left-to-right writing mode.
-      const bool isLTR = aAxisTracker.GetWritingMode().IsBidiLTR();
-      const bool isAlignLeft = (alignSelf == NS_STYLE_ALIGN_LEFT);
-      alignSelf = (isAlignLeft == isLTR) ? NS_STYLE_ALIGN_START
-                                         : NS_STYLE_ALIGN_END;
-    }
-  }
-
-  // Map 'start'/'end' to 'flex-start'/'flex-end'.
-  if (alignSelf == NS_STYLE_ALIGN_START) {
-    alignSelf = NS_STYLE_ALIGN_FLEX_START;
-  } else if (alignSelf == NS_STYLE_ALIGN_END) {
-    alignSelf = NS_STYLE_ALIGN_FLEX_END;
-  }
-
   // If our cross axis is (internally) reversed, swap the align-self
   // "flex-start" and "flex-end" behaviors:
   if (aAxisTracker.AreAxesInternallyReversed()) {
     if (alignSelf == NS_STYLE_ALIGN_FLEX_START) {
       alignSelf = NS_STYLE_ALIGN_FLEX_END;
     } else if (alignSelf == NS_STYLE_ALIGN_FLEX_END) {
       alignSelf = NS_STYLE_ALIGN_FLEX_START;
     }
   }
 
+  // Map 'self-start'/'self-end' to 'start'/'end'
+  if (alignSelf == NS_STYLE_ALIGN_SELF_START ||
+      alignSelf == NS_STYLE_ALIGN_SELF_END) {
+    const LogicalAxis logCrossAxis = aAxisTracker.IsRowOriented()
+                                     ? eLogicalAxisBlock
+                                     : eLogicalAxisInline;
+    const WritingMode cWM = aAxisTracker.GetWritingMode();
+    const bool sameStart =
+      cWM.ParallelAxisStartsOnSameSide(logCrossAxis, aItem.GetWritingMode());
+    alignSelf = sameStart == (alignSelf == NS_STYLE_ALIGN_SELF_START)
+                ? NS_STYLE_ALIGN_START
+                : NS_STYLE_ALIGN_END;
+  }
+
+  // Map 'start'/'end' to 'flex-start'/'flex-end'.
+  if (alignSelf == NS_STYLE_ALIGN_START) {
+    alignSelf = aAxisTracker.IsCrossAxisReversed()
+                ? NS_STYLE_ALIGN_FLEX_END
+                : NS_STYLE_ALIGN_FLEX_START;
+  } else if (alignSelf == NS_STYLE_ALIGN_END) {
+    alignSelf = aAxisTracker.IsCrossAxisReversed()
+                ? NS_STYLE_ALIGN_FLEX_START
+                : NS_STYLE_ALIGN_FLEX_END;
+  }
+
   // 'align-self' falls back to 'flex-start' if it is 'center'/'flex-end' and we
   // have cross axis overflow
   // XXX we should really be falling back to 'start' as of bug 1472843
   if (aLine.GetLineCrossSize() < aItem.GetOuterCrossSize(mAxis) &&
       (aItem.GetAlignSelfFlags() & NS_STYLE_ALIGN_SAFE)) {
     alignSelf = NS_STYLE_ALIGN_FLEX_START;
   }
 
   switch (alignSelf) {
-    case NS_STYLE_ALIGN_SELF_START:
-    case NS_STYLE_ALIGN_SELF_END:
-      NS_WARNING("NYI: align-items/align-self:left/right/self-start/self-end");
-      MOZ_FALLTHROUGH;
     case NS_STYLE_ALIGN_FLEX_START:
       // No space to skip over -- we're done.
       break;
     case NS_STYLE_ALIGN_FLEX_END:
       mPosition += aLine.GetLineCrossSize() - aItem.GetOuterCrossSize(mAxis);
       break;
     case NS_STYLE_ALIGN_CENTER:
       // Note: If cross-size is odd, the "after" space will get the extra unit.
--- a/layout/reftests/flexbox/flexbox-justify-content-horizrev-001-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horizrev-001-ref.xhtml
@@ -116,37 +116,32 @@
            /><div class="b" style="margin-right: calc(140px / 3)"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-right: 10px"
            /><div class="b" style="margin-right: 10px"
            /><div class="c" style="margin-right: 10px"/>
     </div>
 
-    <!-- XXXdholbert The left/right references are *WRONG* right now (they
-         should be swapped). I'm including them in their current incorrect form
-         simply to document the testcase's current behavior and to allow this
-         test to "pass" so we can catch any regressions in the rest of the
-         test. We should fix this as part of bug 1207698 or a helper. -->
     <!-- left -->
     <div class="flexbox">
+      <div class="a" style="margin-right: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-right: 140px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-right: 40px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
-    <!-- right -->
-    <div class="flexbox">
-      <div class="a" style="margin-right: 190px"/>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-right: 140px"/><div class="b"/>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-right: 40px"/><div class="b"/><div class="c"/>
-    </div>
-
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-vertrev-001-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vertrev-001-ref.xhtml
@@ -114,30 +114,30 @@
     <div class="flexbox">
       <div class="c" style="margin-top: 10px"
            /><div class="b" style="margin-top: 10px"
            /><div class="a" style="margin-top: 10px"/>
     </div>
 
     <!-- left -->
     <div class="flexbox">
-      <div class="a" style="margin-top: 190px"/>
+      <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="b" style="margin-top: 140px"/><div class="a"/>
+      <div class="b"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
+      <div class="c"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- right -->
     <div class="flexbox">
-      <div class="a" style="margin-top: 190px"/>
+      <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="b" style="margin-top: 140px"/><div class="a"/>
+      <div class="b"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
+      <div class="c"/><div class="b"/><div class="a"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
@@ -133,10 +133,38 @@
       <div class="a" style="margin-top: calc(160px / 3)"/>
       <div class="b" style="margin-top: calc(160px / 3)"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-top: 30px"/>
       <div class="b" style="margin-top: 30px"><div class="fixedSizeChild"/></div>
       <div class="c" style="margin-top: 30px"/>
     </div>
+
+    <!-- start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
+
+    <!-- end -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="margin-top: 120px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
@@ -142,10 +142,38 @@
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox" style="align-content: space-evenly">
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
       <div class="c"/>
     </div>
+
+    <!-- start -->
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- end -->
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001b.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001b.xhtml
@@ -143,10 +143,38 @@
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox" style="align-content: space-evenly">
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
       <div class="c"/>
     </div>
+
+    <!-- start -->
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- end -->
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
@@ -136,10 +136,38 @@
       <div class="a" style="margin-left: calc(160px / 3)"/>
       <div class="b" style="margin-left: calc(160px / 3)"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: 30px"/>
       <div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div>
       <div class="c" style="margin-left: 30px"/>
     </div>
+
+    <!-- start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
+
+    <!-- end -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="margin-left: 120px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml
@@ -142,10 +142,38 @@
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox" style="align-content: space-evenly">
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
       <div class="c"/>
     </div>
+
+    <!-- start -->
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- end -->
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001b.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001b.xhtml
@@ -143,10 +143,38 @@
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox" style="align-content: space-evenly">
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
       <div class="c"/>
     </div>
+
+    <!-- start -->
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- end -->
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-wmvert-001-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-wmvert-001-ref.xhtml
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Reftest Reference</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <style>
       div.flexbox {
         width: 200px;
         margin-bottom: 2px;
         background: lightgray;
         height: 20px;
         clear: all;
       }
@@ -136,10 +136,38 @@
       <div class="a" style="margin-left: calc(160px / 3)"/>
       <div class="b" style="margin-left: calc(160px / 3)"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: 30px"/>
       <div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div>
       <div class="c" style="margin-left: 30px"/>
     </div>
+
+    <!-- start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
+
+    <!-- end -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="margin-left: 120px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
+    </div>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-wmvert-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-wmvert-001.xhtml
@@ -2,53 +2,53 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
      testing each possible value of the 'align-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <title>CSS Test: Testing 'align-content' in a horizontal flex container</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <title>CSS Test: Testing 'align-content' in a vertical writing-mode flex container</title>
+    <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
-    <link rel="match" href="flexbox-align-content-horiz-001-ref.xhtml"/>
+    <link rel="match" href="flexbox-align-content-wmvert-001-ref.xhtml"/>
     <style>
       div.flexbox {
-        width: 20px; /* Skinny, to force us to wrap */
-        height: 200px;
+        width: 200px;
+        height: 20px; /* Short, to force us to wrap */
         display: flex;
         flex-wrap: wrap;
-        margin-right: 2px;
-        float: left;
+        margin-bottom: 2px;
         background: lightgray;
+        writing-mode: vertical-lr;
       }
       div.a {
-        width: 20px;
-        height: 10px;
+        width: 10px;
+        height: 20px;
         flex: none;
         background: lightgreen;
       }
       div.b {
-        width: 20px;
-        height: auto; /* height comes from contents */
+        width: auto;
+        height: 20px; /* height comes from contents */
         flex: none;
         background: pink;
       }
       div.c {
-        width: 20px;
-        height: 40px;
+        width: 40px;
+        height: 20px;
         flex: none;
         background: orange;
       }
 
       /* Inside of 'b': */
       div.fixedSizeChild {
-        width: 10px;
-        height: 30px;
+        width: 30px;
+        height: 10px;
         background: purple;
       }
     </style>
   </head>
   <body>
 
     <!-- default (stretch) -->
     <div class="flexbox">
@@ -142,10 +142,38 @@
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox" style="align-content: space-evenly">
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
       <div class="c"/>
     </div>
+
+    <!-- start -->
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- end -->
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml
@@ -17,17 +17,17 @@
         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 {
+      .auto, .unspecified, .initial, .inherit, .self-start, .self-end {
         width: 40px;
         margin:       1px 2px 3px 4px;
         border-width: 2px 3px 4px 5px;
         padding:      3px 4px 5px 6px;
         position: relative;
         border-style: dotted;
       }
 
@@ -48,16 +48,26 @@
         background: lightblue;
       }
       .baseline {
         background: teal;
       }
       .stretch {
         background: pink;
       }
+      .self-start {
+        background: yellow;
+      }
+      .self-end {
+        background: purple;
+      }
+      .wmvertrev {
+        writing-mode: vertical-lr;
+        direction: rtl;
+      }
    </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" style="top: 172px">end</div>
       <div class="flex-end big"  style="top: 82px">a b c d e f</div>
@@ -76,10 +86,17 @@
         <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>
+    <br/>
+    <div class="flexbox">
+      <div class="self-start">self-start</div>
+      <div class="self-start big">a b c d e f</div>
+      <div class="self-end wmvertrev">self-end</div>
+      <div class="self-end wmvertrev big">a b c d e f</div>
+    </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002.xhtml
@@ -52,16 +52,28 @@
       .baseline {
         background: teal;
         align-self: baseline;
       }
       .stretch {
         background: pink;
         align-self: stretch;
       }
+      .self-start {
+        background: yellow;
+        align-self: self-start;
+      }
+      .self-end {
+        background: purple;
+        align-self: self-end;
+      }
+      .wmvertrev {
+        writing-mode: vertical-lr;
+        direction: rtl;
+      }
    </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>
@@ -70,10 +82,17 @@
     </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>
+    <br/>
+    <div class="flexbox">
+      <div class="self-start">self-start</div>
+      <div class="self-start big">a b c d e f</div>
+      <div class="self-end wmvertrev">self-end</div>
+      <div class="self-end wmvertrev big">a b c d e f</div>
+    </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml
@@ -13,17 +13,18 @@
     <style>
       .flexbox {
         border: 1px dashed blue;
         width: 200px;
         float: left;
         font-size: 10px;
       }
 
-      .flex-start, .flex-end, .center, .baseline, .stretch {
+      .flex-start, .flex-end, .center, .baseline, .stretch,
+      .self-start, .self-end {
         clear: both;
         margin:       1px 2px 3px 4px;
         border-width: 2px 3px 4px 5px;
         padding:      3px 4px 5px 6px;
         border-style: dotted;
       }
 
       div.big {
@@ -53,16 +54,26 @@
       }
       .baseline {
         background: teal;
         float: left;
       }
       .stretch {
         background: pink;
       }
+      .self-start {
+        background: yellow;
+        float: right;
+        text-align: right;
+      }
+      .self-end {
+        background: purple;
+        float: left;
+        text-align: right;
+      }
       .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>
@@ -81,10 +92,16 @@
       <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>
+    <div class="flexbox">
+      <div class="self-start">self-start</div>
+      <div class="self-start big">a b c d e f</div>
+      <div class="self-end">self-end</div>
+      <div class="self-end big">a b c d e f</div>
+    </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml
@@ -51,16 +51,27 @@
       .baseline {
         background: teal;
         align-self: baseline;
       }
       .stretch {
         background: pink;
         align-self: stretch;
       }
+      .self-start {
+        background: yellow;
+        align-self: self-start;
+      }
+      .self-end {
+        background: purple;
+        align-self: self-end;
+      }
+      .dirrtl {
+        direction: rtl;
+      }
    </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>
@@ -68,10 +79,16 @@
       <div class="center big">a b c d e f</div>
     </div>
     <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>
+    <div class="flexbox">
+      <div class="self-start dirrtl">self-start</div>
+      <div class="self-start dirrtl big">a b c d e f</div>
+      <div class="self-end dirrtl">self-end</div>
+      <div class="self-end dirrtl big">a b c d e f</div>
+    </div>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-005-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-005-ref.xhtml
@@ -4,65 +4,74 @@
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Reference case for align-items / align-self behavior, using blocks in
      place of flex items and using float and width keywords to emulate the
      align-items / align-self properties. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Reftest Reference</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <style>
       .flexbox {
         border: 1px dashed blue;
         width: 200px;
         float: left;
         font-size: 10px;
+        direction: rtl;
       }
 
-      .flex-start, .flex-end, .center, .baseline, .stretch {
+      .flex-start, .flex-end, .center, .baseline, .stretch, .self-start, .self-end {
         clear: both;
         margin:       1px 2px 3px 4px;
         border-width: 2px 3px 4px 5px;
         padding:      3px 4px 5px 6px;
         border-style: dotted;
       }
 
       div.big {
         font-size: 20px;
         width: 50px;
       }
 
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        float: left;
+        float: right;
       }
       .flex-end {
         background: orange;
-        float: right;
+        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;
         display: inline-block;
-        text-align: left; /* Keep parent's centering from tweaking my text */
+        text-align: right; /* Keep parent's centering from tweaking my text */
       }
       .baseline {
         background: teal;
-        float: left;
+        float: right;
       }
       .stretch {
         background: pink;
       }
+      .self-start {
+        background: yellow;
+        float: right;
+      }
+      .self-end {
+        background: purple;
+        float: left;
+      }
       .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>
@@ -81,10 +90,16 @@
       <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>
+    <div class="flexbox">
+      <div class="self-start">self-start</div>
+      <div class="self-start big">a b c d e f</div>
+      <div class="self-end">self-end</div>
+      <div class="self-end big">a b c d e f</div>
+    </div>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-005.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-005.xhtml
@@ -3,28 +3,29 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase for align-items / align-self behavior, with all the possible
      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>
-    <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction:rtl'</title>
+    <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
-    <link rel="match" href="flexbox-align-self-vert-002-ref.xhtml"/>
+    <link rel="match" href="flexbox-align-self-vert-rtl-005-ref.xhtml"/>
     <style>
       .flexbox {
         border: 1px dashed blue;
         width: 200px;
         display: flex;
         flex-direction: column;
         float: left;
         font-size: 10px;
+        direction: rtl;
       }
 
       .flexbox > div {
         margin:       1px 2px 3px 4px;
         border-width: 2px 3px 4px 5px;
         padding:      3px 4px 5px 6px;
 
         border-style: dotted;
@@ -51,16 +52,24 @@
       .baseline {
         background: teal;
         align-self: baseline;
       }
       .stretch {
         background: pink;
         align-self: stretch;
       }
+      .self-start {
+        background: yellow;
+        align-self: self-start;
+      }
+      .self-end {
+        background: purple;
+        align-self: self-end;
+      }
    </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>
@@ -68,10 +77,16 @@
       <div class="center big">a b c d e f</div>
     </div>
     <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>
+    <div class="flexbox">
+      <div class="self-start dirrtl">self-start</div>
+      <div class="self-start dirrtl big">a b c d e f</div>
+      <div class="self-end dirrtl">self-end</div>
+      <div class="self-end dirrtl big nowidth">a b c d e f</div>
+    </div>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-006-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-006-ref.xhtml
@@ -1,20 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Reftest Reference</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <style>
       body { line-height: 0; }
 
+      div.flexbox {
+        width: 200px;
+        margin-bottom: 2px;
+        direction: rtl;
+      }
       div.flexbox > * {
         display: inline-block;
       }
       div.a {
         height: 20px;
         width: 10px;
         background: lightgreen;
       }
@@ -56,65 +61,64 @@
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="float:right; clear:right;">
+    <div class="flexbox" style="text-align: left">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="float:right; clear:right;">
+    <div class="flexbox" style="text-align: left;">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="float:right; clear:right;">
+    <div class="flexbox" style="text-align: left;">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
-    <div style="clear:right;"></div>
 
     <!-- center -->
     <div class="centerParent">
-      <div class="flexbox center">
+      <div class="flexbox">
         <div class="a"/>
       </div>
     </div>
     <div class="centerParent">
-      <div class="flexbox center">
+      <div class="flexbox">
         <div class="a"/><div class="b"/>
       </div>
     </div>
     <div class="centerParent">
-      <div class="flexbox center">
+      <div class="flexbox">
         <div class="a"/><div class="b"/><div class="c"/>
       </div>
     </div>
 
     <!-- space-between -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b" style="float: right"/>
+      <div class="a"/><div class="b" style="float: left"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="display:block; float: left"/>
-      <div class="c" style="float:right"/>
+      <div class="a" style="display:block; float: right"/>
+      <div class="c" style="float:left"/>
       <!-- Use fixed-size margins to subtract space for "a" and "c", and then
            use auto margins to center 'b' within the remaining space -->
-      <div style="display: block; margin-left: 10px; margin-right: 100px">
+      <div style="display: block; margin-right: 10px; margin-left: 100px">
         <div class="b" style="margin: auto"/>
       </div>
     </div>
 
     <!-- space-around -->
     <!-- Center "a" here just as we did above in the "center" case. -->
     <div class="centerParent">
-      <div class="flexbox center">
+      <div class="flexbox">
         <div class="a"/>
       </div>
     </div>
     <!-- For the rest, we'll use a flex container with invisible flexible items
          instead of packing space. That's simpler than trying to hack up
          a width-independent reference case for "justify-content: space-around".
          (There are other reftests to ensure that basic flex container
          behavior is correct, so it's safe to rely on it here.) -->
@@ -133,17 +137,17 @@
       <div style="flex: 1"/>
       <div class="c"/>
       <div style="flex: 0.5"/>
     </div>
 
     <!-- space-evenly -->
     <!-- Center "a" here just as we did above in the "center" case. -->
     <div class="centerParent">
-      <div class="flexbox center">
+      <div class="flexbox">
         <div class="a"/>
       </div>
     </div>
     <!-- As above with space-around, we'll use a flex container with invisible
          flexible items instead of packing space. -->
     <div class="flexbox" style="display: flex">
       <div style="flex: 1"/>
       <div class="a"/>
@@ -158,32 +162,31 @@
       <div class="b"/>
       <div style="flex: 1"/>
       <div class="c"/>
       <div style="flex: 1"/>
     </div>
 
 
     <!-- left -->
+    <div class="flexbox" style="text-align:left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="text-align:left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="text-align:left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
-    <!-- right -->
-    <div class="flexbox" style="float:right; clear:right;">
-      <div class="a"/>
-    </div>
-    <div class="flexbox" style="float:right; clear:right;">
-      <div class="a"/><div class="b"/>
-    </div>
-    <div class="flexbox" style="float:right; clear:right;">
-      <div class="a"/><div class="b"/><div class="c"/>
-    </div>
-    <div style="clear:right;"></div>
-
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-006.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-006.xhtml
@@ -2,23 +2,26 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase to exercise each possible value of the 'justify-content'
      property, in an auto-sized horizontal flex container. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <title>CSS Test: Testing 'justify-content' in an auto-sized horizontal flex container</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <title>CSS Test: Testing 'justify-content' in an auto-sized reversed horizontal flex container</title>
+    <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
-    <link rel="match" href="flexbox-justify-content-horiz-005-ref.xhtml"/>
+    <link rel="match" href="flexbox-justify-content-horiz-006-ref.xhtml"/>
     <style>
       div.flexbox {
         display: flex;
+        flex-direction: row-reverse;
+        width: 200px;
+        margin-bottom: 2px;
       }
       div.a {
         height: 20px;
         flex: 0 10px;
         background: lightgreen;
       }
       div.b {
         height: 20px;
@@ -128,11 +131,10 @@
       <div class="a"/>
     </div>
     <div class="flexbox" style="justify-content: right">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: right">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
-
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-006-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-006-ref.xhtml
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Reftest Reference</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <style>
       div.flexbox {
         height: 200px;
         margin-right: 2px;
         float: left;
       }
       div.a {
         width: 20px;
@@ -29,115 +29,115 @@
         background: orange;
       }
     </style>
   </head>
   <body>
 
     <!-- default (start) -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top:190px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"></div>
+      <div class="b" style="margin-top:140px"/><div class="a"></div>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
+      <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- flex-start -->
     <div class="flexbox">
+      <div class="a" style="margin-top:190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="margin-top:140px"/><div class="a"></div>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/>
+      <div class="b"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
-    </div>
-
-    <!-- flex-end -->
-    <div class="flexbox">
-      <div class="a" style="margin-top: 190px"/>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-top: 140px"/><div class="b"/>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/>
+      <div class="c"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- center -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 70px"/><div class="b"/>
+      <div class="b" style="margin-top: 70px"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 20px"/><div class="b"/><div class="c"/>
+      <div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- space-between -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top:190px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b" style="margin-top: 140px"/>
+      <div class="b"/><div class="a" style="margin-top: 140px"/>
     </div>
     <div class="flexbox">
-      <div class="a"
+      <div class="c"
            /><div class="b" style="margin-top: 20px"
-           /><div class="c" style="margin-top: 20px"/>
+           /><div class="a" style="margin-top: 20px"/>
     </div>
 
     <!-- space-around -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 35px"
-           /><div class="b" style="margin-top: 70px"/>
+      <div class="b" style="margin-top: 35px"
+           /><div class="a" style="margin-top: 70px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: calc(40px / 6)"
+      <div class="c" style="margin-top: calc(40px / 6)"
            /><div class="b" style="margin-top: calc(40px / 3)"
-           /><div class="c" style="margin-top: calc(40px / 3)"/>
+           /><div class="a" style="margin-top: calc(40px / 3)"/>
     </div>
 
     <!-- space-evenly -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: calc(140px / 3)"
-           /><div class="b" style="margin-top: calc(140px / 3)"/>
+      <div class="b" style="margin-top: calc(140px / 3)"
+           /><div class="a" style="margin-top: calc(140px / 3)"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 10px"
+      <div class="c" style="margin-top: 10px"
            /><div class="b" style="margin-top: 10px"
-           /><div class="c" style="margin-top: 10px"/>
+           /><div class="a" style="margin-top: 10px"/>
     </div>
 
     <!-- left -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/>
+      <div class="b"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
+      <div class="c"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- right -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/>
+      <div class="b"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
+      <div class="c"/><div class="b"/><div class="a"/>
     </div>
 
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-006.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-006.xhtml
@@ -3,24 +3,24 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase with a series of vertical flex containers, testing each
      possible value of the 'justify-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Test: Testing 'justify-content' in a vertical flex container</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
-    <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/>
+    <link rel="match" href="flexbox-justify-content-vert-006-ref.xhtml"/>
     <style>
       div.flexbox {
         height: 200px;
         display: flex;
-        flex-direction: column;
+        flex-direction: column-reverse;
         margin-right: 2px;
         float: left;
       }
       div.a {
         width: 20px;
         flex: 0 10px;
         background: lightgreen;
       }
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-wmvert-001-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-wmvert-001-ref.xhtml
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Reftest Reference</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <style>
       div.flexbox {
         height: 200px;
         margin-right: 2px;
         float: left;
       }
       div.a {
         width: 20px;
@@ -29,115 +29,115 @@
         background: orange;
       }
     </style>
   </head>
   <body>
 
     <!-- default (start) -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top:190px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"></div>
+      <div class="b" style="margin-top:140px"/><div class="a"></div>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
+      <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- flex-start -->
     <div class="flexbox">
+      <div class="a" style="margin-top:190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="margin-top:140px"/><div class="a"></div>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/>
+      <div class="b"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
-    </div>
-
-    <!-- flex-end -->
-    <div class="flexbox">
-      <div class="a" style="margin-top: 190px"/>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-top: 140px"/><div class="b"/>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/>
+      <div class="c"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- center -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 70px"/><div class="b"/>
+      <div class="b" style="margin-top: 70px"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 20px"/><div class="b"/><div class="c"/>
+      <div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- space-between -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top:190px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b" style="margin-top: 140px"/>
+      <div class="b"/><div class="a" style="margin-top: 140px"/>
     </div>
     <div class="flexbox">
-      <div class="a"
+      <div class="c"
            /><div class="b" style="margin-top: 20px"
-           /><div class="c" style="margin-top: 20px"/>
+           /><div class="a" style="margin-top: 20px"/>
     </div>
 
     <!-- space-around -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 35px"
-           /><div class="b" style="margin-top: 70px"/>
+      <div class="b" style="margin-top: 35px"
+           /><div class="a" style="margin-top: 70px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: calc(40px / 6)"
+      <div class="c" style="margin-top: calc(40px / 6)"
            /><div class="b" style="margin-top: calc(40px / 3)"
-           /><div class="c" style="margin-top: calc(40px / 3)"/>
+           /><div class="a" style="margin-top: calc(40px / 3)"/>
     </div>
 
     <!-- space-evenly -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: calc(140px / 3)"
-           /><div class="b" style="margin-top: calc(140px / 3)"/>
+      <div class="b" style="margin-top: calc(140px / 3)"
+           /><div class="a" style="margin-top: calc(140px / 3)"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 10px"
+      <div class="c" style="margin-top: 10px"
            /><div class="b" style="margin-top: 10px"
-           /><div class="c" style="margin-top: 10px"/>
+           /><div class="a" style="margin-top: 10px"/>
     </div>
 
     <!-- left -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/>
+      <div class="b"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
+      <div class="c"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- right -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top: 190px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/>
+      <div class="b" style="margin-top: 140px"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
+      <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
     </div>
 
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-wmvert-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-wmvert-001.xhtml
@@ -2,27 +2,28 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase with a series of vertical flex containers, testing each
      possible value of the 'justify-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <title>CSS Test: Testing 'justify-content' in a vertical flex container</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <title>CSS Test: Testing 'justify-content' in a vertical writing mode flex container</title>
+    <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
-    <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/>
+    <link rel="match" href="flexbox-justify-content-wmvert-001-ref.xhtml"/>
     <style>
       div.flexbox {
         height: 200px;
         display: flex;
-        flex-direction: column;
+        flex-direction: row-reverse;
         margin-right: 2px;
         float: left;
+        writing-mode: vertical-lr;
       }
       div.a {
         width: 20px;
         flex: 0 10px;
         background: lightgreen;
       }
       div.b {
         width: 20px;
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -6,16 +6,17 @@
 # Tests for handling anonymous flex items
 == flexbox-anonymous-items-001.html flexbox-anonymous-items-001-ref.html
 
 # Tests for alignment of flex lines (align-content property)
 == flexbox-align-content-horiz-001a.xhtml flexbox-align-content-horiz-001-ref.xhtml
 == flexbox-align-content-horiz-001b.xhtml flexbox-align-content-horiz-001-ref.xhtml
 == flexbox-align-content-vert-001a.xhtml  flexbox-align-content-vert-001-ref.xhtml
 == flexbox-align-content-vert-001b.xhtml  flexbox-align-content-vert-001-ref.xhtml
+== flexbox-align-content-wmvert-001.xhtml  flexbox-align-content-wmvert-001-ref.xhtml
 
 # Tests for cross-axis alignment (align-self / align-items properties)
 == flexbox-align-self-baseline-horiz-001a.xhtml flexbox-align-self-baseline-horiz-001-ref.xhtml
 == flexbox-align-self-baseline-horiz-001b.xhtml flexbox-align-self-baseline-horiz-001-ref.xhtml
 == flexbox-align-self-baseline-horiz-002.xhtml flexbox-align-self-baseline-horiz-002-ref.xhtml
 == flexbox-align-self-baseline-horiz-003.xhtml flexbox-align-self-baseline-horiz-003-ref.xhtml
 == flexbox-align-self-baseline-horiz-004.xhtml flexbox-align-self-baseline-horiz-004-ref.xhtml
 == flexbox-align-self-baseline-horiz-005.xhtml flexbox-align-self-baseline-horiz-005-ref.xhtml
@@ -34,16 +35,17 @@ fuzzy-if(webrender,0-1,0-2) == flexbox-a
 == flexbox-align-self-vert-001.xhtml  flexbox-align-self-vert-001-ref.xhtml
 == flexbox-align-self-vert-002.xhtml  flexbox-align-self-vert-002-ref.xhtml
 == flexbox-align-self-vert-003.xhtml  flexbox-align-self-vert-003-ref.xhtml
 == flexbox-align-self-vert-004.xhtml  flexbox-align-self-vert-004-ref.xhtml
 fuzzy-if(Android,0-158,0-32) == flexbox-align-self-vert-rtl-001.xhtml  flexbox-align-self-vert-rtl-001-ref.xhtml
 == flexbox-align-self-vert-rtl-002.xhtml  flexbox-align-self-vert-rtl-002-ref.xhtml
 == flexbox-align-self-vert-rtl-003.xhtml  flexbox-align-self-vert-rtl-003-ref.xhtml
 == flexbox-align-self-vert-rtl-004.xhtml  flexbox-align-self-vert-rtl-004-ref.xhtml
+== flexbox-align-self-vert-rtl-005.xhtml  flexbox-align-self-vert-rtl-005-ref.xhtml
 
 == flexbox-align-items-center-nested-001.html flexbox-align-items-center-nested-001-ref.html
 
 # Tests for computing the baseline of a flex container
 == flexbox-baseline-align-self-baseline-horiz-001.html flexbox-baseline-align-self-baseline-horiz-001-ref.html
 == flexbox-baseline-align-self-baseline-vert-001.html flexbox-baseline-align-self-baseline-vert-001-ref.html
 == flexbox-baseline-empty-001a.html flexbox-baseline-empty-001-ref.html
 == flexbox-baseline-empty-001b.html flexbox-baseline-empty-001-ref.html
@@ -153,22 +155,25 @@ fuzzy-if(Android,0-158,0-32) == flexbox-
 
 # Tests for main-axis alignment (jusify-content property)
 == flexbox-justify-content-horiz-001a.xhtml flexbox-justify-content-horiz-001-ref.xhtml
 == flexbox-justify-content-horiz-001b.xhtml flexbox-justify-content-horiz-001-ref.xhtml
 == flexbox-justify-content-horiz-002.xhtml flexbox-justify-content-horiz-002-ref.xhtml
 == flexbox-justify-content-horiz-003.xhtml flexbox-justify-content-horiz-003-ref.xhtml
 == flexbox-justify-content-horiz-004.xhtml flexbox-justify-content-horiz-004-ref.xhtml
 == flexbox-justify-content-horiz-005.xhtml flexbox-justify-content-horiz-005-ref.xhtml
+== flexbox-justify-content-horiz-006.xhtml flexbox-justify-content-horiz-006-ref.xhtml
 == flexbox-justify-content-vert-001a.xhtml flexbox-justify-content-vert-001-ref.xhtml
 == flexbox-justify-content-vert-001b.xhtml flexbox-justify-content-vert-001-ref.xhtml
 == flexbox-justify-content-vert-002.xhtml flexbox-justify-content-vert-002-ref.xhtml
 == flexbox-justify-content-vert-003.xhtml flexbox-justify-content-vert-003-ref.xhtml
 == flexbox-justify-content-vert-004.xhtml flexbox-justify-content-vert-004-ref.xhtml
 == flexbox-justify-content-vert-005.xhtml flexbox-justify-content-vert-005-ref.xhtml
+== flexbox-justify-content-vert-006.xhtml flexbox-justify-content-vert-006-ref.xhtml
+== flexbox-justify-content-wmvert-001.xhtml flexbox-justify-content-wmvert-001-ref.xhtml
 
 # Tests for flexbox with margin, border, and/or padding on flex items
 == flexbox-margin-auto-horiz-001.xhtml     flexbox-margin-auto-horiz-001-ref.xhtml
 == flexbox-margin-auto-horiz-002.xhtml     flexbox-margin-auto-horiz-002-ref.xhtml
 == flexbox-mbp-horiz-001.xhtml             flexbox-mbp-horiz-001-ref.xhtml
 == flexbox-mbp-horiz-001-reverse.xhtml     flexbox-mbp-horiz-001-reverse-ref.xhtml
 == flexbox-mbp-horiz-001-rtl.xhtml         flexbox-mbp-horiz-001-reverse-ref.xhtml
 == flexbox-mbp-horiz-001-rtl-reverse.xhtml flexbox-mbp-horiz-001-ref.xhtml