Skip to content
Permalink
Browse files
Grid track sizing should reset the override width as well as height t…
…o compute intrinsic sizing.

https://bugs.webkit.org/show_bug.cgi?id=247465
<rdar://101304306>

Reviewed by Alan Baradlay.

Grid layout (sometimes) sets the override content size and containing block sizes, so that grid items get sized relative to their grid tracks, rather than the size of the grid element.

During the sizing process, we want to know the intrinsic size of children, so we reset any overrides and re-layout children to measure them.

We're currently not resetting the content logical width, and there's a comment saying that grid never uses it, but that's out of date and we do need to reset this.

* LayoutTests/fast/dynamic/relayout-grid-should-reset-instrinsic-sizes-expected.html: Added.
* LayoutTests/fast/dynamic/relayout-grid-should-reset-instrinsic-sizes.html: Added.
* Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp:
(WebCore::GridTrackSizingAlgorithmStrategy::logicalHeightForChild const):
* Source/WebCore/rendering/RenderGrid.cpp:

Canonical link: https://commits.webkit.org/256622@main
  • Loading branch information
mattwoodrow committed Nov 13, 2022
1 parent 87d76d7 commit f2e73e71c88c14822ac5f6d077634fc828ad686e
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 6 deletions.
@@ -0,0 +1,6 @@
<!DOCTYPE HTML>
<html>
<body>
<div style="width: 150px; height: 150px; background-color: green"></div>
</body>
</html>
@@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#grid_container {
display: grid;
align-items:end;
}

#inner {
width: 100%;
background-color: green;
}
</style>
</head>
<body>
<div id="grid_container">
<div>
<canvas id="inner" width="100" height="100"></img>
</div>
</div>

<script>
let container = document.getElementById('grid_container');
window.getComputedStyle(container).width;
container.style.width = '150px';
</script>
</body>
</html>
@@ -818,9 +818,9 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::logicalHeightForChild(RenderBox& ch
child.setNeedsLayout(MarkOnlyThis);
}

// We need to clear the stretched height to properly compute logical height during layout.
// We need to clear the stretched content size to properly compute logical height during layout.
if (child.needsLayout())
child.clearOverridingLogicalHeight();
child.clearOverridingContentSize();

child.layoutIfNeeded();
return child.logicalHeight() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childBlockDirection, child) + m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
@@ -229,10 +229,10 @@ Vector<RenderBox*> RenderGrid::computeAspectRatioDependentAndBaselineItems()
m_hasAspectRatioBlockSizeDependentItem = false;

auto computeOrthogonalAndDependentItems = [&](RenderBox* child) {
// Grid's layout logic controls the grid item's override height, hence we need to
// clear any override height set previously, so it doesn't interfere in current layout
// execution. Grid never uses the override width, that's why we don't need to clear it.
child->clearOverridingLogicalHeight();
// Grid's layout logic controls the grid item's override content size, hence we need to
// clear any override set previously, so it doesn't interfere in current layout
// execution.
child->clearOverridingContentSize();

// We may need to repeat the track sizing in case of any grid item was orthogonal.
if (GridLayoutFunctions::isOrthogonalChild(*this, *child))

0 comments on commit f2e73e7

Please sign in to comment.