Merge branch 'master' into releaseRB_20220928

29 files changed, 122 insertions, 2620 deletions

diff --git a/layout/generic/ReflowInput.cpp b/layout/generic/ReflowInput.cpp
index 994e2cfbb6..1af7e798ef 100644
--- a/layout/generic/ReflowInput.cpp
+++ b/layout/generic/ReflowInput.cpp
@@ -225,7 +225,7 @@ ReflowInput::ReflowInput(
     CheckNextInFlowParenthood(aFrame, aParentReflowInput.mFrame);
   mFlags.mAssumingHScrollbar = mFlags.mAssumingVScrollbar = false;
   mFlags.mIsColumnBalancing = false;
-  mFlags.mIsFlexContainerMeasuringBSize = false;
+  mFlags.mIsFlexContainerMeasuringHeight = false;
   mFlags.mDummyParentReflowInput = false;
   mFlags.mShrinkWrap = !!(aFlags & COMPUTE_SIZE_SHRINK_WRAP);
   mFlags.mUseAutoBSize = !!(aFlags & COMPUTE_SIZE_USE_AUTO_BSIZE);
@@ -2403,15 +2403,15 @@ ReflowInput::InitConstraints(nsPresContext*     aPresContext,
             ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
 
           // If we're inside of a flex container that needs to measure our
-          // auto BSize, pass that information along to ComputeSize().
-          if (mFlags.mIsFlexContainerMeasuringBSize) {
+          // auto height, pass that information along to ComputeSize().
+          if (mFlags.mIsFlexContainerMeasuringHeight) {
             computeSizeFlags =
               ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eUseAutoBSize);
           }
         } else {
-          MOZ_ASSERT(!mFlags.mIsFlexContainerMeasuringBSize,
+          MOZ_ASSERT(!mFlags.mIsFlexContainerMeasuringHeight,
                      "We're not in a flex container, so the flag "
-                     "'mIsFlexContainerMeasuringBSize' shouldn't be set");
+                     "'mIsFlexContainerMeasuringHeight' shouldn't be set");
         }
       }
 
@@ -2993,7 +2993,7 @@ ReflowInput::ComputeMinMaxValues(const LogicalSize&aCBSize)
        minBSize.HasPercent()) ||
       (mFrameType == NS_CSS_FRAME_TYPE_INTERNAL_TABLE &&
        minBSize.IsCalcUnit() && minBSize.CalcHasPercent()) ||
-      mFlags.mIsFlexContainerMeasuringBSize) {
+      mFlags.mIsFlexContainerMeasuringHeight) {
     ComputedMinBSize() = 0;
   } else {
     ComputedMinBSize() = ComputeBSizeValue(aCBSize.BSize(wm),
@@ -3015,7 +3015,7 @@ ReflowInput::ComputeMinMaxValues(const LogicalSize&aCBSize)
          maxBSize.HasPercent()) ||
         (mFrameType == NS_CSS_FRAME_TYPE_INTERNAL_TABLE &&
          maxBSize.IsCalcUnit() && maxBSize.CalcHasPercent()) ||
-        mFlags.mIsFlexContainerMeasuringBSize) {
+        mFlags.mIsFlexContainerMeasuringHeight) {
       ComputedMaxBSize() = NS_UNCONSTRAINEDSIZE;
     } else {
       ComputedMaxBSize() = ComputeBSizeValue(aCBSize.BSize(wm),
diff --git a/layout/generic/ReflowInput.h b/layout/generic/ReflowInput.h
index e84d386a82..a70549d8eb 100644
--- a/layout/generic/ReflowInput.h
+++ b/layout/generic/ReflowInput.h
@@ -203,9 +203,9 @@ public:
     uint32_t mHeightDependsOnAncestorCell:1;   // Does frame height depend on
                                                // an ancestor table-cell?
     uint32_t mIsColumnBalancing:1;   // nsColumnSetFrame is balancing columns
-    uint32_t mIsFlexContainerMeasuringBSize:1; // nsFlexContainerFrame is
-                                               // reflowing this child to
-                                               // measure its intrinsic BSize.
+    uint32_t mIsFlexContainerMeasuringHeight:1; // nsFlexContainerFrame is
+                                                // reflowing this child to
+                                                // measure its intrinsic height.
     uint32_t mDummyParentReflowInput:1; // a "fake" reflow state made
                                         // in order to be the parent
                                         // of a real one
diff --git a/layout/generic/nsFlexContainerFrame.cpp b/layout/generic/nsFlexContainerFrame.cpp
index b4907a4862..18a0643f14 100644
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -511,15 +511,6 @@ public:
   // visibility:collapse.
   bool IsStrut() const             { return mIsStrut; }
 
-  // Returns true if this item's inline axis is parallel (or antiparallel)
-  // to the container's main axis. Otherwise (i.e. if this item's inline axis
-  // is orthogonal to the container's main axis), this function returns false.
-  bool IsInlineAxisMainAxis() const { return mIsInlineAxisMainAxis; }
-
-  // Same as above, but for cross axis. Equivalent to !IsInlineAxisMainAxis().
-  // This just exists for convenience/readability at callsites.
-  bool IsInlineAxisCrossAxis() const { return !mIsInlineAxisMainAxis; }
-
   WritingMode GetWritingMode() const { return mWM; }
   uint8_t GetAlignSelf() const     { return mAlignSelf; }
 
@@ -758,8 +749,10 @@ protected:
   void CheckForMinSizeAuto(const ReflowInput& aFlexItemReflowInput,
                            const FlexboxAxisTracker& aAxisTracker);
 
-  // Values that we already know in constructor (and are hence mostly 'const'):
-  nsIFrame* const mFrame; // The flex item's frame.
+  // Our frame:
+  nsIFrame* const mFrame;
+
+  // Values that we already know in constructor: (and are hence mostly 'const')
   const float mFlexGrow;
   const float mFlexShrink;
 
@@ -792,7 +785,6 @@ protected:
   // until after main-size has been resolved. In particular, these could share
   // memory with mMainPosn through mAscent, and mIsStretched.
   float mShareOfWeightSoFar;
-  const WritingMode mWM; // The flex item's writing mode.
   bool mIsFrozen;
   bool mHadMinViolation;
   bool mHadMaxViolation;
@@ -803,11 +795,11 @@ protected:
   bool mIsStretched; // See IsStretched() documentation
   bool mIsStrut;     // Is this item a "strut" left behind by an element
                      // with visibility:collapse?
-  const bool mIsInlineAxisMainAxis; // See IsInlineAxisMainAxis() documentation
 
   // Does this item need to resolve a min-[width|height]:auto (in main-axis).
   bool mNeedsMinSizeAutoResolution;
 
+  const WritingMode mWM; // The flex item's writing mode.
   uint8_t mAlignSelf; // My "align-self" computed value (with "auto"
                       // swapped out for parent"s "align-items" value,
                       // in our constructor).
@@ -1500,26 +1492,21 @@ nsFlexContainerFrame::GenerateFlexItemForChild(
 
 // Static helper-functions for ResolveAutoFlexBasisAndMinSize():
 // -------------------------------------------------------------
-// Indicates whether the cross-size property is set to something definite,
-// for the purpose of intrinsic ratio calculations.
-// The logic here should be similar to the logic for isAutoISize/isAutoBSize
+// Indicates whether the cross-size property is set to something definite.
+// The logic here should be similar to the logic for isAutoWidth/isAutoHeight
 // in nsFrame::ComputeSizeWithIntrinsicDimensions().
 static bool
 IsCrossSizeDefinite(const ReflowInput& aItemReflowInput,
                     const FlexboxAxisTracker& aAxisTracker)
 {
   const nsStylePosition* pos = aItemReflowInput.mStylePosition;
-  const WritingMode containerWM = aAxisTracker.GetWritingMode();
-
-  if (aAxisTracker.IsColumnOriented()) {
-    // Column-oriented means cross axis is container's inline axis.
-    return pos->ISize(containerWM).GetUnit() != eStyleUnit_Auto;
-  }
-  // Else, we're row-oriented, which means cross axis is container's block
-  // axis. We need to use IsAutoBSize() to catch e.g. %-BSize applied to
-  // indefinite container BSize, which counts as auto.
-  nscoord cbBSize = aItemReflowInput.mCBReflowInput->ComputedBSize();
-  return !nsLayoutUtils::IsAutoBSize(pos->BSize(containerWM), cbBSize);
+  if (aAxisTracker.IsCrossAxisHorizontal()) {
+    return pos->mWidth.GetUnit() != eStyleUnit_Auto;
+  }
+  // else, vertical. (We need to use IsAutoHeight() to catch e.g. %-height
+  // applied to indefinite-height containing block, which counts as auto.)
+  nscoord cbHeight = aItemReflowInput.mCBReflowInput->ComputedHeight();
+  return !nsLayoutUtils::IsAutoHeight(pos->mHeight, cbHeight);
 }
 
 // If aFlexItem has a definite cross size, this function returns it, for usage
@@ -1689,10 +1676,9 @@ nsFlexContainerFrame::
                                  const ReflowInput& aItemReflowInput,
                                  const FlexboxAxisTracker& aAxisTracker)
 {
-  // (Note: We can guarantee that the flex-basis will have already been
-  // resolved if the main axis is the same is the same as the item's inline
-  // axis. Inline-axis values should always be resolvable without reflow.)
-  const bool isMainSizeAuto = (!aFlexItem.IsInlineAxisMainAxis() &&
+  // (Note: We should never have a used flex-basis of "auto" if our main axis
+  // is horizontal; width values should always be resolvable without reflow.)
+  const bool isMainSizeAuto = (!aAxisTracker.IsMainAxisHorizontal() &&
                                NS_AUTOHEIGHT == aFlexItem.GetFlexBaseSize());
 
   const bool isMainMinSizeAuto = aFlexItem.NeedsMinSizeAutoResolution();
@@ -1723,14 +1709,10 @@ nsFlexContainerFrame::
                                   flexContainerRI->ComputedISize(),
                                   flexContainerRI->ComputedBSize());
     // Is container's cross size "definite"?
-    // - If it's column-oriented, then "yes", because its cross size is its
-    // inline-size which is always definite from its descendants' perspective.
-    // - Otherwise (if it's row-oriented), then we check the actual size
-    // and call it definite if it's not NS_AUTOHEIGHT.
-    if (aAxisTracker.IsColumnOriented() ||
+    // (Container's cross size is definite if cross-axis is horizontal, or if
+    // cross-axis is vertical and the cross-size is not NS_AUTOHEIGHT.)
+    if (aAxisTracker.IsCrossAxisHorizontal() ||
         containerCrossSize != NS_AUTOHEIGHT) {
-      // Container's cross size is "definite", so we can resolve the item's
-      // stretched cross size using that.
       aFlexItem.ResolveStretchedCrossSize(containerCrossSize, aAxisTracker);
     }
   }
@@ -1762,7 +1744,7 @@ nsFlexContainerFrame::
 
   // Measure content, if needed (w/ intrinsic-width method or a reflow)
   if (minSizeNeedsToMeasureContent || flexBasisNeedsToMeasureContent) {
-    if (aFlexItem.IsInlineAxisMainAxis()) {
+    if (aAxisTracker.IsMainAxisHorizontal()) {
       if (minSizeNeedsToMeasureContent) {
         nscoord frameMinISize =
           aFlexItem.Frame()->GetMinISize(aItemReflowInput.mRenderingContext);
@@ -1773,32 +1755,30 @@ nsFlexContainerFrame::
                    "reflow state, for horizontal flexbox. It shouldn't need "
                    "special handling here");
     } else {
-      // If this item is flexible (in its block axis)...
-      // OR if we're measuring its 'auto' min-BSize, with its main-size (in its
-      // block axis) being something non-"auto"...
-      // THEN: we assume that the computed BSize that we're reflowing with now
-      // could be different from the one we'll use for this flex item's
-      // "actual" reflow later on.  In that case, we need to be sure the flex
-      // item treats this as a block-axis resize (regardless of whether there
-      // are actually any ancestors being resized in that axis).
-      // (Note: We don't have to do this for the inline axis, because
-      // InitResizeFlags will always turn on mIsIResize on when it sees that
-      // the computed ISize is different from current ISize, and that's all we
-      // need.)
-      bool forceBResizeForMeasuringReflow =
+      // If this item is flexible (vertically), or if we're measuring the
+      // 'auto' min-height and our main-size is something else, then we assume
+      // that the computed-height we're reflowing with now could be different
+      // from the one we'll use for this flex item's "actual" reflow later on.
+      // In that case, we need to be sure the flex item treats this as a
+      // vertical resize, even though none of its ancestors are necessarily
+      // being vertically resized.
+      // (Note: We don't have to do this for width, because InitResizeFlags
+      // will always turn on mHResize on when it sees that the computed width
+      // is different from current width, and that's all we need.)
+      bool forceVerticalResizeForMeasuringReflow =
         !aFlexItem.IsFrozen() ||         // Is the item flexible?
         !flexBasisNeedsToMeasureContent; // Are we *only* measuring it for
-                                         // 'min-block-size:auto'?
+                                         // 'min-height:auto'?
 
-      nscoord contentBSize =
-        MeasureFlexItemContentBSize(aPresContext, aFlexItem,
-                                    forceBResizeForMeasuringReflow,
-                                    *flexContainerRI);
+      nscoord contentHeight =
+        MeasureFlexItemContentHeight(aPresContext, aFlexItem,
+                                     forceVerticalResizeForMeasuringReflow,
+                                     *flexContainerRI);
       if (minSizeNeedsToMeasureContent) {
-        resolvedMinSize = std::min(resolvedMinSize, contentBSize);
+        resolvedMinSize = std::min(resolvedMinSize, contentHeight);
       }
       if (flexBasisNeedsToMeasureContent) {
-        aFlexItem.SetFlexBaseSizeAndMainSize(contentBSize);
+        aFlexItem.SetFlexBaseSizeAndMainSize(contentHeight);
       }
     }
   }
@@ -1820,7 +1800,7 @@ nsFlexContainerFrame::
  * intrinsic size is marked as dirty (due to a style or DOM change).
  *
  * In particular the computed height may change between measuring reflows due to
- * how the mIsFlexContainerMeasuringBSize flag affects size computation (see
+ * how the mIsFlexContainerMeasuringReflow flag affects size computation (see
  * bug 1336708).
  *
  * Caching it prevents us from doing exponential reflows in cases of deeply
@@ -1832,27 +1812,27 @@ class nsFlexContainerFrame::CachedMeasuringReflowResult
 {
   // Members that are part of the cache key:
   const LogicalSize mAvailableSize;
-  const nscoord mComputedBSize;
+  const nscoord mComputedHeight;
 
   // Members that are part of the cache value:
-  const nscoord mBSize;
+  const nscoord mHeight;
   const nscoord mAscent;
 
 public:
   CachedMeasuringReflowResult(const ReflowInput& aReflowInput,
                               const ReflowOutput& aDesiredSize)
     : mAvailableSize(aReflowInput.AvailableSize())
-    , mComputedBSize(aReflowInput.ComputedBSize())
-    , mBSize(aDesiredSize.BSize(aReflowInput.GetWritingMode()))
+    , mComputedHeight(aReflowInput.ComputedHeight())
+    , mHeight(aDesiredSize.Height())
     , mAscent(aDesiredSize.BlockStartAscent())
   {}
 
   bool IsValidFor(const ReflowInput& aReflowInput) const {
     return mAvailableSize == aReflowInput.AvailableSize() &&
-      mComputedBSize == aReflowInput.ComputedBSize();
+      mComputedHeight == aReflowInput.ComputedHeight();
   }
 
-  nscoord BSize() const { return mBSize; }
+  nscoord Height() const { return mHeight; }
 
   nscoord Ascent() const { return mAscent; }
 };
@@ -1861,7 +1841,7 @@ NS_DECLARE_FRAME_PROPERTY_DELETABLE(CachedFlexMeasuringReflow,
                                     CachedMeasuringReflowResult);
 
 const CachedMeasuringReflowResult&
-nsFlexContainerFrame::MeasureAscentAndBSizeForFlexItem(
+nsFlexContainerFrame::MeasureAscentAndHeightForFlexItem(
   FlexItem& aItem,
   nsPresContext* aPresContext,
   ReflowInput& aChildReflowInput)
@@ -1912,44 +1892,43 @@ nsFlexContainerFrame::MarkIntrinsicISizesDirty()
 
 nscoord
 nsFlexContainerFrame::
-  MeasureFlexItemContentBSize(nsPresContext* aPresContext,
-                              FlexItem& aFlexItem,
-                              bool aForceBResizeForMeasuringReflow,
-                              const ReflowInput& aParentReflowInput)
+  MeasureFlexItemContentHeight(nsPresContext* aPresContext,
+                               FlexItem& aFlexItem,
+                               bool aForceVerticalResizeForMeasuringReflow,
+                               const ReflowInput& aParentReflowInput)
 {
   // Set up a reflow state for measuring the flex item's auto-height:
   WritingMode wm = aFlexItem.Frame()->GetWritingMode();
   LogicalSize availSize = aParentReflowInput.ComputedSize(wm);
   availSize.BSize(wm) = NS_UNCONSTRAINEDSIZE;
   ReflowInput
-    childRIForMeasuringBSize(aPresContext, aParentReflowInput,
-                             aFlexItem.Frame(), availSize,
-                             nullptr, ReflowInput::CALLER_WILL_INIT);
-  childRIForMeasuringBSize.mFlags.mIsFlexContainerMeasuringBSize = true;
-  childRIForMeasuringBSize.Init(aPresContext);
+    childRIForMeasuringHeight(aPresContext, aParentReflowInput,
+                              aFlexItem.Frame(), availSize,
+                              nullptr, ReflowInput::CALLER_WILL_INIT);
+  childRIForMeasuringHeight.mFlags.mIsFlexContainerMeasuringHeight = true;
+  childRIForMeasuringHeight.Init(aPresContext);
 
   if (aFlexItem.IsStretched()) {
-    childRIForMeasuringBSize.SetComputedISize(aFlexItem.GetCrossSize());
-    childRIForMeasuringBSize.SetIResize(true);
+    childRIForMeasuringHeight.SetComputedWidth(aFlexItem.GetCrossSize());
+    childRIForMeasuringHeight.SetHResize(true);
   }
 
-  if (aForceBResizeForMeasuringReflow) {
-    childRIForMeasuringBSize.SetBResize(true);
+  if (aForceVerticalResizeForMeasuringReflow) {
+    childRIForMeasuringHeight.SetVResize(true);
   }
 
   const CachedMeasuringReflowResult& reflowResult =
-    MeasureAscentAndBSizeForFlexItem(aFlexItem, aPresContext,
-                                     childRIForMeasuringBSize);
+    MeasureAscentAndHeightForFlexItem(aFlexItem, aPresContext,
+                                      childRIForMeasuringHeight);
 
   aFlexItem.SetAscent(reflowResult.Ascent());
 
+  // Subtract border/padding in vertical axis, to get _just_
+  // the effective computed value of the "height" property.
+  nscoord childDesiredHeight = reflowResult.Height() -
+    childRIForMeasuringHeight.ComputedPhysicalBorderPadding().TopBottom();
 
-  // Subtract border/padding in block axis, to get _just_
-  // the effective computed value of the BSize property.
-  nscoord childDesiredBSize = reflowResult.BSize() -
-    childRIForMeasuringBSize.ComputedLogicalBorderPadding().BStartEnd(wm);
-
-  return std::max(0, childDesiredBSize);
+  return std::max(0, childDesiredHeight);
 }
 
 FlexItem::FlexItem(ReflowInput& aFlexItemReflowInput,
@@ -1973,16 +1952,14 @@ FlexItem::FlexItem(ReflowInput& aFlexItemReflowInput,
     mCrossPosn(0),
     mAscent(0),
     mShareOfWeightSoFar(0.0f),
-    mWM(aFlexItemReflowInput.GetWritingMode()),
     mIsFrozen(false),
     mHadMinViolation(false),
     mHadMaxViolation(false),
     mHadMeasuringReflow(false),
     mIsStretched(false),
     mIsStrut(false),
-    mIsInlineAxisMainAxis(aAxisTracker.IsRowOriented() !=
-                          aAxisTracker.GetWritingMode().IsOrthogonalTo(mWM))
     // mNeedsMinSizeAutoResolution is initialized in CheckForMinSizeAuto()
+    mWM(aFlexItemReflowInput.GetWritingMode())
     // mAlignSelf, see below
 {
   MOZ_ASSERT(mFrame, "expecting a non-null child frame");
@@ -1990,10 +1967,6 @@ FlexItem::FlexItem(ReflowInput& aFlexItemReflowInput,
              "placeholder frames should not be treated as flex items");
   MOZ_ASSERT(!(mFrame->GetStateBits() & NS_FRAME_OUT_OF_FLOW),
              "out-of-flow frames should not be treated as flex items");
-  MOZ_ASSERT(mIsInlineAxisMainAxis ==
-             nsFlexContainerFrame::IsItemInlineAxisMainAxis(mFrame),
-             "public API should be consistent with internal state (about "
-             "whether flex item's inline axis is flex container's main axis)");
 
   const ReflowInput* containerRS = aFlexItemReflowInput.mParentReflowInput;
   if (IsLegacyBox(containerRS->mFrame)) {
@@ -2074,17 +2047,14 @@ FlexItem::FlexItem(nsIFrame* aChildFrame, nscoord aCrossSize,
     mCrossPosn(0),
     mAscent(0),
     mShareOfWeightSoFar(0.0f),
-    // Struts don't do layout, so its WM doesn't matter at this point. So, we
-    // just share container's WM for simplicity:
-    mWM(aContainerWM),
     mIsFrozen(true),
     mHadMinViolation(false),
     mHadMaxViolation(false),
     mHadMeasuringReflow(false),
     mIsStretched(false),
     mIsStrut(true), // (this is the constructor for making struts, after all)
-    mIsInlineAxisMainAxis(true), // (doesn't matter b/c we're not doing layout)
     mNeedsMinSizeAutoResolution(false),
+    mWM(aContainerWM),
     mAlignSelf(NS_STYLE_ALIGN_FLEX_START)
 {
   MOZ_ASSERT(mFrame, "expecting a non-null child frame");
@@ -2201,28 +2171,15 @@ FlexItem::CanMainSizeInfluenceCrossSize(
     return true;
   }
 
-  if (IsInlineAxisCrossAxis()) {
-    // If we get here, this function is really asking: "can changes to this
-    // item's block size have an influence on its inline size"?  For blocks and
-    // tables, the answer is "no".
-    if (mFrame->GetType() == nsGkAtoms::blockFrame ||
-        mFrame->GetType() == nsGkAtoms::tableWrapperFrame) {
-      // XXXdholbert (Maybe use an IsFrameOfType query or something more
-      // general to test this across all frame types? For now, I'm just
-      // optimizing for block and table, since those are common containers that
-      // can contain arbitrarily-large subtrees (and that reliably have ISize
-      // being unaffected by BSize, per CSS2).  So optimizing away needless
-      // relayout is possible & especially valuable for these containers.)
-      return false;
-    }
-    // Other opt-outs can go here, as they're identified as being useful
-    // (particularly for containers where an extra reflow is expensive). But in
-    // general, we have to assume that a flexed BSize *could* influence the
-    // ISize. Some examples where this can definitely happen:
-    // * Intrinsically-sized multicol with fixed-ISize columns, which adds
-    // columns (i.e. grows in inline axis) depending on its block size.
-    // * Intrinsically-sized multi-line column-oriented flex container, which
-    // adds flex lines (i.e. grows in inline axis) depending on its block size.
+  if (aAxisTracker.IsCrossAxisHorizontal()) {
+    // If the cross axis is horizontal, then changes to the item's main size
+    // (height) can't influence its cross size (width), if the item is a block
+    // with a horizontal writing-mode.
+    // XXXdholbert This doesn't account for vertical writing-modes, items with
+    // aspect ratios, items that are multicol elements, & items that are
+    // multi-line vertical flex containers. In all of those cases, a change to
+    // the height could influence the width.
+    return false;
   }
 
   // Default assumption, if we haven't proven otherwise: the resolved main size
@@ -4126,10 +4083,19 @@ nsFlexContainerFrame::SizeItemInCrossAxis(
   ReflowInput& aChildReflowInput,
   FlexItem& aItem)
 {
-  // If cross axis is the item's inline axis, just use ISize from reflow state,
-  // and don't bother with a full reflow.
-  if (aItem.IsInlineAxisCrossAxis()) {
-    aItem.SetCrossSize(aChildReflowInput.ComputedISize());
+  if (aAxisTracker.IsCrossAxisHorizontal()) {
+    MOZ_ASSERT(aItem.HasIntrinsicRatio(),
+               "For now, caller's CanMainSizeInfluenceCrossSize check should "
+               "only allow us to get here for items with intrinsic ratio");
+    // XXXdholbert When we finish support for vertical writing-modes,
+    // (in bug 1079155 or a dependency), we'll relax the horizontal check in
+    // CanMainSizeInfluenceCrossSize, and this function will need to be able
+    // to measure the baseline & width (given our resolved height)
+    // of vertical-writing-mode flex items here.
+    // For now, we only expect to get here for items with an intrinsic aspect
+    // ratio; and for those items, we can just read the size off of the reflow
+    // state, without performing reflow.
+    aItem.SetCrossSize(aChildReflowInput.ComputedWidth());
     return;
   }
 
@@ -4138,18 +4104,16 @@ nsFlexContainerFrame::SizeItemInCrossAxis(
 
   if (aItem.GetAlignSelf() == NS_STYLE_ALIGN_STRETCH) {
     // This item's got "align-self: stretch", so we probably imposed a
-    // stretched computed cross-size on it during its previous
-    // reflow. We're not imposing that BSize for *this* "measuring" reflow, so
-    // we need to tell it to treat this reflow as a resize in its block axis
-    // (regardless of whether any of its ancestors are actually being resized).
-    // (Note: we know that the cross axis is the item's *block* axis -- if it
-    // weren't, then we would've taken the early-return above.)
-    aChildReflowInput.SetBResize(true);
+    // stretched computed height on it during its previous reflow. We're
+    // not imposing that height for *this* measuring reflow, so we need to
+    // tell it to treat this reflow as a vertical resize (regardless of
+    // whether any of its ancestors are being resized).
+    aChildReflowInput.SetVResize(true);
   }
 
   // Potentially reflow the item, and get the sizing info.
   const CachedMeasuringReflowResult& reflowResult =
-    MeasureAscentAndBSizeForFlexItem(aItem, aPresContext, aChildReflowInput);
+    MeasureAscentAndHeightForFlexItem(aItem, aPresContext, aChildReflowInput);
 
   // Save the sizing info that we learned from this reflow
   // -----------------------------------------------------
@@ -4161,7 +4125,7 @@ nsFlexContainerFrame::SizeItemInCrossAxis(
   // so we don't bother with making aAxisTracker pick the cross-axis component
   // for us.)
   nscoord crossAxisBorderPadding = aItem.GetBorderPadding().TopBottom();
-  if (reflowResult.BSize() < crossAxisBorderPadding) {
+  if (reflowResult.Height() < crossAxisBorderPadding) {
     // Child's requested size isn't large enough for its border/padding!
     // This is OK for the trivial nsFrame::Reflow() impl, but other frame
     // classes should know better. So, if we get here, the child had better be
@@ -4174,7 +4138,7 @@ nsFlexContainerFrame::SizeItemInCrossAxis(
     aItem.SetCrossSize(0);
   } else {
     // (normal case)
-    aItem.SetCrossSize(reflowResult.BSize() - crossAxisBorderPadding);
+    aItem.SetCrossSize(reflowResult.Height() - crossAxisBorderPadding);
   }
 
   aItem.SetAscent(reflowResult.Ascent());
@@ -4425,41 +4389,6 @@ nsFlexContainerFrame::CalculatePackingSpace(uint32_t aNumThingsToPack,
   *aPackingSpaceRemaining -= totalEdgePackingSpace;
 }
 
-/* static */
-bool
-nsFlexContainerFrame::IsItemInlineAxisMainAxis(nsIFrame* aFrame)
-{
-  MOZ_ASSERT(aFrame && aFrame->IsFlexItem(), "expecting arg to be a flex item");
-  const WritingMode flexItemWM = aFrame->GetWritingMode();
-  const nsIFrame* flexContainer = aFrame->GetParent();
-
-  if (IsLegacyBox(flexContainer)) {
-    // For legacy boxes, the main axis is determined by "box-orient", and we can
-    // just directly check if that's vertical, and compare that to whether the
-    // item's WM is also vertical:
-    bool boxOrientIsVertical =
-      (flexContainer->StyleXUL()->mBoxOrient == StyleBoxOrient::Vertical);
-    return flexItemWM.IsVertical() == boxOrientIsVertical;
-  }
-
-  // For modern CSS flexbox, we get our return value by asking two questions
-  // and comparing their answers.
-  // Question 1: does aFrame have the same inline axis as its flex container?
-  bool itemInlineAxisIsParallelToParent =
-    !flexItemWM.IsOrthogonalTo(flexContainer->GetWritingMode());
-
-  // Question 2: is aFrame's flex container row-oriented? (This tells us
-  // whether the flex container's main axis is its inline axis.)
-  auto flexDirection = flexContainer->StylePosition()->mFlexDirection;
-  bool flexContainerIsRowOriented =
-    flexDirection == NS_STYLE_FLEX_DIRECTION_ROW ||
-    flexDirection == NS_STYLE_FLEX_DIRECTION_ROW_REVERSE;
-
-  // aFrame's inline axis is its flex container's main axis IFF the above
-  // questions have the same answer.
-  return flexContainerIsRowOriented == itemInlineAxisIsParallelToParent;
-}
-
 void
 nsFlexContainerFrame::DoFlexLayout(nsPresContext*           aPresContext,
                                    ReflowOutput&     aDesiredSize,
diff --git a/layout/generic/nsFlexContainerFrame.h b/layout/generic/nsFlexContainerFrame.h
index e349709876..39de79b577 100644
--- a/layout/generic/nsFlexContainerFrame.h
+++ b/layout/generic/nsFlexContainerFrame.h
@@ -133,21 +133,6 @@ public:
                                     uint32_t* aNumPackingSpacesRemaining,
                                     nscoord* aPackingSpaceRemaining);
 
-  /**
-   * Given a frame for a flex item, this method returns true IFF that flex
-   * item's inline axis is the same as (i.e. not orthogonal to) its flex
-   * container's main axis.
-   *
-   * (This method is only intended to be used from external
-   * callers. Inside of flex reflow code, FlexItem::IsInlineAxisMainAxis() is
-   * equivalent & more optimal.)
-   *
-   * @param aFrame a flex item (must return true from IsFlexItem)
-   * @return true iff aFrame's inline axis is the same as (i.e. not orthogonal
-   *              to) its flex container's main axis. Otherwise, false.
-   */
-  static bool IsItemInlineAxisMainAxis(nsIFrame* aFrame);
-
 protected:
   // Protected constructor & destructor
   explicit nsFlexContainerFrame(nsStyleContext* aContext)
@@ -222,20 +207,20 @@ protected:
    * This avoids exponential reflows, see the comment on
    * CachedMeasuringReflowResult.
    */
-  const CachedMeasuringReflowResult& MeasureAscentAndBSizeForFlexItem(
+  const CachedMeasuringReflowResult& MeasureAscentAndHeightForFlexItem(
     FlexItem& aItem,
     nsPresContext* aPresContext,
     ReflowInput& aChildReflowInput);
 
   /**
-   * This method performs a "measuring" reflow to get the content BSize of
-   * aFlexItem.Frame() (treating it as if it had a computed BSize of "auto"),
-   * and returns the resulting BSize measurement.
+   * This method performs a "measuring" reflow to get the content height of
+   * aFlexItem.Frame() (treating it as if it had auto-height), & returns the
+   * resulting height.
    * (Helper for ResolveAutoFlexBasisAndMinSize().)
    */
-  nscoord MeasureFlexItemContentBSize(nsPresContext* aPresContext,
+  nscoord MeasureFlexItemContentHeight(nsPresContext* aPresContext,
                                        FlexItem& aFlexItem,
-                                       bool aForceBSizeForMeasuringReflow,
+                                       bool aForceVerticalResizeForMeasuringReflow,
                                        const ReflowInput& aParentReflowInput);
 
   /**
diff --git a/layout/generic/nsFrame.cpp b/layout/generic/nsFrame.cpp
index 9bc4941e0b..43ad970890 100644
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -39,7 +39,6 @@
 #include "mozilla/Logging.h"
 #include "mozilla/Sprintf.h"
 #include "nsFrameManager.h"
-#include "nsFlexContainerFrame.h"
 #include "nsLayoutUtils.h"
 #include "LayoutLogging.h"
 #include "mozilla/RestyleManager.h"
@@ -4753,11 +4752,12 @@ nsFrame::ComputeSize(nsRenderingContext* aRenderingContext,
   }
   bool isFlexItem = (parentFrameType == nsGkAtoms::flexContainerFrame &&
                      !(GetStateBits() & NS_FRAME_OUT_OF_FLOW));
-
   bool isInlineFlexItem = false;
   if (isFlexItem) {
+    uint32_t flexDirection = GetParent()->StylePosition()->mFlexDirection;
     isInlineFlexItem =
-      nsFlexContainerFrame::IsItemInlineAxisMainAxis(this);
+      flexDirection == NS_STYLE_FLEX_DIRECTION_ROW ||
+      flexDirection == NS_STYLE_FLEX_DIRECTION_ROW_REVERSE;
 
     const nsStyleCoord* flexBasis = &(stylePos->mFlexBasis);
     SetCoordToFlexBasis(isInlineFlexItem, false, flexBasis,
@@ -4973,8 +4973,11 @@ nsFrame::ComputeSizeWithIntrinsicDimensions(nsRenderingContext*  aRenderingConte
   // from our style struct. (Otherwise, we'll be using an irrelevant value in
   // the aspect-ratio calculations below.)
   if (isFlexItem) {
+    uint32_t flexDirection =
+      GetParent()->StylePosition()->mFlexDirection;
     isInlineFlexItem =
-      nsFlexContainerFrame::IsItemInlineAxisMainAxis(this);
+      flexDirection == NS_STYLE_FLEX_DIRECTION_ROW ||
+      flexDirection == NS_STYLE_FLEX_DIRECTION_ROW_REVERSE;
 
     // If FlexItemMainSizeOverride frame-property is set, then that means the
     // flex container is imposing a main-size on this flex item for it to use
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml
deleted file mode 100644
index f1dfdfdb86..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml
+++ /dev/null
@@ -1,73 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<!-- Testcase with blocks as flex items in a horizontal flex container, with
-     various "flex" values and various combinations of the items
-     and with various writing-modes on the items. -->
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>
-      CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container
-      (with various writing-modes on the flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
-    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
-    <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/>
-    <style>
-      div { height: 100px; }
-      div.flexbox {
-        border: 1px dashed blue;
-        width: 200px;
-        font-size: 10px;
-        display: flex;
-      }
-      div.a {
-        flex: 1 0 30px;
-        background: lightgreen;
-        writing-mode: vertical-lr;
-      }
-      div.b {
-        flex: 2 0 20px;
-        background: yellow;
-        writing-mode: vertical-rl;
-      }
-      div.c {
-        flex: 3 0 40px;
-        background: orange;
-        writing-mode: sideways-lr;
-      }
-      div.flexNone {
-        flex: none;
-        background: pink;
-        writing-mode: vertical-lr;
-      }
-      div.flexBasis {
-        flex: 0 0 20px;
-        background: gray;
-        writing-mode: sideways-rl;
-      }
-      div.spacer {
-        width: 15px;
-        height: 15px;
-        background: purple;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="flexbox"><div class="a"></div><div class="b"/></div>
-    <div class="flexbox"><div class="a"/><div class="c"/></div>
-    <div class="flexbox"><div class="a"/>
-      <div class="flexNone"><div class="spacer"/></div>
-    </div>
-    <div class="flexbox"><div class="b"/><div class="c"/></div>
-    <div class="flexbox"><div class="b"/>
-      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
-    </div>
-
-    <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
-    </div>
-  </body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml
deleted file mode 100644
index da943dfc56..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml
+++ /dev/null
@@ -1,75 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<!-- Testcase with blocks as flex items in a vertical flex container, with
-     various "flex" values and various combinations of the items. -->
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>
-      CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container
-      (with various writing-modes on the flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
-    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
-    <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/>
-    <style>
-      div { width: 50px; }
-      div.flexbox {
-        float: left;
-        border: 1px dashed blue;
-        height: 200px;
-        font-size: 10px;
-        display: flex;
-        flex-direction: column;
-      }
-      div.a {
-        flex: 1 0 30px;
-        background: lightgreen;
-        writing-mode: vertical-lr;
-      }
-      div.b {
-        flex: 2 0 20px;
-        background: yellow;
-        writing-mode: vertical-rl;
-      }
-      div.c {
-        flex: 3 0 40px;
-        background: orange;
-        writing-mode: sideways-lr;
-      }
-      div.flexNone {
-        flex: none;
-        background: pink;
-        writing-mode: vertical-lr;
-      }
-      div.flexBasis {
-        flex: 0 0 20px;
-        background: gray;
-        writing-mode: sideways-rl;
-      }
-      div.spacer {
-        display: inline-block;
-        width: 15px;
-        height: 15px;
-        background: purple;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="flexbox"><div class="a"></div><div class="b"/></div>
-    <div class="flexbox"><div class="a"/><div class="c"/></div>
-    <div class="flexbox"><div class="a"/>
-      <div class="flexNone"><div class="spacer"/></div>
-    </div>
-    <div class="flexbox"><div class="b"/><div class="c"/></div>
-    <div class="flexbox"><div class="b"/>
-      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
-    </div>
-
-    <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
-    </div>
-  </body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml
deleted file mode 100644
index ad623d77f7..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml
+++ /dev/null
@@ -1,105 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<!--
-     This test checks that canvas elements behave correctly as flex items.
--->
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>
-      CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container
-      (with a vertical writing-mode on the canvas flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
-    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
-    <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/>
-    <style>
-      div.flexbox {
-        width: 200px;
-        background: lightgreen;
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 5px;
-        line-height: 8px;
-      }
-      canvas {
-        min-width: 0;
-        width: 10px;
-        height: 20px;
-        border: 1px dotted green;
-        writing-mode: vertical-lr;
-      }
-    </style>
-  </head>
-  <body>
-
-    <!-- A) One flex item -->
-    <div class="flexbox">
-      <canvas/>
-    </div>
-
-    <!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
-    <div class="flexbox">
-      some words <canvas/>
-    </div>
-
-    <!-- C) Two canvas elements, getting stretched by different ratios, from 0.
-
-         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
-                                 = 196px
-
-         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
-         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
-      -->
-    <div class="flexbox">
-      <canvas style="flex: 5"/>
-      <canvas style="flex: 3"/>
-    </div>
-
-    <!-- D) Two canvas elements, getting stretched by different ratios, from
-         different flex bases.
-
-         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
-         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
-         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-      -->
-    <div class="flexbox">
-      <canvas style="width: 33px; flex: 2 auto"/>
-      <canvas style="width: 13px; flex: 3 auto"/>
-    </div>
-
-    <!-- E) Two flex items, getting shrunk by different amounts.
-
-         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
-         First element scaled flex ratio = 4 * 150 = 600
-         Second element scaled flex ratio = 3 * 100 = 300
-           * So, total flexibility is 600 + 300 = 900
-
-         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
-         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-      -->
-    <div class="flexbox">
-      <canvas style="width: 150px; flex: 1 4 auto"/>
-      <canvas style="width: 100px; flex: 1 3 auto"/>
-    </div>
-
-    <!-- F) Making sure we don't grow past max-width -->
-    <!-- Same as (D), except we've added a max-width on the second element.
-      -->
-    <div class="flexbox">
-      <canvas style="width: 33px; flex: 2 auto"/>
-      <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
-    </div>
-
-    <!-- G) Making sure we grow at least as large as min-width -->
-    <!-- Same as (C), except we've added a min-width on the second element.
-      -->
-    <div class="flexbox">
-      <canvas style="width: 33px; flex: 2 auto"/>
-      <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
-    </div>
-
-  </body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml
deleted file mode 100644
index 057f63ae62..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml
+++ /dev/null
@@ -1,107 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<!--
-     This test checks that canvas elements behave correctly as flex items.
--->
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>
-      CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container
-      (with a vertical writing-mode on the canvas flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
-    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
-    <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/>
-    <style>
-      div.flexbox {
-        height: 200px;
-        background: lightgreen;
-        display: flex;
-        justify-content: space-between;
-        flex-direction: column;
-        float: left;
-        margin-right: 10px;
-        font: 8px monospace;
-      }
-      canvas {
-        width: 20px;
-        height: 10px;
-        min-height: 0;
-        border: 1px dotted green;
-        writing-mode: vertical-lr;
-      }
-    </style>
-  </head>
-  <body>
-
-    <!-- A) One flex item -->
-    <div class="flexbox">
-      <canvas/>
-    </div>
-
-    <!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
-    <div class="flexbox">
-      a b <canvas/>
-    </div>
-
-    <!-- C) Two canvas elements, getting stretched by different ratios, from 0.
-
-         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
-                                 = 196px
-
-         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
-         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
-      -->
-    <div class="flexbox">
-      <canvas style="flex: 5"/>
-      <canvas style="flex: 3"/>
-    </div>
-
-    <!-- D) Two canvas elements, getting stretched by different ratios, from
-         different flex bases.
-
-         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
-         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
-         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-      -->
-    <div class="flexbox">
-      <canvas style="height: 33px; flex: 2 auto"/>
-      <canvas style="height: 13px; flex: 3 auto"/>
-    </div>
-
-    <!-- E) Two flex items, getting shrunk by different amounts.
-
-         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
-         First element scaled flex ratio = 4 * 150 = 600
-         Second element scaled flex ratio = 3 * 100 = 300
-           * So, total flexibility is 600 + 300 = 900
-
-         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
-         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-      -->
-    <div class="flexbox">
-      <canvas style="height: 150px; flex: 1 4 auto"/>
-      <canvas style="height: 100px; flex: 1 3 auto"/>
-    </div>
-
-    <!-- F) Making sure we don't grow past max-height -->
-    <!-- Same as (D), except we've added a max-height on the second element.
-      -->
-    <div class="flexbox">
-      <canvas style="height: 33px; flex: 2 auto"/>
-      <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
-    </div>
-
-    <!-- G) Making sure we grow at least as large as min-height -->
-    <!-- Same as (C), except we've added a min-height on the second element.
-      -->
-    <div class="flexbox">
-      <canvas style="height: 33px; flex: 2 auto"/>
-      <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
-    </div>
-
-  </body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html
deleted file mode 100644
index 4cc910b9e2..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>
-      CSS Test: Testing how explicit main-size & cross-size constraints
-      influence sizing on non-stretched flex item w/ intrinsic ratio
-      (with a vertical writing-mode on the flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
-    <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
-    <style>
-      .flexbox {
-        display: flex;
-        flex-direction: row;
-        border: 1px solid black;
-        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
-        width: 40px;
-        height: 40px;
-
-        justify-content: flex-start;
-        align-items: flex-start;
-
-        float: left; /* For testing in "rows" */
-      }
-      br { clear: both; }
-
-      .flexbox > * {
-        writing-mode: vertical-lr;
-
-        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
-           later channels of influence. */
-        min-width: 0;
-        min-height: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
-
-    <!-- Row 1: no special sizing: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png">
-    </div>
-    <br>
-
-    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="flex: 0 0 30px">
-    </div>
-    <br>
-
-    <!-- Row 3: min main-size OR min cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 4: max main-size OR max cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              max-height: 6px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 6px;
-                                              max-height: 10px">
-    </div>
-    <br>
-
-    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 10px;
-                                              min-height: 30px">
-    </div>
-  </body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html
deleted file mode 100644
index 0df92f9954..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>
-      CSS Test: Testing how explicit main-size & cross-size constraints
-      influence sizing on non-stretched flex item w/ intrinsic ratio
-      (with a vertical writing-mode on the flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
-    <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
-    <style>
-      .flexbox {
-        display: flex;
-        flex-direction: column;
-        border: 1px solid black;
-        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
-        width: 40px;
-        height: 40px;
-
-        justify-content: flex-start;
-        align-items: flex-start;
-
-        float: left; /* For testing in "rows" */
-      }
-      br { clear: both; }
-
-      .flexbox > * {
-        writing-mode: vertical-lr;
-
-        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
-           later channels of influence. */
-        min-width: 0;
-        min-height: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
-
-    <!-- Row 1: no special sizing: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png">
-    </div>
-    <br>
-
-    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="flex: 0 0 30px">
-    </div>
-    <br>
-
-    <!-- Row 3: min main-size OR min cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 4: max main-size OR max cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              max-height: 6px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 6px;
-                                              max-height: 10px">
-    </div>
-    <br>
-
-    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 10px;
-                                              min-height: 30px">
-    </div>
-  </body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html
deleted file mode 100644
index cb9275fd8c..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>
-      CSS Test: Testing how explicit main-size & cross-size constraints
-      influence sizing on stretched flex item w/ intrinsic ratio
-      (with a vertical writing-mode on the flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
-    <link rel="match" href="flexbox-intrinsic-ratio-003-ref.html">
-    <style>
-      .flexbox {
-        display: flex;
-        flex-direction: row;
-        border: 1px solid black;
-        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
-        width: 40px;
-        height: 40px;
-
-        justify-content: flex-start;
-        align-items: stretch;
-
-        float: left; /* For testing in "rows" */
-      }
-      br { clear: both; }
-
-      .flexbox > * {
-        writing-mode: vertical-rl;
-
-        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
-           later channels of influence. */
-        min-width: 0;
-        min-height: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
-
-    <!-- Row 1: no special sizing: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png">
-    </div>
-    <br>
-
-    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="flex: 0 0 30px">
-    </div>
-    <br>
-
-    <!-- Row 3: min main-size OR min cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 4: max main-size OR max cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              max-height: 6px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 6px;
-                                              max-height: 10px">
-    </div>
-    <br>
-
-    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 10px;
-                                              min-height: 30px">
-    </div>
-  </body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html
deleted file mode 100644
index 01c5271c45..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>
-      CSS Test: Testing how explicit main-size & cross-size constraints
-      influence sizing on stretched flex item w/ intrinsic ratio
-      (with a vertical writing-mode on the flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
-    <link rel="match" href="flexbox-intrinsic-ratio-004-ref.html">
-    <style>
-      .flexbox {
-        display: flex;
-        flex-direction: column;
-        border: 1px solid black;
-        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
-        width: 40px;
-        height: 40px;
-
-        justify-content: flex-start;
-        align-items: stretch;
-
-        float: left; /* For testing in "rows" */
-      }
-      br { clear: both; }
-
-      .flexbox > * {
-        writing-mode: vertical-rl;
-
-        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
-           later channels of influence. */
-        min-width: 0;
-        min-height: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
-
-    <!-- Row 1: no special sizing: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png">
-    </div>
-    <br>
-
-    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="flex: 0 0 30px">
-    </div>
-    <br>
-
-    <!-- Row 3: min main-size OR min cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 4: max main-size OR max cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              max-height: 6px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 6px;
-                                              max-height: 10px">
-    </div>
-    <br>
-
-    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 10px;
-                                              min-height: 30px">
-    </div>
-  </body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html
deleted file mode 100644
index ed1dcace0f..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html
+++ /dev/null
@@ -1,129 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>
-      CSS Test: Testing how explicit main-size & cross-size constraints
-      influence sizing on non-stretched flexible flex item w/ intrinsic ratio
-      (with a vertical writing-mode on the flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
-    <link rel="match" href="flexbox-intrinsic-ratio-005-ref.html">
-    <style>
-      .flexbox {
-        display: flex;
-        flex-direction: row;
-        border: 1px solid black;
-        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
-        width: 40px;
-        height: 40px;
-
-        justify-content: flex-start;
-        align-items: flex-start;
-
-        float: left; /* For testing in "rows" */
-      }
-      br { clear: both; }
-
-      .flexbox > * {
-        flex: 1;
-        writing-mode: vertical-lr;
-
-        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
-           later channels of influence. */
-        min-width: 0;
-        min-height: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
-
-    <!-- Row 1: no special sizing: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png">
-    </div>
-    <br>
-
-    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="flex: 1 1 30px">
-    </div>
-    <br>
-
-    <!-- Row 3: min main-size OR min cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 4: max main-size OR max cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              max-height: 6px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 6px;
-                                              max-height: 10px">
-    </div>
-    <br>
-
-    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 10px;
-                                              min-height: 30px">
-    </div>
-  </body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html
deleted file mode 100644
index 8c12fad8c7..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html
+++ /dev/null
@@ -1,129 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>
-      CSS Test: Testing how explicit main-size & cross-size constraints
-      influence sizing on non-stretched flexible flex item w/ intrinsic ratio
-      (with a vertical writing-mode on the flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
-    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
-    <link rel="match" href="flexbox-intrinsic-ratio-006-ref.html">
-    <style>
-      .flexbox {
-        display: flex;
-        flex-direction: column;
-        border: 1px solid black;
-        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
-        width: 40px;
-        height: 40px;
-
-        justify-content: flex-start;
-        align-items: flex-start;
-
-        float: left; /* For testing in "rows" */
-      }
-      br { clear: both; }
-
-      .flexbox > * {
-        flex: 1;
-        writing-mode: vertical-lr;
-
-        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
-           later channels of influence. */
-        min-width: 0;
-        min-height: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
-
-    <!-- Row 1: no special sizing: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png">
-    </div>
-    <br>
-
-    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="flex: 1 1 30px">
-    </div>
-    <br>
-
-    <!-- Row 3: min main-size OR min cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 4: max main-size OR max cross-size, or both -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              max-height: 6px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 6px;
-                                              max-height: 10px">
-    </div>
-    <br>
-
-    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              min-height: 30px">
-    </div>
-    <br>
-
-    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 30px;
-                                              height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 30px;
-                                              max-height: 10px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="max-width: 10px;
-                                              height: 30px">
-    </div>
-    <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 10px;
-                                              min-height: 30px">
-    </div>
-  </body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml
deleted file mode 100644
index a02e3406c9..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml
+++ /dev/null
@@ -1,86 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<!-- Testcase with margin/border/padding on flex items
-     and with various writing-modes on the items. -->
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>
-      CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container
-      (with a vertical writing-mode on the flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
-    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
-    <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/>
-    <style>
-      div { height: 100px; border: 0; }
-      div.flexbox {
-        width: 200px;
-        font-size: 10px;
-        display: flex;
-      }
-      div.a {
-        flex: 1 0 9px;
-        background: lightgreen;
-        margin-left: 1px;
-        margin-right: 3px;
-        border-style: dotted;
-        border-left-width: 2px;
-        border-right-width: 4px;
-        padding-left: 5px;
-        padding-right: 6px;
-        writing-mode: vertical-lr;
-      }
-      div.b {
-        flex: 2 0 1px;
-        background: yellow;
-        margin-left: 2px;
-        margin-right: 4px;
-        border-style: dashed;
-        border-left-width: 7px;
-        border-right-width: 3px;
-        padding-left: 1px;
-        padding-right: 2px;
-        writing-mode: vertical-rl;
-      }
-      div.c {
-        flex: 3 0 40px;
-        background: orange;
-        writing-mode: sideways-lr;
-      }
-      div.flexNone {
-        flex: none;
-        background: pink;
-        writing-mode: vertical-lr;
-      }
-      div.flexBasis {
-        flex: 0 0 20px;
-        background: gray;
-        writing-mode: sideways-rl;
-      }
-      div.spacer {
-        width: 15px;
-        height: 15px;
-        background: purple;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="flexbox"><div class="a"></div><div class="b"/></div>
-    <div class="flexbox"><div class="a"/><div class="c"/></div>
-    <div class="flexbox"><div class="a"/>
-      <div class="flexNone"><div class="spacer"/></div>
-    </div>
-    <div class="flexbox"><div class="b"/><div class="c"/></div>
-    <div class="flexbox"><div class="b"/>
-      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
-    </div>
-
-    <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
-    </div>
-  </body>
-</html>
-
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml
deleted file mode 100644
index 8baef30227..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml
+++ /dev/null
@@ -1,88 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<!-- Testcase with border/padding on a flex container and on its children -->
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>
-      CSS Test: Testing borders and padding on a horizontal flex container and its flex items
-      (with a vertical writing-mode on the flex items).
-    </title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
-    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
-    <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/>
-    <style>
-      div { height: 20px; border: 0; }
-      div.flexbox {
-        width: 200px;
-        display: flex;
-        margin-bottom: 2px;
-      }
-
-      <!-- customizations for flex container border/padding -->
-      .borderA {
-        border-style: dashed;
-        border-color: purple;
-        border-top-width: 6px;
-        border-right-width: 4px;
-        border-bottom-width: 2px;
-        border-left-width: 8px;
-      }
-
-      .borderB {
-        border-style: dashed;
-        border-color: purple;
-        border-top-width: 4px;
-        border-right-width: 5px;
-        border-bottom-width: 6px;
-        border-left-width: 7px;
-      }
-
-      .paddingA {
-        padding: 4px 3px 2px 1px;
-      }
-
-      .paddingB {
-        padding: 8px 11px 14px 17px;
-      }
-
-      div.child1 {
-        flex: 1 0 24px;
-        background: lightgreen;
-        border-style: dotted;
-        border-left-width: 2px;
-        border-right-width: 4px;
-        writing-mode: vertical-rl;
-      }
-      div.child2 {
-        flex: 2 0 10px;
-        background: yellow;
-        border-style: dashed;
-        border-left-width: 7px;
-        border-right-width: 3px;
-        writing-mode: vertical-lr;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="flexbox borderA"
-         ><div class="child1"/><div class="child2"/></div>
-    <div class="flexbox borderA paddingA"
-         ><div class="child1"/><div class="child2"/></div>
-    <div class="flexbox borderA paddingB"
-         ><div class="child1"/><div class="child2"/></div>
-    <div class="flexbox borderB"
-         ><div class="child1"/><div class="child2"/></div>
-    <div class="flexbox borderB paddingA"
-         ><div class="child1"/><div class="child2"/></div>
-    <div class="flexbox borderB paddingB"
-         ><div class="child1"/><div class="child2"/></div>
-    <div class="flexbox paddingA"
-         ><div class="child1"/><div class="child2"/></div>
-    <div class="flexbox paddingB"
-         ><div class="child1"/><div class="child2"/></div>
-  </body>
-</html>
-
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
deleted file mode 100644
index e488416412..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reftest Reference</title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: block;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-  }
-
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-
-  .container > .hl, .container > .hr {
-    /* In the testcase, these items are stretched vertically
-       via the default "align-self:stretch" behavior, and because
-       they have a height of "auto".
-       (The rest of the items have a non-auto height from "inline-size"
-       and their vertical writing-mode, so those ones do not stretch.) */
-    height: 118px;
-  }
-
-  .container.hl > * { float: left; }
-  .container.hr > * { float: right; }
-
-  </style>
-</head>
-<body>
-
-<div class="container hl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container hl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-<div class="container hr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container hr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
deleted file mode 100644
index 55c50e850f..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>
-    CSS Test: Testing a mix of flex items with various values for
-    'writing-mode' / 'direction' in a horizontal row-oriented flex container.
-  </title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
-  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
-  <link rel="match" href="flexbox-writing-mode-010-ref.html">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-  }
-
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-  </style>
-</head>
-<body>
-
-<div class="container hl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container hl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-<div class="container hr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container hr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
deleted file mode 100644
index 8b926490b6..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reftest Reference</title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: block;
-    float: left;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 500px;
-    width: 150px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-
-    /* This really floats to top ('logical left'), since all the containers
-       have a vertical writing mode. */
-    float: left;
-  }
-
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-
-
-  .container > .vl,     .container > .vr,
-  .container > .vl_rtl, .container > .vr_rtl {
-    /* In the testcase, these items are stretched horizontally
-       via the default "align-self:stretch" behavior, and because
-       they have a width of "auto".
-       (The rest of the items have a non-auto width from "inline-size"
-       and their horizontal writing-mode, so those ones do not stretch.) */
-    width: 126px;
-  }
-  </style>
-</head>
-<body>
-
-<div class="container vl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-<div class="container vr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
deleted file mode 100644
index 6114e19275..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>
-    CSS Test: Testing a mix of flex items with various values for
-    'writing-mode' / 'direction' in a vertical row-oriented flex container.
-  </title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
-  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
-  <link rel="match" href="flexbox-writing-mode-011-ref.html">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    float: left;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 500px;
-    width: 150px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-  }
-
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-  </style>
-</head>
-<body>
-
-<div class="container vl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-<div class="container vr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
deleted file mode 100644
index c03358be42..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reftest Reference</title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: block;
-    float: left;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 500px;
-    width: 150px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-
-    /* This really floats to top ('logical left'), since all the containers
-       have a vertical writing mode. */
-    float: right;
-  }
-
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-
-
-  .container > .vl,     .container > .vr,
-  .container > .vl_rtl, .container > .vr_rtl {
-    /* In the testcase, these items are stretched horizontally
-       via the default "align-self:stretch" behavior, and because
-       they have a width of "auto".
-       (The rest of the items have a non-auto width from "inline-size"
-       and their horizontal writing-mode, so those ones do not stretch.) */
-    width: 126px;
-  }
-  </style>
-</head>
-<body>
-
-<div class="container vl_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vl_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-<div class="container vr_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vr_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
deleted file mode 100644
index a7b05f178d..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>
-    CSS Test: Testing a mix of flex items with various values for
-    'writing-mode' / 'direction' in a vertical row-oriented flex container
-    with 'direction' flipped.
-  </title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
-  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
-  <link rel="match" href="flexbox-writing-mode-012-ref.html">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    float: left;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 500px;
-    width: 150px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-  }
-
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-  </style>
-</head>
-<body>
-
-<div class="container vl_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vl_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-<div class="container vr_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vr_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
deleted file mode 100644
index 2a27003a5c..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reftest Reference</title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: block;
-    float: left;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 500px;
-    width: 150px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-  }
-
-  nocollapse {
-    /* special element to disable margin-collapsing */
-    display: block;
-    overflow: hidden;
-    height: 0;
-  }
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-
-  .container > .vl,     .container > .vr,
-  .container > .vl_rtl, .container > .vr_rtl {
-    /* In the testcase, these items are stretched horizontally
-       via the default "align-self:stretch" behavior, and because
-       they have a width of "auto".
-       (The rest of the items have a non-auto width from "inline-size"
-       and their horizontal writing-mode, so those ones do not stretch.) */
-    width: 126px;
-  }
-  </style>
-</head>
-<body>
-
-<div class="container hl">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
-</div>
-<div class="container hl">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
-</div>
-<div class="container hr">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
-</div>
-<div class="container hr">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
deleted file mode 100644
index a5d483c442..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>
-    CSS Test: Testing a mix of flex items with various values for
-    'writing-mode' / 'direction' in a horizontal column-oriented flex container.
-  </title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
-  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
-  <link rel="match" href="flexbox-writing-mode-013-ref.html">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    float: left;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 500px;
-    width: 150px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-  }
-
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-  </style>
-</head>
-<body>
-
-<div class="container hl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container hl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-<div class="container hr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container hr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
deleted file mode 100644
index 4e4f5904a1..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reftest Reference</title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: block;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-  }
-
-  nocollapse {
-    /* special element to disable margin-collapsing */
-    display: block;
-    overflow: hidden;
-    height: 0;
-  }
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-
-  .container > .hl, .container > .hr {
-    /* In the testcase, these items are stretched vertically
-       via the default "align-self:stretch" behavior, and because
-       they have a height of "auto".
-       (The rest of the items have a non-auto height from "inline-size"
-       and their vertical writing-mode, so those ones do not stretch.) */
-    height: 118px;
-  }
-  </style>
-</head>
-<body>
-
-<div class="container vl">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
-</div>
-<div class="container vl">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
-</div>
-<div class="container vr">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
-</div>
-<div class="container vr">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
deleted file mode 100644
index 1a5443279a..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>
-    CSS Test: Testing a mix of flex items with various values for
-    'writing-mode' / 'direction' in a vertical column-oriented flex container.
-  </title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
-  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
-  <link rel="match" href="flexbox-writing-mode-014-ref.html">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-  }
-
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-  </style>
-</head>
-<body>
-
-<div class="container vl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-<div class="container vr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
deleted file mode 100644
index a236ca11d5..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reftest Reference</title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: block;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-  }
-
-  nocollapse {
-    /* special element to disable margin-collapsing */
-    display: block;
-    overflow: hidden;
-    height: 0;
-  }
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-
-  .container > .hl, .container > .hr {
-    /* In the testcase, these items are stretched vertically
-       via the default "align-self:stretch" behavior, and because
-       they have a height of "auto".
-       (The rest of the items have a non-auto height from "inline-size"
-       and their vertical writing-mode, so those ones do not stretch.) */
-    height: 118px;
-  }
-  </style>
-</head>
-<body>
-
-<div class="container vl_rtl">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
-</div>
-<div class="container vl_rtl">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
-</div>
-<div class="container vr_rtl">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
-</div>
-<div class="container vr_rtl">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
deleted file mode 100644
index af1f9b8456..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>
-    CSS Test: Testing a mix of flex items with various values for
-    'writing-mode' / 'direction' in a vertical column-oriented flex container
-    with 'direction' flipped.
-  </title>
-  <meta charset="utf-8">
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
-  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
-  <link rel="match" href="flexbox-writing-mode-015-ref.html">
-  <link rel="stylesheet" type="text/css" href="support/ahem.css">
-  <style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    border: 2px solid purple;
-    padding: 2px;
-    margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
-  }
-
-  span {
-    display: block;
-    background: lightgrey;
-    border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
-    margin: 11px 13px 17px 7px;
-    inline-size: 6px;
-  }
-
-  .small { font: 12px Ahem; }
-  .big   { font: 20px Ahem; }
-
-  .hl  { writing-mode: horizontal-tb;  direction: ltr; }
-  .hr  { writing-mode: horizontal-tb;  direction: rtl; }
-  .vl  { writing-mode: vertical-lr;    direction: ltr; }
-  .vr  { writing-mode: vertical-rl;    direction: ltr; }
-  .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
-  .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
-  </style>
-</head>
-<body>
-
-<div class="container vl_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vl_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-<div class="container vr_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
-</div>
-<div class="container vr_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
-</div>
-
-</body>
-</html>