Backed out 20 changesets (bug 1151214, bug 1211260, bug 1215099, bug 1151213, bug 1000592, bug 1176775, bug 1215182, bug 1176782, bug 1163435, bug 1215957) on request from mats because not wanted on b2g 2.5
authorCarsten "Tomcat" Book <cbook@mozilla.com>
Thu, 05 Nov 2015 14:32:20 +0100
changeset 271204 0869ace8c965bdfe63a55b98b4ee20b3de98ae20
parent 271203 218060865699dd06e4b406af2b0f6b8226658f42
child 271205 00a6db3e9ba8a3fad6adb0522c5c63d78e3b6d5a
push id107
push usercbook@mozilla.com
push dateThu, 05 Nov 2015 13:32:39 +0000
bugs1151214, 1211260, 1215099, 1151213, 1000592, 1176775, 1215182, 1176782, 1163435, 1215957
milestone45.0a1
backs out91d462e5c30fc2fdd8c04fe0ce96ae1dbd62281b
3143e47d7808735a7d93051a3e08c3dec9a450c0
282e4426f1e19175f6374be13fe9065da433ab44
fa7ad766c217ece280a080f755100f1c04bbdb6f
91269e0c3c2d5931641e57ba1c40160a3eb50c2a
a8b188bf416f21bc7078ba225c0c8b82ab9a0f7a
9dbec0f99fd0a17e99bf07da22e8833a8de3492c
d4e6581738478b66f78b5d4f77aa45f20353731c
bb0e04a7ab198ecc69b03251f2261cc12767aada
dc90c209ea61a36257b508e0b90d95ed109ed894
7b8f601030db44c1f6d8c16889a6ec599efeb97a
08064bb472dd352b99400a3d71ee534259e3e7ef
eb15cd3ed6fa390c692eaa0cf298905d5e737be9
a118847de0311c9dc5f2d22206ac7975bcceb45e
beea1a34f2a2f26d931b15bf346887c6820ee4e1
3bb626ed4c3777a077ef6dc9537848cf7be4a4e1
c6be763c5f06d09d62d8f2fb9a93ef2be87b7173
c89dd8e9559c0f608b889b63bbf6eba600ec4e97
56aebef6afdfd77c266d6b95abf3866a75c4abe7
9a84c80698b0c3f443520d4c624e465b9bedc1cf
Backed out 20 changesets (bug 1151214, bug 1211260, bug 1215099, bug 1151213, bug 1000592, bug 1176775, bug 1215182, bug 1176782, bug 1163435, bug 1215957) on request from mats because not wanted on b2g 2.5 Backed out changeset 91d462e5c30f Backed out changeset 3143e47d7808 (bug 1211260) Backed out changeset 282e4426f1e1 (bug 1000592) Backed out changeset fa7ad766c217 (bug 1176775) Backed out changeset 91269e0c3c2d (bug 1176775) Backed out changeset a8b188bf416f (bug 1163435) Backed out changeset 9dbec0f99fd0 (bug 1163435) Backed out changeset d4e658173847 (bug 1215957) Backed out changeset bb0e04a7ab19 (bug 1215957) Backed out changeset dc90c209ea61 (bug 1215182) Backed out changeset 7b8f601030db (bug 1215182) Backed out changeset 08064bb472dd (bug 1211260) Backed out changeset eb15cd3ed6fa (bug 1215099) Backed out changeset a118847de031 (bug 1215099) Backed out changeset beea1a34f2a2 (bug 1151214) Backed out changeset 3bb626ed4c37 (bug 1151214) Backed out changeset c6be763c5f06 (bug 1151213) Backed out changeset c89dd8e9559c (bug 1151213) Backed out changeset 56aebef6afdf (bug 1151214) Backed out changeset 9a84c80698b0 (bug 1176782)
gfx/src/nsCoord.h
layout/base/nsLayoutUtils.cpp
layout/base/nsLayoutUtils.h
layout/generic/nsFlexContainerFrame.cpp
layout/generic/nsFrame.cpp
layout/generic/nsGridContainerFrame.cpp
layout/generic/nsGridContainerFrame.h
layout/generic/nsHTMLReflowState.cpp
layout/generic/nsHTMLReflowState.h
layout/generic/nsIFrame.h
layout/generic/nsIFrameInlines.h
layout/reftests/css-display/display-contents-acid.html
layout/reftests/css-grid/grid-abspos-items-001-ref.html
layout/reftests/css-grid/grid-abspos-items-001.html
layout/reftests/css-grid/grid-abspos-items-002-ref.html
layout/reftests/css-grid/grid-abspos-items-002.html
layout/reftests/css-grid/grid-abspos-items-011-ref.html
layout/reftests/css-grid/grid-abspos-items-011.html
layout/reftests/css-grid/grid-align-content-001-ref.html
layout/reftests/css-grid/grid-align-content-001.html
layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-definite-001.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004.html
layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-percent-001.html
layout/reftests/css-grid/grid-item-align-001-ref.html
layout/reftests/css-grid/grid-item-align-001.html
layout/reftests/css-grid/grid-item-align-002-ref.html
layout/reftests/css-grid/grid-item-align-002.html
layout/reftests/css-grid/grid-item-align-003-ref.html
layout/reftests/css-grid/grid-item-align-003.html
layout/reftests/css-grid/grid-item-justify-001-ref.html
layout/reftests/css-grid/grid-item-justify-001.html
layout/reftests/css-grid/grid-item-justify-002-ref.html
layout/reftests/css-grid/grid-item-justify-002.html
layout/reftests/css-grid/grid-item-sizing-percent-001-ref.html
layout/reftests/css-grid/grid-item-sizing-percent-001.html
layout/reftests/css-grid/grid-item-sizing-px-001.html
layout/reftests/css-grid/grid-item-stretch-001-ref.html
layout/reftests/css-grid/grid-item-stretch-001.html
layout/reftests/css-grid/grid-justify-content-001-ref.html
layout/reftests/css-grid/grid-justify-content-001.html
layout/reftests/css-grid/grid-justify-content-002-ref.html
layout/reftests/css-grid/grid-justify-content-002.html
layout/reftests/css-grid/grid-justify-content-003-ref.html
layout/reftests/css-grid/grid-justify-content-003.html
layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html
layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html
layout/reftests/css-grid/grid-placement-auto-implicit-001.html
layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html
layout/reftests/css-grid/grid-placement-definite-implicit-001.html
layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html
layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html
layout/reftests/css-grid/grid-placement-implicit-named-areas-001.html
layout/reftests/css-grid/grid-placement-negative-lines-001-ref.html
layout/reftests/css-grid/grid-placement-negative-lines-001.html
layout/reftests/css-grid/grid-relpos-items-001-ref.html
layout/reftests/css-grid/grid-relpos-items-001.html
layout/reftests/css-grid/reftest.list
layout/reftests/css-grid/support/lime-25x1.png
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003-ref.xhtml
layout/style/test/test_flexbox_align_self_auto.html
modules/libpref/init/all.js
--- a/gfx/src/nsCoord.h
+++ b/gfx/src/nsCoord.h
@@ -6,17 +6,16 @@
 #ifndef NSCOORD_H
 #define NSCOORD_H
 
 #include "nsAlgorithm.h"
 #include "nscore.h"
 #include "nsMathUtils.h"
 #include <math.h>
 #include <float.h>
-#include <stdlib.h>
 
 #include "nsDebug.h"
 #include <algorithm>
 
 /*
  * Basic type used for the geometry classes.
  *
  * Normally all coordinates are maintained in an app unit coordinate
@@ -53,32 +52,16 @@ typedef int32_t nscoord;
 
 inline void VERIFY_COORD(nscoord aCoord) {
 #ifdef NS_COORD_IS_FLOAT
   NS_ASSERTION(floorf(aCoord) == aCoord,
                "Coords cannot have fractions");
 #endif
 }
 
-/**
- * Divide aSpace by aN.  Assign the resulting quotient to aQuotient and
- * return the remainder.
- */
-inline nscoord NSCoordDivRem(nscoord aSpace, size_t aN, nscoord* aQuotient)
-{
-#ifdef NS_COORD_IS_FLOAT
-  *aQuotient = aSpace / aN;
-  return 0.0f;
-#else
-  div_t result = div(aSpace, aN);
-  *aQuotient = nscoord(result.quot);
-  return nscoord(result.rem);
-#endif
-}
-
 inline nscoord NSCoordMulDiv(nscoord aMult1, nscoord aMult2, nscoord aDiv) {
 #ifdef NS_COORD_IS_FLOAT
   return (aMult1 * aMult2 / aDiv);
 #else
   return (int64_t(aMult1) * int64_t(aMult2) / int64_t(aDiv));
 #endif
 }
 
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -4541,25 +4541,20 @@ nsLayoutUtils::IntrinsicForAxis(Physical
   AutoMaybeDisableFontInflation an(aFrame);
 
   // We want the size this frame will contribute to the parent's inline-size,
   // so we work in the parent's writing mode; but if aFrame is orthogonal to
   // its parent, we'll need to look at its BSize instead of min/pref-ISize.
   const nsStylePosition* stylePos = aFrame->StylePosition();
   uint8_t boxSizing = stylePos->mBoxSizing;
 
+  const nsStyleCoord& styleISize =
+    horizontalAxis ? stylePos->mWidth : stylePos->mHeight;
   const nsStyleCoord& styleMinISize =
     horizontalAxis ? stylePos->mMinWidth : stylePos->mMinHeight;
-  const nsStyleCoord& styleISize =
-    (aFlags & MIN_INTRINSIC_ISIZE) ? styleMinISize :
-    (horizontalAxis ? stylePos->mWidth : stylePos->mHeight);
-  MOZ_ASSERT(!(aFlags & MIN_INTRINSIC_ISIZE) ||
-             styleISize.GetUnit() == eStyleUnit_Auto ||
-             styleISize.GetUnit() == eStyleUnit_Enumerated,
-             "should only use MIN_INTRINSIC_ISIZE for intrinsic values");
   const nsStyleCoord& styleMaxISize =
     horizontalAxis ? stylePos->mMaxWidth : stylePos->mMaxHeight;
 
   // We build up two values starting with the content box, and then
   // adding padding, border and margin.  The result is normally
   // |result|.  Then, when we handle 'width', 'min-width', and
   // 'max-width', we use the results we've been building in |min| as a
   // minimum, overriding 'min-width'.  This ensures two things:
@@ -4765,86 +4760,51 @@ nsLayoutUtils::IntrinsicForContainer(nsR
 
 /* static */ nscoord
 nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis        aAxis,
                                           nsRenderingContext* aRC,
                                           nsIFrame*           aFrame,
                                           IntrinsicISizeType  aType,
                                           uint32_t            aFlags)
 {
-  MOZ_ASSERT(aFrame);
-  MOZ_ASSERT(aFrame->IsFlexOrGridItem(),
-             "only grid/flex items have this behavior currently");
+  NS_PRECONDITION(aFrame, "null frame");
+  NS_PRECONDITION(aFrame->GetParent(),
+                  "MinSizeContributionForAxis called on frame not in tree");
 
 #ifdef DEBUG_INTRINSIC_WIDTH
   nsFrame::IndentBy(stderr, gNoiseIndent);
   static_cast<nsFrame*>(aFrame)->ListTag(stderr);
   printf_stderr(" %s min-isize for %s WM:\n",
                 aType == MIN_ISIZE ? "min" : "pref",
                 aWM.IsVertical() ? "vertical" : "horizontal");
 #endif
 
-  const nsStylePosition* const stylePos = aFrame->StylePosition();
-  const nsStyleCoord* style = aAxis == eAxisHorizontal ? &stylePos->mMinWidth
-                                                       : &stylePos->mMinHeight;
-  nscoord minSize;
-  nscoord* fixedMinSize = nullptr;
-  auto minSizeUnit = style->GetUnit();
-  if (minSizeUnit == eStyleUnit_Auto) {
-    if (aFrame->StyleDisplay()->mOverflowX == NS_STYLE_OVERFLOW_VISIBLE) {
-      style = aAxis == eAxisHorizontal ? &stylePos->mWidth
-                                       : &stylePos->mHeight;
-      if (GetAbsoluteCoord(*style, minSize)) {
-        // We have a definite width/height.  This is the "specified size" in:
-        // https://drafts.csswg.org/css-grid/#min-size-auto
-        fixedMinSize = &minSize;
-      }
-      // XXX the "transferred size" piece is missing (bug 1218178)
-    } else {
-      // min-[width|height]:auto with overflow != visible computes to zero.
-      minSize = 0;
-      fixedMinSize = &minSize;
-    }
-  } else if (GetAbsoluteCoord(*style, minSize)) {
-    fixedMinSize = &minSize;
-  } else if (minSizeUnit != eStyleUnit_Enumerated) {
-    MOZ_ASSERT(style->HasPercent());
-    minSize = 0;
-    fixedMinSize = &minSize;
-  }
-
-  if (!fixedMinSize) {
-    // Let the caller deal with the "content size" cases.
-#ifdef DEBUG_INTRINSIC_WIDTH
-    nsFrame::IndentBy(stderr, gNoiseIndent);
-    static_cast<nsFrame*>(aFrame)->ListTag(stderr);
-    printf_stderr(" %s min-isize is indefinite.\n",
-                  aType == MIN_ISIZE ? "min" : "pref");
-#endif
-    return NS_UNCONSTRAINEDSIZE;
-  }
-
   // If aFrame is a container for font size inflation, then shrink
   // wrapping inside of it should not apply font size inflation.
   AutoMaybeDisableFontInflation an(aFrame);
 
   PhysicalAxis ourInlineAxis =
     aFrame->GetWritingMode().PhysicalAxis(eLogicalAxisInline);
   nsIFrame::IntrinsicISizeOffsetData offsets =
     ourInlineAxis == aAxis ? aFrame->IntrinsicISizeOffsets()
                            : aFrame->IntrinsicBSizeOffsets();
   nscoord result = 0;
   nscoord min = 0;
-
-  const nsStyleCoord& maxISize =
-    aAxis == eAxisHorizontal ? stylePos->mMaxWidth : stylePos->mMaxHeight;
-  result = AddIntrinsicSizeOffset(aRC, aFrame, offsets, aType,
-                                  stylePos->mBoxSizing,
-                                  result, min, *style, fixedMinSize,
-                                  *style, nullptr, maxISize, aFlags, aAxis);
+  const nsStylePosition* stylePos = aFrame->StylePosition();
+  uint8_t boxSizing = stylePos->mBoxSizing;
+  const nsStyleCoord& style = aAxis == eAxisHorizontal ? stylePos->mMinWidth
+                                                       : stylePos->mMinHeight;
+  nscoord minSize;
+  nscoord* fixedMinSize = nullptr;
+  if (GetAbsoluteCoord(style, minSize)) {
+    fixedMinSize = &minSize;
+  }
+  result = AddIntrinsicSizeOffset(aRC, aFrame, offsets, aType, boxSizing,
+                                  result, min, style, fixedMinSize,
+                                  style, fixedMinSize, style, aFlags, aAxis);
 
 #ifdef DEBUG_INTRINSIC_WIDTH
   nsFrame::IndentBy(stderr, gNoiseIndent);
   static_cast<nsFrame*>(aFrame)->ListTag(stderr);
   printf_stderr(" %s min-isize is %d twips.\n",
          aType == MIN_ISIZE ? "min" : "pref", result);
 #endif
 
--- a/layout/base/nsLayoutUtils.h
+++ b/layout/base/nsLayoutUtils.h
@@ -1319,52 +1319,39 @@ public:
 
   /**
    * Get the contribution of aFrame to its containing block's intrinsic
    * size for the given physical axis.  This considers the child's intrinsic
    * width, its 'width', 'min-width', and 'max-width' properties (or 'height'
    * variations if that's what matches aAxis) and its padding, border and margin
    * in the corresponding dimension.
    */
-  enum class IntrinsicISizeType { MIN_ISIZE, PREF_ISIZE };
-  static const auto MIN_ISIZE = IntrinsicISizeType::MIN_ISIZE;
-  static const auto PREF_ISIZE = IntrinsicISizeType::PREF_ISIZE;
+  enum IntrinsicISizeType { MIN_ISIZE, PREF_ISIZE };
   enum {
     IGNORE_PADDING = 0x01,
     BAIL_IF_REFLOW_NEEDED = 0x02, // returns NS_INTRINSIC_WIDTH_UNKNOWN if so
-    MIN_INTRINSIC_ISIZE = 0x04, // use min-width/height instead of width/height
   };
   static nscoord IntrinsicForAxis(mozilla::PhysicalAxis aAxis,
                                   nsRenderingContext*   aRenderingContext,
                                   nsIFrame*             aFrame,
                                   IntrinsicISizeType    aType,
                                   uint32_t              aFlags = 0);
   /**
    * Calls IntrinsicForAxis with aFrame's parent's inline physical axis.
    */
   static nscoord IntrinsicForContainer(nsRenderingContext* aRenderingContext,
                                        nsIFrame*           aFrame,
                                        IntrinsicISizeType  aType,
                                        uint32_t            aFlags = 0);
 
   /**
-   * Get the definite size contribution of aFrame for the given physical axis.
+   * Get the contribution of aFrame for the given physical axis.
    * This considers the child's 'min-width' property (or 'min-height' if the
    * given axis is vertical), and its padding, border, and margin in the
-   * corresponding dimension.  If the 'min-' property is 'auto' (and 'overflow'
-   * is 'visible') and the corresponding 'width'/'height' is definite it returns
-   * the "specified / transferred size" for:
-   * https://drafts.csswg.org/css-grid/#min-size-auto
-   * Note that any percentage in 'width'/'height' makes it count as indefinite.
-   * If the 'min-' property is 'auto' and 'overflow' is not 'visible', then it
-   * calculates the result as if the 'min-' computed value is zero.
-   * Otherwise, return NS_UNCONSTRAINEDSIZE.
-   *
-   * @note this behavior is specific to Grid/Flexbox (currently) so aFrame
-   * should be a grid/flex item.
+   * corresponding dimension.
    */
   static nscoord MinSizeContributionForAxis(mozilla::PhysicalAxis aAxis,
                                             nsRenderingContext*   aRC,
                                             nsIFrame*             aFrame,
                                             IntrinsicISizeType    aType,
                                             uint32_t              aFlags = 0);
 
   /**
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -1578,19 +1578,16 @@ FlexItem::FlexItem(nsHTMLReflowState& aF
                  aFlexItemReflowState.mStyleDisplay,
                  mFrame->StyleContext()->GetParent());
   if (MOZ_UNLIKELY(mAlignSelf == NS_STYLE_ALIGN_AUTO)) {
     // Happens in rare edge cases when 'position' was ignored by the frame
     // constructor (and the style system computed 'auto' based on 'position').
     mAlignSelf = NS_STYLE_ALIGN_STRETCH;
   }
 
-  // XXX strip off the <overflow-position> bit until we implement that
-  mAlignSelf &= ~NS_STYLE_ALIGN_FLAG_BITS;
-
   SetFlexBaseSizeAndMainSize(aFlexBaseSize);
   CheckForMinSizeAuto(aFlexItemReflowState, aAxisTracker);
 
   // Assert that any "auto" margin components are set to 0.
   // (We'll resolve them later; until then, we want to treat them as 0-sized.)
 #ifdef DEBUG
   {
     const nsStyleSides& styleMargin =
@@ -1834,17 +1831,16 @@ public:
   // If aItem has any 'auto' margins in the main axis, this method updates the
   // corresponding values in its margin.
   void ResolveAutoMarginsInMainAxis(FlexItem& aItem);
 
 private:
   nscoord  mPackingSpaceRemaining;
   uint32_t mNumAutoMarginsInMainAxis;
   uint32_t mNumPackingSpacesRemaining;
-  // XXX this should be uint16_t when we add explicit fallback handling
   uint8_t  mJustifyContent;
 };
 
 // Utility class for managing our position along the cross axis along
 // the whole flex container (at a higher level than a single line).
 // The "0" position represents the cross-start edge of the flex container's
 // content-box.
 class MOZ_STACK_CLASS CrossAxisPositionTracker : public PositionTracker {
@@ -1868,17 +1864,16 @@ private:
   // deals with FlexLines, not with individual FlexItems or frames.)
   void EnterMargin(const nsMargin& aMargin) = delete;
   void ExitMargin(const nsMargin& aMargin) = delete;
   void EnterChildFrame(nscoord aChildFrameSize) = delete;
   void ExitChildFrame(nscoord aChildFrameSize) = delete;
 
   nscoord  mPackingSpaceRemaining;
   uint32_t mNumPackingSpacesRemaining;
-  // XXX this should be uint16_t when we add explicit fallback handling
   uint8_t  mAlignContent;
 };
 
 // Utility class for managing our position along the cross axis, *within* a
 // single flex line.
 class MOZ_STACK_CLASS SingleLineCrossAxisPositionTracker : public PositionTracker {
 public:
   explicit SingleLineCrossAxisPositionTracker(const FlexboxAxisTracker& aAxisTracker);
@@ -2431,24 +2426,16 @@ MainAxisPositionTracker::
                           nscoord aContentBoxMainSize)
   : PositionTracker(aAxisTracker.GetMainAxis(),
                     aAxisTracker.IsMainAxisReversed()),
     mPackingSpaceRemaining(aContentBoxMainSize), // we chip away at this below
     mNumAutoMarginsInMainAxis(0),
     mNumPackingSpacesRemaining(0),
     mJustifyContent(aJustifyContent)
 {
-  // 'auto' behaves as 'stretch' which behaves as 'flex-start' in the main axis
-  if (mJustifyContent == NS_STYLE_JUSTIFY_AUTO) {
-    mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
-  }
-
-  // XXX strip off the <overflow-position> bit until we implement that
-  mJustifyContent &= ~NS_STYLE_JUSTIFY_FLAG_BITS;
-
   // mPackingSpaceRemaining is initialized to the container's main size.  Now
   // we'll subtract out the main sizes of our flex items, so that it ends up
   // with the *actual* amount of packing space.
   for (const FlexItem* item = aLine->GetFirstItem(); item;
        item = item->getNext()) {
     mPackingSpaceRemaining -= item->GetOuterMainSize(mAxis);
     mNumAutoMarginsInMainAxis += item->GetNumAutoMarginsInAxis(mAxis);
   }
@@ -2464,45 +2451,32 @@ MainAxisPositionTracker::
   if (mPackingSpaceRemaining < 0) {
     if (mJustifyContent == NS_STYLE_JUSTIFY_SPACE_BETWEEN) {
       mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
     } else if (mJustifyContent == NS_STYLE_JUSTIFY_SPACE_AROUND) {
       mJustifyContent = NS_STYLE_JUSTIFY_CENTER;
     }
   }
 
-  // Map 'start'/'end' to 'flex-start'/'flex-end'.
-  if (mJustifyContent == NS_STYLE_JUSTIFY_START) {
-    mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
-  } else if (mJustifyContent == NS_STYLE_JUSTIFY_END) {
-    mJustifyContent = NS_STYLE_JUSTIFY_FLEX_END;
-  }
-
   // If our main axis is (internally) reversed, swap the justify-content
   // "flex-start" and "flex-end" behaviors:
   if (aAxisTracker.AreAxesInternallyReversed()) {
     if (mJustifyContent == NS_STYLE_JUSTIFY_FLEX_START) {
       mJustifyContent = NS_STYLE_JUSTIFY_FLEX_END;
     } else if (mJustifyContent == NS_STYLE_JUSTIFY_FLEX_END) {
       mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
     }
   }
 
   // Figure out how much space we'll set aside for auto margins or
   // packing spaces, and advance past any leading packing-space.
   if (mNumAutoMarginsInMainAxis == 0 &&
       mPackingSpaceRemaining != 0 &&
       !aLine->IsEmpty()) {
     switch (mJustifyContent) {
-      case NS_STYLE_JUSTIFY_LEFT:
-      case NS_STYLE_JUSTIFY_RIGHT:
-      case NS_STYLE_JUSTIFY_BASELINE:
-      case NS_STYLE_JUSTIFY_LAST_BASELINE:
-      case NS_STYLE_JUSTIFY_SPACE_EVENLY:
-        NS_WARNING("NYI: justify-content:left/right/baseline/last-baseline/space-evenly");
       case NS_STYLE_JUSTIFY_FLEX_START:
         // All packing space should go at the end --> nothing to do here.
         break;
       case NS_STYLE_JUSTIFY_FLEX_END:
         // All packing space goes at the beginning
         mPosition += mPackingSpaceRemaining;
         break;
       case NS_STYLE_JUSTIFY_CENTER:
@@ -2605,24 +2579,16 @@ CrossAxisPositionTracker::
   : PositionTracker(aAxisTracker.GetCrossAxis(),
                     aAxisTracker.IsCrossAxisReversed()),
     mPackingSpaceRemaining(0),
     mNumPackingSpacesRemaining(0),
     mAlignContent(aAlignContent)
 {
   MOZ_ASSERT(aFirstLine, "null first line pointer");
 
-  // 'auto' behaves as 'stretch'
-  if (mAlignContent == NS_STYLE_ALIGN_AUTO) {
-    mAlignContent = NS_STYLE_ALIGN_STRETCH;
-  }
-
-  // XXX strip of the <overflow-position> bit until we implement that
-  mAlignContent &= ~NS_STYLE_ALIGN_FLAG_BITS;
-
   if (aIsCrossSizeDefinite && !aFirstLine->getNext()) {
     // "If the flex container has only a single line (even if it's a
     // multi-line flex container) and has a definite cross size, the cross
     // size of the flex line is the flex container's inner cross size."
     // SOURCE: http://dev.w3.org/csswg/css-flexbox/#algo-line-break
     // NOTE: This means (by definition) that there's no packing space, which
     // means we don't need to be concerned with "align-conent" at all and we
     // can return early. This is handy, because this is the usual case (for
@@ -2654,45 +2620,30 @@ CrossAxisPositionTracker::
     if (mAlignContent == NS_STYLE_ALIGN_SPACE_BETWEEN ||
         mAlignContent == NS_STYLE_ALIGN_STRETCH) {
       mAlignContent = NS_STYLE_ALIGN_FLEX_START;
     } else if (mAlignContent == NS_STYLE_ALIGN_SPACE_AROUND) {
       mAlignContent = NS_STYLE_ALIGN_CENTER;
     }
   }
 
-  // Map 'start'/'end' to 'flex-start'/'flex-end'.
-  if (mAlignContent == NS_STYLE_ALIGN_START) {
-    mAlignContent = NS_STYLE_ALIGN_FLEX_START;
-  } else if (mAlignContent == NS_STYLE_ALIGN_END) {
-    mAlignContent = NS_STYLE_ALIGN_FLEX_END;
-  }
-
   // If our cross axis is (internally) reversed, swap the align-content
   // "flex-start" and "flex-end" behaviors:
   if (aAxisTracker.AreAxesInternallyReversed()) {
     if (mAlignContent == NS_STYLE_ALIGN_FLEX_START) {
       mAlignContent = NS_STYLE_ALIGN_FLEX_END;
     } else if (mAlignContent == NS_STYLE_ALIGN_FLEX_END) {
       mAlignContent = NS_STYLE_ALIGN_FLEX_START;
     }
   }
 
   // Figure out how much space we'll set aside for packing spaces, and advance
   // past any leading packing-space.
   if (mPackingSpaceRemaining != 0) {
     switch (mAlignContent) {
-      case NS_STYLE_JUSTIFY_LEFT:
-      case NS_STYLE_JUSTIFY_RIGHT:
-      case NS_STYLE_ALIGN_SELF_START:
-      case NS_STYLE_ALIGN_SELF_END:
-      case NS_STYLE_ALIGN_SPACE_EVENLY:
-      case NS_STYLE_ALIGN_BASELINE:
-      case NS_STYLE_ALIGN_LAST_BASELINE:
-        NS_WARNING("NYI: align-self:left/right/self-start/self-end/space-evenly/baseline/last-baseline");
       case NS_STYLE_ALIGN_FLEX_START:
         // All packing space should go at the end --> nothing to do here.
         break;
       case NS_STYLE_ALIGN_FLEX_END:
         // All packing space goes at the beginning
         mPosition += mPackingSpaceRemaining;
         break;
       case NS_STYLE_ALIGN_CENTER:
@@ -2945,40 +2896,27 @@ SingleLineCrossAxisPositionTracker::
 
   uint8_t alignSelf = aItem.GetAlignSelf();
   // NOTE: 'stretch' behaves like 'flex-start' once we've stretched any
   // auto-sized items (which we've already done).
   if (alignSelf == NS_STYLE_ALIGN_STRETCH) {
     alignSelf = NS_STYLE_ALIGN_FLEX_START;
   }
 
-  // Map 'start'/'end' to 'flex-start'/'flex-end'.
-  if (alignSelf == NS_STYLE_ALIGN_START) {
-    alignSelf = NS_STYLE_ALIGN_FLEX_START;
-  } else if (alignSelf == NS_STYLE_ALIGN_END) {
-    alignSelf = NS_STYLE_ALIGN_FLEX_END;
-  }
-
   // If our cross axis is (internally) reversed, swap the align-self
   // "flex-start" and "flex-end" behaviors:
   if (aAxisTracker.AreAxesInternallyReversed()) {
     if (alignSelf == NS_STYLE_ALIGN_FLEX_START) {
       alignSelf = NS_STYLE_ALIGN_FLEX_END;
     } else if (alignSelf == NS_STYLE_ALIGN_FLEX_END) {
       alignSelf = NS_STYLE_ALIGN_FLEX_START;
     }
   }
 
   switch (alignSelf) {
-    case NS_STYLE_JUSTIFY_LEFT:
-    case NS_STYLE_JUSTIFY_RIGHT:
-    case NS_STYLE_ALIGN_SELF_START:
-    case NS_STYLE_ALIGN_SELF_END:
-    case NS_STYLE_ALIGN_LAST_BASELINE:
-      NS_WARNING("NYI: align-self:left/right/self-start/self-end/last-baseline");
     case NS_STYLE_ALIGN_FLEX_START:
       // No space to skip over -- we're done.
       break;
     case NS_STYLE_ALIGN_FLEX_END:
       mPosition += aLine.GetLineCrossSize() - aItem.GetOuterCrossSize(mAxis);
       break;
     case NS_STYLE_ALIGN_CENTER:
       // Note: If cross-size is odd, the "after" space will get the extra unit.
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -4295,19 +4295,16 @@ nsFrame::ComputeSize(nsRenderingContext 
                      WritingMode aWM,
                      const LogicalSize& aCBSize,
                      nscoord aAvailableISize,
                      const LogicalSize& aMargin,
                      const LogicalSize& aBorder,
                      const LogicalSize& aPadding,
                      ComputeSizeFlags aFlags)
 {
-  MOZ_ASSERT(GetIntrinsicRatio() == nsSize(0,0),
-             "Please override this method and call "
-             "nsLayoutUtils::ComputeSizeWithIntrinsicDimensions instead.");
   LogicalSize result = ComputeAutoSize(aRenderingContext, aWM,
                                        aCBSize, aAvailableISize,
                                        aMargin, aBorder, aPadding,
                                        aFlags & ComputeSizeFlags::eShrinkWrap);
   LogicalSize boxSizingAdjust(aWM);
   const nsStylePosition *stylePos = StylePosition();
 
   switch (stylePos->mBoxSizing) {
@@ -4319,22 +4316,19 @@ nsFrame::ComputeSize(nsRenderingContext 
   }
   nscoord boxSizingToMarginEdgeISize =
     aMargin.ISize(aWM) + aBorder.ISize(aWM) + aPadding.ISize(aWM) -
     boxSizingAdjust.ISize(aWM);
 
   const nsStyleCoord* inlineStyleCoord = &stylePos->ISize(aWM);
   const nsStyleCoord* blockStyleCoord = &stylePos->BSize(aWM);
 
-  nsIAtom* parentFrameType = GetParent() ? GetParent()->GetType() : nullptr;
-  bool isGridItem = (parentFrameType == nsGkAtoms::gridContainerFrame &&
-                     !(GetStateBits() & NS_FRAME_OUT_OF_FLOW));
-  bool isFlexItem = (parentFrameType == nsGkAtoms::flexContainerFrame &&
-                     !(GetStateBits() & NS_FRAME_OUT_OF_FLOW));
+  bool isFlexItem = IsFlexItem();
   bool isInlineFlexItem = false;
+ 
   if (isFlexItem) {
     // Flex items use their "flex-basis" property in place of their main-size
     // property (e.g. "width") for sizing purposes, *unless* they have
     // "flex-basis:auto", in which case they use their main-size property after
     // all.
     uint32_t flexDirection = GetParent()->StylePosition()->mFlexDirection;
     isInlineFlexItem =
       flexDirection == NS_STYLE_FLEX_DIRECTION_ROW ||
@@ -4366,45 +4360,39 @@ nsFrame::ComputeSize(nsRenderingContext 
 
   if (inlineStyleCoord->GetUnit() != eStyleUnit_Auto) {
     result.ISize(aWM) =
       nsLayoutUtils::ComputeISizeValue(aRenderingContext, this,
         aCBSize.ISize(aWM), boxSizingAdjust.ISize(aWM), boxSizingToMarginEdgeISize,
         *inlineStyleCoord);
   }
 
+  const nsStyleCoord& maxISizeCoord = stylePos->MaxISize(aWM);
+
   // Flex items ignore their min & max sizing properties in their
   // flex container's main-axis.  (Those properties get applied later in
   // the flexbox algorithm.)
-  const nsStyleCoord& maxISizeCoord = stylePos->MaxISize(aWM);
-  nscoord maxISize = NS_UNCONSTRAINEDSIZE;
   if (maxISizeCoord.GetUnit() != eStyleUnit_None &&
       !(isFlexItem && isInlineFlexItem)) {
-    maxISize =
+    nscoord maxISize =
       nsLayoutUtils::ComputeISizeValue(aRenderingContext, this,
         aCBSize.ISize(aWM), boxSizingAdjust.ISize(aWM), boxSizingToMarginEdgeISize,
         maxISizeCoord);
     result.ISize(aWM) = std::min(maxISize, result.ISize(aWM));
   }
 
   const nsStyleCoord& minISizeCoord = stylePos->MinISize(aWM);
+
   nscoord minISize;
   if (minISizeCoord.GetUnit() != eStyleUnit_Auto &&
       !(isFlexItem && isInlineFlexItem)) {
     minISize =
       nsLayoutUtils::ComputeISizeValue(aRenderingContext, this,
         aCBSize.ISize(aWM), boxSizingAdjust.ISize(aWM), boxSizingToMarginEdgeISize,
         minISizeCoord);
-  } else if (MOZ_UNLIKELY(isGridItem)) {
-    // This implements "Implied Minimum Size of Grid Items".
-    // https://drafts.csswg.org/css-grid/#min-size-auto
-    minISize = std::min(maxISize, GetMinISize(aRenderingContext));
-    if (inlineStyleCoord->IsCoordPercentCalcUnit()) {
-      minISize = std::min(minISize, result.ISize(aWM));
-    }
   } else {
     // Treat "min-width: auto" as 0.
     // NOTE: Technically, "auto" is supposed to behave like "min-content" on
     // flex items. However, we don't need to worry about that here, because
     // flex items' min-sizes are intentionally ignored until the flex
     // container explicitly considers them during space distribution.
     minISize = 0;
   }
--- a/layout/generic/nsGridContainerFrame.cpp
+++ b/layout/generic/nsGridContainerFrame.cpp
@@ -582,24 +582,16 @@ struct MOZ_STACK_CLASS nsGridContainerFr
    */
   void CalculateSizes(GridReflowState&            aState,
                       nsTArray<GridItemInfo>&     aGridItems,
                       const TrackSizingFunctions& aFunctions,
                       nscoord                     aContentSize,
                       LineRange GridArea::*       aRange,
                       IntrinsicISizeType          aConstraint);
 
-  /**
-   * Apply 'align/justify-content', whichever is relevant for this axis.
-   * https://drafts.csswg.org/css-align-3/#propdef-align-content
-   */
-  void AlignJustifyContent(const nsHTMLReflowState& aReflowState,
-                           const LogicalSize& aContainerSize);
-
-
 #ifdef DEBUG
   void Dump() const
   {
     for (uint32_t i = 0, len = mSizes.Length(); i < len; ++i) {
       printf("  %d: ", i);
       mSizes[i].Dump();
       printf("\n");
     }
@@ -803,28 +795,23 @@ static bool
 IsNameWithStartSuffix(const nsString& aString, uint32_t* aIndex)
 {
   return IsNameWithSuffix(aString, NS_LITERAL_STRING("-start"), aIndex);
 }
 
 static nscoord
 GridLinePosition(uint32_t aLine, const nsTArray<TrackSize>& aTrackSizes)
 {
-  if (aTrackSizes.Length() == 0) {
-    // https://drafts.csswg.org/css-grid/#grid-definition
-    // "... the explicit grid still contains one grid line in each axis."
-    MOZ_ASSERT(aLine == 0, "We should only resolve line 1 in an empty grid");
-    return nscoord(0);
+  const uint32_t endIndex = aLine;
+  MOZ_ASSERT(endIndex <= aTrackSizes.Length(), "aTrackSizes is too small");
+  nscoord pos = 0;
+  for (uint32_t i = 0; i < endIndex; ++i) {
+    pos += aTrackSizes[i].mBase;
   }
-  MOZ_ASSERT(aLine <= aTrackSizes.Length(), "aTrackSizes is too small");
-  if (aLine == aTrackSizes.Length()) {
-    const TrackSize& sz = aTrackSizes[aLine - 1];
-    return sz.mPosition + sz.mBase;
-  }
-  return aTrackSizes[aLine].mPosition;
+  return pos;
 }
 
 /**
  * (XXX share this utility function with nsFlexContainerFrame at some point)
  *
  * Helper for BuildDisplayList, to implement this special-case for grid
  * items from the spec:
  *   The painting order of grid items is exactly the same as inline blocks,
@@ -837,298 +824,16 @@ 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);
-}
-
-static bool
-AlignJustifySelf(uint8_t aAlignment, bool aOverflowSafe, LogicalAxis aAxis,
-                 bool aSameSide, nscoord aCBSize, const nsHTMLReflowState& aRS,
-                 const LogicalSize& aChildSize, LogicalSize* aContentSize,
-                 LogicalPoint* aPos)
-{
-  MOZ_ASSERT(aAlignment != NS_STYLE_ALIGN_AUTO, "unexpected 'auto' "
-             "computed value for normal flow grid item");
-  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 = aRS.ComputedLogicalMargin();
-  WritingMode wm = aRS.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);
-    }
-  }
-
-  // https://drafts.csswg.org/css-align-3/#overflow-values
-  // This implements <overflow-position> = 'safe'.
-  if (MOZ_UNLIKELY(aOverflowSafe) && aAlignment != NS_STYLE_ALIGN_START) {
-    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) {
-      aAlignment = NS_STYLE_ALIGN_START;
-    }
-  }
-
-  // Set the position and size (aPos/aContentSize) for the requested alignment.
-  bool didResize = false;
-  nscoord offset = 0;
-  switch (aAlignment) {
-    case NS_STYLE_ALIGN_BASELINE:
-    case NS_STYLE_ALIGN_LAST_BASELINE:
-      NS_WARNING("NYI: baseline/last-baseline for grid (bug 1151204)"); // XXX
-    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:
-      offset = SpaceToFill(wm, aChildSize, marginStart + marginEnd,
-                           aAxis, aCBSize) / 2;
-      break;
-    case NS_STYLE_ALIGN_STRETCH: {
-      offset = marginStart;
-      const auto& styleMargin = aRS.mStyleMargin->mMargin;
-      if (aAxis == eLogicalAxisBlock
-             ? (aRS.mStylePosition->BSize(wm).GetUnit() == eStyleUnit_Auto &&
-                styleMargin.GetBStartUnit(wm) != eStyleUnit_Auto &&
-                styleMargin.GetBEndUnit(wm) != eStyleUnit_Auto)
-             : (aRS.mStylePosition->ISize(wm).GetUnit() == eStyleUnit_Auto &&
-                styleMargin.GetIStartUnit(wm) != eStyleUnit_Auto &&
-                styleMargin.GetIEndUnit(wm) != eStyleUnit_Auto)) {
-        nscoord size = aAxis == eLogicalAxisBlock ? aChildSize.BSize(wm)
-                                                  : aChildSize.ISize(wm);
-        nscoord gap = aCBSize - (size + marginStart + marginEnd);
-        if (gap > 0) {
-          // Note: The ComputedMax* values are always content-box max values,
-          // even for box-sizing:border-box.
-          LogicalMargin bp = aRS.ComputedLogicalBorderPadding();
-          // XXX ApplySkipSides is probably not very useful here since we
-          // might not have created any next-in-flow yet.  Use the reflow status
-          // instead?  Do all fragments stretch? (bug 1144096).
-          bp.ApplySkipSides(aRS.frame->GetLogicalSkipSides());
-          nscoord bpInAxis = aAxis == eLogicalAxisBlock ? bp.BStartEnd(wm)
-                                                        : bp.IStartEnd(wm);
-          nscoord contentSize = size - bpInAxis;
-          NS_ASSERTION(contentSize >= 0, "huh?");
-          const nscoord unstretchedContentSize = contentSize;
-          contentSize += gap;
-          nscoord max = aAxis == eLogicalAxisBlock ? aRS.ComputedMaxBSize()
-                                                   : aRS.ComputedMaxISize();
-          if (MOZ_UNLIKELY(contentSize > max)) {
-            contentSize = max;
-            gap = contentSize - unstretchedContentSize;
-          }
-          // |gap| is now how much the content size is actually allowed to grow.
-          didResize = gap > 0;
-          if (didResize) {
-            (aAxis == eLogicalAxisBlock ? aContentSize->BSize(wm)
-                                        : aContentSize->ISize(wm)) = contentSize;
-            if (MOZ_UNLIKELY(!aSameSide)) {
-              offset += gap;
-            }
-          }
-        }
-      }
-      break;
-    }
-    default:
-      MOZ_ASSERT_UNREACHABLE("unknown align-/justify-self value");
-  }
-  if (offset != 0) {
-    nscoord& pos = aAxis == eLogicalAxisBlock ? aPos->B(wm) : aPos->I(wm);
-    pos += MOZ_LIKELY(aSameSide) ? offset : -offset;
-  }
-  return didResize;
-}
-
-static bool
-SameSide(WritingMode aContainerWM, LogicalSide aContainerSide,
-         WritingMode aChildWM, LogicalSide aChildSide)
-{
-  MOZ_ASSERT(aContainerWM.PhysicalAxis(GetAxis(aContainerSide)) ==
-                 aChildWM.PhysicalAxis(GetAxis(aChildSide)));
-  return aContainerWM.PhysicalSide(aContainerSide) ==
-             aChildWM.PhysicalSide(aChildSide);
-}
-
-static Maybe<LogicalAxis>
-AlignSelf(uint8_t aAlignSelf, const LogicalRect& aCB, const WritingMode aCBWM,
-          const nsHTMLReflowState& aRS, const LogicalSize& aSize,
-          LogicalSize* aContentSize, LogicalPoint* aPos)
-{
-  Maybe<LogicalAxis> resizedAxis;
-  auto alignSelf = aAlignSelf;
-  bool overflowSafe = alignSelf & NS_STYLE_ALIGN_SAFE;
-  alignSelf &= ~NS_STYLE_ALIGN_FLAG_BITS;
-  MOZ_ASSERT(alignSelf != NS_STYLE_ALIGN_LEFT &&
-             alignSelf != NS_STYLE_ALIGN_RIGHT,
-             "Grid's 'align-self' axis is never parallel to the container's "
-             "inline axis, so these should've computed to 'start' already");
-  if (MOZ_UNLIKELY(alignSelf == NS_STYLE_ALIGN_AUTO)) {
-    // Happens in rare edge cases when 'position' was ignored by the frame
-    // constructor (and the style system computed 'auto' based on 'position').
-    alignSelf = NS_STYLE_ALIGN_STRETCH;
-  }
-  WritingMode childWM = aRS.GetWritingMode();
-  bool isOrthogonal = aCBWM.IsOrthogonalTo(childWM);
-  // |sameSide| is true if the container's start side in this axis is the same
-  // as the child's start side, in the child's parallel axis.
-  bool sameSide = SameSide(aCBWM, eLogicalSideBStart,
-                           childWM, isOrthogonal ? eLogicalSideIStart
-                                                 : eLogicalSideBStart);
-  LogicalAxis axis = isOrthogonal ? eLogicalAxisInline : eLogicalAxisBlock;
-  if (AlignJustifySelf(alignSelf, overflowSafe, axis, sameSide,
-                       aCB.BSize(aCBWM), aRS, aSize, aContentSize, aPos)) {
-    resizedAxis.emplace(axis);
-  }
-  return resizedAxis;
-}
-
-static Maybe<LogicalAxis>
-JustifySelf(uint8_t aJustifySelf, const LogicalRect& aCB, const WritingMode aCBWM,
-            const nsHTMLReflowState& aRS, const LogicalSize& aSize,
-            LogicalSize* aContentSize, LogicalPoint* aPos)
-{
-  Maybe<LogicalAxis> resizedAxis;
-  auto justifySelf = aJustifySelf;
-  bool overflowSafe = justifySelf & NS_STYLE_JUSTIFY_SAFE;
-  justifySelf &= ~NS_STYLE_JUSTIFY_FLAG_BITS;
-  if (MOZ_UNLIKELY(justifySelf == NS_STYLE_ALIGN_AUTO)) {
-    // Happens in rare edge cases when 'position' was ignored by the frame
-    // constructor (and the style system computed 'auto' based on 'position').
-    justifySelf = NS_STYLE_ALIGN_STRETCH;
-  }
-  WritingMode childWM = aRS.GetWritingMode();
-  bool isOrthogonal = aCBWM.IsOrthogonalTo(childWM);
-  // |sameSide| is true if the container's start side in this axis is the same
-  // as the child's start side, in the child's parallel axis.
-  bool sameSide = SameSide(aCBWM, eLogicalSideIStart,
-                           childWM, isOrthogonal ? eLogicalSideBStart
-                                                 : eLogicalSideIStart);
-  // Grid's 'justify-self' axis is always parallel to the container's inline
-  // axis, so justify-self:left|right always applies.
-  switch (justifySelf) {
-    case NS_STYLE_JUSTIFY_LEFT:
-      justifySelf = aCBWM.IsBidiLTR() ? NS_STYLE_JUSTIFY_START
-                                      : NS_STYLE_JUSTIFY_END;
-    break;
-    case NS_STYLE_JUSTIFY_RIGHT:
-      justifySelf = aCBWM.IsBidiLTR() ? NS_STYLE_JUSTIFY_END
-                                      : NS_STYLE_JUSTIFY_START;
-    break;
-  }
-
-  LogicalAxis axis = isOrthogonal ? eLogicalAxisBlock : eLogicalAxisInline;
-  if (AlignJustifySelf(justifySelf, overflowSafe, axis, sameSide,
-                       aCB.ISize(aCBWM), aRS, aSize, aContentSize, aPos)) {
-    resizedAxis.emplace(axis);
-  }
-  return resizedAxis;
-}
-
-static uint16_t
-GetAlignJustifyValue(uint16_t aAlignment, const WritingMode aWM,
-                     const bool aIsAlign, bool* aOverflowSafe)
-{
-  *aOverflowSafe = aAlignment & NS_STYLE_ALIGN_SAFE;
-  aAlignment &= (NS_STYLE_ALIGN_ALL_BITS & ~NS_STYLE_ALIGN_FLAG_BITS);
-
-  // Map some alignment values to 'start' / 'end'.
-  switch (aAlignment) {
-    case NS_STYLE_ALIGN_LEFT:
-    case NS_STYLE_ALIGN_RIGHT: {
-      MOZ_ASSERT(!aIsAlign, "Grid container's 'align-contents' axis is never "
-                 "parallel to its inline axis, so these should've computed to "
-                 "'start' already");
-      bool isStart = aWM.IsBidiLTR() == (aAlignment == NS_STYLE_ALIGN_LEFT);
-      return isStart ? NS_STYLE_ALIGN_START : NS_STYLE_ALIGN_END;
-    }
-    case NS_STYLE_ALIGN_FLEX_START: // same as 'start' for Grid
-      return NS_STYLE_ALIGN_START;
-    case NS_STYLE_ALIGN_FLEX_END: // same as 'end' for Grid
-      return NS_STYLE_ALIGN_END;
-  }
-  return aAlignment;
-}
-
-static uint16_t
-GetAlignJustifyFallbackIfAny(uint16_t aAlignment, const WritingMode aWM,
-                             const bool aIsAlign, bool* aOverflowSafe)
-{
-  uint16_t fallback = aAlignment >> NS_STYLE_ALIGN_ALL_SHIFT;
-  if (fallback) {
-    return GetAlignJustifyValue(fallback, aWM, aIsAlign, aOverflowSafe);
-  }
-  // https://drafts.csswg.org/css-align-3/#fallback-alignment
-  switch (aAlignment) {
-    case NS_STYLE_ALIGN_STRETCH:
-    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;
-  }
-  return 0;
-}
-
 //----------------------------------------------------------------------
 
 // Frame class boilerplate
 // =======================
 
 NS_QUERYFRAME_HEAD(nsGridContainerFrame)
   NS_QUERYFRAME_ENTRY(nsGridContainerFrame)
 NS_QUERYFRAME_TAIL_INHERITING(nsContainerFrame)
@@ -1160,32 +865,43 @@ nsGridContainerFrame::GridItemCB(nsIFram
   return *cb;
 }
 
 void
 nsGridContainerFrame::AddImplicitNamedAreas(
   const nsTArray<nsTArray<nsString>>& aLineNameLists)
 {
   // http://dev.w3.org/csswg/css-grid/#implicit-named-areas
-  // Note: recording these names for fast lookup later is just an optimization.
+  // XXX this just checks x-start .. x-end in one dimension and there's
+  // no other error checking.  A few wrong cases (maybe):
+  // (x-start x-end)
+  // (x-start) 0 (x-start) 0 (x-end)
+  // (x-end) 0 (x-start) 0 (x-end)
+  // (x-start) 0 (x-end) 0 (x-start) 0 (x-end)
   const uint32_t len =
     std::min(aLineNameLists.Length(), size_t(nsStyleGridLine::kMaxLine));
   nsTHashtable<nsStringHashKey> currentStarts;
   ImplicitNamedAreas* areas = GetImplicitNamedAreas();
   for (uint32_t i = 0; i < len; ++i) {
-    for (const nsString& name : aLineNameLists[i]) {
+    const nsTArray<nsString>& names(aLineNameLists[i]);
+    const uint32_t jLen = names.Length();
+    for (uint32_t j = 0; j < jLen; ++j) {
+      const nsString& name = names[j];
       uint32_t index;
-      if (::IsNameWithStartSuffix(name, &index) ||
-          ::IsNameWithEndSuffix(name, &index)) {
+      if (::IsNameWithStartSuffix(name, &index)) {
+        currentStarts.PutEntry(nsDependentSubstring(name, 0, index));
+      } else if (::IsNameWithEndSuffix(name, &index)) {
         nsDependentSubstring area(name, 0, index);
-        if (!areas) {
-          areas = new ImplicitNamedAreas;
-          Properties().Set(ImplicitNamedAreasProperty(), areas);
+        if (currentStarts.Contains(area)) {
+          if (!areas) {
+            areas = new ImplicitNamedAreas;
+            Properties().Set(ImplicitNamedAreasProperty(), areas);
+          }
+          areas->PutEntry(area);
         }
-        areas->PutEntry(area);
       }
     }
   }
 }
 
 void
 nsGridContainerFrame::InitImplicitNamedAreas(const nsStylePosition* aStyle)
 {
@@ -1235,16 +951,18 @@ nsGridContainerFrame::ResolveLine(
         nsAutoString lineName(aLine.mLineName);
         if (aSide == eLineRangeSideStart) {
           lineName.AppendLiteral("-start");
           implicitLine = area ? area->*aAreaStart : 0;
         } else {
           lineName.AppendLiteral("-end");
           implicitLine = area ? area->*aAreaEnd : 0;
         }
+        // XXX must Implicit Named Areas have all four lines?
+        // http://dev.w3.org/csswg/css-grid/#implicit-named-areas
         line = ::FindNamedLine(lineName, &aNth, aFromIndex, implicitLine,
                                aLineNameList);
       }
     }
 
     if (line == 0) {
       // If mLineName ends in -start/-end, try the prefix as a named area.
       uint32_t implicitLine = 0;
@@ -1307,18 +1025,17 @@ nsGridContainerFrame::ResolveLineRangeHe
         // span <integer> / auto
         return LinePair(kAutoLine, aStart.mInteger);
       }
       // span <custom-ident> / span *
       // span <custom-ident> / auto
       return LinePair(kAutoLine, 1); // XXX subgrid explicit size instead of 1?
     }
 
-    uint32_t from = aEnd.mInteger < 0 ? aExplicitGridEnd : 0;
-    auto end = ResolveLine(aEnd, aEnd.mInteger, from, aLineNameList, aAreaStart,
+    auto end = ResolveLine(aEnd, aEnd.mInteger, 0, aLineNameList, aAreaStart,
                            aAreaEnd, aExplicitGridEnd, eLineRangeSideEnd,
                            aStyle);
     int32_t span = aStart.mInteger == 0 ? 1 : aStart.mInteger;
     if (end <= 1) {
       // The end is at or before the first explicit line, thus all lines before
       // it match <custom-ident> since they're implicit.
       int32_t start = std::max(end - span, nsStyleGridLine::kMinLine);
       return LinePair(start, end);
@@ -1341,46 +1058,43 @@ nsGridContainerFrame::ResolveLineRangeHe
         MOZ_ASSERT(aEnd.mInteger != 0);
         return LinePair(start, aEnd.mInteger);
       }
       // http://dev.w3.org/csswg/css-grid/#grid-placement-errors
       // auto / span <custom-ident>
       return LinePair(start, 1); // XXX subgrid explicit size instead of 1?
     }
   } else {
-    uint32_t from = aStart.mInteger < 0 ? aExplicitGridEnd : 0;
-    start = ResolveLine(aStart, aStart.mInteger, from, aLineNameList,
-                        aAreaStart, aAreaEnd, aExplicitGridEnd,
-                        eLineRangeSideStart, aStyle);
+    start = ResolveLine(aStart, aStart.mInteger, 0, aLineNameList, aAreaStart,
+                        aAreaEnd, aExplicitGridEnd, eLineRangeSideStart,
+                        aStyle);
     if (aEnd.IsAuto()) {
       // A "definite line / auto" should resolve the auto to 'span 1'.
       // The error handling in ResolveLineRange will make that happen and also
       // clamp the end line correctly if we return "start / start".
       return LinePair(start, start);
     }
   }
 
-  uint32_t from;
+  uint32_t from = 0;
   int32_t nth = aEnd.mInteger == 0 ? 1 : aEnd.mInteger;
   if (aEnd.mHasSpan) {
     if (MOZ_UNLIKELY(start < 0)) {
       if (aEnd.mLineName.IsEmpty()) {
         return LinePair(start, start + nth);
       }
-      from = 0;
+      // Fall through and start searching from the start of the grid (from=0).
     } else {
       if (start >= int32_t(aExplicitGridEnd)) {
         // The start is at or after the last explicit line, thus all lines
         // after it match <custom-ident> since they're implicit.
         return LinePair(start, std::min(start + nth, nsStyleGridLine::kMaxLine));
       }
       from = start;
     }
-  } else {
-    from = aEnd.mInteger < 0 ? aExplicitGridEnd : 0;
   }
   auto end = ResolveLine(aEnd, nth, from, aLineNameList, aAreaStart,
                          aAreaEnd, aExplicitGridEnd, eLineRangeSideEnd, aStyle);
   if (start == int32_t(kAutoLine)) {
     // auto / definite line
     start = std::max(nsStyleGridLine::kMinLine, end - 1);
   }
   return LinePair(start, end);
@@ -1400,26 +1114,22 @@ nsGridContainerFrame::ResolveLineRange(
                                       aAreaEnd, aExplicitGridEnd, aStyle);
   MOZ_ASSERT(r.second != int32_t(kAutoLine));
 
   if (r.first == int32_t(kAutoLine)) {
     // r.second is a span, clamp it to kMaxLine - 1 so that the returned
     // range has a HypotheticalEnd <= kMaxLine.
     // http://dev.w3.org/csswg/css-grid/#overlarge-grids
     r.second = std::min(r.second, nsStyleGridLine::kMaxLine - 1);
-  } else {
+  } else if (r.second <= r.first) {
     // http://dev.w3.org/csswg/css-grid/#grid-placement-errors
-    if (r.first > r.second) {
-      Swap(r.first, r.second);
-    } else if (r.first == r.second) {
-      if (MOZ_UNLIKELY(r.first == nsStyleGridLine::kMaxLine)) {
-        r.first = nsStyleGridLine::kMaxLine - 1;
-      }
-      r.second = r.first + 1; // XXX subgrid explicit size instead of 1?
+    if (MOZ_UNLIKELY(r.first == nsStyleGridLine::kMaxLine)) {
+      r.first = nsStyleGridLine::kMaxLine - 1;
     }
+    r.second = r.first + 1; // XXX subgrid explicit size instead of 1?
   }
   return LineRange(r.first, r.second);
 }
 
 nsGridContainerFrame::GridArea
 nsGridContainerFrame::PlaceDefinite(nsIFrame* aChild,
                                     const nsStylePosition* aStyle)
 {
@@ -1933,32 +1643,40 @@ nsGridContainerFrame::Tracks::Initialize
   i += j;
   for (; i < mSizes.Length(); ++i) {
     mSizes[i].Initialize(percentageBasis,
                          aFunctions.mAutoMinSizing,
                          aFunctions.mAutoMaxSizing);
   }
 }
 
+static nscoord
+MinSize(nsIFrame* aChild, nsRenderingContext* aRC, WritingMode aCBWM,
+        LogicalAxis aAxis, nsLayoutUtils::IntrinsicISizeType aConstraint)
+{
+  PhysicalAxis axis(aCBWM.PhysicalAxis(aAxis));
+  return nsLayoutUtils::MinSizeContributionForAxis(axis, aRC, aChild,
+                                                   aConstraint);
+}
+
 /**
  * Return the [min|max]-content contribution of aChild to its parent (i.e.
  * the child's margin-box) in aAxis.
  */
 static nscoord
 ContentContribution(nsIFrame*                         aChild,
                     const nsHTMLReflowState*          aReflowState,
                     nsRenderingContext*               aRC,
                     WritingMode                       aCBWM,
                     LogicalAxis                       aAxis,
-                    nsLayoutUtils::IntrinsicISizeType aConstraint,
-                    uint32_t                          aFlags = 0)
+                    nsLayoutUtils::IntrinsicISizeType aConstraint)
 {
   PhysicalAxis axis(aCBWM.PhysicalAxis(aAxis));
   nscoord size = nsLayoutUtils::IntrinsicForAxis(axis, aRC, aChild, aConstraint,
-                   aFlags | nsLayoutUtils::BAIL_IF_REFLOW_NEEDED);
+                   nsLayoutUtils::BAIL_IF_REFLOW_NEEDED);
   if (size == NS_INTRINSIC_WIDTH_UNKNOWN) {
     // We need to reflow the child to find its BSize contribution.
     WritingMode wm = aChild->GetWritingMode();
     nsContainerFrame* parent = aChild->GetParent();
     nsPresContext* pc = aChild->PresContext();
     Maybe<nsHTMLReflowState> dummyParentState;
     const nsHTMLReflowState* rs = aReflowState;
     if (!aReflowState) {
@@ -2012,49 +1730,16 @@ MaxContentContribution(nsIFrame*        
                        nsRenderingContext*      aRC,
                        WritingMode              aCBWM,
                        LogicalAxis              aAxis)
 {
   return ContentContribution(aChild, aRS, aRC, aCBWM, aAxis,
                              nsLayoutUtils::PREF_ISIZE);
 }
 
-static nscoord
-MinSize(nsIFrame*                aChild,
-        const nsHTMLReflowState* aRS,
-        nsRenderingContext*      aRC,
-        WritingMode              aCBWM,
-        LogicalAxis              aAxis)
-{
-  PhysicalAxis axis(aCBWM.PhysicalAxis(aAxis));
-  const nsStylePosition* stylePos = aChild->StylePosition();
-  const nsStyleCoord& style = axis == eAxisHorizontal ? stylePos->mMinWidth
-                                                      : stylePos->mMinHeight;
-  // https://drafts.csswg.org/css-grid/#min-size-auto
-  // This calculates the min-content contribution from either a definite
-  // min-width (or min-height depending on aAxis), or the "specified /
-  // transferred size" for min-width:auto if overflow == visible (as min-width:0
-  // otherwise), or NS_UNCONSTRAINEDSIZE for other min-width intrinsic values
-  // (which results in always taking the "content size" part below).
-  nscoord sz =
-    nsLayoutUtils::MinSizeContributionForAxis(axis, aRC, aChild,
-                                              nsLayoutUtils::MIN_ISIZE);
-  auto unit = style.GetUnit();
-  if (unit == eStyleUnit_Enumerated ||
-      (unit == eStyleUnit_Auto &&
-       aChild->StyleDisplay()->mOverflowX == NS_STYLE_OVERFLOW_VISIBLE)) {
-    // Now calculate the "content size" part and return whichever is smaller.
-    MOZ_ASSERT(unit != eStyleUnit_Enumerated || sz == NS_UNCONSTRAINEDSIZE);
-    sz = std::min(sz, ContentContribution(aChild, aRS, aRC, aCBWM, aAxis,
-                                          nsLayoutUtils::MIN_ISIZE,
-                                          nsLayoutUtils::MIN_INTRINSIC_ISIZE));
-  }
-  return sz;
-}
-
 void
 nsGridContainerFrame::Tracks::CalculateSizes(
   GridReflowState&            aState,
   nsTArray<GridItemInfo>&     aGridItems,
   const TrackSizingFunctions& aFunctions,
   nscoord                     aContentBoxSize,
   LineRange GridArea::*       aRange,
   IntrinsicISizeType          aConstraint)
@@ -2132,17 +1817,17 @@ nsGridContainerFrame::Tracks::ResolveInt
   Maybe<nscoord> minContentContribution;
   Maybe<nscoord> maxContentContribution;
   // min sizing
   TrackSize& sz = mSizes[aRange.mStart];
   WritingMode wm = aState.mWM;
   const nsHTMLReflowState* rs = aState.mReflowState;
   nsRenderingContext* rc = &aState.mRenderingContext;
   if (sz.mState & TrackSize::eAutoMinSizing) {
-    nscoord s = MinSize(aGridItem, rs, rc, wm, mAxis);
+    nscoord s = MinSize(aGridItem, rc, wm, mAxis, aConstraint);
     sz.mBase = std::max(sz.mBase, s);
   } else if ((sz.mState & TrackSize::eMinContentMinSizing) ||
              (aConstraint == nsLayoutUtils::MIN_ISIZE &&
               (sz.mState & TrackSize::eFlexMinSizing))) {
     nscoord s = MinContentContribution(aGridItem, rs, rc, wm, mAxis);
     minContentContribution.emplace(s);
     sz.mBase = std::max(sz.mBase, minContentContribution.value());
   } else if (sz.mState & TrackSize::eMaxContentMinSizing) {
@@ -2237,17 +1922,17 @@ nsGridContainerFrame::Tracks::ResolveInt
           stateBitsPerSpan.SetCapacity(len);
           for (uint32_t i = stateBitsPerSpan.Length(); i < len; ++i) {
             stateBitsPerSpan.AppendElement(TrackSize::StateBits(0));
           }
         }
         stateBitsPerSpan[span] |= state;
         nscoord minSize = 0;
         if (state & (flexMin | TrackSize::eIntrinsicMinSizing)) { // for 2.1
-          minSize = MinSize(child, aState.mReflowState, rc, wm, mAxis);
+          minSize = MinSize(child, rc, wm, mAxis, aConstraint);
         }
         nscoord minContent = 0;
         if (state & (flexMin | TrackSize::eMinOrMaxContentMinSizing | // for 2.2
                      TrackSize::eIntrinsicMaxSizing)) {               // for 2.5
           minContent = MinContentContribution(child, aState.mReflowState,
                                               rc, wm, mAxis);
         }
         nscoord maxContent = 0;
@@ -2566,176 +2251,51 @@ nsGridContainerFrame::Tracks::StretchFle
       if (flexLength > base) {
         base = flexLength;
       }
     }
   }
 }
 
 void
-nsGridContainerFrame::Tracks::AlignJustifyContent(
-  const nsHTMLReflowState& aReflowState,
-  const LogicalSize&     aContainerSize)
-{
-  if (mSizes.IsEmpty()) {
-    return;
-  }
-
-  const bool isAlign = mAxis == eLogicalAxisBlock;
-  auto stylePos = aReflowState.mStylePosition;
-  const auto valueAndFallback = isAlign ?
-    stylePos->ComputedAlignContent(aReflowState.mStyleDisplay) :
-    stylePos->ComputedJustifyContent(aReflowState.mStyleDisplay);
-  WritingMode wm = aReflowState.GetWritingMode();
-  bool overflowSafe;
-  auto alignment = ::GetAlignJustifyValue(valueAndFallback, wm, isAlign,
-                                          &overflowSafe);
-  if (alignment == NS_STYLE_ALIGN_AUTO) {
-    alignment = NS_STYLE_ALIGN_START;
-  }
-
-  // Compute the free space and count auto-sized tracks.
-  size_t numAutoTracks = 0;
-  nscoord space;
-  if (alignment != NS_STYLE_ALIGN_START) {
-    nscoord trackSizeSum = 0;
-    for (const TrackSize& sz : mSizes) {
-      trackSizeSum += sz.mBase;
-      if (sz.mState & TrackSize::eAutoMaxSizing) {
-        ++numAutoTracks;
-      }
-    }
-    nscoord cbSize = isAlign ? aContainerSize.BSize(wm)
-                             : aContainerSize.ISize(wm);
-    space = cbSize - trackSizeSum;
-    // Use the fallback value instead when applicable.
-    if (space < 0 ||
-        (alignment == NS_STYLE_ALIGN_SPACE_BETWEEN && mSizes.Length() == 1)) {
-      auto fallback = ::GetAlignJustifyFallbackIfAny(valueAndFallback, wm,
-                                                     isAlign, &overflowSafe);
-      if (fallback) {
-        alignment = fallback;
-      }
-    }
-    if (space == 0 || (space < 0 && overflowSafe)) {
-      // XXX check that this makes sense also for [last-]baseline (bug 1151204).
-      alignment = NS_STYLE_ALIGN_START;
-    }
-  }
-
-  // Optimize the cases where we just need to set each track's position.
-  nscoord pos = 0;
-  bool distribute = true;
-  switch (alignment) {
-    case NS_STYLE_ALIGN_BASELINE:
-    case NS_STYLE_ALIGN_LAST_BASELINE:
-      NS_WARNING("'NYI: baseline/last-baseline' (bug 1151204)"); // XXX
-    case NS_STYLE_ALIGN_START:
-      distribute = false;
-      break;
-    case NS_STYLE_ALIGN_END:
-      pos = space;
-      distribute = false;
-      break;
-    case NS_STYLE_ALIGN_CENTER:
-      pos = space / 2;
-      distribute = false;
-      break;
-    case NS_STYLE_ALIGN_STRETCH:
-      distribute = numAutoTracks != 0;
-      break;
-  }
-  if (!distribute) {
-    for (TrackSize& sz : mSizes) {
-      sz.mPosition = pos;
-      pos += sz.mBase;
-    }
-    return;
-  }
-
-  // Distribute free space to/between tracks and set their position.
-  MOZ_ASSERT(space > 0, "should've handled that on the fallback path above");
-  nscoord between, roundingError;
-  switch (alignment) {
-    case NS_STYLE_ALIGN_STRETCH: {
-      MOZ_ASSERT(numAutoTracks > 0, "we handled numAutoTracks == 0 above");
-      nscoord spacePerTrack;
-      roundingError = NSCoordDivRem(space, numAutoTracks, &spacePerTrack);
-      for (TrackSize& sz : mSizes) {
-#ifdef DEBUG
-        space += sz.mBase; // for the assert below: space + all mBase == pos
-#endif
-        sz.mPosition = pos;
-        if (!(sz.mState & TrackSize::eAutoMaxSizing)) {
-          pos += sz.mBase;
-          continue;
-        }
-        nscoord stretch = spacePerTrack;
-        if (roundingError) {
-          roundingError -= 1;
-          stretch += 1;
-        }
-        nscoord newBase = sz.mBase + stretch;
-        sz.mBase = newBase;
-        pos += newBase;
-      }
-      MOZ_ASSERT(pos == space && !roundingError,
-                 "we didn't distribute all space?");
-      return;
-    }
-    case NS_STYLE_ALIGN_SPACE_BETWEEN:
-      MOZ_ASSERT(mSizes.Length() > 1, "should've used a fallback above");
-      roundingError = NSCoordDivRem(space, mSizes.Length() - 1, &between);
-      break;
-    case NS_STYLE_ALIGN_SPACE_AROUND:
-      roundingError = NSCoordDivRem(space, mSizes.Length(), &between);
-      pos = between / 2;
-      break;
-    case NS_STYLE_ALIGN_SPACE_EVENLY:
-      roundingError = NSCoordDivRem(space, mSizes.Length() + 1, &between);
-      pos = between;
-      break;
-    default:
-      MOZ_ASSERT_UNREACHABLE("unknown align-/justify-content value");
-  }
-  for (TrackSize& sz : mSizes) {
-    sz.mPosition = pos;
-    nscoord spacing = between;
-    if (roundingError) {
-      roundingError -= 1;
-      spacing += 1;
-    }
-    pos += sz.mBase + spacing;
-  }
-  MOZ_ASSERT(!roundingError, "we didn't distribute all space?");
-}
-
-void
 nsGridContainerFrame::LineRange::ToPositionAndLength(
   const nsTArray<TrackSize>& aTrackSizes, nscoord* aPos, nscoord* aLength) const
 {
   MOZ_ASSERT(mStart != kAutoLine && mEnd != kAutoLine,
              "expected a definite LineRange");
-  MOZ_ASSERT(mStart < mEnd);
-  nscoord startPos = aTrackSizes[mStart].mPosition;
-  const TrackSize& sz = aTrackSizes[mEnd - 1];
-  *aPos = startPos;
-  *aLength = (sz.mPosition + sz.mBase) - startPos;
+  nscoord pos = 0;
+  const uint32_t start = mStart;
+  uint32_t i = 0;
+  for (; i < start; ++i) {
+    pos += aTrackSizes[i].mBase;
+  }
+  *aPos = pos;
+
+  nscoord length = 0;
+  const uint32_t end = mEnd;
+  MOZ_ASSERT(end <= aTrackSizes.Length(), "aTrackSizes isn't large enough");
+  for (; i < end; ++i) {
+    length += aTrackSizes[i].mBase;
+  }
+  *aLength = length;
 }
 
 nscoord
 nsGridContainerFrame::LineRange::ToLength(
   const nsTArray<TrackSize>& aTrackSizes) const
 {
   MOZ_ASSERT(mStart != kAutoLine && mEnd != kAutoLine,
              "expected a definite LineRange");
-  MOZ_ASSERT(mStart < mEnd);
-  nscoord startPos = aTrackSizes[mStart].mPosition;
-  const TrackSize& sz = aTrackSizes[mEnd - 1];
-  return (sz.mPosition + sz.mBase) - startPos;
+  nscoord length = 0;
+  const uint32_t end = mEnd;
+  MOZ_ASSERT(end <= aTrackSizes.Length(), "aTrackSizes isn't large enough");
+  for (uint32_t i = mStart; i < end; ++i) {
+    length += aTrackSizes[i].mBase;
+  }
+  return length;
 }
 
 void
 nsGridContainerFrame::LineRange::ToPositionAndLengthForAbsPos(
   const nsTArray<TrackSize>& aTrackSizes, nscoord aGridOrigin,
   nscoord* aPos, nscoord* aLength) const
 {
   // kAutoLine for abspos children contributes the corresponding edge
@@ -2802,91 +2362,62 @@ nsGridContainerFrame::ReflowChildren(Gri
   MOZ_ASSERT(aState.mReflowState);
 
   WritingMode wm = aState.mReflowState->GetWritingMode();
   const LogicalPoint gridOrigin(aContentArea.Origin(wm));
   const nsSize containerSize =
     (aContentArea.Size(wm) +
      aState.mReflowState->ComputedLogicalBorderPadding().Size(wm)).GetPhysicalSize(wm);
   nsPresContext* pc = PresContext();
-  nsStyleContext* containerSC = StyleContext();
   for (; !aState.mIter.AtEnd(); aState.mIter.Next()) {
     nsIFrame* child = *aState.mIter;
     const bool isGridItem = child->GetType() != nsGkAtoms::placeholderFrame;
     LogicalRect cb(wm);
     if (MOZ_LIKELY(isGridItem)) {
       MOZ_ASSERT(mGridItems[aState.mIter.GridItemIndex()].mFrame == child,
                  "iterator out of sync with mGridItems");
       GridArea& area = mGridItems[aState.mIter.GridItemIndex()].mArea;
       MOZ_ASSERT(area.IsDefinite());
       cb = ContainingBlockFor(aState, area);
       cb += gridOrigin;
     } else {
       cb = aContentArea;
     }
     WritingMode childWM = child->GetWritingMode();
     LogicalSize childCBSize = cb.Size(wm).ConvertTo(childWM, wm);
-    LogicalSize percentBasis(childCBSize);
-    // XXX temporary workaround to avoid being INCOMPLETE until we have
-    // support for fragmentation (bug 1144096)
-    childCBSize.BSize(childWM) = NS_UNCONSTRAINEDSIZE;
-
-    Maybe<nsHTMLReflowState> childRS; // Maybe<> so we can reuse the space
-    childRS.emplace(pc, *aState.mReflowState, child, childCBSize, &percentBasis);
+    nsHTMLReflowState childRS(pc, *aState.mReflowState, child, childCBSize);
+    const LogicalMargin margin = childRS.ComputedLogicalMargin();
+    if (childRS.ComputedBSize() == NS_AUTOHEIGHT && MOZ_LIKELY(isGridItem)) {
+      // XXX the start of an align-self:stretch impl.  Needs min-/max-bsize
+      // clamping though, and check the prop value is actually 'stretch'!
+      LogicalMargin bp = childRS.ComputedLogicalBorderPadding();
+      bp.ApplySkipSides(child->GetLogicalSkipSides());
+      nscoord bSize = childCBSize.BSize(childWM) - bp.BStartEnd(childWM) -
+                        margin.BStartEnd(childWM);
+      childRS.SetComputedBSize(std::max(bSize, 0));
+    }
     // We need the width of the child before we can correctly convert
     // the writing-mode of its origin, so we reflow at (0, 0) using a dummy
     // containerSize, and then pass the correct position to FinishReflowChild.
-    Maybe<nsHTMLReflowMetrics> childSize; // Maybe<> so we can reuse the space
-    childSize.emplace(*childRS);
+    nsHTMLReflowMetrics childSize(childRS);
     nsReflowStatus childStatus;
     const nsSize dummyContainerSize;
-    ReflowChild(child, pc, *childSize, *childRS, childWM, LogicalPoint(childWM),
+    ReflowChild(child, pc, childSize, childRS, childWM, LogicalPoint(childWM),
                 dummyContainerSize, 0, childStatus);
     LogicalPoint childPos =
       cb.Origin(wm).ConvertTo(childWM, wm,
-                              containerSize - childSize->PhysicalSize());
-    // Apply align/justify-self and reflow again if that affects the size.
-    if (isGridItem) {
-      LogicalSize oldSize = childSize->Size(childWM); // from the ReflowChild()
-      LogicalSize newContentSize(childWM);
-      auto align = childRS->mStylePosition->ComputedAlignSelf(
-                     childRS->mStyleDisplay, containerSC);
-      Maybe<LogicalAxis> alignResize =
-        AlignSelf(align, cb, wm, *childRS, oldSize, &newContentSize, &childPos);
-      auto justify = childRS->mStylePosition->ComputedJustifySelf(
-                       childRS->mStyleDisplay, containerSC);
-      Maybe<LogicalAxis> justifyResize =
-        JustifySelf(justify, cb, wm, *childRS, oldSize, &newContentSize, &childPos);
-      if (alignResize || justifyResize) {
-        FinishReflowChild(child, pc, *childSize, childRS.ptr(), childWM,
-                          LogicalPoint(childWM), containerSize,
-                          NS_FRAME_NO_MOVE_FRAME | NS_FRAME_NO_SIZE_VIEW);
-        childSize.reset(); // In reverse declaration order since it runs
-        childRS.reset();   // destructors.
-        childRS.emplace(pc, *aState.mReflowState, child, childCBSize, &percentBasis);
-        if ((alignResize && alignResize.value() == eLogicalAxisBlock) ||
-            (justifyResize && justifyResize.value() == eLogicalAxisBlock)) {
-          childRS->SetComputedBSize(newContentSize.BSize(childWM));
-          childRS->SetBResize(true);
-        }
-        if ((alignResize && alignResize.value() == eLogicalAxisInline) ||
-            (justifyResize && justifyResize.value() == eLogicalAxisInline)) {
-          childRS->SetComputedISize(newContentSize.ISize(childWM));
-          childRS->SetIResize(true);
-        }
-        childSize.emplace(*childRS);
-        ReflowChild(child, pc, *childSize, *childRS, childWM,
-                    LogicalPoint(childWM), dummyContainerSize, 0, childStatus);
-      }
-    }
-    childRS->ApplyRelativePositioning(&childPos, containerSize);
-    FinishReflowChild(child, pc, *childSize, childRS.ptr(), childWM, childPos,
+                              containerSize - childSize.PhysicalSize() -
+                              margin.Size(childWM).GetPhysicalSize(childWM));
+    childPos.I(childWM) += margin.IStart(childWM);
+    childPos.B(childWM) += margin.BStart(childWM);
+    childRS.ApplyRelativePositioning(&childPos, containerSize);
+    FinishReflowChild(child, pc, childSize, &childRS, childWM, childPos,
                       containerSize, 0);
     ConsiderChildOverflow(aDesiredSize.mOverflowAreas, child);
-    // XXX deal with 'childStatus' not being COMPLETE (bug 1144096)
+    // XXX deal with 'childStatus' not being COMPLETE
   }
 
   if (IsAbsoluteContainer()) {
     nsFrameList children(GetChildList(GetAbsoluteListID()));
     if (!children.IsEmpty()) {
       LogicalMargin pad(aState.mReflowState->ComputedLogicalPadding());
       pad.ApplySkipSides(GetLogicalSkipSides(aState.mReflowState));
       // 'gridOrigin' is the origin of the grid (the start of the first track),
@@ -2970,21 +2501,16 @@ nsGridContainerFrame::Reflow(nsPresConte
   bSize = std::max(bSize - GetConsumedBSize(), 0);
   LogicalSize desiredSize(wm, computedISize + bp.IStartEnd(wm),
                           bSize + bp.BStartEnd(wm));
   aDesiredSize.SetSize(wm, desiredSize);
   aDesiredSize.SetOverflowAreasToDesiredBounds();
 
   LogicalRect contentArea(wm, bp.IStart(wm), bp.BStart(wm),
                           computedISize, bSize);
-
-  // Apply 'align/justify-content' to the grid.
-  gridReflowState.mCols.AlignJustifyContent(aReflowState, contentArea.Size(wm));
-  gridReflowState.mRows.AlignJustifyContent(aReflowState, contentArea.Size(wm));
-
   gridReflowState.mIter.Reset(GridItemCSSOrderIterator::eIncludeAll);
   ReflowChildren(gridReflowState, contentArea, aDesiredSize, aStatus);
 
   FinishAndStoreOverflow(&aDesiredSize);
   aStatus = NS_FRAME_COMPLETE;
   NS_FRAME_SET_TRUNCATION(aStatus, aReflowState, aDesiredSize);
 }
 
@@ -3001,21 +2527,18 @@ nsGridContainerFrame::IntrinsicISize(nsR
     return 0;
   }
   state.mCols.Initialize(state.mColFunctions, mGridColEnd,
                          NS_UNCONSTRAINEDSIZE);
   state.mIter.Reset();
   state.mCols.CalculateSizes(state, mGridItems, state.mColFunctions,
                              NS_UNCONSTRAINEDSIZE, &GridArea::mCols,
                              aConstraint);
-  nscoord length = 0;
-  for (const TrackSize& sz : state.mCols.mSizes) {
-    length += sz.mBase;
-  }
-  return length;
+  TranslatedLineRange allTracks(0, mGridColEnd);
+  return allTracks.ToLength(state.mCols.mSizes);
 }
 
 nscoord
 nsGridContainerFrame::GetMinISize(nsRenderingContext* aRC)
 {
   DISPLAY_MIN_WIDTH(this, mCachedMinISize);
   if (mCachedMinISize == NS_INTRINSIC_WIDTH_UNKNOWN) {
     mCachedMinISize = IntrinsicISize(aRC, nsLayoutUtils::MIN_ISIZE);
--- a/layout/generic/nsGridContainerFrame.h
+++ b/layout/generic/nsGridContainerFrame.h
@@ -77,17 +77,16 @@ public:
       eFrozen =                0x100,
       eSkipGrowUnlimited1 =    0x200,
       eSkipGrowUnlimited2 =    0x400,
       eSkipGrowUnlimited = eSkipGrowUnlimited1 | eSkipGrowUnlimited2,
     };
 
     nscoord mBase;
     nscoord mLimit;
-    nscoord mPosition;  // zero until we apply 'align/justify-content'
     StateBits mState;
   };
 
   // @see nsAbsoluteContainingBlock::Reflow about this magic number
   static const nscoord VERY_LIKELY_A_GRID_CONTAINER = -123456789;
 
   NS_DECLARE_FRAME_PROPERTY(GridItemContainingBlockRect, DeleteValue<nsRect>)
 
@@ -228,24 +227,25 @@ protected:
     {
       MOZ_ASSERT(aStart < aEnd && aEnd <= kTranslatedMaxLine);
       mStart = aStart;
       mEnd = aEnd;
     }
   };
 
   /**
-   * Return aLine if it's inside the aMin..aMax range (inclusive),
-   * otherwise return kAutoLine.
+   * Return aLine if it's inside the aMin..aMax range (inclusive), otherwise
+   * return kAutoLine.  If the range is empty (aMin == aMax, i.e. there are
+   * no tracks in the grid) then aLine is outside.
    */
   static int32_t
   AutoIfOutside(int32_t aLine, int32_t aMin, int32_t aMax)
   {
     MOZ_ASSERT(aMin <= aMax);
-    if (aLine < aMin || aLine > aMax) {
+    if (aLine < aMin || aLine > aMax || aMin == aMax) {
       return kAutoLine;
     }
     return aLine;
   }
 
   /**
    * A GridArea is the area in the grid for a grid item.
    * The area is represented by two LineRanges, both of which can be auto
--- a/layout/generic/nsHTMLReflowState.cpp
+++ b/layout/generic/nsHTMLReflowState.cpp
@@ -13,16 +13,17 @@
 #include "nsFrame.h"
 #include "nsIContent.h"
 #include "nsGkAtoms.h"
 #include "nsPresContext.h"
 #include "nsIPresShell.h"
 #include "nsFontMetrics.h"
 #include "nsBlockFrame.h"
 #include "nsLineBox.h"
+#include "nsFlexContainerFrame.h"
 #include "nsImageFrame.h"
 #include "nsTableFrame.h"
 #include "nsTableCellFrame.h"
 #include "nsIPercentBSizeObserver.h"
 #include "nsLayoutUtils.h"
 #include "mozilla/Preferences.h"
 #include "nsFontInflationData.h"
 #include "StickyScrollContainer.h"
@@ -2031,29 +2032,40 @@ IsSideCaption(nsIFrame* aFrame, const ns
   if (aStyleDisplay->mDisplay != NS_STYLE_DISPLAY_TABLE_CAPTION) {
     return false;
   }
   uint8_t captionSide = aFrame->StyleTableBorder()->mCaptionSide;
   return captionSide == NS_STYLE_CAPTION_SIDE_LEFT ||
          captionSide == NS_STYLE_CAPTION_SIDE_RIGHT;
 }
 
-// Flex/grid items resolve block-axis percentage margin & padding against the
-// containing block block-size (also for abs/fixed-pos child frames).
+static nsFlexContainerFrame*
+GetFlexContainer(nsIFrame* aFrame)
+{
+  nsIFrame* parent = aFrame->GetParent();
+  if (!parent ||
+      parent->GetType() != nsGkAtoms::flexContainerFrame) {
+    return nullptr;
+  }
+
+  return static_cast<nsFlexContainerFrame*>(parent);
+}
+
+// Flex items resolve block-axis percentage margin & padding against the flex
+// container's block-size (which is the containing block block-size).
 // For everything else: the CSS21 spec requires that margin and padding
 // percentage values are calculated with respect to the inline-size of the
 // containing block, even for margin & padding in the block axis.
 static LogicalSize
 OffsetPercentBasis(const nsIFrame*    aFrame,
                    WritingMode        aWM,
                    const LogicalSize& aContainingBlockSize)
 {
   LogicalSize offsetPercentBasis = aContainingBlockSize;
-  if (MOZ_LIKELY(!aFrame->GetParent() ||
-                 !aFrame->GetParent()->IsFlexOrGridContainer())) {
+  if (!aFrame->IsFlexOrGridItem()) {
     offsetPercentBasis.BSize(aWM) = offsetPercentBasis.ISize(aWM);
   } else if (offsetPercentBasis.BSize(aWM) == NS_AUTOHEIGHT) {
     offsetPercentBasis.BSize(aWM) = 0;
   }
 
   return offsetPercentBasis;
 }
 
@@ -2289,19 +2301,18 @@ nsHTMLReflowState::InitConstraints(nsPre
            (aFrameType == nsGkAtoms::scrollFrame &&
             frame->GetContentInsertionFrame()->GetType() == nsGkAtoms::legendFrame) ||
            (mCBReflowState &&
             mCBReflowState->GetWritingMode().IsOrthogonalTo(mWritingMode)))) {
         computeSizeFlags =
           ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
       }
 
-      nsIFrame* parent = frame->GetParent();
-      nsIAtom* parentFrameType = parent ? parent->GetType() : nullptr;
-      if (parentFrameType == nsGkAtoms::flexContainerFrame) {
+      const nsFlexContainerFrame* flexContainerFrame = GetFlexContainer(frame);
+      if (flexContainerFrame) {
         computeSizeFlags =
           ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
 
         // If we're inside of a flex container that needs to measure our
         // auto height, pass that information along to ComputeSize().
         if (mFlags.mIsFlexContainerMeasuringHeight) {
           computeSizeFlags =
             ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eUseAutoHeight);
@@ -2327,23 +2338,21 @@ nsHTMLReflowState::InitConstraints(nsPre
                            computeSizeFlags);
 
       ComputedISize() = size.ISize(wm);
       ComputedBSize() = size.BSize(wm);
       NS_ASSERTION(ComputedISize() >= 0, "Bogus inline-size");
       NS_ASSERTION(ComputedBSize() == NS_UNCONSTRAINEDSIZE ||
                    ComputedBSize() >= 0, "Bogus block-size");
 
-      // Exclude inline tables, side captions, flex and grid items from block
-      // margin calculations.
+      // Exclude inline tables and flex items from the block margin calculations
       if (isBlock &&
           !IsSideCaption(frame, mStyleDisplay, cbwm) &&
           mStyleDisplay->mDisplay != NS_STYLE_DISPLAY_INLINE_TABLE &&
-          parentFrameType != nsGkAtoms::flexContainerFrame &&
-          parentFrameType != nsGkAtoms::gridContainerFrame) {
+          !flexContainerFrame) {
         CalculateBlockSideMargins(aFrameType);
       }
     }
   }
 }
 
 static void
 UpdateProp(FrameProperties& aProps,
--- a/layout/generic/nsHTMLReflowState.h
+++ b/layout/generic/nsHTMLReflowState.h
@@ -647,19 +647,19 @@ public:
    * state are copied from the parent's reflow state. The remainder is computed.
    *
    * @param aPresContext Must be equal to aFrame->PresContext().
    * @param aParentReflowState A reference to an nsHTMLReflowState object that
    *        is to be the parent of this object.
    * @param aFrame The frame for whose reflow state is being constructed.
    * @param aAvailableSpace See comments for availableHeight and availableWidth
    *        members.
-   * @param aContainingBlockSize An optional size, in app units, specifying
-   *        the containing block size to use instead of the default which is
-   *        to use the aAvailableSpace.
+   * @param aContainingBlockSize An optional size, in app units, that
+   *        is used by absolute positioning code to override default containing
+   *        block sizes.
    * @param aFlags A set of flags used for additional boolean parameters (see
    *        below).
    */
   nsHTMLReflowState(nsPresContext*              aPresContext,
                     const nsHTMLReflowState&    aParentReflowState,
                     nsIFrame*                   aFrame,
                     const mozilla::LogicalSize& aAvailableSpace,
                     const mozilla::LogicalSize* aContainingBlockSize = nullptr,
--- a/layout/generic/nsIFrame.h
+++ b/layout/generic/nsIFrame.h
@@ -2948,17 +2948,16 @@ NS_PTR_TO_INT32(frame->Properties().Get(
   /**
    * Is this a flex item? (i.e. a non-abs-pos child of a flex container)
    */
   inline bool IsFlexItem() const;
   /**
    * Is this a flex or grid item? (i.e. a non-abs-pos child of a flex/grid container)
    */
   inline bool IsFlexOrGridItem() const;
-  inline bool IsFlexOrGridContainer() const;
 
   /**
    * @return true if this frame is used as a table caption.
    */
   inline bool IsTableCaption() const;
 
   inline bool IsBlockInside() const;
   inline bool IsBlockOutside() const;
--- a/layout/generic/nsIFrameInlines.h
+++ b/layout/generic/nsIFrameInlines.h
@@ -15,29 +15,25 @@ bool
 nsIFrame::IsFlexItem() const
 {
   return GetParent() &&
     GetParent()->GetType() == nsGkAtoms::flexContainerFrame &&
     !(GetStateBits() & NS_FRAME_OUT_OF_FLOW);
 }
 
 bool
-nsIFrame::IsFlexOrGridContainer() const
-{
-  nsIAtom* t = GetType();
-  return t == nsGkAtoms::flexContainerFrame ||
-         t == nsGkAtoms::gridContainerFrame;
-}
-
-bool
 nsIFrame::IsFlexOrGridItem() const
 {
-  return !(GetStateBits() & NS_FRAME_OUT_OF_FLOW) &&
-         GetParent() &&
-         GetParent()->IsFlexOrGridContainer();
+  if (GetParent()) {
+    nsIAtom* t = GetParent()->GetType();
+    return (t == nsGkAtoms::flexContainerFrame ||
+            t == nsGkAtoms::gridContainerFrame) &&
+      !(GetStateBits() & NS_FRAME_OUT_OF_FLOW);
+  }
+  return false;
 }
 
 bool
 nsIFrame::IsTableCaption() const
 {
   return StyleDisplay()->mDisplay == NS_STYLE_DISPLAY_TABLE_CAPTION &&
     GetParent()->StyleContext()->GetPseudo() == nsCSSAnonBoxes::tableOuter;
 }
--- a/layout/reftests/css-display/display-contents-acid.html
+++ b/layout/reftests/css-display/display-contents-acid.html
@@ -27,17 +27,17 @@
 .colg    { display:table-column-group; }
 .flex    { display:flex; }
 .iflex   { display:inline-flex; }
 .li      { display:list-item; }
 .ib      { display:inline-block; }
 .inline  { display:inline; }
 .columns  { -moz-columns:2; columns:2; height:4em; }
 
-.contents { display:contents; align-items:inherit; justify-items:inherit; }
+.contents { display:contents; }
 
 .c1 { color:lime; }
 .c2 { background:blue; color:pink; }
 .c3 { color:teal; }
 .c4 { color:green; }
 .c5 { color:silver; }
 .c6 { color:cyan; }
 .c7 { color:magenta; }
--- a/layout/reftests/css-grid/grid-abspos-items-001-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-001-ref.html
@@ -25,17 +25,16 @@ body,html { color:black; background:whit
 }
 .zero-size { width:0; height:0; }
 .auto-size { width:auto; height:0px; }
 
 .a {
   position: absolute;
   left: 13px; top: 31px;
   height: 12px; width: 44px;
-  background: blue;
 }
 
 .abs {
   position: absolute;
   opacity: 0.7;
   width: 21px;
   height: 15px;
 }
@@ -43,17 +42,17 @@ body,html { color:black; background:whit
   left: 1px; top: 3px; bottom: 1px;
   width: 28px; height: auto;
 }
 .c {
   right: 5px; bottom: 1px;
   width: 112px; height: 82px;
 }
 .d {
-  left: 1px; top: 20px;
+  left: 1px; top: 27px;
   width: 5px; height: 1px;
 }
 .e {
   right: 5px; bottom: 1px;
   width: 112px; height: 51px;
 }
 .f {
   right: 5px; top: 3px;
@@ -78,74 +77,74 @@ span {
 }
   </style>
 </head>
 <body>
 
 <div style="float:left">
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="b abs">b</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="c abs">c</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="d abs">d</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="e abs">e</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="f abs">f</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="g abs">g</span>
 </div>
 
 </div><div style="float:left">
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="b abs">b</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="c abs">c</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="d abs">d</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="e abs">e</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="f abs">f</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="g abs">g</span>
 </div>
 
 </div><div style="float:left">
 
 <div class="grid zero-size">
 <span class="b abs" style="width:12px">b</span>
 </div>
@@ -158,27 +157,27 @@ span {
 <span class="i abs">i</span>
 </div>
 
 <div class="grid" style="height:7px">
 <span class="j abs">j</span>
 </div>
 
 <div class="grid" style="width:43px; height:53px">
-<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
-<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
-<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
-<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
+<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">a</span>
+<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">b</span>
+<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">c</span>
+<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">d</span>
 </div>
 
 <div class="grid" style="width:43px; height:28px; border-width:0;">
-<span class="abs" style="right:48px; top:3px; height:11px; width:12px;"></span>
+<span class="abs" style="right:48px; top:3px; height:22px; width:12px;"></span>
 </div>
 <div class="grid" style="width:43px; height:28px; border-width:0;">
-<span class="abs" style="left:1px; bottom:57px; height:22px; width:5px;"></span>
+<span class="abs" style="left:1px; bottom:57px; height:22px; width:12px;"></span>
 </div>
 <div class="grid" style="width:43px; height:28px; border-width:0;">
 <span class="abs" style="right:48px; bottom:85px; height:22px; width:12px;"></span>
 </div>
 
 </div>
 
 </body>
--- a/layout/reftests/css-grid/grid-abspos-items-001.html
+++ b/layout/reftests/css-grid/grid-abspos-items-001.html
@@ -24,17 +24,16 @@ body,html { color:black; background:whit
  height: 60px;
 }
 .zero-size { width:0; height:0; }
 .auto-size { width:auto; height:auto; }
 
 .a {
   grid-column: 1 / 3; 
   grid-row:    3 / 5;
-  background: blue;
 }
 
 .abs {
   position: absolute;
   top:3px; left:1px; right:5px; bottom:1px;
   opacity: 0.7;
 }
 .b {
@@ -81,74 +80,74 @@ span {
 }
   </style>
 </head>
 <body>
 
 <div style="float:left">
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="b abs">b</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="c abs">c</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="d abs">d</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="e abs">e</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="f abs">f</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="g abs">g</span>
 </div>
 
 </div><div style="float:left">
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <div><span class="b abs">b</span></div>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <x><span class="c abs">c</span></x>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="d abs">d</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <div><span class="e abs">e</span></div>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="f abs">f</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <x><span class="g abs">g</span></x>
 </div>
 
 </div><div style="float:left">
 
 <div class="grid zero-size">
 <span class="b abs">b</span>
 </div>
--- a/layout/reftests/css-grid/grid-abspos-items-002-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-002-ref.html
@@ -26,17 +26,16 @@ body,html { color:black; background:whit
 }
 .zero-size { width:0; height:0; }
 .auto-size { width:auto; height:0px; }
 
 .a {
   position: absolute;
   left: 13px; top: 31px;
   height: 12px; width: 44px;
-  background: blue;
 }
 
 .abs {
   position: absolute;
   opacity: 0.7;
   width: 21px;
   height: 15px;
 }
@@ -44,17 +43,17 @@ body,html { color:black; background:whit
   left: 1px; top: 3px; bottom: 1px;
   width: 28px; height: auto;
 }
 .c {
   right: 5px; bottom: 1px;
   width: 112px; height: 82px;
 }
 .d {
-  left: 1px; top: 20px;
+  left: 1px; top: 27px;
   width: 5px; height: 1px;
 }
 .e {
   right: 5px; bottom: 1px;
   width: 112px; height: 51px;
 }
 .f {
   right: 5px; top: 3px;
@@ -79,74 +78,74 @@ span {
 }
   </style>
 </head>
 <body>
 
 <div style="float:left">
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="b abs">b</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="c abs">c</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="d abs">d</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="e abs">e</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="f abs">f</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="g abs">g</span>
 </div>
 
 </div><div style="float:left">
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="b abs">b</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="c abs">c</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="d abs">d</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="e abs">e</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="f abs">f</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="g abs">g</span>
 </div>
 
 </div><div style="float:left">
 
 <div class="grid zero-size">
 <span class="b abs" style="width:12px">b</span>
 </div>
@@ -159,18 +158,18 @@ span {
 <span class="i abs">i</span>
 </div>
 
 <div class="grid" style="height:7px">
 <span class="j abs">j</span>
 </div>
 
 <div class="grid" style="width:43px; height:53px">
-<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
-<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
-<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
-<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
+<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">a</span>
+<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">b</span>
+<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">c</span>
+<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">d</span>
 </div>
 
 </div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-abspos-items-002.html
+++ b/layout/reftests/css-grid/grid-abspos-items-002.html
@@ -24,17 +24,16 @@ body,html { color:black; background:whit
  height: 60px;
 }
 .zero-size { width:0; height:0; }
 .auto-size { width:auto; height:auto; }
 
 .a {
   grid-column: 1 / 3; 
   grid-row:    3 / 5;
-  background: blue;
 }
 
 .abs {
   position: fixed;
   top:3px; left:1px; right:5px; bottom:1px;
   opacity: 0.7;
 }
 .b {
@@ -81,74 +80,74 @@ span {
 }
   </style>
 </head>
 <body>
 
 <div style="float:left">
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="b abs">b</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="c abs">c</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="d abs">d</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="e abs">e</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="f abs">f</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="g abs">g</span>
 </div>
 
 </div><div style="float:left">
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <div><span class="b abs">b</span></div>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <x><span class="c abs">c</span></x>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="d abs">d</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <div><span class="e abs">e</span></div>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <span class="f abs">f</span>
 </div>
 
 <div class="grid">
-<span class="a"></span>
+<span class="a">a</span>
 <x><span class="g abs">g</span></x>
 </div>
 
 </div><div style="float:left">
 
 <div class="grid zero-size">
 <span class="b abs">b</span>
 </div>
--- a/layout/reftests/css-grid/grid-abspos-items-011-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-011-ref.html
@@ -1,31 +1,27 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
   <meta charset="utf-8">
   <title>CSS Grid Test: abs pos areas in empty grid</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215099">
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
   <style type="text/css">
 
 div {
   display: block;
   position: relative;
   float: left;
   width: 20px;
   height: 20px;
   background: red;
 }
-x div {
-  padding: 4px;
-  background: white;
-}
 
 span {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: lime;
 }
 
 </style>
@@ -33,50 +29,26 @@ span {
 <body>
 
 There should be no red areas.
 <br clear="all">
 
 <div><span class="cs"></span></div>
 <div><span class="ce"></span></div>
 <div><span class="rs"></span></div>
-<div><span class="re"></span></div>
+<div><span class="rs"></span></div>
 
 <div><span class="cs ce"></span></div>
 <div><span class="cs rs"></span></div>
 <div><span class="cs re"></span></div>
 <div><span class="ce rs"></span></div>
 <div><span class="ce re"></span></div>
 <div><span class="rs re"></span></div>
 
 <div><span class="cs ce rs"></span></div>
 <div><span class="cs ce re"></span></div>
 <div><span class="rs re cs"></span></div>
 <div><span class="rs re ce"></span></div>
 
 <div><span class="cs ce rs re"></span></div>
 
-<br clear="all">
-<br clear="all">
-
-<x>
-<div><span class="cs" style="left:4px"></span></div>
-<div><span class="ce" style="right:auto;width:4px"></span></div>
-<div><span class="rs" style="top:4px"></span></div>
-<div><span class="re" style="bottom:auto;height:4px"></span></div>
-
-<div><span class="cs ce" style="left:4px;"></span></div>
-<div><span class="cs rs" style="left:4px;top:4px"></span></div>
-<div><span class="cs re" style="left:4px;bottom:auto;height:4px"></span></div>
-<div><span class="ce rs" style="right:auto;width:4px;top:4px"></span></div>
-<div><span class="ce re" style="right:auto;width:4px;bottom:auto;height:4px"></span></div>
-<div><span class="rs re" style="top:4px"></span></div>
-
-<div><span class="cs ce rs" style="left:4px;top:4px"></span></div>
-<div><span class="cs ce re" style="left:4px;bottom:auto;height:4px"></span></div>
-<div><span class="rs re cs" style="left:4px;top:4px"></span></div>
-<div><span class="rs re ce" style="top:4px;right:auto;width:4px"></span></div>
-
-<div><span class="cs ce rs re" style="left:4px;top:4px"></span></div>
-</x>
-
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-abspos-items-011.html
+++ b/layout/reftests/css-grid/grid-abspos-items-011.html
@@ -1,97 +1,61 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
   <meta charset="utf-8">
   <title>CSS Grid Test: abs pos areas in empty grid</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215099">
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
   <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
   <link rel="match" href="grid-abspos-items-011-ref.html">
   <style type="text/css">
 
 div {
   display: grid;
   position: relative;
   float: left;
   width: 20px;
   height: 20px;
   background: red;
 }
-div.green {
-  background: lime;
-}
-x div {
-  padding: 4px;
-  background: white;
-}
 
 span {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: lime;
 }
-span.red {
-  background: red;
-}
 
 .cs { grid-column-start: 1; }
 .ce { grid-column-end: 1; }
 .rs { grid-row-start: 1; }
 .re { grid-row-end: 1; }
 
 </style>
 </head>
 <body>
 
 There should be no red areas.
 <br clear="all">
 
 <div><span class="cs"></span></div>
-<div class="green"><span class="ce red"></span></div>
-<div><span class="rs"></span></div>
-<div class="green"><span class="re red"></span></div>
-
-<div><span class="cs ce"></span></div>
-<div><span class="cs rs"></span></div>
-<div class="green"><span class="cs re red"></span></div>
-<div class="green"><span class="ce rs red"></span></div>
-<div class="green"><span class="ce re red"></span></div>
-<div><span class="rs re"></span></div>
-
-<div><span class="cs ce rs"></span></div>
-<div class="green"><span class="cs ce re red"></span></div>
-<div><span class="rs re cs"></span></div>
-<div class="green"><span class="rs re ce red"></span></div>
-
-<div><span class="cs ce rs re"></span></div>
-
-<br clear="all">
-<br clear="all">
-
-<!-- the same combinations in a grid container with padding -->
-
-<x>
-<div><span class="cs"></span></div>
 <div><span class="ce"></span></div>
 <div><span class="rs"></span></div>
-<div><span class="re"></span></div>
+<div><span class="rs"></span></div>
 
 <div><span class="cs ce"></span></div>
 <div><span class="cs rs"></span></div>
 <div><span class="cs re"></span></div>
 <div><span class="ce rs"></span></div>
 <div><span class="ce re"></span></div>
 <div><span class="rs re"></span></div>
 
 <div><span class="cs ce rs"></span></div>
 <div><span class="cs ce re"></span></div>
 <div><span class="rs re cs"></span></div>
 <div><span class="rs re ce"></span></div>
 
 <div><span class="cs ce rs re"></span></div>
-</x>
 
 </body>
 </html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-align-content-001-ref.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: align-content</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  border-block-start: 2px solid blue;
-  grid-template: 11px 7px 5px / 3px 5px 7px;
-  padding: 1px 1px 3px 2px;
-  margin-right: 4px;
-  width: 40px;
-  height: 40px;
-}
-
-item1,item2,item3 {
-  display: block;
-  position: relative;
-  background: grey;
-  justify-self: stretch;
-  align-self: stretch;
-}
-
-item1 { grid-area: 1 / 1; }
-item2 { grid-area: 2 / 2; }
-item3 { grid-area: 3 / 3; }
-
-.hl  { writing-mode: horizontal-tb; direction:ltr; }
-.hr  { writing-mode: horizontal-tb; direction:rtl; }
-.vl  { writing-mode: vertical-lr; }
-.vr  { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.aend *, .aflexend * { offset-block-start:25px; }
-.acenter * { offset-block-start:12.5px;  }
-
-
-.aspace-between item2 { offset-block-start:12.5px; }
-.aspace-between item3 { offset-block-start:25px; }
-
-.aspace-around item1 { offset-block-start:4.1666px; }
-.aspace-around item2 { offset-block-start:12.5px; }
-.aspace-around item3 { offset-block-start:20.8333px; }
-
-.aspace-evenly item1 { offset-block-start:6.25px; }
-.aspace-evenly item2 { offset-block-start:12.5px; }
-.aspace-evenly item3 { offset-block-start:18.75px; }
-
-.astretch2 { grid-template-rows: 1fr 5px 7px; }
-.astretch3 { grid-template-rows: 15.5px 17.5px 7px; }
-.astretch4 { grid-template-rows: 11.33333px 13.33333px 15.33333px; }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "space-between", "space-around", "space-evenly",
-             "stretch1", "stretch2", "stretch3", "stretch4" ];
-for (var k = 0; k < test.length; ++k) {
-  for (var i = 0; i < gridwm.length; ++i) {
-      var div = document.createElement("div");
-      div.className = "grid a" + test[k] + " " + gridwm[i];
-      div.appendChild(document.createElement("item1"));
-      div.appendChild(document.createElement("item2"));
-      div.appendChild(document.createElement("item3"));
-      document.body.appendChild(div)
-  }
-    document.body.appendChild(document.createElement("separator"));
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-align-content-001.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: align-content</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
-  <link rel="match" href="grid-align-content-001-ref.html">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  border-block-start: 2px solid blue;
-  grid-template: 11px 7px 5px / 3px 5px 7px;
-  padding: 1px 1px 3px 2px;
-  margin-right: 4px;
-  width: 40px;
-  height: 40px;
-}
-
-item1,item2,item3 {
-  display: block;
-  background: grey;
-  justify-self: stretch;
-  align-self: stretch;
-}
-
-item1 { grid-area: 1 / 1; }
-item2 { grid-area: 2 / 2; }
-item3 { grid-area: 3 / 3; }
-
-.hl  { writing-mode: horizontal-tb; direction:ltr; }
-.hr  { writing-mode: horizontal-tb; direction:rtl; }
-.vl  { writing-mode: vertical-lr; }
-.vr  { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.astart { align-content:start; }
-.aend { align-content:end; }
-.aflexstart { align-content:flex-start; }
-.aflexend { align-content:flex-end; }
-.acenter { align-content:center; }
-.aleft { align-content:left; }
-.aright { align-content:right; }
-
-.aspace-between{ align-content:space-between; }
-.aspace-around { align-content:space-around;  }
-.aspace-evenly { align-content:space-evenly;  }
-
-.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; }
-.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; }
-.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; }
-.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "space-between", "space-around", "space-evenly",
-             "stretch1", "stretch2", "stretch3", "stretch4" ];
-for (var k = 0; k < test.length; ++k) {
-  for (var i = 0; i < gridwm.length; ++i) {
-      var div = document.createElement("div");
-      div.className = "grid a" + test[k] + " " + gridwm[i];
-      div.appendChild(document.createElement("item1"));
-      div.appendChild(document.createElement("item2"));
-      div.appendChild(document.createElement("item3"));
-      document.body.appendChild(div)
-  }
-    document.body.appendChild(document.createElement("separator"));
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: Testing 'auto' min-sizing with definite min-width/height</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <style type="text/css">
-body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
-pre { clear:both; }
-	
-.grid {
-  display: grid;
-  border: 1px dashed silver;
-  grid-template-columns: minmax(0,min-content);
-  grid-template-rows: minmax(0,min-content) minmax(0,min-content);
-  float: left;
-  margin-bottom:20px;
-  align-items: start;
-  justify-items: start;
-}
-.v { 
-  writing-mode: vertical-lr;
-  -webkit-writing-mode: vertical-lr;
-}
-.h { 
-  writing-mode: horizontal-tb;
-  -webkit-writing-mode: horizontal-tb;
-}
-.bb {
-  box-sizing: border-box;
-}
-
-span { 
-  display: block;
-  background: lime;
-  margin: 7px 13px 50% 20%;
-  padding:1px 3px 10% 30%;
-}
-
-span.v {
-  height: 30px;
-  width: 10px;
-  border-left: 1px solid;
-  border-top: 3px solid;
-}
-
-span.h {
-  width: 30px;
-  height: 10px;
-  border-left: 3px solid;
-  border-top: 1px solid;
-}
-
-b40 {
-  display: block;
-  width: 40px;
-  height: 40px;
-  border: 1px solid pink;
-  z-index: 1; position:relative; 
-}
-
-w {
-  position:absolute;
-  background: lime;
-  border-width: 1px 0 0 3px;
-  border-style: solid;
-  height:45px;
-  width:48px;
-  left:-3px; top:-1px;
-}
-.v > w {
-  border-width: 3px 0 0 1px;
-  left:-1px; top:-3px;
-  height:53px;
-  width:61px;
-}
-.v .h > w {
-  height:48px;
-  width:45px;
-}
-.v.r > w {
-  height:47px;
-  width:54px;
-}
-.v .v > w {
-  height:41px;
-  width:45px;
-}
-
-.r { position:relative; }
-
-  </style>
-</head>
-<body>
-
-<pre>horizontal container, horizontal item</pre>
-<div class="grid"><span class="h"><x></x></span></div>
-<div class="grid"><span class="h bb"><x></x></span></div>
-<div class="grid t3"><span class="h"><x></x></span><span class="h"><x></x></span></div>
-<div class="grid"><span class="h r"><w></w><b40></b40></span></div>
-<pre>horizontal container, vertical item</pre>
-<div class="grid"><span class="v"><x></x></span></div>
-<div class="grid"><span class="v bb"><x></x></span></div>
-<div class="grid t7"><span class="v"><x></x></span><span class="v"><x></x></span></div>
-<div class="grid"><span class="v r"><w></w><b40></b40></span></div>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-definite-001.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: 'auto' min-sizing with definite min-width/height</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
-  <link rel="match" href="grid-auto-min-sizing-definite-001-ref.html">
-  <style type="text/css">
-body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
-pre { clear:both; }
-	
-.grid {
-  display: grid;
-  border: 1px dashed silver;
-  grid-template-columns: minmax(auto,0);
-  grid-template-rows: minmax(auto,0) minmax(auto,0);
-  float: left;
-  margin-bottom:20px;
-  align-items: start;
-  justify-items: start;
-}
-.v { 
-  writing-mode: vertical-lr;
-  -webkit-writing-mode: vertical-lr;
-}
-.h { 
-  writing-mode: horizontal-tb;
-  -webkit-writing-mode: horizontal-tb;
-}
-.bb {
-  box-sizing: border-box;
-}
-
-span { 
-  display: block;
-  background: lime;
-  margin: 7px 13px 50% 20%;
-  padding:1px 3px 10% 30%;
-}
-
-span.v {
-  min-height: 30px;
-  min-width: 10px;
-  border-left: 1px solid;
-  border-top: 3px solid;
-}
-
-span.h {
-  min-width: 30px;
-  min-height: 10px;
-  border-left: 3px solid;
-  border-top: 1px solid;
-}
-
-b40 {
-  display: block;
-  width: 40px;
-  height: 40px;
-  border: 1px solid pink;
-}
-  </style>
-</head>
-<body>
-
-<pre>horizontal container, horizontal item</pre>
-<div class="grid"><span class="h"><x></x></span></div>
-<div class="grid"><span class="h bb"><x></x></span></div>
-<div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div>
-<div class="grid"><span class="h"><b40></b40></span></div>
-<pre>horizontal container, vertical item</pre>
-<div class="grid"><span class="v"><x></x></span></div>
-<div class="grid"><span class="v bb"><x></x></span></div>
-<div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div>
-<div class="grid"><span class="v"><b40></b40></span></div>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001-ref.html
+++ /dev/null
@@ -1,154 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: auto min-sizing with intrinsic min-width</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <style type="text/css">
-body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
-
-.grid {
- display: grid;
- grid-template-columns: minmax(min-content,0) minmax(0,1fr);
- border: 1px solid;
- width: 500px;
- align-items: start;
- justify-items: start;
-}
-span,img { min-height:0; }
-
-.c1 { border:2px solid;   min-width:auto; }
-.c3 { background: blue;   min-width:-moz-min-content; min-width:-webkit-min-content; }
-.c4 { background: lime;   min-width:-moz-max-content; min-width:-webkit-max-content; }
-.c5 { background: cyan;   min-width:-moz-available;   min-width:-webkit-fill; }
-.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; }
-.w20   { width: 20px; }
-.w450  { width: 450px; }
-.max50 { max-width: 50px; }
-.h05   { height: 0.5px; }
-.h4    { height: 4px; }
-
-c2 { opacity:0.5; background: grey; min-height:10px; }
-i { display:inline-block; width:20px; height:10px; background:blue; }
-span, c2 { min-width:0; }
-.rel { border:none; padding:2px; position:relative; }
-.rel2 { border:none; position:relative; }
-z { position:absolute; border:2px solid; width:450px; top:0;bottom:0;left:0; }
-.rel2 z { border:none; background:inherit; }
-  </style>
-</head>
-<body>
-
-<!--
-<div class="grid">
-  <span class="c1"><i style="width:100px"></i></span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c1"></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c1 rel"><z></z><i style="width:100px;margin-right:-80px;"></i></span><c2></c2>
-</div>
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid">
-  <img  class="c1" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1" style="width:12.5px" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 h4" style="width:100px" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 h4 max50"style="width:50px"  src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 w20" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <span class="c1 rel2" style="height:22px;width:29px"><z style="width:450px;background:lime;border:2px solid;"></z></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c1 rel2" style="height:6px;width:29px"><z style="width:50px;background:lime;border:2px solid;"></z></span><c2></c2>
-</div>
--->
-
-<!--
-<div class="grid" style="margin-left:300px; width:200px">
-  <span class="c3">1 2 3 4 5</span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c4"><i style="width:100px"></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4"><i style="width:100px"></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4 rel2"><z><i style="width:100px"></i></z><i style="width:100px"></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4"><i style="width:100px"></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid" style="margin-left:40px;margin-bottom:100px">
-  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c5 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2>
-</div>
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid" style="margin-bottom:2em">
-  <span class="c5 w450 max50">1 2 3 4 5</span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid" style="margin-left:40px;margin-bottom:100px">
-  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c6 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2>
-</div>
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid" style="margin-bottom:2em">
-  <span class="c6 w450 max50">1 2 3 4 5</span><c2></c2>
-</div>
--->
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid">
-  <img  class="c3" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c4" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid">
-  <img  class="c5" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid">
-  <img  class="c6" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid" style="grid-template-columns:25px 1fr">
-  <img  class="c6 w450" src="support/lime-25x1.png"><c2 class="rel2"></c2>
-</div>
-<div class="grid" style="grid-template-columns:25px 1fr">
-  <img  class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001.html
+++ /dev/null
@@ -1,148 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: auto min-sizing with intrinsic min-width</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
-  <link rel="match" href="grid-auto-min-sizing-intrinsic-001-ref.html">
-  <style type="text/css">
-body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
-
-.grid {
- display: grid;
- grid-template-columns: minmax(auto,0) minmax(0,1fr);
- border: 1px solid;
- width: 500px;
- align-items: start;
- justify-items: start;
-}
-span,img { min-height:0; }
-
-.c1 { border:2px solid;   min-width:auto; }
-.c3 { background: blue;   min-width:-moz-min-content; min-width:-webkit-min-content; }
-.c4 { background: lime;   min-width:-moz-max-content; min-width:-webkit-max-content; }
-.c5 { background: cyan;   min-width:-moz-available;   min-width:-webkit-fill; }
-.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; }
-.w20   { width: 20px; }
-.w450  { width: 450px; }
-.max50 { max-width: 50px; }
-.h05   { height: 0.5px; }
-.h4    { height: 4px; }
-
-c2 { opacity:0.5; background: grey; min-height:10px; }
-i { display:inline-block; width:20px; height:10px; background:blue; }
-  </style>
-</head>
-<body>
-
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid">
-  <span class="c1"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c1"></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c1 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid">
-  <img  class="c1" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 h05" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 h4" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 h4 max50" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 w20" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 w450" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 w450 max50" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid" style="margin-left:300px; width:200px">
-  <span class="c3"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c4"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid" style="margin-left:40px;margin-bottom:100px">
-  <span class="c5 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c5 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid" style="margin-bottom:2em">
-  <span class="c5 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid" style="margin-left:40px;margin-bottom:100px">
-  <span class="c6 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c6 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid" style="margin-bottom:2em">
-  <span class="c6 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
--->
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid">
-  <img  class="c3" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c4" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c5" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid">
-  <img  class="c6" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c6 w450" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002-ref.html
+++ /dev/null
@@ -1,155 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: 'auto' min-sizing with intrinsic min-width and overflow:hidden</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <style type="text/css">
-body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
-
-.grid {
- display: grid;
- grid-template-columns: minmax(min-content,0) minmax(0,1fr);
- border: 1px solid;
- width: 500px;
- align-items: start;
- justify-items: start;
-}
-.min4 { grid-template-columns: minmax(4px,0) minmax(0,1fr); }
-span,img { min-height:0; }
-span, c2 { min-width:0; }
-
-.c1 { border:2px solid;   min-width:auto; }
-.c3 { background: blue;   min-width:-moz-min-content; min-width:-webkit-min-content; }
-.c4 { background: lime;   min-width:-moz-max-content; min-width:-webkit-max-content; }
-.c5 { background: cyan;   min-width:-moz-available;   min-width:-webkit-fill; }
-.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; }
-.w20   { width: 20px; }
-.w450  { width: 450px; }
-.max50 { max-width: 50px; }
-.h05   { height: 0.5px; }
-.h4    { height: 4px; }
-
-c2 { opacity:0.5; background: grey; min-height:10px; }
-i { display:inline-block; width:20px; height:10px; background:blue; }
-.rel { border:none; padding:2px; position:relative; }
-.rel2 { border:none; position:relative; }
-z { position:absolute; border:2px solid; width:450px; top:0;bottom:0;left:0; }
-.rel2 z { border:none; background:inherit; }
-.hide {  overflow:hidden; }
-  </style>
-</head>
-<body>
-
-<!--
-<div class="grid min4">
-  <span class="c1 hide"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c1"></span><c2></c2>
-</div>
-<div class="grid min4">
-  <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid min4">
-  <span class="c1 rel"><z></z><i style="width:100px"></i></span><c2></c2>
-</div>
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid min4">
-  <img  class="c1" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid min4">
-  <img  class="c1" style="width:12.5px" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid min4">
-  <img  class="c1 h4" style="width:100px" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid min4">
-  <img  class="c1 h4 max50"style="width:50px"  src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid min4">
-  <img  class="c1 w20" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid min4">
-  <span class="c1 rel2" style="height:22px;width:29px"><z style="width:450px;background:lime;border:2px solid;"></z></span><c2></c2>
-</div>
-<div class="grid min4">
-  <span class="c1 rel2" style="height:6px;width:29px"><z style="width:50px;background:lime;border:2px solid;"></z></span><c2></c2>
-</div>
--->
-<!--
-<div class="grid" style="margin-left:300px; width:200px">
-  <span class="c3">1 2 3 4 5</span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c4"><i style="width:100px"></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4"><i style="width:100px"></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4 rel2"><z><i style="width:100px"></i></z><i style="width:100px"></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4"><i style="width:100px"></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid" style="margin-left:40px;margin-bottom:100px">
-  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c5 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2>
-</div>
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid" style="margin-bottom:2em">
-  <span class="c5 w450 max50">1 2 3 4 5</span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid" style="margin-left:40px;margin-bottom:100px">
-  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c6 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2>
-</div>
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid" style="margin-bottom:2em">
-  <span class="c6 w450 max50">1 2 3 4 5</span><c2></c2>
-</div>
--->
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid">
-  <img  class="c3" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c4" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid">
-  <img  class="c5" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid">
-  <img  class="c6" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid" style="grid-template-columns:25px 1fr">
-  <img  class="c6 w450" src="support/lime-25x1.png"><c2 class="rel2"></c2>
-</div>
-<div class="grid" style="grid-template-columns:25px 1fr">
-  <img  class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002.html
+++ /dev/null
@@ -1,150 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: 'auto' min-sizing with intrinsic min-width and overflow:hidden</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
-  <link rel="match" href="grid-auto-min-sizing-intrinsic-002-ref.html">
-  <style type="text/css">
-body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
-
-.grid {
- display: grid;
- grid-template-columns: minmax(auto,0) minmax(0,1fr);
- border: 1px solid;
- width: 500px;
- align-items: start;
- justify-items: start;
-}
-span,img { min-height:0; overflow:hidden; }
-
-.c1 { border:2px solid;   min-width:auto; }
-.c3 { background: blue;   min-width:-moz-min-content; min-width:-webkit-min-content; }
-.c4 { background: lime;   min-width:-moz-max-content; min-width:-webkit-max-content; }
-.c5 { background: cyan;   min-width:-moz-available;   min-width:-webkit-fill; }
-.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; }
-.w20   { width: 20px; }
-.w450  { width: 450px; }
-.max50 { max-width: 50px; }
-.h05   { height: 0.5px; }
-.h4    { height: 4px; }
-
-c2 { opacity:0.5; background: grey; min-height:10px; }
-i { display:inline-block; width:20px; height:10px; background:blue; }
-  </style>
-</head>
-<body>
-
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid">
-  <span class="c1"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c1"></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c1 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid">
-  <img  class="c1" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 h05" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 h4" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 h4 max50" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 w20" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 w450" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c1 w450 max50" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid" style="margin-left:300px; width:200px">
-  <span class="c3"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c4"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c4 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid" style="margin-left:40px;margin-bottom:100px">
-  <span class="c5 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c5 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid" style="margin-bottom:2em">
-  <span class="c5 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
--->
-<div class="grid">
-  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid" style="margin-left:40px;margin-bottom:100px">
-  <span class="c6 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<div class="grid">
-  <span class="c6 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid" style="margin-bottom:2em">
-  <span class="c6 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
-</div>
--->
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid">
-  <img  class="c3" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c4" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-<!-- TODO: row height doesn't seem right - revisit after bug 1174569
-<div class="grid">
-  <img  class="c5" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-<!-- TODO: disabled until we have support for "transferred size"
-<div class="grid">
-  <img  class="c6" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c6 w450" src="support/lime-25x1.png"><c2></c2>
-</div>
-<div class="grid">
-  <img  class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2>
-</div>
--->
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-<meta charset="utf-8">
-<title>Reference: min-width|min-height:auto</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <style type="text/css">
-body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
-
-.grid {
-  display: grid;
-  width: 60px;
-  grid-template-columns: 30px 30px;
-  grid-auto-rows: 30px;
-  align-items: start;
-  justify-items: start;
-  border: 3px solid blue;
-}
-span {
-  border: 1px solid;
-  background: lime;
-  min-width:0;
-  min-height:0;
-}
-</style>
-</head>
-<body>
-
-<div class="grid">
-  <span>a</span>
-  <span style="width:-moz-min-content">IAmReallyWideAndTheBorderShouldSurroundMe</span>
-</div>
-
-<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
-<div class="grid">
-  <span>a</span>
-  <span style="width: 130%">IAmReallyWideButIHaveADefiniteWidthSoIOverflow</span>
-  <span>c</span>
-  <span style="width: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
-  <span style="width: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
-  <span style="width: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
-</div>
-
-<pre>Now the same tests for 'height':</pre>
-
-<div class="grid" style="margin-bottom:50px;">
-  <span>a</span>
-  <span style="font-size:72px;width:-moz-min-content">IAmReallyTall</span>
-  <span>c</span>
-  <span>d</span>
-</div>
-
-The border shouldn't shrink-wrap the wide text below, due to definite "height" values:
-<div class="grid">
-  <span>a</span>
-  <span style="font-size:72px; height:10%;width:-moz-min-content">IAmReallyTall</span>
-  <span>c</span>
-  <span style="font-size:72px; height:10px;width:-moz-min-content">SameHere</span>
-  <span style="font-size:72px; height:40px;width:-moz-min-content">SameHere</span>
-</div>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-<meta charset="utf-8">
-<title>CSS Grid Test: min-width|min-height:auto</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
-  <link rel="match" href="grid-auto-min-sizing-intrinsic-003-ref.html">
-  <style type="text/css">
-body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
-
-.grid {
-  display: grid;
-  width: 60px;
-  grid-template-columns: 30px 30px;
-  grid-auto-rows: 30px;
-  align-items: start;
-  justify-items: start;
-  border: 3px solid blue;
-}
-span {
-  border: 1px solid;
-  background: lime;
-}
-</style>
-</head>
-<body>
-
-<div class="grid">
-  <span>a</span>
-  <span>IAmReallyWideAndTheBorderShouldSurroundMe</span>
-</div>
-
-<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
-<div class="grid">
-  <span>a</span>
-  <span style="width: 130%">IAmReallyWideButIHaveADefiniteWidthSoIOverflow</span>
-  <span>c</span>
-  <span style="width: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
-  <span style="width: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
-  <span style="width: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
-</div>
-
-<pre>Now the same tests for 'height':</pre>
-
-<div class="grid" style="margin-bottom:50px;">
-  <span>a</span>
-  <span style="font-size:72px">IAmReallyTall</span>
-  <span>c</span>
-  <span>d</span>
-</div>
-
-The border shouldn't shrink-wrap the wide text below, due to definite "height" values:
-<div class="grid">
-  <span>a</span>
-  <span style="font-size:72px; height:10%">IAmReallyTall</span>
-  <span>c</span>
-  <span style="font-size:72px; height:10px">SameHere</span>
-  <span style="font-size:72px; height:40px">SameHere</span>
-</div>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-<meta charset="utf-8">
-<title>CSS Grid Test: min-width|min-height:auto w. vertical writing-mode</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <style type="text/css">
-body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
-
-.grid {
-  display: grid;
-  float: left;
-  width: 60px;
-  grid-template-columns: 30px 30px;
-  grid-auto-rows: 30px;
-  align-items: start;
-  justify-items: start;
-  border: 3px solid blue;
-  writing-mode: vertical-rl;
-  direction: ltr;
-  margin-left: 50px;
-}
-span {
-  border: 1px solid;
-  background: lime;
-  min-width:0;
-  min-height:0;
-}
-pre {
-  writing-mode: vertical-rl;
-  direction: ltr;
-  float: left;
-}
-</style>
-</head>
-<body>
-
-<div class="grid" style="margin-left:0">
-  <span>a</span>
-  <span style="height:-moz-min-content">IAmReallyWideAndTheBorderShouldSurroundMe</span>
-</div>
-
-<pre>The border shouldn't shrink-wrap the wide text below, due to definite "height" values:</pre>
-<div class="grid">
-  <span>a</span>
-  <span style="height: 130%;">IAmReallyWideButIHaveADefiniteHeightSoIOverflow</span>
-  <span>c</span>
-  <span style="height: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
-  <span style="height: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
-  <span style="height: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
-</div>
-
-<pre>Now the same tests for 'width':</pre>
-
-<div class="grid" style="margin-bottom:50px;">
-  <span>a</span>
-  <span style="font-size:72px;height:-moz-min-content">IAmReallyTall</span>
-  <span>c</span>
-  <span>d</span>
-</div>
-
-<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
-<div class="grid">
-  <span>a</span>
-  <span style="font-size:72px; width:10%;height:-moz-min-content">IAmReallyTall</span>
-  <span>c</span>
-  <span style="font-size:72px; width:10px;height:-moz-min-content">SameHere</span>
-  <span style="font-size:72px; width:40px;height:-moz-min-content">SameHere</span>
-</div>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-<meta charset="utf-8">
-<title>CSS Grid Test: min-width|min-height:auto w. vertical writing-mode</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
-  <link rel="match" href="grid-auto-min-sizing-intrinsic-004-ref.html">
-  <style type="text/css">
-body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
-
-.grid {
-  display: grid;
-  float: left;
-  width: 60px;
-  grid-template-columns: 30px 30px;
-  grid-auto-rows: 30px;
-  align-items: start;
-  justify-items: start;
-  border: 3px solid blue;
-  writing-mode: vertical-rl;
-  direction: ltr;
-  margin-left: 50px;
-}
-span {
-  border: 1px solid;
-  background: lime;
-}
-pre {
-  writing-mode: vertical-rl;
-  direction: ltr;
-  float: left;
-}
-</style>
-</head>
-<body>
-
-<div class="grid" style="margin-left:0">
-  <span>a</span>
-  <span>IAmReallyWideAndTheBorderShouldSurroundMe</span>
-</div>
-
-<pre>The border shouldn't shrink-wrap the wide text below, due to definite "height" values:</pre>
-<div class="grid">
-  <span>a</span>
-  <span style="height: 130%">IAmReallyWideButIHaveADefiniteHeightSoIOverflow</span>
-  <span>c</span>
-  <span style="height: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
-  <span style="height: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
-  <span style="height: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
-</div>
-
-<pre>Now the same tests for 'width':</pre>
-
-<div class="grid" style="margin-bottom:50px;">
-  <span>a</span>
-  <span style="font-size:72px">IAmReallyTall</span>
-  <span>c</span>
-  <span>d</span>
-</div>
-
-<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
-<div class="grid">
-  <span>a</span>
-  <span style="font-size:72px; width:10%">IAmReallyTall</span>
-  <span>c</span>
-  <span style="font-size:72px; width:10px">SameHere</span>
-  <span style="font-size:72px; width:40px">SameHere</span>
-</div>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html
+++ /dev/null
@@ -1,136 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: Testing 'auto' min-sizing with percentage sizes</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <style type="text/css">
-body,html { color:black; background:white; font-size:10px; padding:0; margin:0; }
-
-.wrap {
-  float: left;
-}
-
-.grid {
-  display: grid;
-  float: left;
-  grid-template-columns: minmax(0,0) 1fr;
-  grid-auto-rows: 10px;
-  border: 1px solid;
-}
-
-.item {
-  grid-row: 1 / 2;
-  grid-column: 1 / 2;
-  background:lime;
-  min-height:10px;
-}
-
-.item2 {
-  grid-row: 2 / 3;
-  grid-column: 1 / 2;
-  min-width:0;
-  min-height:10px;
-  justify-self:stretch;
-  background:grey;
-}
-
-br { clear:both; }
-
-#px-border      .item { border-left:20px solid blue; }
-#percent-border .item { padding-left:10%; }
-
-#px-border .grid { grid-template-columns: minmax(20px,0) 1fr; }
-.c100 { grid-template-columns: minmax(100px,0) 1fr; }
-#px-border .c100 { grid-template-columns: minmax(120px,0) 1fr; }
-.c10 { grid-template-columns: minmax(10px,0) 1fr; }
-#px-border .c10 { grid-template-columns: minmax(30px,0) 1fr; }
-  </style>
-</head>
-<body>
-
-<table border="1">
-<tr><th>no border/padding/margin</th><th>'border-left:20px'</th><th>'padding-left:10%'</th>
-<tr><td id="no-border"></td><td id="px-border"></td><td id="percent-border"></td>
-</tr></table>
-
-<script>
-var styles = [
-"width:50%",
-"width:50%; max-width:1px",
-"width:50%; min-width:100px",
-"width:calc(100px)",
-"width:calc(100px + 50%)",
-"width:100px; padding-right:50%",
-"width:calc(100px + 50%); min-width:10px",
-"width:calc(10px + 50%); min-width:100px",
-"width:calc(75px + 50%); min-width:100px",
-"width:calc(100px + 50%); max-width:1px",
-"width:calc(100px + 50%); max-width:150px",
-"min-width:50%",
-"min-width:50%; max-width:1px",
-"min-width:50%; width:100px",
-"min-width:calc(100px)",
-"min-width:calc(100px + 50%)",
-"min-width:100px; padding-right:50%",
-"min-width:calc(100px + 50%); width:10px",
-"min-width:calc(10px + 50%); width:100px",
-"min-width:calc(75px + 50%); width:100px",
-"min-width:calc(100px + 50%); max-width:1px",
-"min-width:calc(100px + 50%); max-width:150px",
-];
-var grids = [
-"grid",
-"grid",
-"grid c100",
-"grid",
-"grid",
-"grid",
-"grid c10",
-"grid c100",
-"grid c100",
-"grid",
-"grid",
-"grid",
-"grid",
-"grid",
-"grid c100",
-"grid",
-"grid c100",
-"grid",
-"grid",
-"grid",
-"grid",
-"grid",
-];
-var containers = [ "no-border", "px-border", "percent-border" ];
-for (var i = 0; i < containers.length; ++i) {
-  var c = document.querySelector("#"+containers[i]);
-  for (var j = 0; j < styles.length; ++j) {
-    c.appendChild(document.createElement('br'));
-    c.appendChild(document.createTextNode(styles[j]));
-    c.appendChild(document.createElement('br'));
-    var item = document.createElement('div');
-    item.setAttribute("class","item");
-    item.setAttribute("style", styles[j]);
-    var item2 = document.createElement('div');
-    item2.setAttribute("class","item2");
-    var grid = document.createElement('div');
-    grid.setAttribute("class",grids[j]);
-    grid.appendChild(item);
-    grid.appendChild(item2);
-    var wrap = document.createElement('div');
-    wrap.setAttribute("class","wrap");
-    wrap.appendChild(grid);
-    c.appendChild(wrap);
-  }
-}
-</script>
-
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-auto-min-sizing-percent-001.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: Testing 'auto' min-sizing with percentage sizes</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
-  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
-  <link rel="match" href="grid-auto-min-sizing-percent-001-ref.html">
-  <style type="text/css">
-body,html { color:black; background:white; font-size:10px; padding:0; margin:0; }
-
-.wrap {
-  float: left;
-}
-
-.grid {
-  display: grid;
-  float: left;
-  grid-template-columns: minmax(auto,0) 1fr;
-  grid-auto-rows: 10px;
-  border: 1px solid;
-}
-
-.item {
-  grid-row: 1 / 2;
-  grid-column: 1 / 2;
-  background:lime;
-  min-height:10px;
-}
-
-.item2 {
-  grid-row: 2 / 3;
-  grid-column: 1 / 2;
-  min-width:0;
-  min-height:10px;
-  justify-self:stretch;
-  background:grey;
-}
-
-br { clear:both; }
-
-#px-border      .item { border-left:20px solid blue; }
-#percent-border .item { padding-left:10%; }
-
-  </style>
-</head>
-<body>
-
-<table border="1">
-<tr><th>no border/padding/margin</th><th>'border-left:20px'</th><th>'padding-left:10%'</th>
-<tr><td id="no-border"></td><td id="px-border"></td><td id="percent-border"></td>
-</tr></table>
-
-<script>
-var styles = [
-"width:50%",
-"width:50%; max-width:1px",
-"width:50%; min-width:100px",
-"width:calc(100px)",
-"width:calc(100px + 50%)",
-"width:100px; padding-right:50%",
-"width:calc(100px + 50%); min-width:10px",
-"width:calc(10px + 50%); min-width:100px",
-"width:calc(75px + 50%); min-width:100px",
-"width:calc(100px + 50%); max-width:1px",
-"width:calc(100px + 50%); max-width:150px",
-"min-width:50%",
-"min-width:50%; max-width:1px",
-"min-width:50%; width:100px",
-"min-width:calc(100px)",
-"min-width:calc(100px + 50%)",
-"min-width:100px; padding-right:50%",
-"min-width:calc(100px + 50%); width:10px",
-"min-width:calc(10px + 50%); width:100px",
-"min-width:calc(75px + 50%); width:100px",
-"min-width:calc(100px + 50%); max-width:1px",
-"min-width:calc(100px + 50%); max-width:150px",
-];
-var containers = [ "no-border", "px-border", "percent-border" ];
-for (var i = 0; i < containers.length; ++i) {
-  var c = document.querySelector("#"+containers[i]);
-  for (var j = 0; j < styles.length; ++j) {
-    c.appendChild(document.createElement('br'));
-    c.appendChild(document.createTextNode(styles[j]));
-    c.appendChild(document.createElement('br'));
-    var item = document.createElement('div');
-    item.setAttribute("class","item");
-    item.setAttribute("style", styles[j]);
-    var item2 = document.createElement('div');
-    item2.setAttribute("class","item2");
-    var grid = document.createElement('div');
-    grid.setAttribute("class","grid");
-    grid.appendChild(item);
-    grid.appendChild(item2);
-    var wrap = document.createElement('div');
-    wrap.setAttribute("class","wrap");
-    wrap.appendChild(grid);
-    c.appendChild(wrap);
-  }
-}
-</script>
-
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-align-001-ref.html
+++ /dev/null
@@ -1,190 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: align-self (part 1 of 2)</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: block;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  border-block-start: 2px solid blue;
-  inline-size: 36px;
-  block-size: 25px;
-  margin-right: 4px;
-}
-
-span {
-  display: block;
-  position: relative;
-  z-index: 1;
-  width: 13px;
-  height: 9px;
-  background: grey;
-  border-block-start: 2px solid blue;
-  border-inline-start: 2px solid lime;
-  margin: 1px 1px 2px 2px;
-  offset-inline-start: 1px;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  background: white;
-}
-abs1 {
-  border-block-start-width: 3px;
-  border-block-end-width: 2px;
-  border-inline-start-width: 1px;
-  border-inline-end-width: 3px;
-  border-style: solid;
-  border-color: lightgrey;
-}
-abs2 { display:none; }
-abs3 { display:none;  }
-abs4 { display:none;  }
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.astart,.aflexstart,.aleft,.aright,.astretch1,.astretch2,.astretch2,.astretch3,
-.astretch4,.astretch5,.astretch6,.astretch7,.aauto {
-  offset-block-start: 3px;
-}
-
-.aend,.aflexend { offset-block-start: 9px; }
-.acenter {  offset-block-start: 5px; }
-
-.hl .astretch2, .hr .astretch2 { height: 15px; }
-.hl .astretch3, .hr .astretch3 { height: 15px; }
-.hl .astretch4, .hr .astretch4 { width: 27px; }
-
-.astretch2 { width:13px; height:auto; }
-.astretch3 { height:auto; }
-.astretch4 { width:auto; }
-.astretch5 { width:auto; max-width:13px; }
-.astretch6 { height:9px; }
-.astretch7 { width:auto; height:auto; max-width:13px; height:9px; }
-
-.hl .hr {margin-left:4px;}
-.hl .vl {offset-block-start: 1px; offset-inline-start:3px;}
-.hl .vl.aend, .hl .vl.aflexend { margin-top: 7px; }
-.hl .vl.acenter { margin-top:3px; }
-.hl .vl.astretch4, .hl .vr.astretch4, .hl .vlr.astretch4, .hl .vrl.astretch4 { width:0; }
-
-.hl .vr {margin-left:6px; margin-top:3px; }
-.hl .vr.aend, .hl .vr.aflexend {margin-left:12px; margin-top:9px; }
-.hl .vr.acenter {margin-left:8px; margin-top:5px; }
-
-.hl .vlr { margin-left:0px;  margin-top:5px; }
-.hl .vlr.aend, .hl .vlr.aflexend {margin-left:-6px; margin-top:11px; }
-.hl .vlr.acenter {margin-left:-2px; margin-top:7px; }
-
-.hl .vrl { margin-left:6px;  margin-top:3px; }
-.hl .vrl.aend, .hl .vrl.aflexend {margin-left:12px; margin-top:9px; }
-.hl .vrl.acenter {margin-left:8px; margin-top:5px; }
-
-.hr .hl {margin-right:3px}
-
-.hr .vl {margin-right:5px; margin-top:5px; }
-.hr .vl.aend, .hr .vl.aflexend {margin-right:11px; margin-top:11px; }
-.hr .vl.acenter {margin-right:7px; margin-top:7px; }
-.hr .vl.astretch4, .hr .vr.astretch4, .hr .vlr.astretch4, .hr .vrl.astretch4 { width:0; }
-
-.hr .vr {margin-top:5px; margin-right:-1px; }
-.hr .vr.aend, .hr .vr.aflexend {margin-top:11px; margin-right:-7px; }
-.hr .vr.acenter {margin-top:7px; margin-right:-3px; }
-.hr .vr.astretch6, .hr .vr.astretch7 { margin-right:-1px; }
-
-.hr .vlr {margin-top:5px; margin-right:5px;  }
-.hr .vlr.aend, .hr .vlr.aflexend {margin-top:11px; margin-right:11px; }
-.hr .vlr.acenter {margin-top:7px; margin-right:7px; }
-
-.hr .vrl {margin-top:3px; margin-right:-1px;  }
-.hr .vrl.aend, .hr .vrl.aflexend {margin-top:9px; margin-right:-7px; }
-.hr .vrl.acenter {margin-top:5px; margin-right:-3px; }
-
-.vl span { offset-block-start: 1px; offset-inline-start: 3px; }
-.vl .astretch4, .vl .astretch5 { width:15px; }
-
-.vl .hl.aend, .vl .hl.aflexend { margin-left:4px; }
-.vl .hl.acenter { margin-left:1px; }
-.vl .hl.astretch6, .vl .hl.astretch7 { height:0px; }
-.vl .hr.astretch6, .vl .hr.astretch7 { height:0px; }
-.vl .hl.astretch7 { width:14px; }
-.vl .hr.astretch7 { width:14px; }
-
-.vl .hr { margin-left:8px; }
-.vl .hr.aend, .vl .hr.aflexend { margin-left:10px; }
-.vl .hr.acenter { margin-left:7px; }
-
-.vl .vl { margin-top:-1px; margin-left:4px; }
-.vl .vl.aend, .vl .vl.aflexend { margin-left:6px; }
-.vl .vl.acenter { margin-left:3px; }
-.vl .vl.astretch7, .vl .vr.astretch7, .vl .vlr.astretch7, .vl .vrl.astretch7 { width:14px; }
-
-.vl .vl.astretch2,  .vl .vl.astretch3  { height:27px; }
-.vl .vr.astretch2,  .vl .vr.astretch3  { height:27px; }
-.vl .vlr.astretch2, .vl .vlr.astretch3 { height:27px; }
-.vl .vrl.astretch2, .vl .vrl.astretch3 { height:27px; }
-
-.vl .vr  { margin-top:-1px; margin-left:6px;  }
-.vl .vr.aend, .vl .vr.aflexend { margin-left:8px; }
-.vl .vr.acenter { margin-left:5px; }
-
-.vl .vlr { margin-top:5px; margin-left:4px;  }
-.vl .vlr.aend, .vl .vlr.aflexend { margin-left:6px; }
-.vl .vlr.acenter { margin-left:3px; }
-
-.vl .vrl { margin-top:-1px; margin-left:6px;  }
-.vl .vrl.aend, .vl .vrl.aflexend { margin-left:8px; }
-.vl .vrl.acenter { margin-left:5px; }
-
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "hl", "hr", "vl" ]; // grid-item-align-002.html tests vr/vlr/vrl
-var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7", "auto" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var span = document.createElement("span");
-      span.className = wm[j] + " a" + test[k];
-      div.appendChild(span);
-      div.appendChild(document.createElement("abs1"));
-      div.appendChild(document.createElement("abs2"));
-      div.appendChild(document.createElement("abs3"));
-      div.appendChild(document.createElement("abs4"));
-
-      document.body.appendChild(div)
-    }
-    document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-align-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>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: align-self (part 1 of 2)</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
-  <link rel="match" href="grid-item-align-001-ref.html">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  border-block-start: 2px solid blue;
-  grid-template: 1px 32px 3px / 3px 20px 2px;
-  margin-right: 4px;
-}
-
-span {
-  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
-  display: block;
-  width: 13px;
-  height: 9px;
-  background: grey;
-  border-block-start: 2px solid blue;
-  border-inline-start: 2px solid lime;
-  margin: 1px 1px 2px 2px;
-  justify-self: start;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  background: lightgrey;
-}
-abs1 { grid-area: 1 / 1 / 2 / 4; }
-abs2 { grid-area: 1 / 1 / 4 / 2; }
-abs3 { grid-area: 1 / 3 / 4 / 4; }
-abs4 { grid-area: 3 / 1 / 4 / 4; }
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.astart { align-self:start; }
-.aend { align-self:end; }
-.aflexstart { align-self:flex-start; }
-.aflexend { align-self:flex-end; }
-.aselfstart { align-self:self-start; }
-.aselfend { align-self:self-end; }
-.acenter { align-self:center; }
-.aleft { align-self:left; }
-.aright { align-self:right; }
-.astretch1 { align-self:stretch; }
-.astretch2 { align-self:stretch; width:13px; height:auto; }
-.astretch3 { align-self:stretch; height:auto; }
-.astretch4 { align-self:stretch; width:auto; }
-.astretch5 { align-self:stretch; width:auto; max-width:13px; }
-.astretch6 { align-self:stretch; height:auto; max-height:9px; }
-.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
-.aauto { align-self:auto; }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "hl", "hr", "vl" ]; // grid-item-align-002.html tests vr/vlr/vrl
-var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7", "auto" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var span = document.createElement("span");
-      span.className = wm[j] + " a" + test[k];
-      div.appendChild(span);
-      div.appendChild(document.createElement("abs1"));
-      div.appendChild(document.createElement("abs2"));
-      div.appendChild(document.createElement("abs3"));
-      div.appendChild(document.createElement("abs4"));
-
-      document.body.appendChild(div)
-    }
-    document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-align-002-ref.html
+++ /dev/null
@@ -1,127 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: align-self (part 2 of 2)</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: block;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  /* border-block-start: 2px solid blue; */
-  border-block-start: 2px solid black;
-  inline-size: 36px;
-  block-size: 25px;
-  margin-right: 4px;
-  background: lightgrey;
-}
-wrap {
-  display: block;
-  position: relative;
-  offset-inline-start:1px;
-  background: white;
-  block-size:20px;
-  inline-size:32px;
-  border-block-start: 3px solid lightgrey;
-}
-
-span {
-  display: block;
-  width: 13px;
-  height: 9px;
-  background: grey;
-  border-block-start: 2px solid blue;
-  border-inline-start: 2px solid lime;
-  margin: 1px 1px 2px 2px;
-  justify-self: start;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  background: lightgrey;display:none;
-}
-abs1 { grid-area: 1 / 1 / 2 / 4; }
-abs2 { grid-area: 1 / 1 / 4 / 2; }
-abs3 { grid-area: 1 / 3 / 4 / 4; }
-abs4 { grid-area: 3 / 1 / 4 / 4; }
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.astart { align-self:start; }
-.aend { align-self:end; }
-.aflexstart { align-self:flex-start; }
-.aflexend { align-self:flex-end; }
-.aselfstart { align-self:self-start; }
-.aselfend { align-self:self-end; }
-.acenter { align-self:center; }
-.aleft { align-self:left; }
-.aright { align-self:right; }
-.astretch1 { align-self:stretch; }
-.astretch2 { align-self:stretch; width:13px; height:auto; }
-.astretch3 { align-self:stretch; height:auto; }
-.astretch4 { align-self:stretch; width:auto; }
-.astretch5 { align-self:stretch; width:auto; max-width:13px; }
-.astretch6 { align-self:stretch; height:auto; max-height:9px; }
-.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
-.aauto { align-self:auto; }
-
-.vr .aend, .vr .aflexend { margin-right:3px; }
-.vlr .aend, .vlr .aflexend { margin-left:4px; }
-.vlr .acenter { margin-left:1px; }
-.vrl .aend, .vrl .aflexend { margin-right:3px; }
-
-.astretch6 { width:13px; }
-.astretch5 { width:14px; }
-.astretch4, .astretch7 { width:15px; }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-align-001.html tests hl/hr/vl
-var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7", "auto" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var wrap = document.createElement("wrap");
-      div.appendChild(wrap);
-      var span = document.createElement("span");
-      span.className = wm[j] + " a" + test[k];
-      wrap.appendChild(span);
-      div.appendChild(document.createElement("abs1"));
-      div.appendChild(document.createElement("abs2"));
-      div.appendChild(document.createElement("abs3"));
-      div.appendChild(document.createElement("abs4"));
-
-      document.body.appendChild(div)
-    }
-    document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-align-002.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: align-self (part 2 of 2)</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
-  <link rel="match" href="grid-item-align-002-ref.html">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  /* border-block-start: 2px solid blue; */
-  border-block-start: 2px solid black;
-  grid-template: 1px 32px 3px / 3px 20px 2px;
-  margin-right: 4px;
-}
-
-span {
-  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
-  display: block;
-  width: 13px;
-  height: 9px;
-  background: grey;
-  border-block-start: 2px solid blue;
-  border-inline-start: 2px solid lime;
-  margin: 1px 1px 2px 2px;
-  justify-self: start;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  background: lightgrey;
-}
-abs1 { grid-area: 1 / 1 / 2 / 4; }
-abs2 { grid-area: 1 / 1 / 4 / 2; }
-abs3 { grid-area: 1 / 3 / 4 / 4; }
-abs4 { grid-area: 3 / 1 / 4 / 4; }
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.astart { align-self:start; }
-.aend { align-self:end; }
-.aflexstart { align-self:flex-start; }
-.aflexend { align-self:flex-end; }
-.aselfstart { align-self:self-start; }
-.aselfend { align-self:self-end; }
-.acenter { align-self:center; }
-.aleft { align-self:left; }
-.aright { align-self:right; }
-.astretch1 { align-self:stretch; }
-.astretch2 { align-self:stretch; width:13px; height:auto; }
-.astretch3 { align-self:stretch; height:auto; }
-.astretch4 { align-self:stretch; width:auto; }
-.astretch5 { align-self:stretch; width:auto; max-width:13px; }
-.astretch6 { align-self:stretch; height:auto; max-height:9px; }
-.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
-.aauto { align-self:auto; }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-align-001.html tests hl/hr/vl
-var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7", "auto" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var span = document.createElement("span");
-      span.className = wm[j] + " a" + test[k];
-      div.appendChild(span);
-      div.appendChild(document.createElement("abs1"));
-      div.appendChild(document.createElement("abs2"));
-      div.appendChild(document.createElement("abs3"));
-      div.appendChild(document.createElement("abs4"));
-
-      document.body.appendChild(div)
-    }
-    document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-align-003-ref.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: align-self with overflow</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-body { margin:40px; }
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: block;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  /* border-block-start: 2px solid blue; */
-  border-block-start: 2px solid black;
-  inline-size: 36px;
-  block-size: 25px;
-  margin-right: 20px;
-  margin-bottom: 20px;
-}
-wrap {
-  display: block;
-  position: relative;
-  offset-inline-start:1px;
-  background: white;
-  block-size:20px;
-  inline-size:32px;
-  border-block-start: 3px solid lightgrey;
-}
-
-span {
-  display: block;
-  position: absolute;
-  width: 40px;
-  height: 30px;
-  background: grey;
-  border-block-start: 2px solid blue;
-  border-inline-start: 2px solid lime;
-  margin: 1px 1px 2px 2px;
-  justify-self: start;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  background: lightgrey;
-}
-abs1 { bottom: 22px; }
-abs2 { top: 23px; }
-abs3 { left: 33px; }
-abs4 { right: 35px; }
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.true.hl.aend,  .true.hl.aflexend  { offset-block-start:-15px; }
-.true.vrl.aend, .true.vrl.aflexend { offset-inline-start:-15px; }
-.true.hl.acenter { offset-block-start:-8px; }
-.true.vrl.acenter { offset-inline-start:-8px; }
-.astretch2 { width:40px; height:15px; }
-.astretch3 { height:15px; }
-.hl.astretch4 { width:27px; }
-.vrl.astretch4 { width:0px; }
-.astretch5 { width:27px; max-width:38px; }
-.vrl.astretch5 { width:0px; }
-.astretch6 { height:15px; max-height:30px; }
-.astretch7 { width:27px; height:15px; max-width:38px; max-height:30px; }
-.vrl.astretch7 { width:0px; }
-
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "hl" ];
-var wm = [ "hl true", "vrl true", "hl safe", "vrl safe" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7", "auto" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var wrap = document.createElement("wrap");
-      div.appendChild(wrap);
-      var span = document.createElement("span");
-      span.className = wm[j] + " a" + test[k];
-      div.appendChild(span);
-      wrap.appendChild(span);
-      div.appendChild(document.createElement("abs1"));
-      div.appendChild(document.createElement("abs2"));
-      div.appendChild(document.createElement("abs3"));
-      div.appendChild(document.createElement("abs4"));
-
-      document.body.appendChild(div)
-    }
-    document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-align-003.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: align-self with overflow</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
-  <link rel="match" href="grid-item-align-003-ref.html">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-body { margin:40px; }
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  /* border-block-start: 2px solid blue; */
-  border-block-start: 2px solid black;
-  grid-template: 1px 32px 3px / 3px 20px 2px;
-  margin-right: 20px;
-  margin-bottom: 20px;
-}
-
-span {
-  grid-area: 2 / 2; /* the center grid area */
-  display: block;
-  width: 40px;
-  height: 30px;
-  background: grey;
-  border-block-start: 2px solid blue;
-  border-inline-start: 2px solid lime;
-  margin: 1px 1px 2px 2px;
-  justify-self: start;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  background: lightgrey;
-}
-abs1 { grid-area: 1 / 1 / 2 / 4; }
-abs2 { grid-area: 1 / 1 / 4 / 2; }
-abs3 { grid-area: 1 / 3 / 4 / 4; }
-abs4 { grid-area: 3 / 1 / 4 / 4; }
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.astart { align-self:true start; }
-.aend { align-self:true end; }
-.aflexstart { align-self:true flex-start; }
-.aflexend { align-self:true flex-end; }
-.aselfstart { align-self:true self-start; }
-.aselfend { align-self:true self-end; }
-.acenter { align-self:true center; }
-.aleft { align-self:true left; }
-.aright { align-self:true right; }
-.astretch1 { align-self:true stretch; }
-.astretch2 { align-self:true stretch; width:40px; height:auto; }
-.astretch3 { align-self:true stretch; height:auto; }
-.astretch4 { align-self:true stretch; width:auto; }
-.astretch5 { align-self:true stretch; width:auto; max-width:38px; }
-.astretch6 { align-self:true stretch; height:auto; max-height:30px; }
-.astretch7 { align-self:true stretch; width:auto; height:auto; max-width:38px; max-height:30px; }
-.aauto { align-self:auto; }
-
-.safe.astart { align-self:safe start; }
-.safe.aend { align-self:safe end; }
-.safe.aflexstart { align-self:safe flex-start; }
-.safe.aflexend { align-self:safe flex-end; }
-.safe.aselfstart { align-self:safe self-start; }
-.safe.aselfend { align-self:safe self-end; }
-.safe.acenter { align-self:safe center; }
-.safe.aleft { align-self:safe left; }
-.safe.aright { align-self:safe right; }
-.safe.astretch1 { align-self:safe stretch; }
-.safe.astretch2 { align-self:safe stretch; }
-.safe.astretch3 { align-self:safe stretch; }
-.safe.astretch4 { align-self:safe stretch; }
-.safe.astretch5 { align-self:safe stretch; }
-.safe.astretch6 { align-self:safe stretch; }
-.safe.astretch7 { align-self:safe stretch; }
-
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "hl" ];
-var wm = [ "hl", "vrl", "hl safe", "vrl safe" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7", "auto" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var span = document.createElement("span");
-      span.className = wm[j] + " a" + test[k];
-      div.appendChild(span);
-      div.appendChild(document.createElement("abs1"));
-      div.appendChild(document.createElement("abs2"));
-      div.appendChild(document.createElement("abs3"));
-      div.appendChild(document.createElement("abs4"));
-
-      document.body.appendChild(div)
-    }
-    document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-justify-001-ref.html
+++ /dev/null
@@ -1,121 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: justify-self (part 1 of 2)</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: block;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  /* border-inline-start: 2px solid lime; */
-  border-inline-start: 2px solid black;
-  inline-size: 36px;
-  block-size: 25px;
-  margin-right: 4px;
-  background: lightgrey;
-}
-
-wrap {
-  display: block;
-  position: relative;
-  offset-inline-start: 1px;
-  background: white;
-  block-size: 20px;
-  inline-size: 32px;
-  border-block-start: 3px solid lightgrey;
-}
-
-span {
-  display: block;
-  width: 13px;
-  height: 9px;
-  background: grey;
-  border-block-start: 2px solid blue;
-  border-inline-start: 2px solid lime;
-  margin: 1px 1px 2px 2px;
-  align-self: start;
-}
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.jstart { justify-self:start; }
-.jend { justify-self:end; }
-.jflexstart { justify-self:flex-start; }
-.jflexend { justify-self:flex-end; }
-.jselfstart { justify-self:self-start; }
-.jselfend { justify-self:self-end; }
-.jcenter { justify-self:center; }
-.jleft { justify-self:left; }
-.jright { justify-self:right; }
-.jstretch1 { justify-self:stretch; }
-.jstretch2 { justify-self:stretch; width:13px; height:auto; }
-.jstretch3 { justify-self:stretch; height:auto; }
-.jstretch4 { justify-self:stretch; width:auto; }
-.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
-.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
-.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
-.jauto { justify-self:auto; }
-
-.hl .jend, .hl .jflexend, .hl .jright { margin-left: 16px; }
-.hr .jend, .hr .jflexend { margin-right: 15px; }
-.hl .jcenter { margin-left: 7px; }
-.vl .jend, .vl .jflexend { margin-right:3px; }
-.hr .jcenter { margin-right: 7px; }
-.hr .jleft { margin-right: 15px; }
-
-.hl .jstretch5, .hl .jstretch7, .hr .jstretch5, .hr .jstretch7 { width:14px; }
-
-.jstretch4 { width:27px; }
-.vl .jstretch4 { width:0px; }
-
-.vl .jstretch2, .vl .jstretch3 { height:27px; }
-.vl .jstretch6, .vl .jstretch7 { height:9px;  }
-.vl .jend, .vl .jflexend, .vl .jright { margin-top: 19px; }
-.vl .jcenter { margin-top: 9px; }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl
-var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7", "auto" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var wrap = document.createElement("wrap");
-      div.appendChild(wrap);
-      var span = document.createElement("span");
-      span.className = wm[j] + " j" + test[k];
-      wrap.appendChild(span);
-      document.body.appendChild(div)
-    }
-    document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-justify-001.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: justify-self (part 1 of 2)</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
-  <link rel="match" href="grid-item-justify-001-ref.html">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  /* border-inline-start: 2px solid lime; */
-  border-inline-start: 2px solid black;
-  grid-template: 1px 32px 3px / 3px 20px 2px;
-  margin-right: 4px;
-}
-
-span {
-  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
-  display: block;
-  width: 13px;
-  height: 9px;
-  background: grey;
-  border-block-start: 2px solid blue;
-  border-inline-start: 2px solid lime;
-  margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
-  align-self: start;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  background: lightgrey;
-}
-abs1 { grid-area: 1 / 1 / 2 / 4; }
-abs2 { grid-area: 1 / 1 / 4 / 2; }
-abs3 { grid-area: 1 / 3 / 4 / 4; }
-abs4 { grid-area: 3 / 1 / 4 / 4; }
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.jstart { justify-self:start; }
-.jend { justify-self:end; }
-.jflexstart { justify-self:flex-start; }
-.jflexend { justify-self:flex-end; }
-.jselfstart { justify-self:self-start; }
-.jselfend { justify-self:self-end; }
-.jcenter { justify-self:center; }
-.jleft { justify-self:left; }
-.jright { justify-self:right; }
-.jstretch1 { justify-self:stretch; }
-.jstretch2 { justify-self:stretch; width:13px; height:auto; }
-.jstretch3 { justify-self:stretch; height:auto; }
-.jstretch4 { justify-self:stretch; width:auto; }
-.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
-.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
-.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
-.jauto { justify-self:auto; }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl
-var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7", "auto" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var span = document.createElement("span");
-      span.className = wm[j] + " j" + test[k];
-      div.appendChild(span);
-      div.appendChild(document.createElement("abs1"));
-      div.appendChild(document.createElement("abs2"));
-      div.appendChild(document.createElement("abs3"));
-      div.appendChild(document.createElement("abs4"));
-
-      document.body.appendChild(div)
-    }
-    document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-justify-002-ref.html
+++ /dev/null
@@ -1,120 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: justify-self (part 2 of 2)</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: block;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  /* border-inline-start: 2px solid lime; */
-  border-inline-start: 2px solid black;
-  inline-size: 36px;
-  block-size: 25px;
-  margin-right: 4px;
-  background: lightgrey;
-}
-
-wrap {
-  display: block;
-  position: relative;
-  offset-inline-start: 1px;
-  background: white;
-  block-size: 20px;
-  inline-size: 32px;
-  border-block-start: 3px solid lightgrey;
-}
-
-span {
-  display: block;
-  width: 13px;
-  height: 9px;
-  background: grey;
-  border-block-start: 2px solid blue;
-  border-inline-start: 2px solid lime;
-  margin: 1px 1px 2px 2px;
-  align-self: start;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  background: lightgrey;
-}
-abs1 { grid-area: 1 / 1 / 2 / 4; }
-abs2 { grid-area: 1 / 1 / 4 / 2; }
-abs3 { grid-area: 1 / 3 / 4 / 4; }
-abs4 { grid-area: 3 / 1 / 4 / 4; }
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.jstart { justify-self:start; }
-.jend { justify-self:end; }
-.jflexstart { justify-self:flex-start; }
-.jflexend { justify-self:flex-end; }
-.jselfstart { justify-self:self-start; }
-.jselfend { justify-self:self-end; }
-.jcenter { justify-self:center; }
-.jleft { justify-self:left; }
-.jright { justify-self:right; }
-.jstretch1 { justify-self:stretch; }
-.jstretch2 { justify-self:stretch; width:13px; height:27px; }
-.jstretch3 { justify-self:stretch; height:27px; }
-.jstretch4 { justify-self:stretch; width:auto; }
-.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
-.jstretch6 { justify-self:stretch; height:9px; max-height:9px; }
-.jstretch7 { justify-self:stretch; width:auto; height:9px; max-width:13px; max-height:9px; }
-.jauto { justify-self:auto; }
-
-.vr .jend, .vr .jflexend, .vr .jright,
-.vrl .jend, .vrl .jflexend, .vrl .jright { margin-top: 19px; }
-.vlr .jend, .vlr .jflexend, .vlr .jleft { margin-bottom: 20px;}
-.vr .jcenter, .vrl .jcenter { margin-top: 9px; }
-.vlr .jcenter { margin-bottom: 9px; }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-justify-001.html tests hl/hr/vl
-var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7", "auto" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var wrap = document.createElement("wrap");
-      div.appendChild(wrap);
-      var span = document.createElement("span");
-      span.className = wm[j] + " j" + test[k];
-      wrap.appendChild(span);
-      document.body.appendChild(div)
-    }
-    document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-justify-002.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: justify-self (part 2 of 2)</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
-  <link rel="match" href="grid-item-justify-002-ref.html">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  /* border-inline-start: 2px solid lime; */
-  border-inline-start: 2px solid black;
-  grid-template: 1px 32px 3px / 3px 20px 2px;
-  margin-right: 4px;
-}
-
-span {
-  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
-  display: block;
-  width: 13px;
-  height: 9px;
-  background: grey;
-  border-block-start: 2px solid blue;
-  border-inline-start: 2px solid lime;
-  margin: 1px 1px 2px 2px;
-  align-self: start;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  background: lightgrey;
-}
-abs1 { grid-area: 1 / 1 / 2 / 4; }
-abs2 { grid-area: 1 / 1 / 4 / 2; }
-abs3 { grid-area: 1 / 3 / 4 / 4; }
-abs4 { grid-area: 3 / 1 / 4 / 4; }
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.jstart { justify-self:start; }
-.jend { justify-self:end; }
-.jflexstart { justify-self:flex-start; }
-.jflexend { justify-self:flex-end; }
-.jselfstart { justify-self:self-start; }
-.jselfend { justify-self:self-end; }
-.jcenter { justify-self:center; }
-.jleft { justify-self:left; }
-.jright { justify-self:right; }
-.jstretch1 { justify-self:stretch; }
-.jstretch2 { justify-self:stretch; width:13px; height:auto; }
-.jstretch3 { justify-self:stretch; height:auto; }
-.jstretch4 { justify-self:stretch; width:auto; }
-.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
-.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
-.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
-.jauto { justify-self:auto; }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-justify-001.html tests hl/hr/vl
-var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7", "auto" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var span = document.createElement("span");
-      span.className = wm[j] + " j" + test[k];
-      div.appendChild(span);
-      div.appendChild(document.createElement("abs1"));
-      div.appendChild(document.createElement("abs2"));
-      div.appendChild(document.createElement("abs3"));
-      div.appendChild(document.createElement("abs4"));
-
-      document.body.appendChild(div)
-    }
-    document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-sizing-percent-001-ref.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <title>Reference 001</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435">
-  <meta charset="utf-8">
-  <style type="text/css">
-body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
-
-.grid {
-  position:relative;
-  background-color: grey;
-  width: 173px;
-  height: 53px;
-}
-
-.item {
-  position: absolute;
-  background: lime;
-  background-clip: content-box;
-}
-#abs > div div {
-  position: absolute;
-}
-.pbox {
-  box-sizing: border-box;
-}
-.p { padding:2px 3px; }
-.m { margin:2px 3px; }
-.c1.p,.c2.p { padding:5px 9px; }
-.c1.m,.c2.m { margin:5px 9px; }
-.b { border:solid black; }
-
-#t1 { width:50px; height: 20px; }
-#t2 { width:50px; height: 20px; }
-#t0 { width:60px; height: 30px; }
-#t3 { width:60px; height: 30px; }
-#t4 { width:150px; height: 50px; }
-#t5 { width:50px; height: 20px; }
-#t6 { width:50px; height: 20px; }
-#t7 { width:60px; height: 30px; }
-#t8 { width:150px; height: 50px; }
-#t9 { width:50px; height: 20px; }
-#tA { width:60px; height: 30px; }
-#tB { width:150px; height: 50px; }
-#tC { width:50px; height: 20px; }
-#tD { width:50px; height: 20px; }
-#tE { width:150px; height: 50px; }
-
-</style>
-</head>
-<body>
-
-<div style="float:left">
-<div class="grid"><div id="t1" class="item"></div></div>
-<div class="grid"><div id="t2" class="item pbox p"></div></div>
-<div class="grid"><div id="t0" class="item c1 p"></div></div>
-<div class="grid"><div id="t3" class="item c1 pbox p"></div></div>
-<div class="grid"><div id="t4" class="item c2 pbox p"></div></div>
-<div class="grid"><div id="t5" class="item pbox b"></div></div>
-<div class="grid"><div id="t6" class="item pbox p b"></div></div>
-<div class="grid"><div id="t7" class="item c1 pbox p b"></div></div>
-<div class="grid"><div id="t8" class="item c2 pbox p b"></div></div>
-<div class="grid"><div id="t9" class="item pbox m"></div></div>
-<div class="grid"><div id="tA" class="item c1 pbox m"></div></div>
-<div class="grid"><div id="tB" class="item c2 pbox m"></div></div>
-<div class="grid"><div id="tC" class="item pbox p m"></div></div>
-<div class="grid"><div id="tD" class="item pbox p b m"></div></div>
-<div class="grid"><div id="tE" class="item c2 pbox p b m"></div></div>
-</div>
-
-<div id="abs" style="float:left">
-<div class="grid"><div id="t1" class="item"></div></div>
-<div class="grid"><div id="t2" class="item pbox p"></div></div>
-<div class="grid"><div id="t0" class="item c1 p"></div></div>
-<div class="grid"><div id="t3" class="item c1 pbox p"></div></div>
-<div class="grid"><div id="t4" class="item c2 pbox p"></div></div>
-<div class="grid"><div id="t5" class="item pbox b"></div></div>
-<div class="grid"><div id="t6" class="item pbox p b"></div></div>
-<div class="grid"><div id="t7" class="item c1 pbox p b"></div></div>
-<div class="grid"><div id="t8" class="item c2 pbox p b"></div></div>
-<div class="grid"><div id="t9" class="item pbox m"></div></div>
-<div class="grid"><div id="tA" class="item c1 pbox m"></div></div>
-<div class="grid"><div id="tB" class="item c2 pbox m"></div></div>
-<div class="grid"><div id="tC" class="item pbox p m"></div></div>
-<div class="grid"><div id="tD" class="item pbox p b m"></div></div>
-<div class="grid"><div id="tE" class="item c2 pbox p b m"></div></div>
-</div>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-sizing-percent-001.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <title>CSS Test: Testing grid item percent sizes</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435">
-  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
-  <link rel="match" href="grid-item-sizing-percent-001-ref.html">
-  <meta charset="utf-8">
-  <style type="text/css">
-body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
-
-.grid {
-  display: grid;
-  position:relative;
-  background-color: grey;
-  grid-template-columns: 50px 100px;
-  grid-template-rows: 20px 30px;
-  width: 173px;
-  height: 53px;
-  justify-items: start;
-  align-items: start;
-}
-
-.item {
-  width: 100%;
-  height: 100%;
-  background: lime;
-  grid-area: 1 / 1 / 2 / 2;
-  background-clip: content-box;
-  min-width: 0;
-  min-height: 0;
-}
-.c1 {
-  width: 40%;
-  height: 60%;
-  grid-area: 1 / 1 / 3 / 3;
-}
-.c2 {
-  grid-area: 1 / 1 / 3 / 3;
-}
-#abs > div div {
-  position: absolute;
-}
-.pbox {
-  box-sizing: border-box;
-}
-
-.p { padding:10% 6%; }
-.m { margin:10% 6%; }
-.b { border:solid black; }
-
-</style>
-</head>
-<body>
-
-<div style="float:left">
-<div class="grid"><div class="item"></div></div>
-<div class="grid"><div class="item pbox p"></div></div>
-<div class="grid"><div class="item c1 p"></div></div>
-<div class="grid"><div class="item c1 pbox p"></div></div>
-<div class="grid"><div class="item c2 pbox p"></div></div>
-<div class="grid"><div class="item pbox b"></div></div>
-<div class="grid"><div class="item pbox p b"></div></div>
-<div class="grid"><div class="item c1 pbox p b"></div></div>
-<div class="grid"><div class="item c2 pbox p b"></div></div>
-<div class="grid"><div class="item pbox m"></div></div>
-<div class="grid"><div class="item c1 pbox m"></div></div>
-<div class="grid"><div class="item c2 pbox m"></div></div>
-<div class="grid"><div class="item pbox p m"></div></div>
-<div class="grid"><div class="item pbox p b m"></div></div>
-<div class="grid"><div class="item c2 pbox p b m"></div></div>
-</div>
-
-<div id="abs" style="float:left">
-<div class="grid"><div class="item"></div></div>
-<div class="grid"><div class="item pbox p"></div></div>
-<div class="grid"><div class="item c1 p"></div></div>
-<div class="grid"><div class="item c1 pbox p"></div></div>
-<div class="grid"><div class="item c2 pbox p"></div></div>
-<div class="grid"><div class="item pbox b"></div></div>
-<div class="grid"><div class="item pbox p b"></div></div>
-<div class="grid"><div class="item c1 pbox p b"></div></div>
-<div class="grid"><div class="item c2 pbox p b"></div></div>
-<div class="grid"><div class="item pbox m"></div></div>
-<div class="grid"><div class="item c1 pbox m"></div></div>
-<div class="grid"><div class="item c2 pbox m"></div></div>
-<div class="grid"><div class="item pbox p m"></div></div>
-<div class="grid"><div class="item pbox p b m"></div></div>
-<div class="grid"><div class="item c2 pbox p b m"></div></div>
-</div>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-sizing-px-001.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <title>CSS Test: Testing grid item 'px' sizes</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435">
-  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
-  <link rel="match" href="grid-item-sizing-percent-001-ref.html">
-  <meta charset="utf-8">
-  <style type="text/css">
-body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
-
-.grid {
-  display: grid;
-  position:relative;
-  background-color: grey;
-  grid-template-columns: 50px 100px;
-  grid-template-rows: 20px 30px;
-  width: 173px;
-  height: 53px;
-}
-
-.item {
-  width: 100%;
-  height: 100%;
-  background: lime;
-  grid-area: 1 / 1 / 2 / 2;
-  background-clip: content-box;
-}
-.c1 {
-  width: 40%;
-  height: 60%;
-  grid-area: 1 / 1 / 3 / 3;
-}
-.c2 {
-  grid-area: 1 / 1 / 3 / 3;
-}
-#abs > div div {
-  position: absolute;
-}
-.pbox {
-  box-sizing: border-box;
-}
-
-.p { padding:2px 3px; }
-.m { margin:2px 3px; }
-.c1.p,.c2.p { padding:5px 9px; }
-.c1.m,.c2.m { margin:5px 9px; }
-.b { border:solid black; }
-
-</style>
-</head>
-<body>
-
-<div style="float:left">
-<div class="grid"><div class="item"></div></div>
-<div class="grid"><div class="item pbox p"></div></div>
-<div class="grid"><div class="item c1 p"></div></div>
-<div class="grid"><div class="item c1 pbox p"></div></div>
-<div class="grid"><div class="item c2 pbox p"></div></div>
-<div class="grid"><div class="item pbox b"></div></div>
-<div class="grid"><div class="item pbox p b"></div></div>
-<div class="grid"><div class="item c1 pbox p b"></div></div>
-<div class="grid"><div class="item c2 pbox p b"></div></div>
-<div class="grid"><div class="item pbox m"></div></div>
-<div class="grid"><div class="item c1 pbox m"></div></div>
-<div class="grid"><div class="item c2 pbox m"></div></div>
-<div class="grid"><div class="item pbox p m"></div></div>
-<div class="grid"><div class="item pbox p b m"></div></div>
-<div class="grid"><div class="item c2 pbox p b m"></div></div>
-</div>
-
-<div id="abs" style="float:left">
-<div class="grid"><div class="item"></div></div>
-<div class="grid"><div class="item pbox p"></div></div>
-<div class="grid"><div class="item c1 p"></div></div>
-<div class="grid"><div class="item c1 pbox p"></div></div>
-<div class="grid"><div class="item c2 pbox p"></div></div>
-<div class="grid"><div class="item pbox b"></div></div>
-<div class="grid"><div class="item pbox p b"></div></div>
-<div class="grid"><div class="item c1 pbox p b"></div></div>
-<div class="grid"><div class="item c2 pbox p b"></div></div>
-<div class="grid"><div class="item pbox m"></div></div>
-<div class="grid"><div class="item c1 pbox m"></div></div>
-<div class="grid"><div class="item c2 pbox m"></div></div>
-<div class="grid"><div class="item pbox p m"></div></div>
-<div class="grid"><div class="item pbox p b m"></div></div>
-<div class="grid"><div class="item c2 pbox p b m"></div></div>
-</div>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-stretch-001-ref.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: align-items:stretch / justify-items:stretch </title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <style type="text/css">
-html,body {
-  color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  position: relative;
-  float: left;
-  border: 1px solid;
-  border-block-start: 2px solid blue;
-  grid-template: 1px 25px 5px / 3px 21px 1px;
-  padding: 1px 1px 3px 2px;
-  margin-right: 2px;
-  width: 40px;
-  height: 40px;
-  align-items: start;
-  justify-items: start;
-}
-
-span {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  grid-area: 2 / 2 / 3 / 3; /* the center area */
-  display: block;
-  width: 17px;
-  height: 13px;
-  background: lightgrey;
-  /* good for manual debugging but causes anti-aliasing diff: */
-  /* border-block-start: 2px solid blue; */
-  /* border-inline-start: 2px solid lime; */
-  border-block-start: 2px solid black;
-  border-inline-start: 2px solid black;
-  margin: 1px 1px 2px 2px;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  width:2px; height:2px;
-  background: black;
-}
-abs1 { top:auto; left:auto; }
-abs2 { top:auto; right:auto; }
-abs3 { bottom:auto; left:auto; }
-abs4 { bottom:auto; right:auto; }
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.stretch1 { }
-.stretch2 { height:auto; }
-.stretch3 { height:auto; max-height:13px; }
-.stretch4 { width:auto; }
-.stretch5 { width:auto; max-width:17px; }
-.stretch6 { width:auto; height:auto; max-width:17px; max-height:13px; }
-.stretch7 { width:auto; height:auto; }
-
-  </style>
-</head>
-<body>
-<pre>
-There should be no red areas.
-All grey areas should have a black dot in each corner.
-</pre>
-
-
-<script>
-var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var span = document.createElement("span");
-      span.className = wm[j] + " " + test[k];
-      div.appendChild(span);
-      span.appendChild(document.createElement("abs1"));
-      span.appendChild(document.createElement("abs2"));
-      span.appendChild(document.createElement("abs3"));
-      span.appendChild(document.createElement("abs4"));
-
-      document.body.appendChild(div)
-    }
-    if (j % 2 == 1) document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-item-stretch-001.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: align-items:stretch / justify-items:stretch </title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-items-property">
-  <link rel="match" href="grid-align-content-001-ref.html">
-  <style type="text/css">
-html,body {
-  color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  float: left;
-  border: 1px solid;
-  border-block-start: 2px solid blue;
-  grid-template: 1px 25px 5px / 3px 21px 1px;
-  padding: 1px 1px 3px 2px;
-  margin-right: 2px;
-  width: 40px;
-  height: 40px;
-  align-items: stretch;
-  justify-items: stretch;
-}
-
-span {
-  position: relative;
-  grid-area: 2 / 2 / 3 / 3; /* the center area */
-  display: block;
-  width: 17px;
-  height: 13px;
-  background: red;
-  /* good for manual debugging but causes anti-aliasing diff: */
-  /* border-block-start: 2px solid blue; */
-  /* border-inline-start: 2px solid lime; */
-  border-block-start: 2px solid black;
-  border-inline-start: 2px solid black;
-  margin: 1px 1px 2px 2px;
-}
-
-abs1,abs2,abs3,abs4 {
-  position: absolute;
-  top:0;left:0;bottom:0;right:0;
-  width:2px; height:2px;
-  background: black;
-}
-abs1 { top:auto; left:auto; }
-abs2 { top:auto; right:auto; }
-abs3 { bottom:auto; left:auto; }
-abs4 { bottom:auto; right:auto; }
-fill {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: lightgrey;
-}
-
-.hl { writing-mode: horizontal-tb; direction:ltr; }
-.hr { writing-mode: horizontal-tb; direction:rtl; }
-.vl { writing-mode: vertical-lr; }
-.vr { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.stretch1 { }
-.stretch2 { height:auto; }
-.stretch3 { height:auto; max-height:13px; }
-.stretch4 { width:auto; }
-.stretch5 { width:auto; max-width:17px; }
-.stretch6 { width:auto; height:auto; max-width:17px; max-height:13px; }
-.stretch7 { width:auto; height:auto; }
-
-  </style>
-</head>
-<body>
-<pre>
-There should be no red areas.
-All grey areas should have a black dot in each corner.
-</pre>
-
-
-<script>
-var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
-             "stretch6", "stretch7" ];
-for (var i = 0; i < gridwm.length; ++i) {
-  for (var j = 0; j < wm.length; ++j) {
-    for (var k = 0; k < test.length; ++k) {
-      var div = document.createElement("div");
-      div.className = "grid " + gridwm[i];
-      var span = document.createElement("span");
-      span.className = wm[j] + " " + test[k];
-      div.appendChild(span);
-      span.appendChild(document.createElement("fill"));
-      span.appendChild(document.createElement("abs1"));
-      span.appendChild(document.createElement("abs2"));
-      span.appendChild(document.createElement("abs3"));
-      span.appendChild(document.createElement("abs4"));
-
-      document.body.appendChild(div)
-    }
-    if (j % 2 == 1) document.body.appendChild(document.createElement("separator"));
-  }
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-justify-content-001-ref.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: justify-content</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  border-block-start: 2px solid blue;
-  grid-template: 11px 7px 5px / 3px 5px 7px;
-  padding: 1px 1px 3px 2px;
-  margin-right: 4px;
-  width: 40px;
-  height: 40px;
-}
-
-item1,item2,item3 {
-  display: block;
-  position: relative;
-  background: grey;
-  align-self: stretch;
-  justify-self: stretch;
-}
-
-item1 { grid-area: 1 / 1; }
-item2 { grid-area: 2 / 2; }
-item3 { grid-area: 3 / 3; }
-
-.hl  { writing-mode: horizontal-tb; direction:ltr; }
-.hr  { writing-mode: horizontal-tb; direction:rtl; }
-.vl  { writing-mode: vertical-lr; }
-.vr  { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.jend * , .jflexend * { offset-inline-start:17px; }
-.jcenter * {  offset-inline-start:8.5px; }
-.hr.jleft * , .vlr.jleft * { offset-inline-start:17px; }
-.hl.jright * , .vrl.jright * , .vl.jright * , .vr.jright * { offset-inline-start:17px; }
-
-.jspace-between item2 { offset-inline-start:8.5px; }
-.jspace-between item3 { offset-inline-start:17px; }
-
-.jspace-around item1 { offset-inline-start:2.85px;  }
-.jspace-around item2 { offset-inline-start:8.5px;  }
-.jspace-around item3 { offset-inline-start:14.16px;  }
-
-.jspace-evenly item1 { offset-inline-start:4.25px;  }
-.jspace-evenly item2 { offset-inline-start:8.5px;  }
-.jspace-evenly item3 { offset-inline-start:12.75px;  }
-
-.jstretch2 { grid-template-columns:1fr 7px 5px; }
-.jstretch3 { grid-template-columns:19.5px 15.5px 5px; }
-.jstretch4 { grid-template-columns:16.66666px 12.66666px 10.66666px; }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "space-between", "space-around", "space-evenly",
-             "stretch1", "stretch2", "stretch3", "stretch4" ];
-for (var k = 0; k < test.length; ++k) {
-  for (var i = 0; i < gridwm.length; ++i) {
-      var div = document.createElement("div");
-      div.className = "grid j" + test[k] + " " + gridwm[i];
-      div.appendChild(document.createElement("item1"));
-      div.appendChild(document.createElement("item2"));
-      div.appendChild(document.createElement("item3"));
-      document.body.appendChild(div)
-  }
-    document.body.appendChild(document.createElement("separator"));
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-justify-content-001.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: justify-content</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
-  <link rel="match" href="grid-justify-content-001-ref.html">
-  <style type="text/css">
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-separator { clear:both; display:block; height:6px; }
-
-.grid {
-  display: grid;
-  float: left;
-  position: relative;
-  border: 1px solid;
-  border-block-start: 2px solid blue;
-  grid-template: 11px 7px 5px / 3px 5px 7px;
-  padding: 1px 1px 3px 2px;
-  margin-right: 4px;
-  width: 40px;
-  height: 40px;
-}
-
-item1,item2,item3 {
-  display: block;
-  background: grey;
-  align-self: stretch;
-  justify-self: stretch;
-}
-
-item1 { grid-area: 1 / 1; }
-item2 { grid-area: 2 / 2; }
-item3 { grid-area: 3 / 3; }
-
-.hl  { writing-mode: horizontal-tb; direction:ltr; }
-.hr  { writing-mode: horizontal-tb; direction:rtl; }
-.vl  { writing-mode: vertical-lr; }
-.vr  { writing-mode: vertical-rl; }
-.vlr { writing-mode: vertical-lr; direction:rtl; }
-.vrl { writing-mode: vertical-rl; direction:ltr; }
-
-.jstart { justify-content:start; }
-.jend { justify-content:end; }
-.jflexstart { justify-content:flex-start; }
-.jflexend { justify-content:flex-end; }
-.jcenter { justify-content:center; }
-.jleft { justify-content:left; }
-.jright { justify-content:right; }
-
-.jspace-between{ justify-content:space-between; }
-.jspace-around { justify-content:space-around;  }
-.jspace-evenly { justify-content:space-evenly;  }
-
-.jstretch1, .jstretch2, .jstretch3, .jstretch4 { justify-content:stretch; }
-.jstretch2 { grid-template-columns: minmax(11px,auto) 7px 5px; }
-.jstretch3 { grid-template-columns: minmax(11px,auto) minmax(7px,auto) 5px; }
-.jstretch4 { grid-template-columns: minmax(11px,auto) minmax(7px,auto) minmax(5px,auto); }
-
-</style>
-</head>
-<body>
-
-<script>
-var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
-var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
-             "space-between", "space-around", "space-evenly",
-             "stretch1", "stretch2", "stretch3", "stretch4" ];
-for (var k = 0; k < test.length; ++k) {
-  for (var i = 0; i < gridwm.length; ++i) {
-      var div = document.createElement("div");
-      div.className = "grid j" + test[k] + " " + gridwm[i];
-      div.appendChild(document.createElement("item1"));
-      div.appendChild(document.createElement("item2"));
-      div.appendChild(document.createElement("item3"));
-      document.body.appendChild(div)
-  }
-    document.body.appendChild(document.createElement("separator"));
-}
-</script>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-justify-content-002-ref.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: Testing track distribution rounding errors</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
-  <style type="text/css">
-html,body {
-  color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-
-.grid {
-  display: grid;
-  grid-template-rows: 0 7px;
-  border: 1px solid blue;
-  background: black;
-}
-
-x { background: lime; height:7px; }
-
-  </style>
-</head>
-<body>
-
-<script>
-var justify = [ "" ];
-var cols = [ "151", "1" ];
-var widths = [ "151", "152", "153", "154", "155", "156", "157", "158", "159",
-               "160", "161", "301", "302", "303", "304", "305", "306", "307",
-               "308", "309", "310", "311" ];
-for (var c = 0; c < cols.length; ++c) {
-  var chunk = document.createElement('div');
-  chunk.setAttribute("style", "float:left; margin:1px;");
-  for (var j = 0; j < justify.length; ++j) {
-    for (var w = 0; w < widths.length; ++w) {
-      var grid = document.createElement('div');
-      grid.style.width = widths[w]+"px";
-      if (widths[w] > 300) {
-        grid.style.gridTemplateColumns = "2px " + (widths[w]-4) + "px 2px";
-      } else {
-        grid.style.gridTemplateColumns = "1px " + (widths[w]-2) + "px 1px";
-      }
-      grid.className = "grid " + justify[j];
-      if (cols[c] > 1) {
-        var x = document.createElement('x');
-        x.style.gridColumn = "2 / 3";
-        x.setAttribute('col', cols[c])
-        grid.appendChild(x);
-      }
-      chunk.appendChild(grid);
-    }
-  }
-  document.body.appendChild(chunk);
-}
-document.body.style.display = "";
-</script>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-justify-content-002.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: Testing track distribution rounding errors</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
-  <link rel="match" href="grid-justify-content-002-ref.html">
-  <style type="text/css">
-html,body {
-  color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-
-.grid {
-  display: grid;
-  grid-auto-columns: minmax(1px,auto);
-  grid-template-rows: 0px 7px;
-  border: 1px solid blue;
-}
-.stretch       { justify-content: stretch; }
-/* I don't know how to make a reference for these so they are only included to
-   trigger possible assertions: */
-.space-between { justify-content: space-between; visibility:hidden; }
-.space-around  { justify-content: space-around;  visibility:hidden; }
-.space-evenly  { justify-content: space-evenly;  visibility:hidden; }
-
-.grid :last-child, .grid :nth-child(2) { background:black; }
-
-x { background: lime; height:7px; }
-
-  </style>
-</head>
-<body>
-
-<script>
-var justify = [ "stretch", "space-between", "space-around", "space-evenly" ];
-var cols = [ "151", "1" ];
-var widths = [ "151", "152", "153", "154", "155", "156", "157", "158", "159",
-               "160", "161", "301", "302", "303", "304", "305", "306", "307",
-               "308", "309", "310", "311" ];
-for (var c = 0; c < cols.length; ++c) {
-  var chunk = document.createElement('div');
-  chunk.setAttribute("style", "float:left; margin:1px");
-  for (var j = 0; j < justify.length; ++j) {
-    for (var w = 0; w < widths.length; ++w) {
-      var grid = document.createElement('div');
-      grid.style.width = widths[w]+"px";
-      grid.className = "grid " + justify[j];
-      var span = document.createElement('span');
-      span.style.gridColumn = "1 / span " + cols[c];
-      grid.appendChild(span);
-      for (var x = 0; x < cols[c]; ++x) {
-        grid.appendChild(document.createElement('x'));
-      }
-      chunk.appendChild(grid);
-    }
-  }
-  document.body.appendChild(chunk);
-}
-document.body.style.display = "";
-</script>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-justify-content-003-ref.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: Testing track fallback values</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
-  <style type="text/css">
-html,body {
-  color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-
-.grid {
-  display: grid;
-  grid-auto-columns: minmax(1px,auto);
-  grid-template-rows: 0px 7px;
-  border: 2px solid black;
-  float: left;
-  margin-right: 20px;
-}
-
-.grid :last-child { background:grey; }
-.grid :nth-child(2) { background:pink; }
-
-x { background: lime; height:7px; }
-
-  </style>
-</head>
-<body>
-
-<script>
-document.body.style.display = "none";
-var justify = [
-   "start",
-   "end",
-   "center",
-   "start",
-   "end",
-   "start",
-   "start",
-   "start",
-   "start",
-   "end",
-   "center",
-   "start",
-   "end",
-   "start",
-   "end safe",
-   "end",
-   "center",
-   "center",
-   "end",
-   "end safe",
-   "start",
-   "center",
-   "end",
-   "end safe",
-   "left",
-   "end",
-];
-var cols = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" ];
-var widths = [ "0", "1", "2", "3", "4", "5", "6" ];
-for (var j = 0; j < justify.length; ++j) {
-  // document.body.appendChild(document.createTextNode(justify[j])); // for debugging
-  var chunk = document.createElement('div');
-  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
-  for (var c = 0; c < cols.length; ++c) {
-    for (var w = 0; w < widths.length; ++w) {
-     // set this to true if you want to see all tests
-     var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1;
-     if (run_test) {
-      var grid = document.createElement('div');
-      grid.style.width = widths[w]+"px";
-      grid.className = "grid";
-      grid.style.justifyContent = justify[j];
-      var span = document.createElement('span');
-      span.style.gridColumn = "1 / span " + cols[c];
-      grid.appendChild(span);
-      for (var x = 0; x < cols[c]; ++x) {
-        grid.appendChild(document.createElement('x'));
-      }
-      if (j < 5) { // The stretch tests.
-        if (c == 1)
-          grid.style.background = 'pink'
-      }
-      if (j == 6 && cols[c] == 1) { // The 'end safe' tests.
-        if (widths[w] != 0) grid.style.justifyContent = 'end';
-      }
-      if (j == 7 && cols[c] == 1) { // The 'center safe' tests.
-        if (widths[w] != 0) grid.style.justifyContent = 'center';
-      }
-      if (j > 15) { // The space-around and space-evenly tests.
-        if (cols[c] == 1) {
-          if (widths[w] == 0) {
-            if (grid.style.justifyContent != 'end') {
-              grid.style.justifyContent = 'start';
-            }
-          } else {
-            grid.style.justifyContent = 'center';
-          }
-        }
-      }
-      chunk.appendChild(grid);
-     }
-    }
-  }
-  document.body.appendChild(chunk);
-}
-document.body.style.display = "";
-</script>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-justify-content-003.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: Testing 'justify-content' fallback values</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
-  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
-  <link rel="match" href="grid-justify-content-003-ref.html">
-  <style type="text/css">
-html,body {
-  color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-
-.grid {
-  display: grid;
-  grid-auto-columns: minmax(1px,auto);
-  grid-template-rows: 0px 7px;
-  border: 2px solid black;
-  float: left;
-  margin-right: 20px;
-}
-
-.grid :last-child { background:grey; }
-.grid :nth-child(2) { background:pink; }
-
-x { background: lime; height:7px; }
-
-  </style>
-</head>
-<body>
-
-<script>
-document.body.style.display = "none";
-var justify = [
-   "stretch",
-   "stretch end",
-   "stretch center",
-   "stretch end safe",
-   "stretch end true",
-   "start safe",
-   "end safe",
-   "center safe",
-   "start true",
-   "end true",
-   "center true",
-   "space-between",
-   "space-between end",
-   "space-between start",
-   "space-between end safe",
-   "space-between end true",
-   "space-around",
-   "space-around center",
-   "space-around right",
-   "space-around right safe",
-   "space-around left",
-   "space-evenly",
-   "space-evenly flex-end",
-   "space-evenly flex-end safe",
-   "space-evenly flex-start true",
-   "space-evenly right",
-];
-var cols = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" ];
-var widths = [ "0", "1", "2", "3", "4", "5", "6" ];
-for (var j = 0; j < justify.length; ++j) {
-  // document.body.appendChild(document.createTextNode(justify[j])); // for debugging
-  var chunk = document.createElement('div');
-  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
-  for (var c = 0; c < cols.length; ++c) {
-    for (var w = 0; w < widths.length; ++w) {
-     // set this to true if you want to see all tests
-     var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1;
-     if (run_test) {
-      var grid = document.createElement('div');
-      grid.style.width = widths[w]+"px";
-      grid.className = "grid";
-      grid.style.justifyContent = justify[j];
-      var span = document.createElement('span');
-      span.style.gridColumn = "1 / span " + cols[c];
-      grid.appendChild(span);
-      for (var x = 0; x < cols[c]; ++x) {
-        grid.appendChild(document.createElement('x'));
-      }
-      chunk.appendChild(grid);
-     }
-    }
-  }
-  document.body.appendChild(chunk);
-}
-document.body.style.display = "";
-</script>
-
-</body>
-</html>
--- a/layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html
+++ b/layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html
@@ -40,17 +40,17 @@ body,html { color:black; background:whit
   left: 1px; top: 3px; bottom: 1px;
   width: 74px; height: auto;
 }
 .c {
   left: 1px; top: 3px;
   width: 51px; height: 2px;
 }
 .d {
-  left: 1px; top: 11px;
+  left: 1px; top: 18px;
   width: 212px; height: 1px;
 }
 .e {
   right: 5px; bottom: 1px;
   width: 212px; height: 58px;
 }
 .f {
   right: 5px; bottom: 1px;
@@ -93,17 +93,17 @@ span {
 <span class="b abs" style="width:212px">b</span>
 </div>
 
 <div class="grid">
 <span class="c abs">c</span>
 </div>
 
 <div class="grid">
-<span class="d abs" style="height:50px;top:11px">d</span>
+<span class="d abs" style="height:58px;top:3px">d</span>
 </div>
 
 <div class="grid">
 <span class="e abs">e</span>
 </div>
 
 <div class="grid">
 <span class="f abs">f</span>
--- a/layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html
+++ b/layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html
@@ -7,17 +7,17 @@
   <meta charset="utf-8">
   <title>CSS Test: Testing placement of grid items outside the explicit grid</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
   <style type="text/css">
 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
 
 .grid {
  border: 1px solid blue;
- width:270px;
+ width:300px;
 }
 
 .a { background:lime; }
 .a2 { height:38px; background:lime; }
 .b { display:block; background:pink; }
 .c { width:1px; background:yellow; }
 .e { background:silver; }
 .f { background:cyan; }
@@ -45,17 +45,16 @@ span {
 <span class="c" style="width:18px">c</span><span class="a">a</span><span class="e">e</span><span class="b">b</span>
 </div>
 <div class="grid">
 <span class="g">g</span><span class="a">a</span><span class="b">b</span>
 </div>
 <div class="grid">
 <span class="c">c</span><span class="e">e</span><span class="a">a</span><span class="b" span="2">b</span>
 </div>
-
 <div class="grid">
 <span class="c">c</span><span class="f">f</span><span class="a">a</span><span class="b" span="2">b</span>
 </div>
 <div class="grid">
 <span class="c">c</span><span class="e" style="width:1px">e</span><span class="a" style="margin-left:23px">a</span><span class="b" span="4">b</span>
 </div>
 <div class="grid">
 <span class="c">c</span><span class="f" style="margin-left:3px; width:21px">f</span><span class="a">a</span><span class="b" span="4">b</span>
@@ -70,37 +69,34 @@ span {
 <span class="c">c</span><span class="f" style="width:4px;margin-left:138px">f</span><span class="f">f</span><span class="a">a</span><span class="b" span="50">b</span>
 </div>
 <div class="grid">
 <span class="c">c</span><span class="g" style="width:1px">g</span><span class="a" style="margin-left:161px">a</span><span class="b" span="50">b</span>
 </div>
 <div class="grid">
 <span class="g" style="width:1px">g</span><span class="g" style="width:1px">g</span><span class="a" style="margin-left:161px">a</span><span class="b" span="50">b</span>
 </div>
-
-</div><div style="float:left; margin-top:300px;">
-
 <div class="grid" style="height:40px; position:relative">
-<span style="margin-top:-10000px; height:20060px; width:78px;"></span>
-<span style="position:absolute; z-index:1; left:0; width:216px; height:10000px">b</span><br>
-<span style="margin-top:-10042px; height:30px; width:78px; color:black"></span>
+<span style="margin-top:-10000px; height:10060px; width:78px;"></span>
+<span style="position:absolute; left:0; width:216px; ">b</span><br>
+<span style="margin-top:-42px; height:30px; width:78px; color:cyan"></span>
 </div>
 <div class="grid" style="height:40px; position:relative">
-<span style="margin-top:20px; position:absolute; left:0; z-index:0; height:30px; width:78px; color:black"></span>
-<span style="margin-top:-10000px; height:20018px; width:78px;"></span>
-<span style="position:absolute; left:0; width:216px; height:2000px">b</span><br>
+<span style="margin-top:-10000px; height:10018px; width:78px;"></span>
+<span style="position:absolute; left:0; width:216px;">b</span><br>
+<span style="position:absolute; left:0; z-index:1; height:30px; width:78px; color:lime"></span>
 </div>
 <div class="grid" style="height:40px; position:relative;">
-<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:black;"></span>
+<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:cyan;"></span>
 <span style="position:absolute; left:82px; width: 30px;">b</span>
 </div>
 <div class="grid" style="height:40px; position:relative">
-<span style="position:absolute; left:0; z-index:1; margin-top:20px; height:30px; width:78px; color:black; border-left-color:black;"></span>
-<span style="position:absolute; left:0; width:216px; height:2000px">b</span><br>
-<span style="position:relative; z-index:1; margin-top:-10000px; height:20018px; width:78px;"></span>
+<span style="position:relative; z-index:2; margin-top:-10000px; height:10018px; width:78px;"></span>
+<span style="position:absolute; left:0; z-index:2; width:216px;">b</span><br>
+<span style="position:absolute; left:0; z-index:2; height:30px; width:78px; color:tan"></span>
 </div>
 <div class="grid" style="height:40px; position:relative;">
 <span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:silver;"></span>
 <span style="position:absolute; left:143px; width: 120px;">b</span>
 </div>
 
 </div><div style="float:left" class="f2">
 
--- a/layout/reftests/css-grid/grid-placement-auto-implicit-001.html
+++ b/layout/reftests/css-grid/grid-placement-auto-implicit-001.html
@@ -15,32 +15,31 @@ body,html { color:black; background:whit
 
 .grid {
  display: grid;
  grid-template-columns: 20px 20px 20px 20px;
  grid-template-rows: 20px;
  grid-auto-columns: 3px;
  grid-auto-rows: 20px;
  border: 1px solid blue;
- width: 270px;
+ width: 300px;
 }
 
 .a { grid-area: 1 / 2; background:lime; }
 .a2 { grid-column:2; grid-row:span 2 / 1; background:lime; }
 .b { grid-column: span 1 / 2; grid-row: 2; background:pink; }
 .b2 { grid-column: span 1 / 2; background:pink; }
 .c { grid-row: 1; background:yellow; }
 .e { grid-row: 1; background:silver; }
 .f { grid-column: 1; background:cyan; }
 .g { background:tan; }
 
 span {
   border: 1px solid;
   line-height: 18px;
-  min-width: 0;
 }
 
   </style>
 </head>
 <body style="overflow:hidden">
 
 <div style="float:left">
 
@@ -72,37 +71,34 @@ span {
 <span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="f" style="grid-column: span 2 / 1;">f</span><span class="f">f</span>
 </div>
 <div class="grid">
 <span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="g">g</span>
 </div>
 <div class="grid">
 <span class="a">a</span><span class="b" span="50">b</span><span class="g">g</span><span class="g">g</span>
 </div>
-
-</div><div style="float:left; margin-top:300px;">
-
 <div class="grid" style="height:40px">
 <span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
-<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:black"></span>
+<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:cyan"></span>
 <span span="50" style="margin-top:-399960px">b</span>
 </div>
 <div class="grid" style="height:40px">
 <span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
-<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:black"></span>
+<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:lime"></span>
 <span style="grid-column: 1 / span 50; margin-top:-399960px">b</span>
 </div>
 <div class="grid" style="height:40px">
 <span style="grid-area: 1 / X -10000 / 5 / span 10000; width: 30px; margin-left:-29980px"></span>
-<span style="grid-area: 1 / 1 / 5 / span 10000; width: 30px; margin-left:-29980px; color:black"></span>
+<span style="grid-area: 1 / 1 / 5 / span 10000; width: 30px; margin-left:-29980px; color:cyan"></span>
 <span style="grid-row: 1; grid-column:auto / span 1; width: 30px; margin-left:-59980px">b</span>
 </div>
 <div class="grid" style="height:40px">
 <span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
-<span style="grid-area: 1 / 1 / span 9998 / 5; margin-top:-199980px; height:30px; color:black"></span>
+<span style="grid-area: 1 / 1 / span 9998 / 5; margin-top:-199980px; height:30px; color:tan"></span>
 <span span="50" style="grid-row:auto / span 5; margin-top:-399960px">b</span>
 </div>
 <div class="grid" style="height:40px">
 <span style="grid-area: 1 / X -10000 / 5 / span 10000; width: 30px; margin-left:-29980px"></span>
 <span style="grid-area: 1 / 1 / 5 / span 9995; width: 30px; margin-left:-29980px; color:silver"></span>
 <span style="grid-row: 1; grid-column:auto / span 10; margin-left:-59910px; margin-right:59800px">b</span>
 </div>
 
--- a/layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html
+++ b/layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html
@@ -70,17 +70,17 @@ span {
 <span class="b" style="margin-left:56px; width:30000px; ">b</span>
 </div>
 
 <div class="grid cols" style="margin-left:-30000px;">
 <span class="b" style="width:1px; margin-left:30062px">b</span>
 <span class="c" style="margin-left:29000px; width:1063px;">c</span>
 </div>
 <div class="grid rows" style="border:none">
-<span class="b" style="margin-top:11px;height:1px;"></span>
+<span class="b" style="margin-top:11px;height:1px;">b</span>
 </div>
 
 
 <script>
 var elms = document.querySelectorAll("[span].b");
 for (i=0; i < elms.length; ++i) {
   var e = elms[i];
   var span = e.getAttribute("span");
--- a/layout/reftests/css-grid/grid-placement-definite-implicit-001.html
+++ b/layout/reftests/css-grid/grid-placement-definite-implicit-001.html
@@ -25,17 +25,16 @@ body,html { color:black; background:whit
 .a { grid-area: 1 / 2; background:lime; }
 .b { grid-column: span 1 / 2; grid-row: 1; background:pink; }
 .c { grid-row: 2; background:yellow; }
 .d { grid-row: 2; grid-column: 1 / span 20000; background:cyan; }
 
 span {
   border: 1px solid;
   line-height: 18px;
-  min-width: 0;
 }
 
   </style>
 </head>
 <body style="overflow:hidden">
 
 <div class="grid">
 <span class="a">a</span><span class="b">b</span><span class="c">c</span>
@@ -75,17 +74,17 @@ span {
 <span class="b" style="grid-column: 9997 / span 1000; margin-left:-30000px; ">b</span>
 </div>
 
 <div class="grid cols" style="margin-left:-30000px;">
 <span class="b" style="grid-column: span 1 / a;">b</span>
 <span class="c" style="grid-column: a;">c</span>
 </div>
 <div class="grid rows" style="grid-auto-rows:3px; grid-auto-cols:20px; margin-top:-30000px; border:none">
-<span class="b" style="grid-row: span 1 / a;"></span>
+<span class="b" style="grid-row: span 1 / a;">b</span>
 </div>
 
 <script>
 var elms = document.querySelectorAll("[span]");
 for (i=0; i < elms.length; ++i) {
   var e = elms[i];
   e.style.gridColumnStart = "span " + e.getAttribute("span");
 }
--- a/layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html
+++ b/layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html
@@ -22,79 +22,79 @@ html,body {
 span {
   position: absolute;
   top:0; left:0; width:20px; height:20px;
   background: lime;
   border: 1px solid black;
   box-sizing: border-box;
 }
 
-.XeN   { left: 20px; width: 80px; }
-.XsN   { width: 80px; }              .XsN ~ span { top:20px; left:60px; }
+.XeN   { left: 100px;   }
+.XsN   { width: 80px;   }            .XsN ~ span { top:20px; left:60px; }
 .NeX   { left: 20px; width: 80px; }
-.NsX   { width: 80px; }              .NsX  ~ span { left: 60px; top: 20px; }
-.XeA   { width: 100px; }             .XeA  ~ span { top: 20px; }
+.NsX   { left: 20px;  }
+.XeA   { left: 100px; }
 .XsA   { width: 60px; }              .XsA  ~ span { left: 60px; }
 .XsA2  { width: 80px; }              .XsA2 ~ span { left: 60px; top: 20px; }
 .XsA3  { width: 120px; }             .XsA3 ~ span { left: 60px; top: 20px; }
-.AsX   { width: 60px;}               .AsX  ~ span { left: 60px; }
+.AsX   { }                           .AsX  ~ span { top: 20px;  }
 .xsN   { }                           .xsN  ~ span { left: 20px; }
 .x2sN  { width: 40px; }              .x2sN ~ span { left: 40px; }
 .xsN2  { width: 40px; }              .xsN2 ~ span { left: 20px; top: 20px; }
 .xXs   { }                           .xXs  ~ span { left: 60px;}
 .aXs   { }                           .aXs  ~ span { left: 60px;}
 .aXe   { left: 20px; width: 60px; }
 .xXe   { width: 100px; }             .xXe  ~ span { left: 20px; top: 20px; }
 
-.AXe   { width: 80px; }              .AXe  ~ span { top: 20px; }
+.AXe   { width: 80px;   }            .AXe  ~ span { top: 20px; }
 .A2Xe  { left: 20px; width: 60px; }
 .XXe   { left: 60px; }
 .XX3e  { left: 60px; width: 40px; }
-.XbXe  { width: 100px; }             .XbXe ~ span  { top: 20px; left: 40px; }
+.XbXe  { width: 100px;   }           .XbXe ~ span  { top: 20px; left: 40px; }
 .XX0b  { }                           .XX0b ~ span  { left: 60px; }
 .XX1b  { }                           .XX1b ~ span  { left: 60px; }
 .XX2b  { width: 40px; }              .XX2b ~ span  { left: 60px; }
 .XbN1  { width: 60px; }              .XbN1 ~ span  { left: 60px; }
 .XbN2  { width: 80px; }              .XbN2 ~ span  { top: 20px; left: 60px; }
-.Xbb   { }                           .Xbb  ~ span  { left: 80px; }
-.Xee   { left: 60px; width:40px; }
+.Xbb   { }                           .Xbb  ~ span  { left: 60px; }
+.Xee   { left: 100px; }
 .nX2s  { width: 40px; }              .nX2s ~ span  { left: 80px; }
 .nXs   { width: 40px; }              .nXs  ~ span  { left: 60px; }
 .nXe   { left: 20px; width: 40px; }
 .nX2e  { left: 40px; width: 40px; }
 
 .nX3e  { left: 60px; width: 40px; }
 .n3Xe  { width: 60px; }              .n3Xe ~ span  { top: 20px; }
 .n4Xe  { width: 80px; }              .n4Xe ~ span  { top: 20px; left: 20px; }
 .Xen3  { left: 60px; width: 60px; }
 .Xea   { left: 60px;  }
 .Xea2  { left: 60px; width: 40px; }
 .Xea3  { left: 60px; width: 60px; }
 .Xsa   { }                           .Xsa   ~ span  { left: 20px; }
-.Xsa2  { width: 40px;   }            .Xsa2  ~ span  { left: 20px; top: 20px; }
-.Xsa4  { width: 100px;  }            .Xsa4  ~ span  { left: 20px; top: 20px; }
+.Xsa2  { width: 40px;   }            .Xsa2  ~ span  { left: 20px; top: 20px;  }
+.Xsa4  { width: 100px;  }            .Xsa4  ~ span  { left: 20px; top: 20px;  }
 .Xs2a  { width: 40px;   }            .Xs2a  ~ span  { left: 40px; }
-.Xs2a2 { width: 60px;   }            .Xs2a2 ~ span  { left: 40px; top: 20px; }
-.Xs2a4 { width: 120px;  }            .Xs2a4 ~ span  { left: 40px; top: 20px; }
+.Xs2a2 { width: 60px;   }            .Xs2a2 ~ span  { left: 40px; top: 20px;}
+.Xs2a4 { width: 120px;  }            .Xs2a4 ~ span  { left: 40px; top: 20px;  }
 .Xs3a  { width: 60px;   }            .Xs3a  ~ span  { left: 60px; }
 .Xs3a2 { width: 80px;   }            .Xs3a2 ~ span  { left: 60px; top: 20px; }
 .Xs3a4 { width: 140px;  }            .Xs3a4 ~ span  { left: 60px; top: 20px; }
 
 .nxe   { width: 60px;   }            .nxe   ~ span  { top: 20px; }
 .nx3e  { width: 100px;  }            .nx3e  ~ span  { top: 20px; }
 .n2x3e { left: 20px; width: 80px; }
 .Axe   { width: 60px;   }            .Axe   ~ span  { top: 20px; }
 .A2xe  { left: 20px; width: 40px; }
 .Ax3e  { width: 100px;  }            .Ax3e  ~ span  { top: 20px; }
 .A2x3e { left: 20px; width: 80px; }
 .Aa    { }                           .Aa    ~ span  { top: 20px; }
 .A2a   { left: 20px; width: 40px; }
 .Aa3   { width: 80px;   }            .Aa3   ~ span  { top: 20px; }
-.AXs   { width: 40px; }              .AXs   ~ span  { left:40px; }
-.A2Xs  { width: 60px; }              .A2Xs  ~ span  { left: 40px; top:20px; }
+.AXs   { }                           .AXs   ~ span  { top: 20px; }
+.A2Xs  { left: 20px; }
 ._Xs   { }                           ._Xs   ~ span  { left: 60px; }
 ._Xe   { left: 60px; }
 ._xe   { }                           ._xe   ~ span  { top: 20px; }
 ._x3e  { }                           ._x3e  ~ span  { top: 20px; }
 
 ._xa   { }                           ._xa   ~ span  { top: 20px; }
 ._xa3  { }                           ._xa3  ~ span  { top: 20px; }
 ._xn3  { width: 60px;   }            ._xn3  ~ span  { top: 20px; }
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html
+++ /dev/null
@@ -1,157 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: implicit named areas</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215182">
-  <style type="text/css">
-div {
-  display: grid;
-  grid-auto-columns: 3px;
-  grid-auto-rows: 3px;
-  border: 1px solid;
-  float: left;
-  width: 100px;
-  margin: 2px;
-  align-items: stretch;
-  justify-items: stretch;
-  align-content: start;
-  justify-content: start;
-}
-.row-tests div {
-  height: 100px;
-}
-span { background:lime; grid-column:A/B; grid-row:A/B; }
-
-.col-valid { grid-template-columns:[A] 40px [] 40px [B]; }
-.row-valid { grid-template-rows:   [A] 40px [] 40px [B]; }
-
-.col-start-1 { grid-template-columns:[A] 40px [] 40px; }
-.row-start-1 { grid-template-rows:   [A] 40px [] 40px; }
-
-.col-end-1 { grid-template-columns:[B] 40px [] 40px; }
-.row-end-1 { grid-template-rows:   [B] 40px [] 40px; }
-
-.col-start { grid-template-columns: 40px [A] 40px []; }
-.row-start { grid-template-rows:    40px [A] 40px []; }
-
-.col-end { grid-template-columns:40px [B] 40px; }
-.row-end { grid-template-rows:   40px [B] 40px; }
-
-.col-end-start { grid-template-columns:[B] 40px [A] 40px; }
-.row-end-start { grid-template-rows:   [B] 40px [A] 40px; }
-
-.col-start-end-start { grid-template-columns:[A] 40px [B] 40px [A] 40px; }
-.row-start-end-start { grid-template-rows:   [A] 40px [B] 40px [A] 40px; }
-
-.col-start-start-end { grid-template-columns:[A] 40px [A] 40px [B] 40px; }
-.row-start-start-end { grid-template-rows:   [A] 40px [A] 40px [B] 40px; }
-
-.col-start-end-end { grid-template-columns:[A] 40px [B] 40px [B]; }
-.row-start-end-end { grid-template-rows:   [A] 40px [B] 40px [B]; }
-
-.col-start-last { grid-template-columns: 40px [] 40px [A]; }
-.row-start-last { grid-template-rows:    40px [] 40px [A]; }
-
-.col-same-1 { grid-template-columns:[B A] 40px [] 40px; }
-.row-same-1 { grid-template-rows:   [B A] 40px [] 40px; }
-
-.col-same-2 { grid-template-columns:40px [B A] 40px; }
-.row-same-2 { grid-template-rows:   40px [B A] 40px; }
-
-.col-same-2b { grid-template-columns:40px [A B] 40px; }
-.row-same-2b { grid-template-rows:   40px [A B] 40px; }
-
-.col-same-3 { grid-template-columns:40px [] 40px [B A]; }
-.row-same-3 { grid-template-rows:   40px [] 40px [B A]; }
-    </style>
-</head>
-<body>
-
-<div class="col-valid"><span></span></div>
-<div class="col-start-1"><span></span></div>
-<div class="col-end-1"><span></span></div>
-<div class="col-start"><span></span></div>
-<div class="col-end"><span></span></div>
-<div class="col-end-start"><span></span></div>
-<div class="col-start-end-start"><span></span></div>
-
-<br clear="all">
-
-<div class="col-valid row-valid"><span></span></div>
-<div class="col-start-1 row-valid"><span></span></div>
-<div class="col-end-1 row-valid"><span></span></div>
-<div class="col-start row-valid"><span></span></div>
-<div class="col-end row-valid"><span></span></div>
-<div class="col-end-start row-valid"><span></span></div>
-<div class="col-start-end-start row-valid"><span></span></div>
-
-<br clear="all">
-
-<div class="col-start-start-end"><span></span></div>
-<div class="col-start-end-end"><span></span></div>
-<div class="col-start-last"><span></span></div>
-<div class="col-same-1"><span></span></div>
-<div class="col-same-2"><span></span></div>
-<div class="col-same-2b"><span></span></div>
-<div class="col-same-3"><span></span></div>
-
-<br clear="all">
-
-<div class="col-start-start-end row-valid"><span></span></div>
-<div class="col-start-end-end row-valid"><span></span></div>
-<div class="col-start-last row-valid"><span></span></div>
-<div class="col-same-1 row-valid"><span></span></div>
-<div class="col-same-2 row-valid"><span></span></div>
-<div class="col-same-2b row-valid"><span></span></div>
-<div class="col-same-3 row-valid"><span></span></div>
-
-<br clear="all">
-
-<x class="row-tests">
-
-<div class="row-valid"><span></span></div>
-<div class="row-start-1"><span></span></div>
-<div class="row-end-1"><span></span></div>
-<div class="row-start"><span></span></div>
-<div class="row-end"><span></span></div>
-<div class="row-end-start"><span></span></div>
-<div class="row-start-end-start"><span></span></div>
-
-<br clear="all">
-
-<div class="row-valid col-valid"><span></span></div>
-<div class="row-start-1 col-valid"><span></span></div>
-<div class="row-end-1 col-valid"><span></span></div>
-<div class="row-start col-valid"><span></span></div>
-<div class="row-end col-valid"><span></span></div>
-<div class="row-end-start col-valid"><span></span></div>
-<div class="row-start-end-start col-valid"><span></span></div>
-
-<br clear="all">
-
-<div class="row-start-start-end"><span></span></div>
-<div class="row-start-end-end"><span></span></div>
-<div class="row-start-last"><span></span></div>
-<div class="row-same-1"><span></span></div>
-<div class="row-same-2"><span></span></div>
-<div class="row-same-2b"><span></span></div>
-<div class="row-same-3"><span></span></div>
-
-<br clear="all">
-
-<div class="row-start-start-end col-valid"><span></span></div>
-<div class="row-start-end-end col-valid"><span></span></div>
-<div class="row-start-last col-valid"><span></span></div>
-<div class="row-same-1 col-valid"><span></span></div>
-<div class="row-same-2 col-valid"><span></span></div>
-<div class="row-same-2b col-valid"><span></span></div>
-<div class="row-same-3 col-valid"><span></span></div>
-
-</x>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-placement-implicit-named-areas-001.html
+++ /dev/null
@@ -1,159 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: implicit named areas</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215182">
-  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#grid-placement-slot">
-  <link rel="match" href="grid-placement-implicit-named-areas-001-ref.html">
-  <style type="text/css">
-div {
-  display: grid;
-  grid-auto-columns: 3px;
-  grid-auto-rows: 3px;
-  border: 1px solid;
-  float: left;
-  width: 100px;
-  margin: 2px;
-  align-items: stretch;
-  justify-items: stretch;
-  align-content: start;
-  justify-content: start;
-}
-.row-tests div {
-  height: 100px;
-}
-span { background:lime; grid-column:A; grid-row:A; }
-
-.col-valid { grid-template-columns:[A-start] 40px [] 40px [A-end]; }
-.row-valid { grid-template-rows:   [A-start] 40px [] 40px [A-end]; }
-
-.col-start-1 { grid-template-columns:[A-start] 40px [] 40px; }
-.row-start-1 { grid-template-rows:   [A-start] 40px [] 40px; }
-
-.col-end-1 { grid-template-columns:[A-end] 40px [] 40px; }
-.row-end-1 { grid-template-rows:   [A-end] 40px [] 40px; }
-
-.col-start { grid-template-columns: 40px [A-start] 40px []; }
-.row-start { grid-template-rows:    40px [A-start] 40px []; }
-
-.col-end { grid-template-columns:40px [A-end] 40px; }
-.row-end { grid-template-rows:   40px [A-end] 40px; }
-
-.col-end-start { grid-template-columns:[A-end] 40px [A-start] 40px; }
-.row-end-start { grid-template-rows:   [A-end] 40px [A-start] 40px; }
-
-.col-start-end-start { grid-template-columns:[A-start] 40px [A-end] 40px [A-start] 40px; }
-.row-start-end-start { grid-template-rows:   [A-start] 40px [A-end] 40px [A-start] 40px; }
-
-.col-start-start-end { grid-template-columns:[A-start] 40px [A-start] 40px [A-end] 40px; }
-.row-start-start-end { grid-template-rows:   [A-start] 40px [A-start] 40px [A-end] 40px; }
-
-.col-start-end-end { grid-template-columns:[A-start] 40px [A-end] 40px [A-end]; }
-.row-start-end-end { grid-template-rows:   [A-start] 40px [A-end] 40px [A-end]; }
-
-.col-start-last { grid-template-columns: 40px [] 40px [A-start]; }
-.row-start-last { grid-template-rows:    40px [] 40px [A-start]; }
-
-.col-same-1 { grid-template-columns:[A-end A-start] 40px [] 40px; }
-.row-same-1 { grid-template-rows:   [A-end A-start] 40px [] 40px; }
-
-.col-same-2 { grid-template-columns:40px [A-end A-start] 40px; }
-.row-same-2 { grid-template-rows:   40px [A-end A-start] 40px; }
-
-.col-same-2b { grid-template-columns:40px [A-start A-end] 40px; }
-.row-same-2b { grid-template-rows:   40px [A-start A-end] 40px; }
-
-.col-same-3 { grid-template-columns:40px [] 40px [A-end A-start]; }
-.row-same-3 { grid-template-rows:   40px [] 40px [A-end A-start]; }
-    </style>
-</head>
-<body>
-
-<div class="col-valid"><span></span></div>
-<div class="col-start-1"><span></span></div>
-<div class="col-end-1"><span></span></div>
-<div class="col-start"><span></span></div>
-<div class="col-end"><span></span></div>
-<div class="col-end-start"><span></span></div>
-<div class="col-start-end-start"><span></span></div>
-
-<br clear="all">
-
-<div class="col-valid row-valid"><span></span></div>
-<div class="col-start-1 row-valid"><span></span></div>
-<div class="col-end-1 row-valid"><span></span></div>
-<div class="col-start row-valid"><span></span></div>
-<div class="col-end row-valid"><span></span></div>
-<div class="col-end-start row-valid"><span></span></div>
-<div class="col-start-end-start row-valid"><span></span></div>
-
-<br clear="all">
-
-<div class="col-start-start-end"><span></span></div>
-<div class="col-start-end-end"><span></span></div>
-<div class="col-start-last"><span></span></div>
-<div class="col-same-1"><span></span></div>
-<div class="col-same-2"><span></span></div>
-<div class="col-same-2b"><span></span></div>
-<div class="col-same-3"><span></span></div>
-
-<br clear="all">
-
-<div class="col-start-start-end row-valid"><span></span></div>
-<div class="col-start-end-end row-valid"><span></span></div>
-<div class="col-start-last row-valid"><span></span></div>
-<div class="col-same-1 row-valid"><span></span></div>
-<div class="col-same-2 row-valid"><span></span></div>
-<div class="col-same-2b row-valid"><span></span></div>
-<div class="col-same-3 row-valid"><span></span></div>
-
-<br clear="all">
-
-<x class="row-tests">
-
-<div class="row-valid"><span></span></div>
-<div class="row-start-1"><span></span></div>
-<div class="row-end-1"><span></span></div>
-<div class="row-start"><span></span></div>
-<div class="row-end"><span></span></div>
-<div class="row-end-start"><span></span></div>
-<div class="row-start-end-start"><span></span></div>
-
-<br clear="all">
-
-<div class="row-valid col-valid"><span></span></div>
-<div class="row-start-1 col-valid"><span></span></div>
-<div class="row-end-1 col-valid"><span></span></div>
-<div class="row-start col-valid"><span></span></div>
-<div class="row-end col-valid"><span></span></div>
-<div class="row-end-start col-valid"><span></span></div>
-<div class="row-start-end-start col-valid"><span></span></div>
-
-<br clear="all">
-
-<div class="row-start-start-end"><span></span></div>
-<div class="row-start-end-end"><span></span></div>
-<div class="row-start-last"><span></span></div>
-<div class="row-same-1"><span></span></div>
-<div class="row-same-2"><span></span></div>
-<div class="row-same-2b"><span></span></div>
-<div class="row-same-3"><span></span></div>
-
-<br clear="all">
-
-<div class="row-start-start-end col-valid"><span></span></div>
-<div class="row-start-end-end col-valid"><span></span></div>
-<div class="row-start-last col-valid"><span></span></div>
-<div class="row-same-1 col-valid"><span></span></div>
-<div class="row-same-2 col-valid"><span></span></div>
-<div class="row-same-2b col-valid"><span></span></div>
-<div class="row-same-3 col-valid"><span></span></div>
-
-</x>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-placement-negative-lines-001-ref.html
+++ /dev/null
@@ -1,116 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>Reference: Placement involving negative line numbers</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215957">
-  <style type="text/css">
-body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
-
-.grid {
-  display: grid;
-  border: 1px solid;
-  grid-auto-rows: 20px;
-}
-.t1 {
-  grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px;
-
-}
-.t2 {
-  grid-template-columns: 40px 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px;
-}
-.t3 {
-  grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px;
-}
-
-x {
-  background: lime;
-  border: 1px solid;
-}
-
-  </style>
-</head>
-<body>
-
-<pre>
-grid-template-columns: 60px [A] 60px 60px;
-grid-auto-columns: 40px;
-</pre>
-
-<pre>grid-column-start:</pre>
-<div class="grid t1">
-<x style="grid-row:1; grid-column-start:5; background:grey"></x>
-<x style="grid-row:2; grid-column-start:7">-1</x>
-<x style="grid-row:2; grid-column-start:8">4</x>
-<x style="grid-row:3; grid-column-start:6">-2</x>
-<x style="grid-row:3; grid-column-start:5">-3</x>
-<x style="grid-row:3; grid-column-start:4">-4</x>
-<x style="grid-row:3; grid-column-start:3">-5</x>
-<x style="grid-row:4; grid-column-start:6">A -1</x>
-<x style="grid-row:4; grid-column-start:4">B -1</x>
-<x style="grid-row:5; grid-column-start:4">A -2</x>
-<x style="grid-row:6; grid-column-start:3">A -3</x>
-<x style="grid-row:6; grid-column-start:2">A -4</x>
-<x style="grid-row:6; grid-column-start:1">A -5</x>
-<x style="grid-row:7; grid-column-start:6">A</x>
-<x style="grid-row:7; grid-column-start:9">B</x>
-<x style="grid-row:8; grid-column-start:6">A 1</x>
-<x style="grid-row:8; grid-column-start:9">A 2</x>
-<x style="grid-row:8; grid-column-start:10">A 3</x>
-<x style="grid-row:8; grid-column-start:11">A 4</x>
-<x style="grid-row:8; grid-column-start:12">A 5</x>
-</div>
-
-<pre>grid-column-end:</pre>
-<div class="grid t2">
-<x style="grid-row:1; grid-column-start:6; background:grey"></x>
-<x style="grid-row:2; grid-column-start:7">-1</x>
-<x style="grid-row:2; grid-column-start:8">4</x>
-<x style="grid-row:3; grid-column-start:6">-2</x>
-<x style="grid-row:3; grid-column-start:5">-3</x>
-<x style="grid-row:3; grid-column-start:4">-4</x>
-<x style="grid-row:3; grid-column-start:3">-5</x>
-<x style="grid-row:4; grid-column-start:6">A -1</x>
-<x style="grid-row:4; grid-column-start:4">B -1</x>
-<x style="grid-row:5; grid-column-start:4">A -2</x>
-<x style="grid-row:6; grid-column-start:3">A -3</x>
-<x style="grid-row:6; grid-column-start:2">A -4</x>
-<x style="grid-row:6; grid-column-start:1">A -5</x>
-<x style="grid-row:7; grid-column-start:6">A</x>
-<x style="grid-row:7; grid-column-start:9">B</x>
-<x style="grid-row:8; grid-column-start:6">A 1</x>
-<x style="grid-row:8; grid-column-start:9">A 2</x>
-<x style="grid-row:8; grid-column-start:10">A 3</x>
-<x style="grid-row:8; grid-column-start:11">A 4</x>
-<x style="grid-row:8; grid-column-start:12">A 5</x>
-</div>
-
-<pre>grid-column: / span A 2</pre>
-<div class="grid t3">
-<x style="grid-row:1;  grid-column:5; background:grey"></x>
-<x style="grid-row:2;  grid-column:7/span 3;">-1</x>
-<x style="grid-row:3;  grid-column:8/span 2;">4</x>
-<x style="grid-row:4;  grid-column:6/span 4;">-2</x>
-<x style="grid-row:5;  grid-column:5/span 4;">-3</x>
-<x style="grid-row:6;  grid-column:4/span 5;">-4</x>
-<x style="grid-row:7;  grid-column:3/span 6;">-5</x>
-<x style="grid-row:8;  grid-column:6/span 4;">A -1</x>
-<x style="grid-row:9;  grid-column:4/span 5;">B -1</x>
-<x style="grid-row:10; grid-column:4/span 5;">A -2</x>
-<x style="grid-row:11; grid-column:3/span 6;">A -3</x>
-<x style="grid-row:12; grid-column:2/span 7;">A -4</x>
-<x style="grid-row:13; grid-column:1/span 8;">A -5</x>
-<x style="grid-row:14; grid-column:6/span 4;">A</x>
-<x style="grid-row:15; grid-column:9/span 1;">B</x>
-<x style="grid-row:16; grid-column:6/span 4;">A 1</x>
-<x style="grid-row:17; grid-column:9/span 2;">A 2</x>
-<x style="grid-row:18; grid-column:10/span 2;">A 3</x>
-<x style="grid-row:19; grid-column:11/span 2;">A 4</x>
-<x style="grid-row:20; grid-column:12/span 2;">A 5</x>
-</div>
-
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-placement-negative-lines-001.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!DOCTYPE HTML>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
-  <meta charset="utf-8">
-  <title>CSS Grid Test: Placement involving negative line numbers</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215957">
-  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
-  <link rel="match" href="grid-placement-negative-lines-001-ref.html">
-  <style type="text/css">
-body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
-
-.grid {
-  display: grid;
-  border: 1px solid;
-  grid-template-columns: 60px [A] 60px 60px;
-  grid-auto-columns: 40px;
-  grid-auto-rows: 20px;
-}
-
-x {
-  background: lime;
-  border: 1px solid;
-}
-
-  </style>
-</head>
-<body>
-
-<pre>
-grid-template-columns: 60px [A] 60px 60px;
-grid-auto-columns: 40px;
-</pre>
-
-<pre>grid-column-start:</pre>
-<div class="grid">
-<x style="grid-row:1; grid-column:1; background:grey"></x>
-<x style="grid-row:2; grid-column-start:-1">-1</x>
-<x style="grid-row:2; grid-column-start:4">4</x>
-<x style="grid-row:3; grid-column-start:-2">-2</x>
-<x style="grid-row:3; grid-column-start:-3">-3</x>
-<x style="grid-row:3; grid-column-start:-4">-4</x>
-<x style="grid-row:3; grid-column-start:-5">-5</x>
-<x style="grid-row:4; grid-column-start:A -1">A -1</x>
-<x style="grid-row:4; grid-column-start:B -1">B -1</x>
-<x style="grid-row:5; grid-column-start:A -2">A -2</x>
-<x style="grid-row:6; grid-column-start:A -3">A -3</x>
-<x style="grid-row:6; grid-column-start:A -4">A -4</x>
-<x style="grid-row:6; grid-column-start:A -5">A -5</x>
-<x style="grid-row:7; grid-column-start:A">A</x>
-<x style="grid-row:7; grid-column-start:B">B</x>
-<x style="grid-row:8; grid-column-start:A 1">A 1</x>
-<x style="grid-row:8; grid-column-start:A 2">A 2</x>
-<x style="grid-row:8; grid-column-start:A 3">A 3</x>
-<x style="grid-row:8; grid-column-start:A 4">A 4</x>
-<x style="grid-row:8; grid-column-start:A 5">A 5</x>
-</div>
-
-<pre>grid-column-end:</pre>
-<div class="grid">
-<x style="grid-row:1; grid-column:1; background:grey"></x>
-<x style="grid-row:2; grid-column-end:-1">-1</x>
-<x style="grid-row:2; grid-column-end:4">4</x>
-<x style="grid-row:3; grid-column-end:-5">-5</x>
-<x style="grid-row:3; grid-column-end:-4">-4</x>
-<x style="grid-row:3; grid-column-end:-3">-3</x>
-<x style="grid-row:3; grid-column-end:-2">-2</x>
-<x style="grid-row:4; grid-column-end:A -1">A -1</x>
-<x style="grid-row:4; grid-column-end:B -1">B -1</x>
-<x style="grid-row:5; grid-column-end:A -2">A -2</x>
-<x style="grid-row:6; grid-column-end:A -3">A -3</x>
-<x style="grid-row:6; grid-column-end:A -4">A -4</x>
-<x style="grid-row:6; grid-column-end:A -5">A -5</x>
-<x style="grid-row:7; grid-column-end:A">A</x>
-<x style="grid-row:7; grid-column-end:B">B</x>
-<x style="grid-row:8; grid-column-end:A 1">A 1</x>
-<x style="grid-row:8; grid-column-end:A 2">A 2</x>
-<x style="grid-row:8; grid-column-end:A 3">A 3</x>
-<x style="grid-row:8; grid-column-end:A 4">A 4</x>
-<x style="grid-row:8; grid-column-end:A 5">A 5</x>
-</div>
-
-<pre>grid-column: / span A 2</pre>
-<div class="grid">
-<x style="grid-row:1; grid-column:1; background:grey"></x>
-<x style="grid-row:2; grid-column:-1/span A 2">-1</x>
-<x style="grid-row:3; grid-column:4/span A 2">4</x>
-<x style="grid-row:4; grid-column:-2/span A 2">-2</x>
-<x style="grid-row:5; grid-column:-3/span A 2">-3</x>
-<x style="grid-row:6; grid-column:-4/span A 2">-4</x>
-<x style="grid-row:7; grid-column:-5/span A 2">-5</x>
-<x style="grid-row:8; grid-column:A -1/span A 2">A -1</x>
-<x style="grid-row:9; grid-column:B -1/span A 2">B -1</x>
-<x style="grid-row:10; grid-column:A -2/span A 2">A -2</x>
-<x style="grid-row:11; grid-column:A -3/span A 2">A -3</x>
-<x style="grid-row:12; grid-column:A -4/span A 2">A -4</x>
-<x style="grid-row:13; grid-column:A -5/span A 2">A -5</x>
-<x style="grid-row:14; grid-column:A/span A 2">A</x>
-<x style="grid-row:15; grid-column:B/span B">B</x>
-<x style="grid-row:16; grid-column:A 1/span A 2">A 1</x>
-<x style="grid-row:17; grid-column:A 2/span A 2">A 2</x>
-<x style="grid-row:18; grid-column:A 3/span A 2">A 3</x>
-<x style="grid-row:19; grid-column:A 4/span A 2">A 4</x>
-<x style="grid-row:20; grid-column:A 5/span A 2">A 5</x>
-</div>
-
-</body>
-</html>
--- a/layout/reftests/css-grid/grid-relpos-items-001-ref.html
+++ b/layout/reftests/css-grid/grid-relpos-items-001-ref.html
@@ -6,56 +6,55 @@
 <html><head>
   <title>CSS Test: Testing layout of rel.pos. grid items</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151316">
   <meta charset="utf-8">
   <style type="text/css">
 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
 
 .grid {
- height: 30px;
+ height: 20px;
  border: 3px solid;
 }
 
 .c1 { background: grey; }
 .r2 { -moz-transform: translate(-201px, -90px); }
 .r3 { -moz-transform: translate(-10px, -40px); }
 .r4 { -moz-transform: translate(70px, 40px); }
 
 span {
   border: 1px solid;
   display: inline-block;
   width: 18px;
-  height: 28px;
+  height: 18px;
   vertical-align: top;
 }
 .abs {
   background: lime;
   position: absolute;
   top: 116px;
   left: 204px;
   padding-left: 3px;
   padding-top: 5px;
-  width: 18px;
-  height: 28px;
-  vertical-align: top;
+  width: 15px;
+  height: 13px;
 }
 .abs1 {
   position: absolute;
   top: -5px;
   left: -11px;
-  width: 30px;
-  height: 36px;
+  width: 27px;
+  height: 21px;
 }
   </style>
 </head>
 <body>
 
 <div class="grid">
 <span class="c1">1</span>
 <span class="abs r1"><iframe width="20" height="20" src="data:text/html,<body>F"></iframe></span>
 <span class="abs r2"><iframe width="20" height="20" src="data:text/html,<body>2"></iframe></span>
-<span class="abs r3" style="xheight:23px"><span class="abs1">r3</span></span>
-<span class="abs r4" style="xheight:23px"><span class="abs1">r4</span></span>
+<span class="abs r3"><span class="abs1">r3</span></span>
+<span class="abs r4"><span class="abs1">r4</span></span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-relpos-items-001.html
+++ b/layout/reftests/css-grid/grid-relpos-items-001.html
@@ -10,19 +10,19 @@
   <link rel="match" href="grid-relpos-items-001-ref.html">
   <meta charset="utf-8">
   <style type="text/css">
 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
 
 .grid {
  display: grid;
  grid-template-columns: 20px 20px [A] 20px;
- grid-template-rows: 30px;
+ grid-template-rows: 20px;
  grid-auto-columns: 20px;
- grid-auto-rows: 30px;
+ grid-auto-rows: 20px;
  border: solid;
 }
 
 .c1 { background: grey; }
 .r1 { }
 .r2 { -moz-transform: translate(-201px, -90px); }
 .r3 { grid-column-start: auto; -moz-transform: translate(-30px, -40px); }
 .r4 { grid-area: auto; -moz-transform: translate(30px, 40px); }
@@ -33,19 +33,16 @@ span {
 }
 .rel {
   background: lime;
   position: relative;
   top: 113px;
   left: 201px;
   padding-left: 3px;
   padding-top: 5px;
-  width: 18px;
-  height: 28px;
-  vertical-align: top;
 }
 .abs1 {
   position: absolute;
   top: -5px;
   left: -11px;
   right: 0px;
   bottom: 0px;
 }
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -1,22 +1,20 @@
 default-preferences pref(layout.css.grid.enabled,true)
 
 fails == grid-whitespace-handling-1a.xhtml grid-whitespace-handling-1-ref.xhtml
 fails == grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1-ref.xhtml
 == grid-whitespace-handling-2.xhtml  grid-whitespace-handling-2-ref.xhtml
 == grid-placement-definite-001.html grid-placement-definite-001-ref.html
 == grid-placement-definite-002.html grid-placement-definite-002-ref.html
 == grid-placement-definite-003.html grid-placement-definite-003-ref.html
-== grid-placement-negative-lines-001.html grid-placement-negative-lines-001-ref.html
 == grid-placement-auto-row-sparse-001.html grid-placement-auto-row-sparse-001-ref.html
 == grid-placement-auto-row-dense-001.html grid-placement-auto-row-dense-001-ref.html
 == grid-placement-auto-col-sparse-001.html grid-placement-auto-col-sparse-001-ref.html
 == grid-placement-auto-col-dense-001.html grid-placement-auto-col-dense-001-ref.html
-== grid-placement-implicit-named-areas-001.html grid-placement-implicit-named-areas-001-ref.html
 == grid-track-sizing-001.html grid-track-sizing-001-ref.html
 == grid-abspos-items-001.html grid-abspos-items-001-ref.html
 == grid-abspos-items-002.html grid-abspos-items-002-ref.html
 == grid-abspos-items-003.html grid-abspos-items-003-ref.html
 == grid-abspos-items-004.html grid-abspos-items-004-ref.html
 == grid-abspos-items-005.html grid-abspos-items-005-ref.html
 == grid-abspos-items-006.html grid-abspos-items-006-ref.html
 == grid-abspos-items-007.html grid-abspos-items-007-ref.html
@@ -31,42 +29,24 @@ skip-if(Android) == grid-placement-defin
 == grid-placement-definite-implicit-002.html grid-placement-definite-implicit-002-ref.html
 skip-if(Android) fuzzy-if(winWidget,1,32) == grid-placement-auto-implicit-001.html grid-placement-auto-implicit-001-ref.html
 == grid-placement-abspos-implicit-001.html grid-placement-abspos-implicit-001-ref.html
 pref(layout.css.vertical-text.enabled,true) == rtl-grid-placement-definite-001.html rtl-grid-placement-definite-001-ref.html
 pref(layout.css.vertical-text.enabled,true) == rtl-grid-placement-auto-row-sparse-001.html rtl-grid-placement-auto-row-sparse-001-ref.html
 pref(layout.css.vertical-text.enabled,true) == vlr-grid-placement-auto-row-sparse-001.html vlr-grid-placement-auto-row-sparse-001-ref.html
 pref(layout.css.vertical-text.enabled,true) == vrl-grid-placement-auto-row-sparse-001.html vrl-grid-placement-auto-row-sparse-001-ref.html
 == grid-relpos-items-001.html grid-relpos-items-001-ref.html
-== grid-item-sizing-percent-001.html grid-item-sizing-percent-001-ref.html
-== grid-item-sizing-px-001.html grid-item-sizing-percent-001-ref.html
 == grid-item-dir-001.html grid-item-dir-001-ref.html
 fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-001.html grid-col-max-sizing-max-content-001-ref.html
 fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-002.html grid-col-max-sizing-max-content-002-ref.html
 == grid-min-max-content-sizing-001.html grid-min-max-content-sizing-001-ref.html
-fuzzy-if(winWidget,1,36) == grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001-ref.html
-== grid-auto-min-sizing-intrinsic-001.html grid-auto-min-sizing-intrinsic-001-ref.html
-== grid-auto-min-sizing-intrinsic-002.html grid-auto-min-sizing-intrinsic-002-ref.html
-== grid-auto-min-sizing-intrinsic-003.html grid-auto-min-sizing-intrinsic-003-ref.html
-== grid-auto-min-sizing-intrinsic-004.html grid-auto-min-sizing-intrinsic-004-ref.html
-== grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-percent-001-ref.html
 == grid-track-intrinsic-sizing-001.html grid-track-intrinsic-sizing-001-ref.html
 == grid-track-intrinsic-sizing-002.html grid-track-intrinsic-sizing-002-ref.html
 == grid-track-intrinsic-sizing-003.html grid-track-intrinsic-sizing-003-ref.html
 == grid-track-intrinsic-sizing-004.html grid-track-intrinsic-sizing-004-ref.html
 == grid-max-sizing-flex-001.html grid-max-sizing-flex-001-ref.html
 == grid-max-sizing-flex-002.html grid-max-sizing-flex-002-ref.html
 == grid-max-sizing-flex-003.html grid-max-sizing-flex-003-ref.html
 == grid-max-sizing-flex-004.html grid-max-sizing-flex-004-ref.html
 == grid-max-sizing-flex-005.html grid-max-sizing-flex-005-ref.html
 == grid-max-sizing-flex-006.html grid-max-sizing-flex-006-ref.html
 == grid-flex-min-sizing-001.html grid-flex-min-sizing-001-ref.html
 == grid-flex-min-sizing-002.html grid-flex-min-sizing-002-ref.html
-== grid-item-align-001.html grid-item-align-001-ref.html
-== grid-item-align-002.html grid-item-align-002-ref.html
-== grid-item-align-003.html grid-item-align-003-ref.html
-== grid-item-justify-001.html grid-item-justify-001-ref.html
-== grid-item-justify-002.html grid-item-justify-002-ref.html
-== grid-item-stretch-001.html grid-item-stretch-001-ref.html
-== grid-align-content-001.html grid-align-content-001-ref.html
-== grid-justify-content-001.html grid-justify-content-001-ref.html
-== grid-justify-content-002.html grid-justify-content-002-ref.html
-== grid-justify-content-003.html grid-justify-content-003-ref.html
deleted file mode 100644
index 31e1c4087a51ec433be9a8c2d716348b55edc571..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003-ref.xhtml
@@ -82,12 +82,12 @@
        ><div class="baseline big"
              style="width: 40px; display: inline-block">abc</div>
       </div>
       <div class="stretch" style="height: 100%">stretch</div>
       <div class="stretch big">a b c d e f</div>
       <div class="auto" style="height: 100%">auto</div>
       <div class="unspecified" style="height: 100%">unspec</div>
       <div class="initial" style="height: 100%">initial</div>
-      <div class="inherit">inherit</div>
+      <div class="inherit" style="height: 100%">inherit</div>
     </div>
   </body>
 </html>
--- a/layout/style/test/test_flexbox_align_self_auto.html
+++ b/layout/style/test/test_flexbox_align_self_auto.html
@@ -58,32 +58,32 @@ function getComputedAlignSelf(elem) {
   return window.getComputedStyle(elem, "").alignSelf;
 }
 
 /*
  * Tests that are useful regardless of whether we have a parent node:
  */
 function testGeneralNode(elem) {
   // Test initial computed style
-  // (Initial value should be 'auto', which should compute to 'start')
-  is(getComputedAlignSelf(elem), "start",
-     "initial computed value of 'align-self' should be 'start', " +
+  // (Initial value should be 'auto', which should compute to 'stretch')
+  is(getComputedAlignSelf(elem), "stretch",
+     "initial computed value of 'align-self' should be 'stretch', " +
      "if we haven't explicitly set any style on the parent");
 
   // Test value after setting align-self explicitly to "auto"
   elem.style.alignSelf = "auto";
-  is(getComputedAlignSelf(elem), "start",
-     "computed value of 'align-self: auto' should be 'start', " +
+  is(getComputedAlignSelf(elem), "stretch",
+     "computed value of 'align-self: auto' should be 'stretch', " +
      "if we haven't explicitly set any style on the parent");
   elem.style.alignSelf = ""; // clean up
 
   // Test value after setting align-self explicitly to "inherit"
   elem.style.alignSelf = "inherit";
-  is(getComputedAlignSelf(elem), "start",
-     "computed value of 'align-self: inherit' should be 'start', " +
+  is(getComputedAlignSelf(elem), "stretch",
+     "computed value of 'align-self: inherit' should be 'stretch', " +
      "if we haven't explicitly set any style on the parent");
   elem.style.alignSelf = ""; // clean up
 }
 
 /*
  * Tests that depend on us having a parent node:
  */
 function testNodeThatHasParent(elem) {
@@ -106,21 +106,21 @@ function testNodeThatHasParent(elem) {
      "computed value of 'align-self: auto' should match parent's " +
      "specified 'align-items' value");
 
   elem.style.alignSelf = ""; // clean up
   elem.parentNode.style.alignItems = ""; // clean up
 
   // Finally: test computed style after setting "align-self" to "inherit"
   // and leaving parent at its initial value (which should be "auto", which
-  // should compute to "start")
+  // should compute to "stretch")
   elem.style.alignSelf = "inherit";
-  is(getComputedAlignSelf(elem), "start",
+  is(getComputedAlignSelf(elem), "stretch",
      "computed value of 'align-self: inherit' should take parent's " +
-     "computed 'align-self' value (which should be 'start', " +
+     "computed 'align-self' value (which should be 'stretch', " +
      "if we haven't explicitly set any other style");
   elem.style.alignSelf = ""; // clean up
  }
 
 /*
  * Tests that depend on us having a grandparent node:
  */
 function testNodeThatHasGrandparent(elem) {
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -2352,21 +2352,17 @@ pref("layout.css.all-shorthand.enabled",
 
 // Is support for CSS variables enabled?
 pref("layout.css.variables.enabled", true);
 
 // Is support for CSS overflow-clip-box enabled for non-UA sheets?
 pref("layout.css.overflow-clip-box.enabled", false);
 
 // Is support for CSS grid enabled?
-#ifdef RELEASE_BUILD
 pref("layout.css.grid.enabled", false);
-#else
-pref("layout.css.grid.enabled", true);
-#endif
 
 // Is support for CSS contain enabled?
 pref("layout.css.contain.enabled", false);
 
 // Is support for CSS Ruby enabled?
 //
 // When this pref is removed, make sure that the pref callback registration
 // in nsLayoutStylesheetCache::EnsureGlobal and the invalidation of