CSS - Grid - intristic content with overflow:auto overlaps in grid

18 files changed, 965 insertions, 13 deletions

diff --git a/layout/generic/ReflowInput.cpp b/layout/generic/ReflowInput.cpp
index 42f4a24b53..a8756cea2d 100644
--- a/layout/generic/ReflowInput.cpp
+++ b/layout/generic/ReflowInput.cpp
@@ -93,6 +93,9 @@ ReflowInput::ReflowInput(nsPresContext*       aPresContext,
   if (aFlags & B_CLAMP_MARGIN_BOX_MIN_SIZE) {
     mFlags.mBClampMarginBoxMinSize = true;
   }
+  if (aFlags & I_APPLY_AUTO_MIN_SIZE) {
+    mFlags.mApplyAutoMinSize = true;
+  }
 
   if (!(aFlags & CALLER_WILL_INIT)) {
     Init(aPresContext);
@@ -242,6 +245,7 @@ ReflowInput::ReflowInput(
   mFlags.mIOffsetsNeedCSSAlign = mFlags.mBOffsetsNeedCSSAlign = false;
   mFlags.mIClampMarginBoxMinSize = !!(aFlags & I_CLAMP_MARGIN_BOX_MIN_SIZE);
   mFlags.mBClampMarginBoxMinSize = !!(aFlags & B_CLAMP_MARGIN_BOX_MIN_SIZE);
+  mFlags.mApplyAutoMinSize = !!(aFlags & I_APPLY_AUTO_MIN_SIZE);
 
   mDiscoveredClearance = nullptr;
   mPercentBSizeObserver = (aParentReflowInput.mPercentBSizeObserver &&
@@ -1662,6 +1666,10 @@ ReflowInput::InitAbsoluteConstraints(nsPresContext* aPresContext,
     computeSizeFlags = ComputeSizeFlags(computeSizeFlags |
                          ComputeSizeFlags::eBClampMarginBoxMinSize);
   }
+  if (mFlags.mApplyAutoMinSize) {
+    computeSizeFlags = ComputeSizeFlags(computeSizeFlags |
+                         ComputeSizeFlags::eIApplyAutoMinSize);
+  }
   if (mFlags.mShrinkWrap) {
     computeSizeFlags =
       ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
@@ -2375,6 +2383,10 @@ ReflowInput::InitConstraints(nsPresContext*     aPresContext,
         computeSizeFlags = ComputeSizeFlags(computeSizeFlags |
                              ComputeSizeFlags::eBClampMarginBoxMinSize);
       }
+      if (mFlags.mApplyAutoMinSize) {
+        computeSizeFlags = ComputeSizeFlags(computeSizeFlags |
+                             ComputeSizeFlags::eIApplyAutoMinSize);
+      }
       if (mFlags.mShrinkWrap) {
         computeSizeFlags =
           ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
diff --git a/layout/generic/ReflowInput.h b/layout/generic/ReflowInput.h
index e425086469..09c980b728 100644
--- a/layout/generic/ReflowInput.h
+++ b/layout/generic/ReflowInput.h
@@ -220,6 +220,7 @@ public:
     uint32_t mStaticPosIsCBOrigin:1; // the STATIC_POS_IS_CB_ORIGIN ctor flag
     uint32_t mIClampMarginBoxMinSize:1; // the I_CLAMP_MARGIN_BOX_MIN_SIZE ctor flag
     uint32_t mBClampMarginBoxMinSize:1; // the B_CLAMP_MARGIN_BOX_MIN_SIZE ctor flag
+    uint32_t mApplyAutoMinSize : 1;       // the I_APPLY_AUTO_MIN_SIZE ctor flag
 
     // If set, the following two flags indicate that:
     // (1) this frame is absolutely-positioned (or fixed-positioned).
@@ -738,6 +739,9 @@ public:
 
     // Pass ComputeSizeFlags::eBClampMarginBoxMinSize to ComputeSize().
     B_CLAMP_MARGIN_BOX_MIN_SIZE = (1<<6),
+
+    // Pass ComputeSizeFlags::eIApplyAutoMinSize to ComputeSize().
+    I_APPLY_AUTO_MIN_SIZE = (1<<7),
   };
 
   // This method initializes various data members. It is automatically
diff --git a/layout/generic/nsFrame.cpp b/layout/generic/nsFrame.cpp
index 69791d5c52..418fa16b7a 100644
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -4781,7 +4781,7 @@ nsFrame::ComputeSize(nsRenderingContext* aRenderingContext,
       ComputeISizeValue(aRenderingContext, aCBSize.ISize(aWM),
                         boxSizingAdjust.ISize(aWM), boxSizingToMarginEdgeISize,
                         minISizeCoord, aFlags);
-  } else if (MOZ_UNLIKELY(isGridItem)) {
+  } else if (MOZ_UNLIKELY(aFlags & eIApplyAutoMinSize)) {
     // This implements "Implied Minimum Size of Grid Items".
     // https://drafts.csswg.org/css-grid/#min-size-auto
     minISize = std::min(maxISize, GetMinISize(aRenderingContext));
diff --git a/layout/generic/nsGridContainerFrame.cpp b/layout/generic/nsGridContainerFrame.cpp
index 71d5bba212..f3e28acc49 100644
--- a/layout/generic/nsGridContainerFrame.cpp
+++ b/layout/generic/nsGridContainerFrame.cpp
@@ -818,8 +818,11 @@ struct nsGridContainerFrame::GridItemInfo
     // Ditto *-content:[last ]baseline. Mutually exclusive w. eSelfBaseline.
     eContentBaseline =       0x10,
     eAllBaselineBits = eIsBaselineAligned | eSelfBaseline | eContentBaseline,
+    // Should apply Automatic Minimum Size per:
+    // https://drafts.csswg.org/css-grid/#min-size-auto
+    eApplyAutoMinSize =      0x20,
     // Clamp per https://drafts.csswg.org/css-grid/#min-size-auto
-    eClampMarginBoxMinSize = 0x20,
+    eClampMarginBoxMinSize = 0x40,
   };
 
   explicit GridItemInfo(nsIFrame* aFrame,
@@ -851,11 +854,11 @@ struct nsGridContainerFrame::GridItemInfo
     return aAlign;
   }
 
-  // Return true if we should we clamp this item's Automatic Minimum Size.
+  // Return true if we should apply Automatic Minimum Size to this item.
   // https://drafts.csswg.org/css-grid/#min-size-auto
-  bool ShouldClampMinSize(WritingMode aContainerWM,
-                          LogicalAxis aContainerAxis,
-                          nscoord aPercentageBasis) const
+  bool ShouldApplyAutoMinSize(WritingMode aContainerWM,
+                              LogicalAxis aContainerAxis,
+                              nscoord aPercentageBasis) const
   {
     const auto pos = mFrame->StylePosition();
     const auto& size = aContainerAxis == eLogicalAxisInline ?
@@ -3977,9 +3980,9 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSizeStep1(
   WritingMode wm = aState.mWM;
   // Calculate data for "Automatic Minimum Size" clamping, if needed.
   bool needed = ((sz.mState & TrackSize::eIntrinsicMinSizing) ||
-                 aConstraint == SizingConstraint::eNoConstraint);
-  if (needed && TrackSize::IsDefiniteMaxSizing(sz.mState) &&
-      aGridItem.ShouldClampMinSize(wm, mAxis, aPercentageBasis)) {
+                 aConstraint == SizingConstraint::eNoConstraint) &&
+                (aGridItem.mState[mAxis] & ItemState::eApplyAutoMinSize);
+  if (needed && TrackSize::IsDefiniteMaxSizing(sz.mState)) {
     if (sz.mState & TrackSize::eIntrinsicMinSizing) {
       auto maxCoord = aFunctions.MaxSizingFor(aRange.mStart);
       cache.mMinSizeClamp =
@@ -4382,6 +4385,14 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSize(
   iter.Reset();
   for (; !iter.AtEnd(); iter.Next()) {
     auto& gridItem = aGridItems[iter.GridItemIndex()];
+
+    // Check if we need to apply "Automatic Minimum Size" and cache it.
+    MOZ_ASSERT(!(gridItem.mState[mAxis] & ItemState::eApplyAutoMinSize),
+               "Why is eApplyAutoMinSize set already?");
+    if (gridItem.ShouldApplyAutoMinSize(wm, mAxis, aPercentageBasis)) {
+      gridItem.mState[mAxis] |= ItemState::eApplyAutoMinSize;
+    }
+
     const GridArea& area = gridItem.mArea;
     const LineRange& lineRange = area.*aRange;
     uint32_t span = lineRange.Extent();
@@ -4407,9 +4418,9 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSize(
         CachedIntrinsicSizes cache;
         // Calculate data for "Automatic Minimum Size" clamping, if needed.
         bool needed = ((state & TrackSize::eIntrinsicMinSizing) ||
-                       aConstraint == SizingConstraint::eNoConstraint);
-        if (needed && TrackSize::IsDefiniteMaxSizing(state) &&
-            gridItem.ShouldClampMinSize(wm, mAxis, aPercentageBasis)) {
+                       aConstraint == SizingConstraint::eNoConstraint) &&
+                      (gridItem.mState[mAxis] & ItemState::eApplyAutoMinSize);
+        if (needed && TrackSize::IsDefiniteMaxSizing(state)) {
           nscoord minSizeClamp = 0;
           for (auto i = lineRange.mStart, end = lineRange.mEnd; i < end; ++i) {
             auto maxCoord = aFunctions.MaxSizingFor(i);
@@ -4445,11 +4456,14 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSize(
           gridItem.mState[mAxis] |= ItemState::eIsFlexing;
         } else if (aConstraint == SizingConstraint::eNoConstraint &&
                    TrackSize::IsDefiniteMaxSizing(state) &&
-                   gridItem.ShouldClampMinSize(wm, mAxis, aPercentageBasis)) {
+                   (gridItem.mState[mAxis] & ItemState::eApplyAutoMinSize)) {
           gridItem.mState[mAxis] |= ItemState::eClampMarginBoxMinSize;
         }
       }
     }
+    MOZ_ASSERT(!(gridItem.mState[mAxis] & ItemState::eClampMarginBoxMinSize) ||
+               (gridItem.mState[mAxis] & ItemState::eApplyAutoMinSize),
+               "clamping only applies to Automatic Minimum Size");
   }
 
   // Step 2.
@@ -5231,6 +5245,9 @@ nsGridContainerFrame::ReflowInFlowChild(nsIFrame*              aChild,
     } else {
       aChild->Properties().Delete(BClampMarginBoxMinSizeProperty());
     }
+    if ((aGridItemInfo->mState[childIAxis] & ItemState::eApplyAutoMinSize)) {
+      flags |= ReflowInput::I_APPLY_AUTO_MIN_SIZE;
+    }
   }
 
   if (!isConstrainedBSize) {
diff --git a/layout/generic/nsIFrame.h b/layout/generic/nsIFrame.h
index 50eb958e03..2acafa8821 100644
--- a/layout/generic/nsIFrame.h
+++ b/layout/generic/nsIFrame.h
@@ -2105,6 +2105,14 @@ public:
      */
     eIClampMarginBoxMinSize = 1 << 2, // clamp in our inline axis
     eBClampMarginBoxMinSize = 1 << 3, // clamp in our block axis
+    /**
+     * The frame is stretching (per CSS Box Alignment) and doesn't have an
+     * Automatic Minimum Size in the indicated axis.
+     * (may be used for both flex/grid items, but currently only used for Grid)
+     * https://drafts.csswg.org/css-grid/#min-size-auto
+     * https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch
+     */
+    eIApplyAutoMinSize = 1 << 4, // only has an effect when eShrinkWrap is false
   };
 
   /**
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-001-ref.html
new file mode 100644
index 0000000000..463bbb4e6e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-001-ref.html
@@ -0,0 +1,78 @@
+<!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 Reference: stretching overflow!=visible items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px 30px 3px / 7px 80px 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  min-width:0;
+  min-height:0;
+  box-sizing: border-box;
+}
+
+.oa, .os, .oh { width:80px; height:30px; }
+.m.oa, .m.os, .m.oh { width:70px; height:24px; }
+.oa { overflow: auto; }
+.os { overflow: scroll; }
+.oh { overflow: hidden; }
+.m  { margin: 1px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  " style="width:112px"><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   " style="width:112px"><x></x></span></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  " style="height:112px"><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   " style="height:112px"><x></x></span></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-001.html b/layout/reftests/css-grid/grid-item-overflow-stretch-001.html
new file mode 100644
index 0000000000..4f6259abeb
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-001.html
@@ -0,0 +1,74 @@
+<!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: stretching overflow!=visible items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <link rel="match" href="grid-item-overflow-stretch-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px auto 3px / 7px auto 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+}
+
+.oa { overflow: auto; }
+.os { overflow: scroll; }
+.oh { overflow: hidden; }
+.m  { margin: 1px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  "><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   "><x></x></span></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  "><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   "><x></x></span></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-002-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-002-ref.html
new file mode 100644
index 0000000000..a9690a54e5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-002-ref.html
@@ -0,0 +1,79 @@
+<!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 Reference: stretching overflow!=visible vertical-rl items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px 30px 3px / 7px 80px 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  writing-mode: vertical-rl;
+  min-width:0;
+  min-height:0;
+  box-sizing: border-box;
+}
+
+.oa, .os, .oh { width:80px; height:30px; }
+.m.oa, .m.os, .m.oh { width:70px; height:24px; }
+.oa { overflow: auto; }
+.os { overflow: scroll; }
+.oh { overflow: hidden; }
+.m  { margin: 1px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  " style="width:112px"><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   " style="width:112px"><x></x></span></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  " style="height:112px"><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   " style="height:112px"><x></x></span></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-002.html b/layout/reftests/css-grid/grid-item-overflow-stretch-002.html
new file mode 100644
index 0000000000..520eed911a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-002.html
@@ -0,0 +1,75 @@
+<!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: stretching overflow!=visible vertical-rl items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <link rel="match" href="grid-item-overflow-stretch-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px auto 3px / 7px auto 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  writing-mode: vertical-rl;
+}
+
+.oa { overflow: auto; }
+.os { overflow: scroll; }
+.oh { overflow: hidden; }
+.m  { margin: 1px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  "><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   "><x></x></span></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  "><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   "><x></x></span></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-003-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-003-ref.html
new file mode 100644
index 0000000000..c082e6be41
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-003-ref.html
@@ -0,0 +1,84 @@
+<!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 Reference: margin:auto stretch items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px 30px 3px / 7px 112px 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+.c2 { grid-template-columns: 7px 122px 3px; }
+.h > .grid { grid: 7px 112px 3px / 7px 80px 3px; }
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  margin: 0 auto;
+  justify-self:start;
+  align-self:start;
+  height:28px;
+}
+.c2 > * { height:22px; }
+.h .grid > * {
+  margin: 10px 0 0 10px;
+  justify-self:center;
+  align-self:center;
+  width:5px;
+  height:110px;
+}
+
+.m  { margin: 1px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  "><x></x></span></div>
+
+<br>
+
+<div class="grid c2"><span class="m oa"><x></x></span></div>
+<div class="grid c2"><span class="m os"><x></x></span></div>
+<div class="grid c2"><span class="m oh"><x></x></span></div>
+<div class="grid c2"><span class="m   "><x></x></span></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  "><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   "><x></x></span></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-003.html b/layout/reftests/css-grid/grid-item-overflow-stretch-003.html
new file mode 100644
index 0000000000..8bcd79d9be
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-003.html
@@ -0,0 +1,75 @@
+<!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: margin:auto stretch items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <link rel="match" href="grid-item-overflow-stretch-003-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px auto 3px / 7px auto 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  margin: 0 auto;
+}
+.h .grid > * {
+  margin: auto;
+}
+
+.m  { margin: 1px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  "><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   "><x></x></span></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><span class="oa"><x></x></span></div>
+<div class="grid"><span class="os"><x></x></span></div>
+<div class="grid"><span class="oh"><x></x></span></div>
+<div class="grid"><span class="  "><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m oa"><x></x></span></div>
+<div class="grid"><span class="m os"><x></x></span></div>
+<div class="grid"><span class="m oh"><x></x></span></div>
+<div class="grid"><span class="m   "><x></x></span></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-004-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-004-ref.html
new file mode 100644
index 0000000000..71ed28d7cc
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-004-ref.html
@@ -0,0 +1,88 @@
+<!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 Reference: stretching items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 90px;
+  height: 50px;
+  grid: 7px 30px 3px / 7px 102px 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+.c2 { grid: 7px 30x 3px / 7px 112px 3px; grid-gap: 5px;}
+.c3 { grid: 7px 30x 3px / 7px 70px 3px; grid-gap: 5px;}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  min-width: 0;
+  max-width: 100px;
+}
+.h .grid > * {
+  min-height: 0;
+  max-height: 100px;
+  justify-self:center safe;
+  align-self:center safe;
+}
+.h > .grid { grid: 7px 102px 3px / 7px 70px 3px; grid-gap: 5px;}
+.h > .grid.c2 { grid: 7px 30px 3px / 7px 70px 3px; grid-gap: 5px;}
+.h > .grid.c3 { grid: 7px 108px 3px / 7px 70px 3px; grid-gap: 5px;}
+
+.oa { overflow: auto; }
+.p { width: 100%; }
+.h .grid > .p { height: 100%; }
+.x { width:5px; }
+.h .grid > .x { max-height:5px; }
+.m { margin: 1px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class="p oa"><x></x></span></div>
+<div class="grid"><span class="p "><x></x></span></div>
+<div class="grid c2"><span class="p x" style="height:5px; margin-left:31.5px; margin-top:11.5px"><x></x></span></div>
+<div class="grid c2"><span class="  " style="width:68px"><x></x></span></div>
+
+<br>
+
+<div class="grid c3"><span class="p m oa"><x></x></span></div>
+<div class="grid c3"><span class="p m"><x></x></span></div>
+<div class="grid c2"><span class="m p x"><x></x></span></div>
+<div class="grid c2"><span class="m " style="width:58px"><x></x></span></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><span class="p oa"><x></x></span></div>
+<div class="grid"><span class="p "><x></x></span></div>
+<div class="grid c2"><span class="p x" style=""><x></x></span></div>
+<div class="grid c2"><span class="  " style="height:28px; width:68px;"><x></x></span></div>
+
+<br>
+
+<div class="grid c3"><span class="m p oa"><x></x></span></div>
+<div class="grid c3"><span class="m p"><x></x></span></div>
+<div class="grid c2"><span class="m p x" style="justify-self:start;align-self:start"><x></x></span></div>
+<div class="grid c2"><span class="m  " style="height:22px; width:58px"><x></x></span></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-004.html b/layout/reftests/css-grid/grid-item-overflow-stretch-004.html
new file mode 100644
index 0000000000..b983b5184b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-004.html
@@ -0,0 +1,82 @@
+<!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: stretching items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <link rel="match" href="grid-item-overflow-stretch-004-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 90px;
+  height: 50px;
+  grid: 7px auto 3px / 7px auto 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  min-width: 0;
+  max-width: 100px;
+}
+.h .grid > * {
+  min-height: 0;
+  max-height: 100px;
+}
+
+.oa { overflow: auto; }
+.p { width: 100%; }
+.h .grid > .p { height: 100%; }
+.x { max-width:5px; margin:auto; }
+.h .grid > .x { max-height:5px; }
+.m { margin: 1px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class="p oa"><x></x></span></div>
+<div class="grid"><span class="p "><x></x></span></div>
+<div class="grid"><span class="p x"><x></x></span></div>
+<div class="grid"><span class="  "><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="p m oa"><x></x></span></div>
+<div class="grid"><span class="p m"><x></x></span></div>
+<div class="grid"><span class="m p x"><x></x></span></div>
+<div class="grid"><span class="m "><x></x></span></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><span class="p oa"><x></x></span></div>
+<div class="grid"><span class="p "><x></x></span></div>
+<div class="grid"><span class="p x"><x></x></span></div>
+<div class="grid"><span class="  "><x></x></span></div>
+
+<br>
+
+<div class="grid"><span class="m p oa"><x></x></span></div>
+<div class="grid"><span class="m p"><x></x></span></div>
+<div class="grid"><span class="m p x"><x></x></span></div>
+<div class="grid"><span class="m  "><x></x></span></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-005-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-005-ref.html
new file mode 100644
index 0000000000..e7d353c8b8
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-005-ref.html
@@ -0,0 +1,83 @@
+<!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 Reference: stretching overflow!=visible items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px auto 3px / 7px auto 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  min-width:0;
+  min-height:0;
+  box-sizing: border-box;
+}
+
+.oa, .os, .oh { width:80px; height:30px; }
+.m.oa, .m.os, .m.oh { width:70px; height:8px; }
+.oa { overflow: auto; }
+.os { overflow: scroll; }
+.oh { overflow: hidden; }
+.ov { justify-self: start; }
+.m.ov { align-self: start; }
+.m  { margin: 17px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><input class="oa"></div>
+<div class="grid"><input class="os"></div>
+<div class="grid"><input class="oh"></div>
+<div class="grid"><input class="ov"></div>
+
+<br>
+
+<div class="grid"><input class="m oa"></div>
+<div class="grid"><input class="m os"></div>
+<div class="grid"><input class="m oh"></div>
+<div class="grid"><input class="m ov"></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><input class="oa"></div>
+<div class="grid"><input class="os"></div>
+<div class="grid"><input class="oh"></div>
+<div class="grid"><input class="ov"></div>
+
+<br>
+
+<div class="grid"><input class="m oa"></div>
+<div class="grid"><input class="m os"></div>
+<div class="grid"><input class="m oh"></div>
+<div class="grid"><input class="m ov"></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-005.html b/layout/reftests/css-grid/grid-item-overflow-stretch-005.html
new file mode 100644
index 0000000000..33fe468d74
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-005.html
@@ -0,0 +1,77 @@
+<!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: stretching overflow!=visible items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <link rel="match" href="grid-item-overflow-stretch-005-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px auto 3px / 7px auto 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.oa { overflow: auto; }
+.os { overflow: scroll; }
+.oh { overflow: hidden; }
+.m  { margin: 17px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><input class="oa"></div>
+<div class="grid"><input class="os"></div>
+<div class="grid"><input class="oh"></div>
+<div class="grid"><input class="  "></div>
+
+<br>
+
+<div class="grid"><input class="m oa"></div>
+<div class="grid"><input class="m os"></div>
+<div class="grid"><input class="m oh"></div>
+<div class="grid"><input class="m   "></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><input class="oa"></div>
+<div class="grid"><input class="os"></div>
+<div class="grid"><input class="oh"></div>
+<div class="grid"><input class="  "></div>
+
+<br>
+
+<div class="grid"><input class="m oa"></div>
+<div class="grid"><input class="m os"></div>
+<div class="grid"><input class="m oh"></div>
+<div class="grid"><input class="m   "></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-006-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-006-ref.html
new file mode 100644
index 0000000000..71d4d4f542
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-006-ref.html
@@ -0,0 +1,54 @@
+<!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 Reference: stretching overflow visible items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-flex;
+  width: 90px;
+  height: 40px;
+  padding: 7px 3px 3px 7px;
+  border: 1px solid;
+}
+
+.grid > * {
+  border: 1px solid;
+  margin: 5px;
+}
+
+.m  { margin: 6px 8px 10px 12px; }
+.ma { margin: auto; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class=""><x></x></span></div>
+<div class="grid"><span class="m"><x></x></span></div>
+<div class="grid"><span class="ma" style="margin-left:5px"><x></x></span></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><span class="" style="flex:1"><x></x></span></div>
+<div class="grid"><span class="m" style="flex:1"><x></x></span></div>
+<div class="grid"><span class="ma" style="margin-top:5px"><x></x></span></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-006.html b/layout/reftests/css-grid/grid-item-overflow-stretch-006.html
new file mode 100644
index 0000000000..015c50fccd
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-006.html
@@ -0,0 +1,56 @@
+<!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: stretching overflow visible items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <link rel="match" href="grid-item-overflow-stretch-006-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px minmax(20px, auto) 3px / 7px minmax(20px, auto) 3px;
+  grid-gap: 5px;
+  border: 1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border: 1px solid;
+}
+
+.m  { margin: 1px 3px 5px 7px; }
+.ma { margin: auto; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class=""><x></x></span></div>
+<div class="grid"><span class="m"><x></x></span></div>
+<div class="grid"><span class="ma"><x></x></span></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><span class=""><x></x></span></div>
+<div class="grid"><span class="m"><x></x></span></div>
+<div class="grid"><span class="ma"><x></x></span></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/reftest.list b/layout/reftests/css-grid/reftest.list
index d85eefbd01..093e2faee2 100644
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -116,6 +116,12 @@ skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-p
 == grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html
 == grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html
 == grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
+== grid-item-overflow-stretch-001.html grid-item-overflow-stretch-001-ref.html
+== grid-item-overflow-stretch-002.html grid-item-overflow-stretch-002-ref.html
+== grid-item-overflow-stretch-003.html grid-item-overflow-stretch-003-ref.html
+== grid-item-overflow-stretch-004.html grid-item-overflow-stretch-004-ref.html
+== grid-item-overflow-stretch-005.html grid-item-overflow-stretch-005-ref.html
+== grid-item-overflow-stretch-006.html grid-item-overflow-stretch-006-ref.html
 == grid-item-canvas-001.html grid-item-canvas-001-ref.html
 skip-if(Android) == grid-item-button-001.html grid-item-button-001-ref.html
 == grid-item-table-stretch-001.html grid-item-table-stretch-001-ref.html