Feodor2
/
Mypal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix incorrect grid cell sizing to min/max space.

master
Fedor 2020-11-26 22:45:24 +02:00
parent b1896615b1
commit 2f3d0d90d2
3 changed files with 77 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
layout/generic/nsGridContainerFrame.cpp
View File

@ -4822,14 +4822,14 @@ nsGridContainerFrame::Tracks::StretchFlexibleTracks(
: ri->ComputedMaxISize();
}
Maybe<nsTArray<TrackSize>> origSizes;
bool applyMinMax = (minSize != 0 || maxSize != NS_UNCONSTRAINEDSIZE) &&
aAvailableSize == NS_UNCONSTRAINEDSIZE;
// We iterate twice at most. The 2nd time if the grid size changed after
// applying a min/max-size (can only occur if aAvailableSize is indefinite).
while (true) {
float fr = FindUsedFlexFraction(aState, aGridItems, flexTracks,
aFunctions, aAvailableSize);
if (fr != 0.0f) {
bool applyMinMax = (minSize != 0 || maxSize != NS_UNCONSTRAINEDSIZE) &&
aAvailableSize == NS_UNCONSTRAINEDSIZE;
for (uint32_t i : flexTracks) {
float flexFactor = aFunctions.MaxSizingFor(i).GetFlexFractionValue();
nscoord flexLength = NSToCoordRound(flexFactor * fr);
@ -4841,36 +4841,36 @@ nsGridContainerFrame::Tracks::StretchFlexibleTracks(
base = flexLength;
}
}
if (applyMinMax && origSizes.isSome()) {
// https://drafts.csswg.org/css-grid/#algo-flex-tracks
// "If using this flex fraction would cause the grid to be smaller than
// the grid container’s min-width/height (or larger than the grid
// container’s max-width/height), then redo this step, treating the free
// space as definite [...]"
nscoord newSize = 0;
for (auto& sz : mSizes) {
newSize += sz.mBase;
}
const auto sumOfGridGaps = SumOfGridGaps();
newSize += sumOfGridGaps;
if (newSize > maxSize) {
aAvailableSize = maxSize;
} else if (newSize < minSize) {
aAvailableSize = minSize;
}
if (aAvailableSize != NS_UNCONSTRAINEDSIZE) {
// Reset min/max-size to ensure 'applyMinMax' becomes false next time.
minSize = 0;
maxSize = NS_UNCONSTRAINEDSIZE;
aAvailableSize = std::max(0, aAvailableSize - sumOfGridGaps);
// Restart with the original track sizes and definite aAvailableSize.
}
if (applyMinMax) {
applyMinMax = false;
// https://drafts.csswg.org/css-grid/#algo-flex-tracks
// "If using this flex fraction would cause the grid to be smaller than
// the grid container’s min-width/height (or larger than the grid
// container’s max-width/height), then redo this step, treating the free
// space as definite [...]"
nscoord newSize = 0;
for (auto& sz : mSizes) {
newSize += sz.mBase;
}
const auto sumOfGridGaps = SumOfGridGaps();
newSize += sumOfGridGaps;
if (newSize > maxSize) {
aAvailableSize = maxSize;
} else if (newSize < minSize) {
aAvailableSize = minSize;
}
if (aAvailableSize != NS_UNCONSTRAINEDSIZE) {
aAvailableSize = std::max(0, aAvailableSize - sumOfGridGaps);
// Restart with the original track sizes and definite aAvailableSize.
if (origSizes.isSome()) {
mSizes = Move(*origSizes);
origSizes.reset();
if (aAvailableSize == 0) {
break; // zero available size wouldn't change any sizes though...
}
continue;
} // else, no mSizes[].mBase were changed above so it's still correct
if (aAvailableSize == 0) {
break; // zero available size wouldn't change any sizes though...
}
continue;
}
}
break;

24
layout/reftests/css-grid/grid-max-sizing-flex-007-ref.html
View File

@ -107,4 +107,28 @@
<div class="item"></div>
</div>
<pre>The first 6 grids should look the same:</pre>
<div class="grid rows" style="grid: 1fr / 30px; height:83px">
<div class="item"></div>
</div>
<div class="grid rows" style="grid: 10px 1fr / 30px; height:83px">
<div class="item" style="grid-row:span 2"></div>
</div>
<div class="grid rows" style="grid: 1fr / 30px; height:83px">
<div class="item"></div>
</div>
<div class="grid rows" style="grid: 1fr 1fr / 30px; height:83px">
<div class="item" style="grid-row:span 2"><div style="height:90px"></div></div>
</div>
<div class="grid rows" style="grid: 1fr auto / 30px; height:83px">
<div class="item" style="grid-row:span 2"><div style="height:90px"></div></div>
</div>
<div class="grid rows" style="grid: 10px 1fr / 30px; height:83px">
<div class="item" style="grid-row:span 2"><div style="height:90px"></div></div>
</div>
<div class="grid rows" style="grid: 1fr 1fr / 30px; grid-row-gap:10px; height:83px">
<div class="item" style="grid-row:span 2"><div style="height:40px"></div></div>
<div class="item"><div style="height:40px"></div></div>
</div>
</body></html>

24
layout/reftests/css-grid/grid-max-sizing-flex-007.html
View File

@ -105,4 +105,28 @@
<div class="item"></div>
</div>
<pre>The first 6 grids should look the same:</pre>
<div class="grid rows" style="grid: 1fr / 30px; min-height:83px">
<div class="item"></div>
</div>
<div class="grid rows" style="grid: 10px 1fr / 30px; min-height:83px">
<div class="item" style="grid-row:span 2"></div>
</div>
<div class="grid rows" style="grid: 1fr / 30px; max-height:30px; min-height:83px">
<div class="item"></div>
</div>
<div class="grid rows" style="grid: 1fr 1fr / 30px; max-height:83px">
<div class="item" style="grid-row:span 2"><div style="height:90px"></div></div>
</div>
<div class="grid rows" style="grid: 1fr auto / 30px; max-height:83px">
<div class="item" style="grid-row:span 2"><div style="height:90px"></div></div>
</div>
<div class="grid rows" style="grid: 10px 1fr / 30px; max-height:83px">
<div class="item" style="grid-row:span 2"><div style="height:90px"></div></div>
</div>
<div class="grid rows" style="grid: 1fr 1fr / 30px; grid-row-gap:10px; max-height:83px">
<div class="item" style="grid-row:span 2"><div style="height:40px"></div></div>
<div class="item"><div style="height:40px"></div></div>
</div>
</body></html>