Bug 1597055 - Don't stretch grid items with non-auto block-size. r=mats

Per the resolution in https://github.com/w3c/csswg-drafts/issues/4525.

Differential Revision: https://phabricator.services.mozilla.com/D60675

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Emilio Cobos Álvarez 2020-01-25 20:14:59 +00:00
parent 906e1a31e3
commit aa3a33a08a
7 changed files with 102 additions and 4 deletions

View File

@ -6031,8 +6031,7 @@ LogicalSize nsFrame::ComputeSize(gfxContext* aRenderingContext, WritingMode aWM,
result.BSize(aWM) = nsLayoutUtils::ComputeBSizeValue(
aCBSize.BSize(aWM), boxSizingAdjust.BSize(aWM),
blockStyleCoord->AsLengthPercentage());
} else if (MOZ_UNLIKELY(isGridItem) &&
blockStyleCoord->BehavesLikeInitialValueOnBlockAxis() &&
} else if (MOZ_UNLIKELY(isGridItem) && blockStyleCoord->IsAuto() &&
!IS_TRUE_OVERFLOW_CONTAINER(this)) {
auto cbSize = aCBSize.BSize(aWM);
if (cbSize != NS_UNCONSTRAINEDSIZE) {

View File

@ -6450,8 +6450,7 @@ void nsGridContainerFrame::ReflowInFlowChild(
if (isConstrainedBSize && !wm.IsOrthogonalTo(childWM)) {
bool stretch = false;
if (!childRI.mStyleMargin->HasBlockAxisAuto(childWM) &&
(childRI.mStylePosition->BSize(childWM).IsAuto() ||
childRI.mStylePosition->BSize(childWM).IsExtremumLength())) {
childRI.mStylePosition->BSize(childWM).IsAuto()) {
auto blockAxisAlignment = childRI.mStylePosition->UsedAlignSelf(Style());
if (blockAxisAlignment == NS_STYLE_ALIGN_NORMAL ||
blockAxisAlignment == NS_STYLE_ALIGN_STRETCH) {

View File

@ -0,0 +1,22 @@
<!doctype html>
<title>Grid items only stretch if block-size computes to auto</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="help" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
<style>
#grid {
display: grid;
width: 100px;
height: 100px;
grid-template: 100% / 100%;
background: green;
}
#item {
height: max-content;
background: red;
}
</style>
<div id="grid">
<div id="item"></div>
</div>

View File

@ -0,0 +1,23 @@
<!doctype html>
<title>Grid items only stretch if block-size computes to auto</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="help" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
<style>
#grid {
writing-mode: vertical-lr;
display: grid;
width: 100px;
height: 100px;
grid-template: 100% / 100%;
background: green;
}
#item {
width: max-content;
background: red;
}
</style>
<div id="grid">
<div id="item"></div>
</div>

View File

@ -0,0 +1,22 @@
<!doctype html>
<title>Grid items only stretch if block-size computes to auto</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="help" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
<style>
#grid {
display: grid;
width: 100px;
height: 100px;
grid-template: 100% / 100%;
background: green;
}
#item {
height: min-content;
background: red;
}
</style>
<div id="grid">
<div id="item"></div>
</div>

View File

@ -0,0 +1,23 @@
<!doctype html>
<title>Grid items only stretch if block-size computes to auto</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="help" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
<style>
#grid {
writing-mode: vertical-lr;
display: grid;
width: 100px;
height: 100px;
grid-template: 100% / 100%;
background: green;
}
#item {
width: min-content;
background: red;
}
</style>
<div id="grid">
<div id="item"></div>
</div>

View File

@ -0,0 +1,10 @@
<!doctype html>
<title>CSS test reference</title>
<style>
#ref {
width: 100px;
height: 100px;
background: green;
}
</style>
<div id="ref"></div>