summaryrefslogtreecommitdiff
path: root/layout
diff options
context:
space:
mode:
authorjanekptacijarabaci <janekptacijarabaci@seznam.cz>2017-08-17 20:46:41 +0200
committerwolfbeast <mcwerewolf@gmail.com>2018-03-12 09:46:03 +0100
commit920519e7c56a08f743e5230e8db30f635f5f7cf5 (patch)
tree376078743552d4dc02226578cfd16083328ae703 /layout
parent505edf1ba4f6907c236b4876eefea606fa7b9cd0 (diff)
downloaduxp-920519e7c56a08f743e5230e8db30f635f5f7cf5.tar.gz
CSS - Grid - intristic content with overflow:auto overlaps in grid
Diffstat (limited to 'layout')
-rw-r--r--layout/generic/ReflowInput.cpp12
-rw-r--r--layout/generic/ReflowInput.h4
-rw-r--r--layout/generic/nsFrame.cpp2
-rw-r--r--layout/generic/nsGridContainerFrame.cpp41
-rw-r--r--layout/generic/nsIFrame.h8
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-001-ref.html78
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-001.html74
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-002-ref.html79
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-002.html75
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-003-ref.html84
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-003.html75
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-004-ref.html88
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-004.html82
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-005-ref.html83
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-005.html77
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-006-ref.html54
-rw-r--r--layout/reftests/css-grid/grid-item-overflow-stretch-006.html56
-rw-r--r--layout/reftests/css-grid/reftest.list6
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