Backed out 12 changesets (bug 1269045, bug 1269046) as the most likely cause of Windows build bustage
authorPhil Ringnalda <philringnalda@gmail.com>
Thu, 27 Oct 2016 21:59:00 -0700
changeset 319967 7c24f445542062d41f97cba2dd8a45bd3a468b98
parent 319966 691c898f58a275dd965ad6bca4d93ea8f98c3996
child 319968 6abb6ebe96b7417191c39f28750947ef85f5f618
push id20749
push userryanvm@gmail.com
push dateSat, 29 Oct 2016 13:21:21 +0000
treeherderfx-team@1b170b39ed6b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1269045, 1269046
milestone52.0a1
backs out16db55b642a96801777755ab042dd20c74e1159f
a0008dd33cf4ef5a733c431c163dbd3793234a2f
75b58c4e61e6e51ca6d738b3a3d599476e4e9b89
fb7655f3e1cf3bf9635da9e434eb7da6cf6800f9
8088e5a9e6e322731d4a3008642b54a1fc0774b1
eea6479452f0be2d7ee98f6d537106f6fe8a0d50
eb4b52bf06ec8c1f5b33cfba7255a0d4bb64c168
539db74e4a889a6dc0605f91ff40ab7e748b996d
f57f9ac1435edc2d581c4645fa818ffd665d68f7
2162d5c9fb54f3e1b993add441287216534b0b9c
7aa8199183fca08ca7d9b309fa01580affb45da7
86a391e3e1638407465610b0dc5b5fc4694a0a08
Backed out 12 changesets (bug 1269045, bug 1269046) as the most likely cause of Windows build bustage CLOSED TREE Backed out changeset 16db55b642a9 (bug 1269046) Backed out changeset a0008dd33cf4 (bug 1269046) Backed out changeset 75b58c4e61e6 (bug 1269046) Backed out changeset fb7655f3e1cf (bug 1269046) Backed out changeset 8088e5a9e6e3 (bug 1269046) Backed out changeset eea6479452f0 (bug 1269046) Backed out changeset eb4b52bf06ec (bug 1269046) Backed out changeset 539db74e4a88 (bug 1269046) Backed out changeset f57f9ac1435e (bug 1269045) Backed out changeset 2162d5c9fb54 (bug 1269045) Backed out changeset 7aa8199183fc (bug 1269045) Backed out changeset 86a391e3e163 (bug 1269045) MozReview-Commit-ID: HYL7Bh8l02E
layout/base/nsCSSFrameConstructor.cpp
layout/base/nsCSSFrameConstructor.h
layout/generic/CSSAlignUtils.cpp
layout/generic/CSSAlignUtils.h
layout/generic/ReflowInput.cpp
layout/generic/ReflowInput.h
layout/generic/moz.build
layout/generic/nsAbsoluteContainingBlock.cpp
layout/generic/nsAbsoluteContainingBlock.h
layout/generic/nsContainerFrame.cpp
layout/generic/nsContainerFrame.h
layout/generic/nsFlexContainerFrame.cpp
layout/generic/nsFlexContainerFrame.h
layout/generic/nsFrameStateBits.h
layout/generic/nsGridContainerFrame.cpp
layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml
layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml
layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml
layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml
layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.html
layout/reftests/w3c-css/submitted/align3/reftest.list
layout/reftests/w3c-css/submitted/flexbox/reftest.list
layout/reftests/w3c-css/submitted/reftest.list
--- a/layout/base/nsCSSFrameConstructor.cpp
+++ b/layout/base/nsCSSFrameConstructor.cpp
@@ -9863,22 +9863,24 @@ nsCSSFrameConstructor::CreateNeededAnonF
   FrameConstructionItemList& aItems,
   nsIFrame* aParentFrame)
 {
   if (aItems.IsEmpty() ||
       !::IsFlexOrGridContainer(aParentFrame)) {
     return;
   }
 
+  nsIAtom* containerType = aParentFrame->GetType();
   const bool isWebkitBox = nsFlexContainerFrame::IsLegacyBox(aParentFrame);
 
   FCItemIterator iter(aItems);
   do {
     // Advance iter past children that don't want to be wrapped
-    if (iter.SkipItemsThatDontNeedAnonFlexOrGridItem(aState, isWebkitBox)) {
+    if (iter.SkipItemsThatDontNeedAnonFlexOrGridItem(aState, containerType,
+                                                     isWebkitBox)) {
       // Hit the end of the items without finding any remaining children that
       // need to be wrapped. We're finished!
       return;
     }
 
     // If our next potentially-wrappable child is whitespace, then see if
     // there's anything wrappable immediately after it. If not, we just drop
     // the whitespace and move on. (We're not supposed to create any anonymous
@@ -9891,48 +9893,52 @@ nsCSSFrameConstructor::CreateNeededAnonF
     // the CSS grid & flexbox specs. I'm not bothering with that at this point,
     // since it's a pretty extreme edge case.
     if (!aParentFrame->IsGeneratedContentFrame() &&
         iter.item().IsWhitespace(aState)) {
       FCItemIterator afterWhitespaceIter(iter);
       bool hitEnd = afterWhitespaceIter.SkipWhitespace(aState);
       bool nextChildNeedsAnonItem =
         !hitEnd &&
-        afterWhitespaceIter.item().NeedsAnonFlexOrGridItem(aState, isWebkitBox);
+        afterWhitespaceIter.item().NeedsAnonFlexOrGridItem(aState,
+                                                           containerType,
+                                                           isWebkitBox);
 
       if (!nextChildNeedsAnonItem) {
         // There's nothing after the whitespace that we need to wrap, so we
         // just drop this run of whitespace.
         iter.DeleteItemsTo(afterWhitespaceIter);
         if (hitEnd) {
           // Nothing left to do -- we're finished!
           return;
         }
         // else, we have a next child and it does not want to be wrapped.  So,
         // we jump back to the beginning of the loop to skip over that child
         // (and anything else non-wrappable after it)
         MOZ_ASSERT(!iter.IsDone() &&
-                   !iter.item().NeedsAnonFlexOrGridItem(aState, isWebkitBox),
+                   !iter.item().NeedsAnonFlexOrGridItem(aState, containerType,
+                                                        isWebkitBox),
                    "hitEnd and/or nextChildNeedsAnonItem lied");
         continue;
       }
     }
 
     // Now |iter| points to the first child that needs to be wrapped in an
     // anonymous flex/grid item. Now we see how many children after it also want
     // to be wrapped in an anonymous flex/grid item.
     FCItemIterator endIter(iter); // iterator to find the end of the group
-    endIter.SkipItemsThatNeedAnonFlexOrGridItem(aState, isWebkitBox);
+    endIter.SkipItemsThatNeedAnonFlexOrGridItem(aState, containerType,
+                                                isWebkitBox);
 
     NS_ASSERTION(iter != endIter,
                  "Should've had at least one wrappable child to seek past");
 
     // Now, we create the anonymous flex or grid item to contain the children
     // between |iter| and |endIter|.
-    nsIAtom* pseudoType = (aParentFrame->GetType() == nsGkAtoms::flexContainerFrame) ?
+    nsIAtom* pseudoType = containerType == nsGkAtoms::flexContainerFrame ?
       nsCSSAnonBoxes::anonymousFlexItem : nsCSSAnonBoxes::anonymousGridItem;
     nsStyleContext* parentStyle = aParentFrame->StyleContext();
     nsIContent* parentContent = aParentFrame->GetContent();
     already_AddRefed<nsStyleContext> wrapperStyle =
       mPresShell->StyleSet()->ResolveAnonymousBoxStyle(pseudoType, parentStyle);
 
     static const FrameConstructionData sBlockFormattingContextFCData =
       FCDATA_DECL(FCDATA_SKIP_FRAMESET | FCDATA_USE_CHILD_ITEMS,
@@ -10521,20 +10527,24 @@ void nsCSSFrameConstructor::CreateNeeded
   newItem->mChildItems.SetParentHasNoXBLChildren(true);
   iter.InsertItem(newItem);
 }
 
 #ifdef DEBUG
 static bool
 FrameWantsToBeInAnonymousItem(const nsIAtom* aParentType, const nsIFrame* aFrame)
 {
-  MOZ_ASSERT(aParentType == nsGkAtoms::flexContainerFrame ||
-             aParentType == nsGkAtoms::gridContainerFrame);
-
-  return aFrame->IsFrameOfType(nsIFrame::eLineParticipant);
+  // Note: This needs to match the logic in
+  // nsCSSFrameConstructor::FrameConstructionItem::NeedsAnonFlexOrGridItem()
+  if (aParentType == nsGkAtoms::gridContainerFrame) {
+    return aFrame->IsFrameOfType(nsIFrame::eLineParticipant);
+  }
+  MOZ_ASSERT(aParentType == nsGkAtoms::flexContainerFrame);
+  return aFrame->IsFrameOfType(nsIFrame::eLineParticipant) ||
+         aFrame->GetType() == nsGkAtoms::placeholderFrame;
 }
 #endif
 
 static void
 VerifyGridFlexContainerChildren(nsIFrame* aParentFrame,
                                 const nsFrameList& aChildren)
 {
 #ifdef DEBUG
@@ -12160,31 +12170,34 @@ nsCSSFrameConstructor::WipeContainingBlo
   // Situation #2 is a flex or grid container frame into which we're inserting
   // new inline non-replaced children, adjacent to an existing anonymous
   // flex or grid item.
   if (::IsFlexOrGridContainer(aFrame)) {
     FCItemIterator iter(aItems);
 
     // Check if we're adding to-be-wrapped content right *after* an existing
     // anonymous flex or grid item (which would need to absorb this content).
+    nsIAtom* containerType = aFrame->GetType();
     const bool isWebkitBox = nsFlexContainerFrame::IsLegacyBox(aFrame);
     if (aPrevSibling && IsAnonymousFlexOrGridItem(aPrevSibling) &&
-        iter.item().NeedsAnonFlexOrGridItem(aState, isWebkitBox)) {
+        iter.item().NeedsAnonFlexOrGridItem(aState, containerType,
+                                            isWebkitBox)) {
       RecreateFramesForContent(aFrame->GetContent(), true,
                                REMOVE_FOR_RECONSTRUCTION, nullptr);
       return true;
     }
 
     // Check if we're adding to-be-wrapped content right *before* an existing
     // anonymous flex or grid item (which would need to absorb this content).
     if (nextSibling && IsAnonymousFlexOrGridItem(nextSibling)) {
       // Jump to the last entry in the list
       iter.SetToEnd();
       iter.Prev();
-      if (iter.item().NeedsAnonFlexOrGridItem(aState, isWebkitBox)) {
+      if (iter.item().NeedsAnonFlexOrGridItem(aState, containerType,
+                                              isWebkitBox)) {
         RecreateFramesForContent(aFrame->GetContent(), true,
                                  REMOVE_FOR_RECONSTRUCTION, nullptr);
         return true;
       }
     }
   }
 
   // Situation #3 is an anonymous flex or grid item that's getting new children
@@ -12202,16 +12215,17 @@ nsCSSFrameConstructor::WipeContainingBlo
     aState.PushFloatContainingBlock(nullptr, floatSaveState);
 
     FCItemIterator iter(aItems);
     // Skip over things that _do_ need an anonymous flex item, because
     // they're perfectly happy to go here -- they won't cause a reframe.
     nsIFrame* containerFrame = aFrame->GetParent();
     const bool isWebkitBox = nsFlexContainerFrame::IsLegacyBox(containerFrame);
     if (!iter.SkipItemsThatNeedAnonFlexOrGridItem(aState,
+                                                  containerFrame->GetType(),
                                                   isWebkitBox)) {
       // We hit something that _doesn't_ need an anonymous flex item!
       // Rebuild the flex container to bust it out.
       RecreateFramesForContent(containerFrame->GetContent(), true,
                                REMOVE_FOR_RECONSTRUCTION, nullptr);
       return true;
     }
 
@@ -12660,56 +12674,72 @@ Iterator::SkipItemsNotWantingParentType(
 }
 
 // Note: we implement -webkit-box & -webkit-inline-box using
 // nsFlexContainerFrame, but we use different rules for what gets wrapped in an
 // anonymous flex item.
 bool
 nsCSSFrameConstructor::FrameConstructionItem::
   NeedsAnonFlexOrGridItem(const nsFrameConstructorState& aState,
+                          nsIAtom* aContainerType,
                           bool aIsWebkitBox)
 {
   if (mFCData->mBits & FCDATA_IS_LINE_PARTICIPANT) {
     // This will be an inline non-replaced box.
     return true;
   }
 
+  // Bug 874718: Flex containers still wrap placeholders; Grid containers don't.
+  if (aContainerType == nsGkAtoms::flexContainerFrame &&
+      !(mFCData->mBits & FCDATA_DISALLOW_OUT_OF_FLOW) &&
+      aState.GetGeometricParent(mStyleContext->StyleDisplay(), nullptr)) {
+    // We're abspos or fixedpos, which means we'll spawn a placeholder which
+    // we'll need to wrap in an anonymous flex item.  So, we just treat
+    // _this_ frame as if _it_ needs to be wrapped in an anonymous flex item,
+    // and then when we spawn the placeholder, it'll end up in the right spot.
+    return true;
+  }
+
   if (aIsWebkitBox &&
       mStyleContext->StyleDisplay()->IsInlineOutsideStyle()) {
     // In a -webkit-box, all inline-level content gets wrapped in an anon item.
     return true;
   }
 
   return false;
 }
 
 inline bool
 nsCSSFrameConstructor::FrameConstructionItemList::
 Iterator::SkipItemsThatNeedAnonFlexOrGridItem(
   const nsFrameConstructorState& aState,
+  nsIAtom* aContainerType,
   bool aIsWebkitBox)
 {
   NS_PRECONDITION(!IsDone(), "Shouldn't be done yet");
-  while (item().NeedsAnonFlexOrGridItem(aState, aIsWebkitBox)) {
+  while (item().NeedsAnonFlexOrGridItem(aState, aContainerType,
+                                        aIsWebkitBox)) {
     Next();
     if (IsDone()) {
       return true;
     }
   }
   return false;
 }
 
 inline bool
 nsCSSFrameConstructor::FrameConstructionItemList::
 Iterator::SkipItemsThatDontNeedAnonFlexOrGridItem(
   const nsFrameConstructorState& aState,
+  nsIAtom* aContainerType,
   bool aIsWebkitBox)
 {
   NS_PRECONDITION(!IsDone(), "Shouldn't be done yet");
-  while (!(item().NeedsAnonFlexOrGridItem(aState, aIsWebkitBox))) {
+  while (!(item().NeedsAnonFlexOrGridItem(aState, aContainerType,
+                                          aIsWebkitBox))) {
     Next();
     if (IsDone()) {
       return true;
     }
   }
   return false;
 }
 
--- a/layout/base/nsCSSFrameConstructor.h
+++ b/layout/base/nsCSSFrameConstructor.h
@@ -951,24 +951,24 @@ private:
       // one.  Return whether the iterator is done after doing that.  The
       // iterator must not be done when this is called.
       inline bool SkipItemsNotWantingParentType(ParentType aParentType);
 
       // Skip over non-replaced inline frames and positioned frames.
       // Return whether the iterator is done after doing that.
       // The iterator must not be done when this is called.
       inline bool SkipItemsThatNeedAnonFlexOrGridItem(
-        const nsFrameConstructorState& aState,
+        const nsFrameConstructorState& aState, nsIAtom* aContainerType,
         bool aIsWebkitBox);
 
       // Skip to the first frame that is a non-replaced inline or is
       // positioned.  Return whether the iterator is done after doing that.
       // The iterator must not be done when this is called.
       inline bool SkipItemsThatDontNeedAnonFlexOrGridItem(
-        const nsFrameConstructorState& aState,
+        const nsFrameConstructorState& aState, nsIAtom* aContainerType,
         bool aIsWebkitBox);
 
       // Skip over all items that do not want a ruby parent.  Return whether
       // the iterator is done after doing that.  The iterator must not be done
       // when this is called.
       inline bool SkipItemsNotWantingRubyParent();
 
       // Skip over whitespace.  Return whether the iterator is done after doing
@@ -1094,16 +1094,17 @@ private:
     }
 
     // Indicates whether (when in a flex or grid container) this item needs
     // to be wrapped in an anonymous block.  (Note that we implement
     // -webkit-box/-webkit-inline-box using our standard flexbox frame class,
     // but we use different rules for what gets wrapped. The aIsWebkitBox
     // parameter here tells us whether to use those different rules.)
     bool NeedsAnonFlexOrGridItem(const nsFrameConstructorState& aState,
+                                 nsIAtom* aContainerType,
                                  bool aIsWebkitBox);
 
     // Don't call this unless the frametree really depends on the answer!
     // Especially so for generated content, where we don't want to reframe
     // things.
     bool IsWhitespace(nsFrameConstructorState& aState) const;
 
     bool IsLineBoundary() const {
deleted file mode 100644
--- a/layout/generic/CSSAlignUtils.cpp
+++ /dev/null
@@ -1,151 +0,0 @@
-/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* Utility code for performing CSS Box Alignment */
-
-#include "CSSAlignUtils.h"
-
-namespace mozilla {
-
-static nscoord
-SpaceToFill(WritingMode aWM, const LogicalSize& aSize, nscoord aMargin,
-            LogicalAxis aAxis, nscoord aCBSize)
-{
-  nscoord size = aAxis == eLogicalAxisBlock ? aSize.BSize(aWM)
-                                            : aSize.ISize(aWM);
-  return aCBSize - (size + aMargin);
-}
-
-nscoord
-CSSAlignUtils::AlignJustifySelf(uint8_t aAlignment, bool aOverflowSafe,
-                                LogicalAxis aAxis, bool aSameSide,
-                                nscoord aBaselineAdjust, nscoord aCBSize,
-                                const ReflowInput& aRI,
-                                const LogicalSize& aChildSize)
-{
-  MOZ_ASSERT(aAlignment != NS_STYLE_ALIGN_AUTO,
-             "auto values should have resolved already");
-  MOZ_ASSERT(aAlignment != NS_STYLE_ALIGN_LEFT &&
-             aAlignment != NS_STYLE_ALIGN_RIGHT,
-             "caller should map that to the corresponding START/END");
-
-  // Map some alignment values to 'start' / 'end'.
-  switch (aAlignment) {
-    case NS_STYLE_ALIGN_SELF_START: // align/justify-self: self-start
-      aAlignment = MOZ_LIKELY(aSameSide) ? NS_STYLE_ALIGN_START
-                                         : NS_STYLE_ALIGN_END;
-      break;
-    case NS_STYLE_ALIGN_SELF_END: // align/justify-self: self-end
-      aAlignment = MOZ_LIKELY(aSameSide) ? NS_STYLE_ALIGN_END
-                                         : NS_STYLE_ALIGN_START;
-      break;
-    // flex-start/flex-end are the same as start/end, in most contexts.
-    // (They have special behavior in flex containers, so flex containers
-    // should map them to some other value before calling this method.)
-    case NS_STYLE_ALIGN_FLEX_START:
-      aAlignment = NS_STYLE_ALIGN_START;
-      break;
-    case NS_STYLE_ALIGN_FLEX_END:
-      aAlignment = NS_STYLE_ALIGN_END;
-      break;
-  }
-
-  // XXX try to condense this code a bit by adding the necessary convenience
-  // methods? (bug 1209710)
-
-  // Get the item's margin corresponding to the container's start/end side.
-  const LogicalMargin margin = aRI.ComputedLogicalMargin();
-  WritingMode wm = aRI.GetWritingMode();
-  nscoord marginStart, marginEnd;
-  if (aAxis == eLogicalAxisBlock) {
-    if (MOZ_LIKELY(aSameSide)) {
-      marginStart = margin.BStart(wm);
-      marginEnd = margin.BEnd(wm);
-    } else {
-      marginStart = margin.BEnd(wm);
-      marginEnd = margin.BStart(wm);
-    }
-  } else {
-    if (MOZ_LIKELY(aSameSide)) {
-      marginStart = margin.IStart(wm);
-      marginEnd = margin.IEnd(wm);
-    } else {
-      marginStart = margin.IEnd(wm);
-      marginEnd = margin.IStart(wm);
-    }
-  }
-
-  const auto& styleMargin = aRI.mStyleMargin->mMargin;
-  bool hasAutoMarginStart;
-  bool hasAutoMarginEnd;
-  if (aAxis == eLogicalAxisBlock) {
-    hasAutoMarginStart = styleMargin.GetBStartUnit(wm) == eStyleUnit_Auto;
-    hasAutoMarginEnd = styleMargin.GetBEndUnit(wm) == eStyleUnit_Auto;
-  } else {
-    hasAutoMarginStart = styleMargin.GetIStartUnit(wm) == eStyleUnit_Auto;
-    hasAutoMarginEnd = styleMargin.GetIEndUnit(wm) == eStyleUnit_Auto;
-  }
-
-  // https://drafts.csswg.org/css-align-3/#overflow-values
-  // This implements <overflow-position> = 'safe'.
-  // And auto-margins: https://drafts.csswg.org/css-grid/#auto-margins
-  if ((MOZ_UNLIKELY(aOverflowSafe) && aAlignment != NS_STYLE_ALIGN_START) ||
-      hasAutoMarginStart || hasAutoMarginEnd) {
-    nscoord space = SpaceToFill(wm, aChildSize, marginStart + marginEnd,
-                                aAxis, aCBSize);
-    // XXX we might want to include == 0 here as an optimization -
-    // I need to see what the baseline/last-baseline code looks like first.
-    if (space < 0) {
-      // "Overflowing elements ignore their auto margins and overflow
-      // in the end directions"
-      aAlignment = NS_STYLE_ALIGN_START;
-    } else if (hasAutoMarginEnd) {
-      aAlignment = hasAutoMarginStart ? NS_STYLE_ALIGN_CENTER
-                                      : (aSameSide ? NS_STYLE_ALIGN_START
-                                                   : NS_STYLE_ALIGN_END);
-    } else if (hasAutoMarginStart) {
-      aAlignment = aSameSide ? NS_STYLE_ALIGN_END : NS_STYLE_ALIGN_START;
-    }
-  }
-
-  // Determine the offset for the child frame (its border-box) which will
-  // achieve the requested alignment.
-  nscoord offset = 0;
-  switch (aAlignment) {
-    case NS_STYLE_ALIGN_BASELINE:
-    case NS_STYLE_ALIGN_LAST_BASELINE:
-      if (MOZ_LIKELY(aSameSide == (aAlignment == NS_STYLE_ALIGN_BASELINE))) {
-        offset = marginStart + aBaselineAdjust;
-      } else {
-        nscoord size = aAxis == eLogicalAxisBlock ? aChildSize.BSize(wm)
-                                                  : aChildSize.ISize(wm);
-        offset = aCBSize - (size + marginEnd) - aBaselineAdjust;
-      }
-      break;
-    case NS_STYLE_ALIGN_STRETCH:
-      MOZ_FALLTHROUGH; // ComputeSize() deals with it
-    case NS_STYLE_ALIGN_START:
-      offset = marginStart;
-      break;
-    case NS_STYLE_ALIGN_END: {
-      nscoord size = aAxis == eLogicalAxisBlock ? aChildSize.BSize(wm)
-                                                : aChildSize.ISize(wm);
-      offset = aCBSize - (size + marginEnd);
-      break;
-    }
-    case NS_STYLE_ALIGN_CENTER: {
-      nscoord size = aAxis == eLogicalAxisBlock ? aChildSize.BSize(wm)
-                                                : aChildSize.ISize(wm);
-      offset = (aCBSize - size + marginStart - marginEnd) / 2;
-      break;
-    }
-    default:
-      MOZ_ASSERT_UNREACHABLE("unknown align-/justify-self value");
-  }
-
-  return offset;
-}
-
-} // namespace mozilla
deleted file mode 100644
--- a/layout/generic/CSSAlignUtils.h
+++ /dev/null
@@ -1,47 +0,0 @@
-/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* Utility code for performing CSS Box Alignment */
-
-#ifndef mozilla_CSSAlignUtils_h
-#define mozilla_CSSAlignUtils_h
-
-#include "mozilla/WritingModes.h"
-
-namespace mozilla {
-
-class CSSAlignUtils {
-public:
-  /**
-   * This computes the aligned offset of a CSS-aligned child within its
-   * alignment container. The returned offset is distance between the
-   * logical "start" edge of the alignment container & the logical "start" edge
-   * of the aligned child (in terms of the alignment container's writing mode).
-   *
-   * @param aAlignment An enumerated value representing a keyword for
-   *                   "align-self" or "justify-self". The values
-   *                   NS_STYLE_ALIGN_{AUTO,LEFT,RIGHT} must *not* be
-   *                   passed here; this method expects the caller to have
-   *                   already resolved those to 'start', 'end', or 'stretch'.
-   * @param aOverflowSafe Indicates whether we have <overflow-position> = safe.
-   * @param aAxis The container's axis in which we're doing alignment.
-   * @param aSameSide Indicates whether the container's start side in aAxis is
-   *                  the same as the child's start side, in the child's
-   *                  parallel axis.
-   * @param aBaselineAdjust The amount to offset baseline-aligned children.
-   * @param aCBSize The size of the alignment container, in its aAxis.
-   * @param aRI A ReflowInput for the child.
-   * @param aChildSize The child's LogicalSize (in its own writing mode).
-   */
-  static nscoord AlignJustifySelf(uint8_t aAlignment, bool aOverflowSafe,
-                                  LogicalAxis aAxis, bool aSameSide,
-                                  nscoord aBaselineAdjust, nscoord aCBSize,
-                                  const ReflowInput& aRI,
-                                  const LogicalSize& aChildSize);
-};
-
-} // namespace mozilla
-
-#endif // mozilla_CSSAlignUtils_h
--- a/layout/generic/ReflowInput.cpp
+++ b/layout/generic/ReflowInput.cpp
@@ -1551,41 +1551,25 @@ ReflowInput::InitAbsoluteConstraints(nsP
   bool bEndIsAuto   = styleOffset.GetBEndUnit(cbwm) == eStyleUnit_Auto;
 
   // If both 'left' and 'right' are 'auto' or both 'top' and 'bottom' are
   // 'auto', then compute the hypothetical box position where the element would
   // have been if it had been in the flow
   nsHypotheticalPosition hypotheticalPos;
   if ((iStartIsAuto && iEndIsAuto) || (bStartIsAuto && bEndIsAuto)) {
     if (mFlags.mStaticPosIsCBOrigin) {
-      // XXXdholbert This whole clause should be removed in bug 1269017, where
-      // we'll be making abpsos grid children share our CSS Box Alignment code.
       hypotheticalPos.mWritingMode = cbwm;
       hypotheticalPos.mIStart = nscoord(0);
       hypotheticalPos.mBStart = nscoord(0);
     } else {
       nsIFrame* placeholderFrame =
         aPresContext->PresShell()->GetPlaceholderFrameFor(mFrame);
       NS_ASSERTION(placeholderFrame, "no placeholder frame");
       CalculateHypotheticalPosition(aPresContext, placeholderFrame, cbrs,
                                     hypotheticalPos, aFrameType);
-
-      if (placeholderFrame->HasAnyStateBits(
-            PLACEHOLDER_STATICPOS_NEEDS_CSSALIGN)) {
-        DebugOnly<nsIFrame*> placeholderParent = placeholderFrame->GetParent();
-        MOZ_ASSERT(placeholderParent, "shouldn't have unparented placeholders");
-        MOZ_ASSERT(placeholderParent->IsFlexOrGridContainer(),
-                   "This flag should only be set on grid/flex children");
-
-        // If the (as-yet unknown) static position will determine the inline
-        // and/or block offsets, set flags to note those offsets aren't valid
-        // until we can do CSS Box Alignment on the OOF frame.
-        mFlags.mIOffsetsNeedCSSAlign = (iStartIsAuto && iEndIsAuto);
-        mFlags.mBOffsetsNeedCSSAlign = (bStartIsAuto && bEndIsAuto);
-      }
     }
   }
 
   // Initialize the 'left' and 'right' computed offsets
   // XXX Handle new 'static-position' value...
 
   // Size of the containing block in its writing mode
   LogicalSize cbSize = aCBSize;
--- a/layout/generic/ReflowInput.h
+++ b/layout/generic/ReflowInput.h
@@ -213,34 +213,16 @@ public:
                                         // holder children? If the available
                                         // height of this frame didn't change,
                                         // but its in a paginated environment
                                         // (e.g. columns), it should always
                                         // reflow its placeholder children.
     uint32_t mShrinkWrap:1; // stores the COMPUTE_SIZE_SHRINK_WRAP ctor flag
     uint32_t mUseAutoBSize:1; // stores the COMPUTE_SIZE_USE_AUTO_BSIZE ctor flag
     uint32_t mStaticPosIsCBOrigin:1; // the STATIC_POS_IS_CB_ORIGIN ctor flag
-
-    // If set, the following two flags indicate that:
-    // (1) this frame is absolutely-positioned (or fixed-positioned).
-    // (2) this frame's static position depends on the CSS Box Alignment.
-    // (3) we do need to compute the static position, because the frame's
-    //     {Inline and/or Block} offsets actually depend on it.
-    // When these bits are set, the offset values (IStart/IEnd, BStart/BEnd)
-    // represent the "start" edge of the frame's CSS Box Alignment container
-    // area, in that axis -- and these offsets need to be further-resolved
-    // (with CSS Box Alignment) after we know the OOF frame's size.
-    // NOTE: The "I" and "B" (for "Inline" and "Block") refer the axes of the
-    // *containing block's writing-mode*, NOT mFrame's own writing-mode. This
-    // is purely for convenience, since that's the writing-mode we're dealing
-    // with when we set & react to these bits.
-    // XXXdholbert These new bits will probably make the "mStaticPosIsCBOrigin"
-    // bit obsolete -- consider removing it in bug 1269017.
-    uint32_t mIOffsetsNeedCSSAlign:1;
-    uint32_t mBOffsetsNeedCSSAlign:1;
   };
 
 #ifdef DEBUG
   // Reflow trace methods.  Defined in nsFrame.cpp so they have access
   // to the display-reflow infrastructure.
   static void* DisplayInitOffsetsEnter(
                                      nsIFrame* aFrame,
                                      SizeComputationInput* aState,
--- a/layout/generic/moz.build
+++ b/layout/generic/moz.build
@@ -104,34 +104,32 @@ EXPORTS += [
     'nsTextRunTransformations.h',
     'RubyUtils.h',
     'ScrollbarActivity.h',
     'ScrollSnap.h',
     'Visibility.h',
 ]
 
 EXPORTS.mozilla += [
-    'CSSAlignUtils.h',
     'ReflowInput.h',
     'ReflowOutput.h',
     'WritingModes.h',
 ]
 
 EXPORTS.mozilla.dom += [
     'Selection.h',
 ]
 
 EXPORTS.mozilla.layout += [
     'FrameChildList.h',
 ]
 
 UNIFIED_SOURCES += [
     'AsyncScrollBase.cpp',
     'BlockReflowInput.cpp',
-    'CSSAlignUtils.cpp',
     'DetailsFrame.cpp',
     'FrameChildList.cpp',
     'MathMLTextRunFactory.cpp',
     'nsAbsoluteContainingBlock.cpp',
     'nsBackdropFrame.cpp',
     'nsBlockFrame.cpp',
     'nsBlockReflowContext.cpp',
     'nsBRFrame.cpp',
--- a/layout/generic/nsAbsoluteContainingBlock.cpp
+++ b/layout/generic/nsAbsoluteContainingBlock.cpp
@@ -8,17 +8,16 @@
  * object that is a containing block for them
  */
 
 #include "nsAbsoluteContainingBlock.h"
 
 #include "nsContainerFrame.h"
 #include "nsGkAtoms.h"
 #include "nsIPresShell.h"
-#include "mozilla/CSSAlignUtils.h"
 #include "mozilla/ReflowInput.h"
 #include "nsPresContext.h"
 #include "nsCSSFrameConstructor.h"
 #include "nsGridContainerFrame.h"
 
 #include "mozilla/Sprintf.h"
 
 #ifdef DEBUG
@@ -328,242 +327,16 @@ nsAbsoluteContainingBlock::DoMarkFramesD
       kidFrame->AddStateBits(NS_FRAME_IS_DIRTY);
     } else if (FrameDependsOnContainer(kidFrame, true, true)) {
       // Add the weakest flags that will make sure we reflow this frame later
       kidFrame->AddStateBits(NS_FRAME_HAS_DIRTY_CHILDREN);
     }
   }
 }
 
-// Given an out-of-flow frame, this method returns the parent frame of
-// its placeholder frame, if that parent is a nsContainerFrame.
-static nsContainerFrame*
-GetPlaceholderContainer(nsPresContext* aPresContext,
-                        nsIFrame* aPositionedFrame)
-{
-  MOZ_ASSERT(aPositionedFrame, "need non-null frame");
-  MOZ_ASSERT(aPositionedFrame->HasAnyStateBits(NS_FRAME_OUT_OF_FLOW),
-             "expecting abspos frame");
-  MOZ_ASSERT(aPresContext && aPresContext == aPositionedFrame->PresContext(),
-             "need non-null pres context which matches our frame");
-
-  nsIFrame* placeholder =
-    aPresContext->PresShell()->GetPlaceholderFrameFor(aPositionedFrame);
-
-  if (!placeholder) {
-    return nullptr;
-  }
-  return do_QueryFrame(placeholder->GetParent());
-}
-
-/**
- * This function returns the offset of an abs/fixed-pos child's static
- * position, with respect to the "start" corner of its alignment container,
- * according to CSS Box Alignment.  This function only operates in a single
- * axis at a time -- callers can choose which axis via the |aAbsPosCBAxis|
- * parameter.
- *
- * @param aKidReflowInput The ReflowInput for the to-be-aligned abspos child.
- * @param aKidSizeInAbsPosCBWM The child frame's size (after it's been given
- *                             the opportunity to reflow), in terms of the
- *                             containing block's WritingMode.
- * @param aPlaceholderContainer The parent of the child frame's corresponding
- *                              placeholder frame, cast to a nsContainerFrame.
- *                              (This will help us choose which alignment enum
- *                              we should use for the child.)
- * @param aAbsPosCBWM The child frame's containing block's WritingMode.
- * @param aAbsPosCBAxis The axis (of the containing block) that we should
- *                      be doing this computation for.
- */
-static nscoord
-OffsetToAlignedStaticPos(const ReflowInput& aKidReflowInput,
-                         const LogicalSize& aKidSizeInAbsPosCBWM,
-                         nsContainerFrame* aPlaceholderContainer,
-                         WritingMode aAbsPosCBWM,
-                         LogicalAxis aAbsPosCBAxis)
-{
-  if (!aPlaceholderContainer) {
-    // (The placeholder container should be the thing that kicks this whole
-    // process off, by setting PLACEHOLDER_STATICPOS_NEEDS_CSSALIGN.  So it
-    // should exist... but bail gracefully if it doesn't.)
-    NS_ERROR("Missing placeholder-container when computing a "
-             "CSS Box Alignment static position");
-    return 0;
-  }
-
-  // (Most of this function is simply preparing args that we'll pass to
-  // AlignJustifySelf at the end.)
-
-  // NOTE: Our alignment container is aPlaceholderContainer's content-box
-  // (or an area within it, if aPlaceholderContainer is a grid). So, we'll
-  // perform most of our arithmetic/alignment in aPlaceholderContainer's
-  // WritingMode. For brevity, we use the abbreviation "pc" for "placeholder
-  // container" in variables below.
-  WritingMode pcWM = aPlaceholderContainer->GetWritingMode();
-
-  // Find what axis aAbsPosCBAxis corresponds to, in placeholder's parent's
-  // writing-mode.
-  LogicalAxis pcAxis = (pcWM.IsOrthogonalTo(aAbsPosCBWM)
-                        ? GetOrthogonalAxis(aAbsPosCBAxis)
-                        : aAbsPosCBAxis);
-
-  nsIAtom* parentType = aPlaceholderContainer->GetType();
-  LogicalSize alignAreaSize(pcWM);
-  if (parentType == nsGkAtoms::flexContainerFrame) {
-    alignAreaSize = aPlaceholderContainer->GetLogicalSize(pcWM);
-    LogicalMargin pcBorderPadding =
-      aPlaceholderContainer->GetLogicalUsedBorderAndPadding(pcWM);
-    alignAreaSize -= pcBorderPadding.Size(pcWM);
-  } else {
-    NS_ERROR("Unsupported container for abpsos CSS Box Alignment");
-    return 0; // (leave the child at the start of its alignment container)
-  }
-
-  nscoord alignAreaSizeInAxis = (pcAxis == eLogicalAxisInline)
-    ? alignAreaSize.ISize(pcWM)
-    : alignAreaSize.BSize(pcWM);
-  // XXXdholbert: Handle <overflow-position> in bug 1311892.  For now, behave
-  // as if "unsafe" was the specified value (which is basically equivalent to
-  // the default behavior, when no value is specified -- though the default
-  // behavior also has some [at-risk] extra nuance about scroll containers...)
-  const bool overflowSafe = false;
-
-  uint16_t alignConst =
-    aPlaceholderContainer->CSSAlignmentForAbsPosChild(aKidReflowInput, pcAxis);
-  // XXX strip off <overflow-position> bits until we implement it (bug 1311892)
-  alignConst &= ~NS_STYLE_ALIGN_FLAG_BITS;
-
-  // Find out if placeholder-container & the OOF child have the same start-sides
-  // in the placeholder-container's pcAxis.
-  WritingMode kidWM = aKidReflowInput.GetWritingMode();
-  bool sameSidePCAndKid = pcWM.ParallelAxisStartsOnSameSide(pcAxis, kidWM);
-
-  // (baselineAdjust is unused. CSSAlignmentForAbsPosChild() should've
-  // converted 'baseline'/'last-baseline' enums to their fallback values.)
-  const nscoord baselineAdjust = nscoord(0);
-
-  // AlignJustifySelf operates in the kid's writing mode, so we need to
-  // represent the child's size and the desired axis in that writing mode:
-  LogicalSize kidSizeInOwnWM = aKidSizeInAbsPosCBWM.ConvertTo(kidWM,
-                                                              aAbsPosCBWM);
-  LogicalAxis kidAxis = (kidWM.IsOrthogonalTo(aAbsPosCBWM)
-                         ? GetOrthogonalAxis(aAbsPosCBAxis)
-                         : aAbsPosCBAxis);
-
-  nscoord offset =
-    CSSAlignUtils::AlignJustifySelf(alignConst, overflowSafe,
-                                    kidAxis, sameSidePCAndKid, baselineAdjust,
-                                    alignAreaSizeInAxis, aKidReflowInput,
-                                    kidSizeInOwnWM);
-
-  // "offset" is in terms of the CSS Box Alignment container (i.e. it's in
-  // terms of pcWM). But our return value needs to in terms of the containing
-  // block's writing mode, which might have the opposite directionality in the
-  // given axis. In that case, we just need to negate "offset" when returning,
-  // to make it have the right effect as an offset for coordinates in the
-  // containing block's writing mode.
-  if (!pcWM.ParallelAxisStartsOnSameSide(pcAxis, aAbsPosCBWM)) {
-    return -offset;
-  }
-  return offset;
-}
-
-void
-nsAbsoluteContainingBlock::ResolveSizeDependentOffsets(
-  nsPresContext* aPresContext,
-  ReflowInput& aKidReflowInput,
-  const LogicalSize& aKidSize,
-  const LogicalMargin& aMargin,
-  LogicalMargin* aOffsets,
-  LogicalSize* aLogicalCBSize)
-{
-  WritingMode wm = aKidReflowInput.GetWritingMode();
-  WritingMode outerWM = aKidReflowInput.mParentReflowInput->GetWritingMode();
-  bool didResolveOffsets = false;
-
-  // Now that we know the child's size, we resolve any sentinel values in its
-  // IStart/BStart offset coordinates that depend on that size.
-  //  * NS_AUTOOFFSET indicates that the child's position in the given axis
-  // is determined by its end-wards offset property, combined with its size and
-  // available space. e.g.: "top: auto; height: auto; bottom: 50px"
-  //  * m{I,B}OffsetsResolvedAfterSize indicate that the child is using its
-  // static position in that axis, *and* its static position is determined by
-  // the axis-appropriate css-align property (which may require the child's
-  // size, e.g. to center it within the parent).
-  if ((NS_AUTOOFFSET == aOffsets->IStart(outerWM)) ||
-      (NS_AUTOOFFSET == aOffsets->BStart(outerWM)) ||
-      aKidReflowInput.mFlags.mIOffsetsNeedCSSAlign ||
-      aKidReflowInput.mFlags.mBOffsetsNeedCSSAlign) {
-    if (-1 == aLogicalCBSize->ISize(wm)) {
-      // Get the containing block width/height
-      const ReflowInput* parentRI = aKidReflowInput.mParentReflowInput;
-      *aLogicalCBSize =
-        aKidReflowInput.ComputeContainingBlockRectangle(aPresContext,
-                                                        parentRI);
-    }
-
-    const LogicalSize logicalCBSizeOuterWM = aLogicalCBSize->ConvertTo(outerWM,
-                                                                       wm);
-
-    // placeholderContainer is used in each of the m{I,B}OffsetsNeedCSSAlign
-    // clauses. We declare it at this scope so we can avoid having to look
-    // it up twice (and only look it up if it's needed).
-    nsContainerFrame* placeholderContainer = nullptr;
-
-    if (NS_AUTOOFFSET == aOffsets->IStart(outerWM)) {
-      NS_ASSERTION(NS_AUTOOFFSET != aOffsets->IEnd(outerWM),
-                   "Can't solve for both start and end");
-      aOffsets->IStart(outerWM) =
-        logicalCBSizeOuterWM.ISize(outerWM) -
-        aOffsets->IEnd(outerWM) - aMargin.IStartEnd(outerWM) -
-        aKidSize.ISize(outerWM);
-    } else if (aKidReflowInput.mFlags.mIOffsetsNeedCSSAlign) {
-      placeholderContainer = GetPlaceholderContainer(aPresContext,
-                                                     aKidReflowInput.mFrame);
-      nscoord offset = OffsetToAlignedStaticPos(aKidReflowInput, aKidSize,
-                                                placeholderContainer,
-                                                outerWM, eLogicalAxisInline);
-      // Shift IStart from its current position (at start corner of the
-      // alignment container) by the returned offset.  And set IEnd to the
-      // distance between the kid's end edge to containing block's end edge.
-      aOffsets->IStart(outerWM) += offset;
-      aOffsets->IEnd(outerWM) =
-        logicalCBSizeOuterWM.ISize(outerWM) -
-        (aOffsets->IStart(outerWM) + aKidSize.ISize(outerWM));
-    }
-
-    if (NS_AUTOOFFSET == aOffsets->BStart(outerWM)) {
-      aOffsets->BStart(outerWM) =
-        logicalCBSizeOuterWM.BSize(outerWM) -
-        aOffsets->BEnd(outerWM) - aMargin.BStartEnd(outerWM) -
-        aKidSize.BSize(outerWM);
-    } else if (aKidReflowInput.mFlags.mBOffsetsNeedCSSAlign) {
-      if (!placeholderContainer) {
-        placeholderContainer = GetPlaceholderContainer(aPresContext,
-                                                       aKidReflowInput.mFrame);
-      }
-      nscoord offset = OffsetToAlignedStaticPos(aKidReflowInput, aKidSize,
-                                                placeholderContainer,
-                                                outerWM, eLogicalAxisBlock);
-      // Shift BStart from its current position (at start corner of the
-      // alignment container) by the returned offset.  And set BEnd to the
-      // distance between the kid's end edge to containing block's end edge.
-      aOffsets->BStart(outerWM) += offset;
-      aOffsets->BEnd(outerWM) =
-        logicalCBSizeOuterWM.BSize(outerWM) -
-        (aOffsets->BStart(outerWM) + aKidSize.BSize(outerWM));
-    }
-    didResolveOffsets = true;
-  }
-
-  if (didResolveOffsets) {
-    aKidReflowInput.SetComputedLogicalOffsets(aOffsets->ConvertTo(wm, outerWM));
-  }
-}
-
 // XXX Optimize the case where it's a resize reflow and the absolutely
 // positioned child has the exact same size and position and skip the
 // reflow...
 
 // When bug 154892 is checked in, make sure that when 
 // mChildListID == kFixedList, the height is unconstrained.
 // since we don't allow replicated frames to split.
 
@@ -656,18 +429,41 @@ nsAbsoluteContainingBlock::ReflowAbsolut
 
   const LogicalSize kidSize = kidDesiredSize.Size(wm).ConvertTo(outerWM, wm);
 
   LogicalMargin offsets =
     kidReflowInput.ComputedLogicalOffsets().ConvertTo(outerWM, wm);
 
   // If we're solving for start in either inline or block direction,
   // then compute it now that we know the dimensions.
-  ResolveSizeDependentOffsets(aPresContext, kidReflowInput, kidSize, margin,
-                              &offsets, &logicalCBSize);
+  if ((NS_AUTOOFFSET == offsets.IStart(outerWM)) ||
+      (NS_AUTOOFFSET == offsets.BStart(outerWM))) {
+    if (-1 == logicalCBSize.ISize(wm)) {
+      // Get the containing block width/height
+      logicalCBSize =
+        kidReflowInput.ComputeContainingBlockRectangle(aPresContext,
+                                                       &aReflowInput);
+    }
+
+    if (NS_AUTOOFFSET == offsets.IStart(outerWM)) {
+      NS_ASSERTION(NS_AUTOOFFSET != offsets.IEnd(outerWM),
+                   "Can't solve for both start and end");
+      offsets.IStart(outerWM) =
+        logicalCBSize.ConvertTo(outerWM, wm).ISize(outerWM) -
+        offsets.IEnd(outerWM) - margin.IStartEnd(outerWM) -
+        kidSize.ISize(outerWM);
+    }
+    if (NS_AUTOOFFSET == offsets.BStart(outerWM)) {
+      offsets.BStart(outerWM) =
+        logicalCBSize.ConvertTo(outerWM, wm).BSize(outerWM) -
+        offsets.BEnd(outerWM) - margin.BStartEnd(outerWM) -
+        kidSize.BSize(outerWM);
+    }
+    kidReflowInput.SetComputedLogicalOffsets(offsets.ConvertTo(wm, outerWM));
+  }
 
   // Position the child relative to our padding edge
   LogicalRect rect(outerWM,
                    border.IStart(outerWM) + offsets.IStart(outerWM) +
                      margin.IStart(outerWM),
                    border.BStart(outerWM) + offsets.BStart(outerWM) +
                      margin.BStart(outerWM),
                    kidSize.ISize(outerWM), kidSize.BSize(outerWM));
--- a/layout/generic/nsAbsoluteContainingBlock.h
+++ b/layout/generic/nsAbsoluteContainingBlock.h
@@ -122,32 +122,16 @@ protected:
   /**
    * Returns true if the position of aFrame depends on the position of
    * its placeholder or if the position or size of aFrame depends on a
    * containing block dimension that changed.
    */
   bool FrameDependsOnContainer(nsIFrame* aFrame, bool aCBWidthChanged,
                                bool aCBHeightChanged);
 
-  /**
-   * After an abspos child's size is known, this method can be used to
-   * resolve size-dependent values in the ComputedLogicalOffsets on its
-   * reflow state. (This may involve resolving the inline dimension of
-   * aLogicalCBSize, too; hence, that variable is an in/outparam.)
-   *
-   * aKidSize, aMargin, aOffsets, and aLogicalCBSize are all expected to be
-   * represented in terms of the absolute containing block's writing-mode.
-   */
-  void ResolveSizeDependentOffsets(nsPresContext* aPresContext,
-                                   ReflowInput& aKidReflowInput,
-                                   const mozilla::LogicalSize& aKidSize,
-                                   const mozilla::LogicalMargin& aMargin,
-                                   mozilla::LogicalMargin* aOffsets,
-                                   mozilla::LogicalSize* aLogicalCBSize);
-
   void ReflowAbsoluteFrame(nsIFrame*                aDelegatingFrame,
                            nsPresContext*           aPresContext,
                            const ReflowInput& aReflowInput,
                            const nsRect&            aContainingBlockRect,
                            AbsPosReflowFlags        aFlags,
                            nsIFrame*                aKidFrame,
                            nsReflowStatus&          aStatus,
                            nsOverflowAreas*         aOverflowAreas);
--- a/layout/generic/nsContainerFrame.cpp
+++ b/layout/generic/nsContainerFrame.cpp
@@ -1976,30 +1976,16 @@ nsContainerFrame::RenumberChildFrames(in
   // bit not be set yet.
   if (renumbered && aDepth != 0) {
     AddStateBits(NS_FRAME_HAS_DIRTY_CHILDREN);
   }
 
   return renumbered;
 }
 
-uint16_t
-nsContainerFrame::CSSAlignmentForAbsPosChild(const ReflowInput& aChildRI,
-                                             LogicalAxis aLogicalAxis) const
-{
-  MOZ_ASSERT(aChildRI.mFrame->IsAbsolutelyPositioned(),
-             "This method should only be called for abspos children");
-  NS_ERROR("Child classes that use css box alignment for abspos children "
-           "should provide their own implementation of this method!");
-
-  // In the unexpected/unlikely event that this implementation gets invoked,
-  // just use "start" alignment.
-  return NS_STYLE_ALIGN_START;
-}
-
 nsresult
 nsContainerFrame::AttributeChanged(int32_t         aNameSpaceID,
                                    nsIAtom*        aAttribute,
                                    int32_t         aModType)
 {
   nsresult rv = nsSplittableFrame::AttributeChanged(aNameSpaceID,
                                                     aAttribute, aModType);
   if (NS_FAILED(rv)) {
--- a/layout/generic/nsContainerFrame.h
+++ b/layout/generic/nsContainerFrame.h
@@ -505,40 +505,16 @@ public:
    * Renumber the child frames using RenumberFrameAndDescendants.
    * See RenumberFrameAndDescendants for description of parameters.
    */
   virtual bool RenumberChildFrames(int32_t* aOrdinal,
                                    int32_t aDepth,
                                    int32_t aIncrement,
                                    bool aForCounting);
 
-  /**
-   * Returns a CSS Box Alignment constant which the caller can use to align
-   * the absolutely-positioned child (whose ReflowInput is aChildRI) within
-   * a CSS Box Alignment area associated with this container.
-   *
-   * The lower 8 bits of the returned value are guaranteed to form a valid
-   * argument for CSSAlignUtils::AlignJustifySelf(). (The upper 8 bits may
-   * encode an <overflow-position>.)
-   *
-   * NOTE: This default nsContainerFrame implementation is a stub, and isn't
-   * meant to be called.  Subclasses must provide their own implementations, if
-   * they use CSS Box Alignment to determine the static position of their
-   * absolutely-positioned children. (Though: if subclasses share enough code,
-   * maybe this nsContainerFrame impl should include some shared code.)
-   *
-   * @param aChildRI A ReflowInput for the positioned child frame that's being
-   *                 aligned.
-   * @param aLogicalAxis The axis (of this container frame) in which the caller
-   *                     would like to align the child frame.
-   */
-  virtual uint16_t CSSAlignmentForAbsPosChild(
-                     const ReflowInput& aChildRI,
-                     mozilla::LogicalAxis aLogicalAxis) const;
-
 #define NS_DECLARE_FRAME_PROPERTY_FRAMELIST(prop) \
   NS_DECLARE_FRAME_PROPERTY_WITH_DTOR_NEVER_CALLED(prop, nsFrameList)
 
   typedef PropertyDescriptor<nsFrameList> FrameListPropertyDescriptor;
 
   NS_DECLARE_FRAME_PROPERTY_FRAMELIST(OverflowProperty)
   NS_DECLARE_FRAME_PROPERTY_FRAMELIST(OverflowContainersProperty)
   NS_DECLARE_FRAME_PROPERTY_FRAMELIST(ExcessOverflowContainersProperty)
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -231,34 +231,21 @@ PhysicalCoordFromFlexRelativeCoord(nscoo
 #define GET_MAIN_COMPONENT_LOGICAL(axisTracker_, wm_, isize_, bsize_)  \
   wm_.IsOrthogonalTo(axisTracker_.GetWritingMode()) != \
     (axisTracker_).IsRowOriented() ? (isize_) : (bsize_)
 
 #define GET_CROSS_COMPONENT_LOGICAL(axisTracker_, wm_, isize_, bsize_)  \
   wm_.IsOrthogonalTo(axisTracker_.GetWritingMode()) != \
     (axisTracker_).IsRowOriented() ? (bsize_) : (isize_)
 
-// Flags to customize behavior of the FlexboxAxisTracker constructor:
-enum AxisTrackerFlags {
-  eNoFlags = 0x0,
-
-  // Normally, FlexboxAxisTracker may attempt to reverse axes & iteration order
-  // to avoid bottom-to-top child ordering, for saner pagination. This flag
-  // suppresses that behavior (so that we allow bottom-to-top child ordering).
-  // (This may be helpful e.g. when we're only dealing with a single child.)
-  eAllowBottomToTopChildOrdering = 0x1
-};
-MOZ_MAKE_ENUM_CLASS_BITWISE_OPERATORS(AxisTrackerFlags)
-
 // Encapsulates our flex container's main & cross axes.
 class MOZ_STACK_CLASS nsFlexContainerFrame::FlexboxAxisTracker {
 public:
   FlexboxAxisTracker(const nsFlexContainerFrame* aFlexContainer,
-                     const WritingMode& aWM,
-                     AxisTrackerFlags aFlags = eNoFlags);
+                     const WritingMode& aWM);
 
   // Accessors:
   // XXXdholbert [BEGIN DEPRECATED]
   AxisOrientationType GetMainAxis() const  { return mMainAxis;  }
   AxisOrientationType GetCrossAxis() const { return mCrossAxis; }
 
   bool IsMainAxisHorizontal() const {
     // If we're row-oriented, and our writing mode is NOT vertical,
@@ -1089,38 +1076,36 @@ GetFirstNonAnonBoxDescendant(nsIFrame* a
 bool
 IsOrderLEQWithDOMFallback(nsIFrame* aFrame1,
                           nsIFrame* aFrame2)
 {
   MOZ_ASSERT(aFrame1->IsFlexItem() && aFrame2->IsFlexItem(),
              "this method only intended for comparing flex items");
   MOZ_ASSERT(aFrame1->GetParent() == aFrame2->GetParent(),
              "this method only intended for comparing siblings");
+  bool isInLegacyBox = nsFlexContainerFrame::IsLegacyBox(aFrame1->GetParent());
+
   if (aFrame1 == aFrame2) {
     // Anything is trivially LEQ itself, so we return "true" here... but it's
     // probably bad if we end up actually needing this, so let's assert.
     NS_ERROR("Why are we checking if a frame is LEQ itself?");
     return true;
   }
 
-  if (aFrame1->GetType() == nsGkAtoms::placeholderFrame ||
-      aFrame2->GetType() == nsGkAtoms::placeholderFrame) {
-    // Treat placeholders (for abspos/fixedpos frames) as LEQ everything.  This
-    // ensures we don't reorder them w.r.t. one another, which is sufficient to
-    // prevent them from noticeably participating in "order" reordering.
-    return true;
-  }
-
-  bool isInLegacyBox = nsFlexContainerFrame::IsLegacyBox(aFrame1->GetParent());
-
-  int32_t order1 = GetOrderOrBoxOrdinalGroup(aFrame1, isInLegacyBox);
-  int32_t order2 = GetOrderOrBoxOrdinalGroup(aFrame2, isInLegacyBox);
-
-  if (order1 != order2) {
-    return order1 < order2;
+  // If we've got a placeholder frame, use its out-of-flow frame's 'order' val.
+  {
+    nsIFrame* aRealFrame1 = nsPlaceholderFrame::GetRealFrameFor(aFrame1);
+    nsIFrame* aRealFrame2 = nsPlaceholderFrame::GetRealFrameFor(aFrame2);
+
+    int32_t order1 = GetOrderOrBoxOrdinalGroup(aRealFrame1, isInLegacyBox);
+    int32_t order2 = GetOrderOrBoxOrdinalGroup(aRealFrame2, isInLegacyBox);
+
+    if (order1 != order2) {
+      return order1 < order2;
+    }
   }
 
   // The "order" values are equal, so we need to fall back on DOM comparison.
   // For that, we need to dig through any anonymous box wrapper frames to find
   // the actual frame that corresponds to our child content.
   aFrame1 = GetFirstNonAnonBoxDescendant(aFrame1);
   aFrame2 = GetFirstNonAnonBoxDescendant(aFrame2);
   MOZ_ASSERT(aFrame1 && aFrame2,
@@ -1129,18 +1114,20 @@ IsOrderLEQWithDOMFallback(nsIFrame* aFra
 
 
   // Special case:
   // If either frame is for generated content from ::before or ::after, then
   // we can't use nsContentUtils::PositionIsBefore(), since that method won't
   // recognize generated content as being an actual sibling of other nodes.
   // We know where ::before and ::after nodes *effectively* insert in the DOM
   // tree, though (at the beginning & end), so we can just special-case them.
-  nsIAtom* pseudo1 = aFrame1->StyleContext()->GetPseudo();
-  nsIAtom* pseudo2 = aFrame2->StyleContext()->GetPseudo();
+  nsIAtom* pseudo1 =
+    nsPlaceholderFrame::GetRealFrameFor(aFrame1)->StyleContext()->GetPseudo();
+  nsIAtom* pseudo2 =
+    nsPlaceholderFrame::GetRealFrameFor(aFrame2)->StyleContext()->GetPseudo();
 
   if (pseudo1 == nsCSSPseudoElements::before ||
       pseudo2 == nsCSSPseudoElements::after) {
     // frame1 is ::before and/or frame2 is ::after => frame1 is LEQ frame2.
     return true;
   }
   if (pseudo1 == nsCSSPseudoElements::after ||
       pseudo2 == nsCSSPseudoElements::before) {
@@ -1173,160 +1160,28 @@ IsOrderLEQWithDOMFallback(nsIFrame* aFra
 bool
 IsOrderLEQ(nsIFrame* aFrame1,
            nsIFrame* aFrame2)
 {
   MOZ_ASSERT(aFrame1->IsFlexItem() && aFrame2->IsFlexItem(),
              "this method only intended for comparing flex items");
   MOZ_ASSERT(aFrame1->GetParent() == aFrame2->GetParent(),
              "this method only intended for comparing siblings");
-
-  if (aFrame1->GetType() == nsGkAtoms::placeholderFrame ||
-      aFrame2->GetType() == nsGkAtoms::placeholderFrame) {
-    // Treat placeholders (for abspos/fixedpos frames) as LEQ everything.  This
-    // ensures we don't reorder them w.r.t. one another, which is sufficient to
-    // prevent them from noticeably participating in "order" reordering.
-    return true;
-  }
-
   bool isInLegacyBox = nsFlexContainerFrame::IsLegacyBox(aFrame1->GetParent());
 
-  int32_t order1 = GetOrderOrBoxOrdinalGroup(aFrame1, isInLegacyBox);
-  int32_t order2 = GetOrderOrBoxOrdinalGroup(aFrame2, isInLegacyBox);
+  // If we've got a placeholder frame, use its out-of-flow frame's 'order' val.
+  nsIFrame* aRealFrame1 = nsPlaceholderFrame::GetRealFrameFor(aFrame1);
+  nsIFrame* aRealFrame2 = nsPlaceholderFrame::GetRealFrameFor(aFrame2);
+
+  int32_t order1 = GetOrderOrBoxOrdinalGroup(aRealFrame1, isInLegacyBox);
+  int32_t order2 = GetOrderOrBoxOrdinalGroup(aRealFrame2, isInLegacyBox);
 
   return order1 <= order2;
 }
 
-uint8_t
-SimplifyAlignOrJustifyContentForOneItem(uint16_t aAlignmentVal,
-                                        bool aIsAlign)
-{
-  // Mask away any explicit fallback, to get the main (non-fallback) part of
-  // the specified value:
-  uint16_t specified = aAlignmentVal & NS_STYLE_ALIGN_ALL_BITS;
-
-  // XXX strip off <overflow-position> bits until we implement it (bug 1311892)
-  specified &= ~NS_STYLE_ALIGN_FLAG_BITS;
-
-  // FIRST: handle a special-case for "justify-content:stretch" (or equivalent),
-  // which requires that we ignore any author-provided explicit fallback value.
-  if (specified == NS_STYLE_ALIGN_NORMAL) {
-    // In a flex container, *-content: "'normal' behaves as 'stretch'".
-    // Do that conversion early, so it benefits from our 'stretch' special-case.
-    // https://drafts.csswg.org/css-align-3/#distribution-flex
-    specified = NS_STYLE_ALIGN_STRETCH;
-  }
-  if (!aIsAlign && specified == NS_STYLE_ALIGN_STRETCH) {
-    // In a flex container, in "justify-content Axis: [...] 'stretch' behaves
-    // as 'flex-start' (ignoring the specified fallback alignment, if any)."
-    // https://drafts.csswg.org/css-align-3/#distribution-flex
-    // So, we just directly return 'flex-start', & ignore explicit fallback..
-    return NS_STYLE_ALIGN_FLEX_START;
-  }
-
-  // Now check for an explicit fallback value (and if it's present, use it).
-  uint16_t explicitFallback = aAlignmentVal >> NS_STYLE_ALIGN_ALL_SHIFT;
-  if (explicitFallback) {
-    // XXX strip off <overflow-position> bits until we implement it
-    // (bug 1311892)
-    explicitFallback &= ~NS_STYLE_ALIGN_FLAG_BITS;
-    return explicitFallback;
-  }
-
-  // There's no explicit fallback. Use the implied fallback values for
-  // space-{between,around,evenly} (since those values only make sense with
-  // multiple alignment subjects), and otherwise just use the specified value:
-  switch (specified) {
-    case NS_STYLE_ALIGN_SPACE_BETWEEN:
-      return NS_STYLE_ALIGN_START;
-    case NS_STYLE_ALIGN_SPACE_AROUND:
-    case NS_STYLE_ALIGN_SPACE_EVENLY:
-      return NS_STYLE_ALIGN_CENTER;
-    default:
-      return specified;
-  }
-}
-
-uint16_t
-nsFlexContainerFrame::CSSAlignmentForAbsPosChild(
-  const ReflowInput& aChildRI,
-  LogicalAxis aLogicalAxis) const
-{
-  WritingMode wm = GetWritingMode();
-  const FlexboxAxisTracker
-    axisTracker(this, wm, AxisTrackerFlags::eAllowBottomToTopChildOrdering);
-
-  // If we're row-oriented and the caller is asking about our inline axis (or
-  // alternately, if we're column-oriented and the caller is asking about our
-  // block axis), then the caller is really asking about our *main* axis.
-  // Otherwise, the caller is asking about our cross axis.
-  const bool isMainAxis = (axisTracker.IsRowOriented() ==
-                           (aLogicalAxis == eLogicalAxisInline));
-  const nsStylePosition* containerStylePos = StylePosition();
-  const bool isAxisReversed = isMainAxis ? axisTracker.IsMainAxisReversed()
-                                         : axisTracker.IsCrossAxisReversed();
-
-  uint8_t alignment;
-  if (isMainAxis) {
-    alignment = SimplifyAlignOrJustifyContentForOneItem(
-                  containerStylePos->mJustifyContent,
-                  /*aIsAlign = */false);
-  } else {
-    const uint8_t alignContent = SimplifyAlignOrJustifyContentForOneItem(
-                                   containerStylePos->mAlignContent,
-                                   /*aIsAlign = */true);
-    if (NS_STYLE_FLEX_WRAP_NOWRAP != containerStylePos->mFlexWrap &&
-        alignContent != NS_STYLE_ALIGN_STRETCH) {
-      // Multi-line, align-content isn't stretch --> align-content determines
-      // this child's alignment in the cross axis.
-      alignment = alignContent;
-    } else {
-      // Single-line, or multi-line but the (one) line stretches to fill
-      // container. Respect align-self.
-      alignment = aChildRI.mStylePosition->UsedAlignSelf(nullptr);
-      // XXX strip off <overflow-position> bits until we implement it
-      // (bug 1311892)
-      alignment &= ~NS_STYLE_ALIGN_FLAG_BITS;
-
-      if (alignment == NS_STYLE_ALIGN_NORMAL) {
-        // "the 'normal' keyword behaves as 'start' on replaced
-        // absolutely-positioned boxes, and behaves as 'stretch' on all other
-        // absolutely-positioned boxes."
-        // https://drafts.csswg.org/css-align/#align-abspos
-        alignment = aChildRI.mFrame->IsFrameOfType(nsIFrame::eReplaced) ?
-          NS_STYLE_ALIGN_START : NS_STYLE_ALIGN_STRETCH;
-      }
-    }
-  }
-
-  // Resolve flex-start, flex-end, auto, left, right, baseline, last-baseline;
-  if (alignment == NS_STYLE_ALIGN_FLEX_START) {
-    alignment = isAxisReversed ? NS_STYLE_ALIGN_END : NS_STYLE_ALIGN_START;
-  } else if (alignment == NS_STYLE_ALIGN_FLEX_END) {
-    alignment = isAxisReversed ? NS_STYLE_ALIGN_START : NS_STYLE_ALIGN_END;
-  } else if (alignment == NS_STYLE_ALIGN_AUTO) {
-    alignment = NS_STYLE_ALIGN_START;
-  } else if (alignment == NS_STYLE_ALIGN_LEFT ||
-             alignment == NS_STYLE_ALIGN_RIGHT) {
-    if (aLogicalAxis == eLogicalAxisInline) {
-      const bool isLeft = (alignment == NS_STYLE_ALIGN_LEFT);
-      alignment = (isLeft == wm.IsBidiLTR()) ? NS_STYLE_ALIGN_START
-                                             : NS_STYLE_ALIGN_END;
-    } else {
-      alignment = NS_STYLE_ALIGN_START;
-    }
-  } else if (alignment == NS_STYLE_ALIGN_BASELINE) {
-    alignment = NS_STYLE_ALIGN_START;
-  } else if (alignment == NS_STYLE_ALIGN_LAST_BASELINE) {
-    alignment = NS_STYLE_ALIGN_END;
-  }
-
-  return alignment;
-}
-
 bool
 nsFlexContainerFrame::IsHorizontal()
 {
   const FlexboxAxisTracker axisTracker(this, GetWritingMode());
   return axisTracker.IsMainAxisHorizontal();
 }
 
 UniquePtr<FlexItem>
@@ -3375,37 +3230,33 @@ BlockDirToAxisOrientation(WritingMode::B
   }
 
   MOZ_ASSERT_UNREACHABLE("Unhandled BlockDir");
   return eAxis_TB; // in case of unforseen error, assume English TTB block-flow
 }
 
 FlexboxAxisTracker::FlexboxAxisTracker(
   const nsFlexContainerFrame* aFlexContainer,
-  const WritingMode& aWM,
-  AxisTrackerFlags aFlags)
+  const WritingMode& aWM)
   : mWM(aWM),
     mAreAxesInternallyReversed(false)
 {
   if (IsLegacyBox(aFlexContainer)) {
     InitAxesFromLegacyProps(aFlexContainer);
   } else {
     InitAxesFromModernProps(aFlexContainer);
   }
 
   // Master switch to enable/disable bug 983427's code for reversing our axes
   // and reversing some logic, to avoid reflowing children in bottom-to-top
   // order. (This switch can be removed eventually, but for now, it allows
   // this special-case code path to be compared against the normal code path.)
   static bool sPreventBottomToTopChildOrdering = true;
 
-  // Note: if the eAllowBottomToTopChildOrdering flag is set, that overrides
-  // the static boolean and makes us skip this special case.
-  if (!(aFlags & AxisTrackerFlags::eAllowBottomToTopChildOrdering) &&
-      sPreventBottomToTopChildOrdering) {
+  if (sPreventBottomToTopChildOrdering) {
     // If either axis is bottom-to-top, we flip both axes (and set a flag
     // so that we can flip some logic to make the reversal transparent).
     if (eAxis_BT == mMainAxis || eAxis_BT == mCrossAxis) {
       mMainAxis = GetReverseAxis(mMainAxis);
       mCrossAxis = GetReverseAxis(mCrossAxis);
       mAreAxesInternallyReversed = true;
       mIsMainAxisReversed = !mIsMainAxisReversed;
       mIsCrossAxisReversed = !mIsCrossAxisReversed;
@@ -3540,18 +3391,17 @@ AddNewFlexLineToList(LinkedList<FlexLine
 void
 nsFlexContainerFrame::GenerateFlexLines(
   nsPresContext* aPresContext,
   const ReflowInput& aReflowInput,
   nscoord aContentBoxMainSize,
   nscoord aAvailableBSizeForContent,
   const nsTArray<StrutInfo>& aStruts,
   const FlexboxAxisTracker& aAxisTracker,
-  nsTArray<nsIFrame*>& aPlaceholders, /* out */
-  LinkedList<FlexLine>& aLines /* out */)
+  LinkedList<FlexLine>& aLines)
 {
   MOZ_ASSERT(aLines.isEmpty(), "Expecting outparam to start out empty");
 
   const bool isSingleLine =
     NS_STYLE_FLEX_WRAP_NOWRAP == aReflowInput.mStylePosition->mFlexWrap;
 
   // If we're transparently reversing axes, then we'll need to link up our
   // FlexItems and FlexLines in the reverse order, so that the rest of flex
@@ -3598,22 +3448,16 @@ nsFlexContainerFrame::GenerateFlexLines(
   // aStruts.Length(), that means there are no more struts):
   uint32_t nextStrutIdx = 0;
 
   // Overall index of the current flex item in the flex container. (This gets
   // checked against entries in aStruts.)
   uint32_t itemIdxInContainer = 0;
 
   for (nsIFrame* childFrame : mFrames) {
-    // Don't create flex items / lines for placeholder frames:
-    if (childFrame->GetType() == nsGkAtoms::placeholderFrame) {
-      aPlaceholders.AppendElement(childFrame);
-      continue;
-    }
-
     // Honor "page-break-before", if we're multi-line and this line isn't empty:
     if (!isSingleLine && !curLine->IsEmpty() &&
         childFrame->StyleDisplay()->mBreakBefore) {
       curLine = AddNewFlexLineToList(aLines, shouldInsertAtFront);
     }
 
     UniquePtr<FlexItem> item;
     if (nextStrutIdx < aStruts.Length() &&
@@ -4179,24 +4023,22 @@ nsFlexContainerFrame::DoFlexLayout(nsPre
                                    nscoord aContentBoxMainSize,
                                    nscoord aAvailableBSizeForContent,
                                    nsTArray<StrutInfo>& aStruts,
                                    const FlexboxAxisTracker& aAxisTracker)
 {
   aStatus = NS_FRAME_COMPLETE;
 
   LinkedList<FlexLine> lines;
-  nsTArray<nsIFrame*> placeholderKids;
   AutoFlexLineListClearer cleanupLines(lines);
 
   GenerateFlexLines(aPresContext, aReflowInput,
                     aContentBoxMainSize,
                     aAvailableBSizeForContent,
-                    aStruts, aAxisTracker,
-                    placeholderKids, lines);
+                    aStruts, aAxisTracker, lines);
 
   aContentBoxMainSize =
     ResolveFlexContainerMainSize(aReflowInput, aAxisTracker,
                                  aContentBoxMainSize, aAvailableBSizeForContent,
                                  lines.getFirst(), aStatus);
 
   for (FlexLine* line = lines.getFirst(); line; line = line->getNext()) {
     line->ResolveFlexibleLengths(aContentBoxMainSize);
@@ -4415,22 +4257,16 @@ nsFlexContainerFrame::DoFlexLayout(nsPre
       // children), then use this child's baseline as the container's baseline.
       if (item == firstItem &&
           flexContainerAscent == nscoord_MIN) {
         flexContainerAscent = itemNormalBPos + item->ResolvedAscent();
       }
     }
   }
 
-  if (!placeholderKids.IsEmpty()) {
-    ReflowPlaceholders(aPresContext, aReflowInput,
-                       placeholderKids, containerContentBoxOrigin,
-                       containerSize);
-  }
-
   // Compute flex container's desired size (in its own writing-mode),
   // starting w/ content-box size & growing from there:
   LogicalSize desiredSizeInFlexWM =
     aAxisTracker.LogicalSizeFromFlexRelativeSizes(aContentBoxMainSize,
                                                   contentBoxCrossSize);
   // Add border/padding (w/ skipSides already applied):
   desiredSizeInFlexWM.ISize(flexWM) += containerBP.IStartEnd(flexWM);
   desiredSizeInFlexWM.BSize(flexWM) += containerBP.BStartEnd(flexWM);
@@ -4622,52 +4458,16 @@ nsFlexContainerFrame::ReflowFlexItem(nsP
 
   FinishReflowChild(aItem.Frame(), aPresContext,
                     childDesiredSize, &childReflowInput,
                     outerWM, aFramePos, aContainerSize, 0);
 
   aItem.SetAscent(childDesiredSize.BlockStartAscent());
 }
 
-void
-nsFlexContainerFrame::ReflowPlaceholders(nsPresContext* aPresContext,
-                                         const ReflowInput& aReflowInput,
-                                         nsTArray<nsIFrame*>& aPlaceholders,
-                                         const LogicalPoint& aContentBoxOrigin,
-                                         const nsSize& aContainerSize)
-{
-  WritingMode outerWM = aReflowInput.GetWritingMode();
-
-  // As noted in this method's documentation, we'll reflow every entry in
-  // |aPlaceholders| at the container's content-box origin.
-  for (nsIFrame* placeholder : aPlaceholders) {
-    MOZ_ASSERT(placeholder->GetType() == nsGkAtoms::placeholderFrame,
-               "placeholders array should only contain placeholder frames");
-    WritingMode wm = placeholder->GetWritingMode();
-    LogicalSize availSize = aReflowInput.ComputedSize(wm);
-    ReflowInput childReflowInput(aPresContext, aReflowInput,
-                                 placeholder, availSize);
-    ReflowOutput childDesiredSize(childReflowInput);
-    nsReflowStatus childReflowStatus;
-    ReflowChild(placeholder, aPresContext,
-                childDesiredSize, childReflowInput,
-                outerWM, aContentBoxOrigin, aContainerSize, 0,
-                childReflowStatus);
-
-    FinishReflowChild(placeholder, aPresContext,
-                      childDesiredSize, &childReflowInput,
-                      outerWM, aContentBoxOrigin, aContainerSize, 0);
-
-    // Mark the placeholder frame to indicate that it's not actually at the
-    // element's static position, because we need to apply CSS Alignment after
-    // we determine the OOF's size:
-    placeholder->AddStateBits(PLACEHOLDER_STATICPOS_NEEDS_CSSALIGN);
-  }
-}
-
 /* virtual */ nscoord
 nsFlexContainerFrame::GetMinISize(nsRenderingContext* aRenderingContext)
 {
   nscoord minISize = 0;
   DISPLAY_MIN_WIDTH(this, minISize);
 
   RenumberList();
 
--- a/layout/generic/nsFlexContainerFrame.h
+++ b/layout/generic/nsFlexContainerFrame.h
@@ -74,21 +74,16 @@ public:
 
   virtual nsIAtom* GetType() const override;
 #ifdef DEBUG_FRAME_DUMP
   virtual nsresult GetFrameName(nsAString& aResult) const override;
 #endif
 
   nscoord GetLogicalBaseline(mozilla::WritingMode aWM) const override;
 
-  // nsContainerFrame overrides
-  uint16_t CSSAlignmentForAbsPosChild(
-            const ReflowInput& aChildRI,
-            mozilla::LogicalAxis aLogicalAxis) const override;
-
   // Flexbox-specific public methods
   bool IsHorizontal();
 
   /**
     * Helper function to calculate packing space and initial offset of alignment
     * subjects in MainAxisPositionTracker() and CrossAxisPositionTracker() for
     * space-between, space-around, and space-evenly.
     *
@@ -193,33 +188,26 @@ protected:
    * on aFlexItem, if needed.
    * (Helper for GenerateFlexItemForChild().)
    */
   void ResolveAutoFlexBasisAndMinSize(nsPresContext* aPresContext,
                                       FlexItem& aFlexItem,
                                       const ReflowInput& aItemReflowInput,
                                       const FlexboxAxisTracker& aAxisTracker);
 
-  /**
-   * This method:
-   *  - Creates FlexItems for all of our child frames (except placeholders).
-   *  - Groups those FlexItems into FlexLines.
-   *  - Returns those FlexLines in the outparam |aLines|.
-   *
-   * For any child frames which are placeholders, this method will instead just
-   * append that child to the outparam |aPlaceholders| for separate handling.
-   * (Absolutely positioned children of a flex container are *not* flex items.)
-   */
+  // Creates FlexItems for all of our child frames, arranged in a list of
+  // FlexLines.  These are returned by reference in |aLines|. Our actual
+  // return value has to be |nsresult|, in case we have to reflow a child
+  // to establish its flex base size and that reflow fails.
   void GenerateFlexLines(nsPresContext* aPresContext,
                          const ReflowInput& aReflowInput,
                          nscoord aContentBoxMainSize,
                          nscoord aAvailableBSizeForContent,
                          const nsTArray<StrutInfo>& aStruts,
                          const FlexboxAxisTracker& aAxisTracker,
-                         nsTArray<nsIFrame*>& aPlaceholders,
                          mozilla::LinkedList<FlexLine>& aLines);
 
   nscoord GetMainSizeFromReflowInput(const ReflowInput& aReflowInput,
                                      const FlexboxAxisTracker& aAxisTracker);
 
   nscoord ComputeCrossSize(const ReflowInput& aReflowInput,
                            const FlexboxAxisTracker& aAxisTracker,
                            nscoord aSumLineCrossSizes,
@@ -266,43 +254,15 @@ protected:
    */
   void ReflowFlexItem(nsPresContext* aPresContext,
                       const FlexboxAxisTracker& aAxisTracker,
                       const ReflowInput& aReflowInput,
                       const FlexItem& aItem,
                       mozilla::LogicalPoint& aFramePos,
                       const nsSize& aContainerSize);
 
-  /**
-   * Helper-function to perform a "dummy reflow" on all our nsPlaceholderFrame
-   * children, at the container's content-box origin.
-   *
-   * This doesn't actually represent the static position of the placeholders'
-   * out-of-flow (OOF) frames -- we can't compute that until we've reflowed the
-   * OOF, because (depending on the CSS Align properties) the static position
-   * may be influenced by the OOF's size.  So for now, we just co-opt the
-   * placeholder to store the flex container's logical content-box origin, and
-   * we defer to nsAbsoluteContainingBlock to determine the OOF's actual static
-   * position (using this origin, the OOF's size, and the CSS Align
-   * properties).
-   *
-   * @param aPresContext       The presentation context being used in reflow.
-   * @param aReflowInput       The flex container's reflow input.
-   * @param aPlaceholders      An array of all the flex container's
-   *                           nsPlaceholderFrame children.
-   * @param aContentBoxOrigin  The flex container's logical content-box
-   *                           origin (in its own coordinate space).
-   * @param aContainerSize     The flex container's size (required by some
-   *                           reflow methods to interpret positions correctly).
-   */
-  void ReflowPlaceholders(nsPresContext* aPresContext,
-                          const ReflowInput& aReflowInput,
-                          nsTArray<nsIFrame*>& aPlaceholders,
-                          const mozilla::LogicalPoint& aContentBoxOrigin,
-                          const nsSize& aContainerSize);
-
   bool mChildrenHaveBeenReordered; // Have we ever had to reorder our kids
                                    // to satisfy their 'order' values?
 
   nscoord mBaselineFromLastReflow;
 };
 
 #endif /* nsFlexContainerFrame_h___ */
--- a/layout/generic/nsFrameStateBits.h
+++ b/layout/generic/nsFrameStateBits.h
@@ -586,25 +586,16 @@ FRAME_STATE_GROUP(Placeholder, nsPlaceho
 // placeholder for.
 
 FRAME_STATE_BIT(Placeholder, 20, PLACEHOLDER_FOR_FLOAT)
 FRAME_STATE_BIT(Placeholder, 21, PLACEHOLDER_FOR_ABSPOS)
 FRAME_STATE_BIT(Placeholder, 22, PLACEHOLDER_FOR_FIXEDPOS)
 FRAME_STATE_BIT(Placeholder, 23, PLACEHOLDER_FOR_POPUP)
 FRAME_STATE_BIT(Placeholder, 24, PLACEHOLDER_FOR_TOPLAYER)
 
-// This bit indicates that the out-of-flow frame's static position needs to be
-// determined using the CSS Box Alignment properties
-// ([align,justify]-[self,content]).  When this is set, the placeholder frame's
-// position doesn't represent the static position, as it usually would --
-// rather, it represents the logical start corner of the alignment containing
-// block.  Then, after we've determined the out-of-flow frame's size, we can
-// resolve the actual static position using the alignment properties.
-FRAME_STATE_BIT(Placeholder, 25, PLACEHOLDER_STATICPOS_NEEDS_CSSALIGN)
-
 
 // == Frame state bits that apply to table cell frames ========================
 
 FRAME_STATE_GROUP(TableCell, nsTableCellFrame)
 
 FRAME_STATE_BIT(TableCell, 28, NS_TABLE_CELL_HAS_PCT_OVER_BSIZE)
 FRAME_STATE_BIT(TableCell, 29, NS_TABLE_CELL_HAD_SPECIAL_REFLOW)
 FRAME_STATE_BIT(TableCell, 31, NS_TABLE_CELL_CONTENT_EMPTY)
--- a/layout/generic/nsGridContainerFrame.cpp
+++ b/layout/generic/nsGridContainerFrame.cpp
@@ -5,17 +5,16 @@
  * http://mozilla.org/MPL/2.0/. */
 
 /* rendering object for CSS "display: grid | inline-grid" */
 
 #include "nsGridContainerFrame.h"
 
 #include <algorithm> // for std::stable_sort
 #include <limits>
-#include "mozilla/CSSAlignUtils.h"
 #include "mozilla/Function.h"
 #include "mozilla/Maybe.h"
 #include "mozilla/PodOperations.h" // for PodZero
 #include "mozilla/Poison.h"
 #include "nsAbsoluteContainingBlock.h"
 #include "nsAlgorithm.h" // for clamped()
 #include "nsCSSAnonBoxes.h"
 #include "nsCSSFrameConstructor.h"
@@ -2578,35 +2577,148 @@ GetDisplayFlagsForGridItem(nsIFrame* aFr
 {
   const nsStylePosition* pos = aFrame->StylePosition();
   if (pos->mZIndex.GetUnit() == eStyleUnit_Integer) {
     return nsIFrame::DISPLAY_CHILD_FORCE_STACKING_CONTEXT;
   }
   return nsIFrame::DISPLAY_CHILD_FORCE_PSEUDO_STACKING_CONTEXT;
 }
 
+static nscoord
+SpaceToFill(WritingMode aWM, const LogicalSize& aSize, nscoord aMargin,
+            LogicalAxis aAxis, nscoord aCBSize)
+{
+  nscoord size = aAxis == eLogicalAxisBlock ? aSize.BSize(aWM)
+                                            : aSize.ISize(aWM);
+  return aCBSize - (size + aMargin);
+}
+
 // Align an item's margin box in its aAxis inside aCBSize.
 static void
 AlignJustifySelf(uint8_t aAlignment, bool aOverflowSafe, LogicalAxis aAxis,
                  bool aSameSide, nscoord aBaselineAdjust, nscoord aCBSize,
                  const ReflowInput& aRI, const LogicalSize& aChildSize,
                  LogicalPoint* aPos)
 {
   MOZ_ASSERT(aAlignment != NS_STYLE_ALIGN_AUTO, "unexpected 'auto' "
              "computed value for normal flow grid item");
-
-  // NOTE: this is the resulting frame offset (border box).
-  nscoord offset =
-    CSSAlignUtils::AlignJustifySelf(aAlignment, aOverflowSafe, aAxis,
-                                    aSameSide, aBaselineAdjust, aCBSize,
-                                    aRI, aChildSize);
+  MOZ_ASSERT(aAlignment != NS_STYLE_ALIGN_LEFT &&
+             aAlignment != NS_STYLE_ALIGN_RIGHT,
+             "caller should map that to the corresponding START/END");
+
+  // Map some alignment values to 'start' / 'end'.
+  switch (aAlignment) {
+    case NS_STYLE_ALIGN_SELF_START: // align/justify-self: self-start
+      aAlignment = MOZ_LIKELY(aSameSide) ? NS_STYLE_ALIGN_START
+                                         : NS_STYLE_ALIGN_END;
+      break;
+    case NS_STYLE_ALIGN_SELF_END: // align/justify-self: self-end
+      aAlignment = MOZ_LIKELY(aSameSide) ? NS_STYLE_ALIGN_END
+                                         : NS_STYLE_ALIGN_START;
+      break;
+    case NS_STYLE_ALIGN_FLEX_START: // same as 'start' for Grid
+      aAlignment = NS_STYLE_ALIGN_START;
+      break;
+    case NS_STYLE_ALIGN_FLEX_END: // same as 'end' for Grid
+      aAlignment = NS_STYLE_ALIGN_END;
+      break;
+  }
+
+  // XXX try to condense this code a bit by adding the necessary convenience
+  // methods? (bug 1209710)
+
+  // Get the item's margin corresponding to the container's start/end side.
+  const LogicalMargin margin = aRI.ComputedLogicalMargin();
+  WritingMode wm = aRI.GetWritingMode();
+  nscoord marginStart, marginEnd;
+  if (aAxis == eLogicalAxisBlock) {
+    if (MOZ_LIKELY(aSameSide)) {
+      marginStart = margin.BStart(wm);
+      marginEnd = margin.BEnd(wm);
+    } else {
+      marginStart = margin.BEnd(wm);
+      marginEnd = margin.BStart(wm);
+    }
+  } else {
+    if (MOZ_LIKELY(aSameSide)) {
+      marginStart = margin.IStart(wm);
+      marginEnd = margin.IEnd(wm);
+    } else {
+      marginStart = margin.IEnd(wm);
+      marginEnd = margin.IStart(wm);
+    }
+  }
+
+  const auto& styleMargin = aRI.mStyleMargin->mMargin;
+  bool hasAutoMarginStart;
+  bool hasAutoMarginEnd;
+  if (aAxis == eLogicalAxisBlock) {
+    hasAutoMarginStart = styleMargin.GetBStartUnit(wm) == eStyleUnit_Auto;
+    hasAutoMarginEnd = styleMargin.GetBEndUnit(wm) == eStyleUnit_Auto;
+  } else {
+    hasAutoMarginStart = styleMargin.GetIStartUnit(wm) == eStyleUnit_Auto;
+    hasAutoMarginEnd = styleMargin.GetIEndUnit(wm) == eStyleUnit_Auto;
+  }
+
+  // https://drafts.csswg.org/css-align-3/#overflow-values
+  // This implements <overflow-position> = 'safe'.
+  // And auto-margins: https://drafts.csswg.org/css-grid/#auto-margins
+  if ((MOZ_UNLIKELY(aOverflowSafe) && aAlignment != NS_STYLE_ALIGN_START) ||
+      hasAutoMarginStart || hasAutoMarginEnd) {
+    nscoord space = SpaceToFill(wm, aChildSize, marginStart + marginEnd,
+                                aAxis, aCBSize);
+    // XXX we might want to include == 0 here as an optimization -
+    // I need to see what the baseline/last-baseline code looks like first.
+    if (space < 0) {
+      // "Overflowing elements ignore their auto margins and overflow
+      // in the end directions"
+      aAlignment = NS_STYLE_ALIGN_START;
+    } else if (hasAutoMarginEnd) {
+      aAlignment = hasAutoMarginStart ? NS_STYLE_ALIGN_CENTER
+                                      : (aSameSide ? NS_STYLE_ALIGN_START
+                                                   : NS_STYLE_ALIGN_END);
+    } else if (hasAutoMarginStart) {
+      aAlignment = aSameSide ? NS_STYLE_ALIGN_END : NS_STYLE_ALIGN_START;
+    }
+  }
 
   // Set the position (aPos) for the requested alignment.
+  nscoord offset = 0; // NOTE: this is the resulting frame offset (border box).
+  switch (aAlignment) {
+    case NS_STYLE_ALIGN_BASELINE:
+    case NS_STYLE_ALIGN_LAST_BASELINE:
+      if (MOZ_LIKELY(aSameSide == (aAlignment == NS_STYLE_ALIGN_BASELINE))) {
+        offset = marginStart + aBaselineAdjust;
+      } else {
+        nscoord size = aAxis == eLogicalAxisBlock ? aChildSize.BSize(wm)
+                                                  : aChildSize.ISize(wm);
+        offset = aCBSize - (size + marginEnd) - aBaselineAdjust;
+      }
+      break;
+    case NS_STYLE_ALIGN_STRETCH:
+      MOZ_FALLTHROUGH; // ComputeSize() deals with it
+    case NS_STYLE_ALIGN_START:
+      offset = marginStart;
+      break;
+    case NS_STYLE_ALIGN_END: {
+      nscoord size = aAxis == eLogicalAxisBlock ? aChildSize.BSize(wm)
+                                                : aChildSize.ISize(wm);
+      offset = aCBSize - (size + marginEnd);
+      break;
+    }
+    case NS_STYLE_ALIGN_CENTER: {
+      nscoord size = aAxis == eLogicalAxisBlock ? aChildSize.BSize(wm)
+                                                : aChildSize.ISize(wm);
+      offset = (aCBSize - size + marginStart - marginEnd) / 2;
+      break;
+    }
+    default:
+      MOZ_ASSERT_UNREACHABLE("unknown align-/justify-self value");
+  }
   if (offset != 0) {
-    WritingMode wm = aRI.GetWritingMode();
     nscoord& pos = aAxis == eLogicalAxisBlock ? aPos->B(wm) : aPos->I(wm);
     pos += MOZ_LIKELY(aSameSide) ? offset : -offset;
   }
 }
 
 static void
 AlignSelf(const nsGridContainerFrame::GridItemInfo& aGridItem,
           uint8_t aAlignSelf, nscoord aCBSize, const WritingMode aCBWM,
--- a/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml
@@ -59,16 +59,16 @@
            ><div class="a"/><div class="b abspos" style="width: 20px"/></div>
       <!-- Middle child abspos: -->
       <div class="flexbox"
            ><div class="a" style="width: 80px"
           /><div class="inflex abspos"
           /><div class="b" style="width: 120px"/></div>
       <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
       <div class="flexbox"
-           ><div class="inflex" style="margin-left: 15px"
-          /><div class="inflex" style="margin-left: 30px"
-          /><div class="inflex" style="margin-left: 30px"
+           ><div class="inflex" style="margin-left: 12px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 24px"
           /><div class="noFlexFn abspos"
-          /><div class="inflex" style="margin-left: 30px"/></div>
+          /><div class="inflex" style="margin-left: 48px"/></div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml
@@ -36,39 +36,38 @@
       }
       div.inflex {
         width: 20px;
         height: 100px;
         background: gray;
         display: inline-block;
       }
       div.noFlexFn {
-        width: 16px;
-        height: 16px;
+        width: 15px;
+        height: 15px;
         background: teal;
         display: inline-block;
       }
     </style>
   </head>
   <body>
     <div class="containingBlock">
       <!-- First child abspos: -->
       <div class="flexbox"
            ><div class="a abspos" style="width: 30px"/><div class="b"/></div>
       <!-- Second child abspos: -->
       <div class="flexbox"
-           ><div class="a"/><div class="b abspos"
-                                 style="width: 20px; left: 0"/></div>
+           ><div class="a"/><div class="b abspos" style="width: 20px"/></div>
       <!-- Middle child abspos: -->
       <div class="flexbox"
            ><div class="a" style="width: 80px"
-          /><div class="inflex abspos" style="left: 0"
+          /><div class="inflex abspos"
           /><div class="b" style="width: 120px"/></div>
       <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
       <div class="flexbox"
-           ><div class="inflex" style="margin-left: 15px"
-          /><div class="inflex" style="margin-left: 30px"
-          /><div class="inflex" style="margin-left: 30px"
-          /><div class="noFlexFn abspos" style="left: 90px"
-          /><div class="inflex" style="margin-left: 30px"/></div>
+           ><div class="inflex" style="margin-left: 12px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="noFlexFn abspos" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 48px"/></div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
@@ -42,18 +42,18 @@
       }
       div.inflex {
         flex: none;
         width: 20px;
         height: 100px;
         background: gray;
       }
       div.noFlexFn {
-        width: 16px;
-        height: 16px;
+        width: 15px;
+        height: 15px;
         background: teal;
       }
     </style>
   </head>
   <body>
     <div class="containingBlock">
       <!-- First child abspos: -->
       <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
--- a/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml
@@ -59,16 +59,16 @@
            ><div class="a"/><div class="b fixedpos" style="width: 20px"/></div>
       <!-- Middle child fixedpos: -->
       <div class="flexbox"
            ><div class="a" style="width: 80px"
           /><div class="inflex fixedpos"
           /><div class="b" style="width: 120px"/></div>
       <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
       <div class="flexbox"
-           ><div class="inflex" style="margin-left: 15px"
-          /><div class="inflex" style="margin-left: 30px"
-          /><div class="inflex" style="margin-left: 30px"
+           ><div class="inflex" style="margin-left: 12px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 24px"
           /><div class="noFlexFn fixedpos"
-          /><div class="inflex" style="margin-left: 30px"/></div>
+          /><div class="inflex" style="margin-left: 48px"/></div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml
@@ -10,17 +10,17 @@
       div.containingBlock {
         top: 15px;
         left: 20px;
         height: 400px;
         position: absolute;
         border: 2px dashed purple;
       }
       .fixedpos {
-        position: absolute;
+        position: fixed;
         border: 2px dotted black;
       }
       div.flexbox {
         width: 200px;
         height: 100px;
       }
       div.a {
         width: 100%;
@@ -36,39 +36,38 @@
       }
       div.inflex {
         width: 20px;
         height: 100px;
         background: gray;
         display: inline-block;
       }
       div.noFlexFn {
-        width: 16px;
-        height: 16px;
+        width: 15px;
+        height: 15px;
         background: teal;
         display: inline-block;
       }
     </style>
   </head>
   <body>
     <div class="containingBlock">
       <!-- First child fixedpos: -->
       <div class="flexbox"
            ><div class="a fixedpos" style="width: 30px"/><div class="b"/></div>
       <!-- Second child fixedpos: -->
       <div class="flexbox"
-           ><div class="a"/><div class="b fixedpos"
-                                 style="width: 20px; left: 0"/></div>
+           ><div class="a"/><div class="b fixedpos" style="width: 20px"/></div>
       <!-- Middle child fixedpos: -->
       <div class="flexbox"
            ><div class="a" style="width: 80px"
-          /><div class="inflex fixedpos" style="left: 0"
+          /><div class="inflex fixedpos"
           /><div class="b" style="width: 120px"/></div>
       <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
       <div class="flexbox"
-           ><div class="inflex" style="margin-left: 15px"
-          /><div class="inflex" style="margin-left: 30px"
-          /><div class="inflex" style="margin-left: 30px"
-          /><div class="noFlexFn fixedpos" style="left: 90px"
-          /><div class="inflex" style="margin-left: 30px"/></div>
+           ><div class="inflex" style="margin-left: 12px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="noFlexFn fixedpos" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 48px"/></div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
@@ -42,18 +42,18 @@
       }
       div.inflex {
         flex: none;
         width: 20px;
         height: 100px;
         background: gray;
       }
       div.noFlexFn {
-        width: 16px;
-        height: 16px;
+        width: 15px;
+        height: 15px;
         background: teal;
       }
     </style>
   </head>
   <body>
     <div class="containingBlock">
       <!-- First child fixedpos: -->
       <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-001-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row wrap;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-002-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row wrap-reverse;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-left: 8px; }
-    .small > .container > * { margin-left: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-003-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row-reverse wrap;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-left: 8px; }
-    .small > .container > * { margin-left: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-004-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row-reverse wrap-reverse;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { margin-left: 8px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { margin-left: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a column flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-005-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column wrap;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { margin-left: 8px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { margin-left: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-006-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column wrap-reverse;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-top: 4px; }
-    .small > .container > * { margin-top: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { margin-left: 8px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { margin-left: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-007-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column-reverse wrap;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-top: 4px; }
-    .small > .container > * { margin-top: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { margin-left: 8px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { margin-left: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-008-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column-reverse wrap-reverse;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-left: 8px; }
-    .small > .container > * { margin-left: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-rtl-001-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row wrap;
-      direction: rtl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { margin-left: 8px }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { /* nothing special */ }
-    .small .alignStart  { margin-left: -4px }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { /* nothing special */ }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignEnd"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignEnd"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-rtl-002-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column wrap;
-      direction: rtl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { margin-left: 8px }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { /* nothing special */ }
-    .small .alignStart  { margin-left: -4px }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { /* nothing special */ }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-vertWM-001-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row wrap;
-      writing-mode: vertical-rl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-left: 8px; }
-    .small > .container > * { margin-left: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container"><div class="alignCenter"><!--normal--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container"><div class="alignStart"><!--space-between--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
-    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
-    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
-    <br>
-    <!-- <content-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <br>
-    <!-- <content-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-content" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-content-vertWM-002-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column wrap;
-      writing-mode: vertical-rl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-      /* This "align-self" only gets a chance to take effect when our container
-         has "align-content: stretch". In that case, it helps us verify that
-         the container's "align-content: stretch" is actually taking effect
-         and stretching the flex line (and giving us space to center in). */
-      align-self: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-content values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
-    <!-- normal -->
-    <div class="container" style="align-content: normal"><div></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container" style="align-content: baseline"><div></div></div>
-    <div class="container" style="align-content: last-baseline"><div></div></div>
-    <br>
-    <!-- <content-distribution> -->
-    <div class="container" style="align-content: space-between"><div></div></div>
-    <div class="container" style="align-content: space-around"><div></div></div>
-    <div class="container" style="align-content: space-evenly"><div></div></div>
-    <div class="container" style="align-content: stretch"><div></div></div>
-    <br>
-    <!-- <content-position>, part 1 -->
-    <div class="container" style="align-content: center"><div></div></div>
-    <div class="container" style="align-content: start"><div></div></div>
-    <div class="container" style="align-content: end"><div></div></div>
-    <br>
-    <!-- <content-position>, part 2 -->
-    <div class="container" style="align-content: flex-start"><div></div></div>
-    <div class="container" style="align-content: flex-end"><div></div></div>
-    <div class="container" style="align-content: left"><div></div></div>
-    <div class="container" style="align-content: right"><div></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.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 Test: Static position of abspos children in a row flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-001-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.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 Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-002-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row wrap-reverse;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-left: 8px; }
-    .small > .container > * { margin-left: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.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 Test: Static position of abspos children in a row-reverse flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-003-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row-reverse;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-left: 8px; }
-    .small > .container > * { margin-left: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.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 Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-004-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row-reverse wrap-reverse;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { margin-left: 8px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { margin-left: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.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 Test: Static position of abspos children in a column flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-005-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { margin-left: 8px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { margin-left: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.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 Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-006-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column wrap-reverse;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-top: 4px; }
-    .small > .container > * { margin-top: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { margin-left: 8px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { margin-left: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.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 Test: Static position of abspos children in a column-reverse flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-007-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column-reverse;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-top: 4px; }
-    .small > .container > * { margin-top: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { margin-left: 8px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { margin-left: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
-    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.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 Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-008-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column-reverse wrap-reverse;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-left: 8px; }
-    .small > .container > * { margin-left: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.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 Test: Static position of abspos children in a RTL row flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-001-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row;
-      direction: rtl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-left: 8px; }
-    .small > .container > * { margin-left: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos LTR children in a RTL row flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-002-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row;
-      direction: rtl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      direction: ltr;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { margin-left: 8px }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { /* nothing special */ }
-    .small .alignStart  { margin-left: -4px }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { /* nothing special */ }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignEnd"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignEnd"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.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 Test: Static position of abspos children in a RTL column flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-003-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column;
-      direction: rtl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { margin-left: 8px }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { /* nothing special */ }
-    .small .alignStart  { margin-left: -4px }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { /* nothing special */ }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
-    <div class="container"><div class="alignStart"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignEnd"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
-    <div class="container"><div class="alignStart"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignEnd"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos LTR children in a RTL column flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-004-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column;
-      direction: rtl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      direction: ltr;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { margin-left: 8px }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { /* nothing special */ }
-    .small .alignStart  { margin-left: -4px }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { /* nothing special */ }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.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 Test: Static position of abspos children in a vertical-rl row flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-001-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row;
-      writing-mode: vertical-rl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   .alignStart  { margin-left: 8px }
-    .big   .alignCenter { margin-left: 4px }
-    .big   .alignEnd    { /* nothing special */ }
-    .small .alignStart  { margin-left: -4px }
-    .small .alignCenter { margin-left: -2px }
-    .small .alignEnd    { /* nothing special */ }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
-    <div class="container"><div class="alignStart"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
-    <div class="container"><div class="alignStart"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignStart"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl row flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-002-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: row;
-      writing-mode: vertical-rl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      writing-mode: horizontal-tb;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-left: 8px; }
-    .small > .container > * { margin-left: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }
-    .small .alignEnd    { margin-top: -4px }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div class="alignStart"><!--auto--></div></div>
-    <div class="container"><div class="alignStart"><!--normal--></div></div>
-    <div class="container"><div class="alignStart"><!--stretch--></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div class="alignStart"><!--baseline--></div></div>
-    <div class="container"><div class="alignEnd"><!--last-baseline--></div></div>
-    <br>
-    <!-- <self-position>, part 1: -->
-    <div class="container"><div class="alignCenter"><!--center--></div></div>
-    <div class="container"><div class="alignStart"><!--start--></div></div>
-    <div class="container"><div class="alignEnd"><!--end--></div></div>
-    <div class="container"><div class="alignStart"><!--self-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
-    <br>
-    <!-- <self-position>, part 2: -->
-    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
-    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
-    <div class="container"><div class="alignStart"><!--left--></div></div>
-    <div class="container"><div class="alignEnd"><!--right--></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.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 Test: Static position of abspos children in a vertical-rl column flex container, with various "align-self" values</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
-  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-003-ref.html">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: flex;
-      flex-flow: column;
-      writing-mode: vertical-rl;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      position: absolute;
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-  </style>
-</head>
-<body>
-  <div class="big">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-  <div class="small">
-    <!-- The various align-self values, from
-         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
-    <!-- auto | normal | stretch -->
-    <div class="container"><div style="align-self: auto"></div></div>
-    <div class="container"><div style="align-self: normal"></div></div>
-    <div class="container"><div style="align-self: stretch"></div></div>
-    <br>
-    <!-- <baseline-position> -->
-    <div class="container"><div style="align-self: baseline"></div></div>
-    <div class="container"><div style="align-self: last-baseline"></div></div>
-    <br>
-    <!-- <self-position>, part 1 -->
-    <div class="container"><div style="align-self: center"></div></div>
-    <div class="container"><div style="align-self: start"></div></div>
-    <div class="container"><div style="align-self: end"></div></div>
-    <div class="container"><div style="align-self: self-start"></div></div>
-    <div class="container"><div style="align-self: self-end"></div></div>
-    <br>
-    <!-- <self-position>, part 2 -->
-    <div class="container"><div style="align-self: flex-start"></div></div>
-    <div class="container"><div style="align-self: flex-end"></div></div>
-    <div class="container"><div style="align-self: left"></div></div>
-    <div class="container"><div style="align-self: right"></div></div>
-    <br>
-  </div>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <meta charset="utf-8">
-  <style>
-    .container {
-      display: block;
-      padding: 1px 2px;
-      border: 1px solid black;
-      background: yellow;
-      margin-bottom: 5px;
-      margin-right: 5px;
-      float: left; /* For testing in "rows" of containers */
-    }
-    br { clear: both }
-
-    .big > .container {
-      height: 10px;
-      width: 16px;
-    }
-    .small > .container {
-      height: 2px;
-      width: 4px;
-    }
-
-    .container > * {
-      background: teal;
-      height: 6px;
-      width: 8px;
-    }
-    .big   > .container > * { margin-left: 8px; }
-    .small > .container > * { margin-left: -4px; }
-
-    .big   .alignStart  { /* nothing special */ }
-    .big   .alignCenter { margin-top: 2px }
-    .big   .alignEnd    { margin-top: 4px }
-    .small .alignStart  { /* nothing special */ }
-    .small .alignCenter { margin-top: -2px }