Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cherry-pick ff409be. rdar://problem/109170495
[css-grid][masonry] Containing block for items in a masonry columns grid should be the grid's content box logical width
https://bugs.webkit.org/show_bug.cgi?id=256611
rdar://109170495
Reviewed by Matt Woodrow.
The masonry spec states, "The containing block for a grid item is
formed by its grid area in the grid axis and the grid container’s
content-box in the masonry axis."
This means that for a grid that has masonry columns specified, the
masonry axis will be in the logical width direction of the grid. The
items should have their containing block set to the content box logical
box of the grid.
We can modify GridTrackSizingAlgorithm::gridAreaBreadthForChild to
return this value when the grid is a masonry columns grid since normally
the grid area would be used as the containing block in non-masonry
grids. This allows the rest of the code to use the grid area sizes of
the containing block in both masonry and non-masonry scenarios.
Previously, this function would have attempted to compute the
value by iterating over the tracks in the specified direction, but there
are no tracks in the masonry direction so we use the logic specified by
the masonry spec instead.
However, in order for this change to work properly we had to make a
change in RenderGrid::layoutMasonry by removing code that was
incorrectly overriding the logical width of the grid. The previous code
was attempting to set the logical width of the grid to the masonry
content size when the grid had masonry columns specified and an auto
logical width. There were 2 main issues with this piece of code:
1.) m_masonryLayout.gridContentSize() will always return 0 since we
actually haven't performed masonry layout at this point
2.) The grid shouldn't be overriding its logical width like this anyways
and it should instead be set by sized by the rules of the formatting
context it is participating in (e.g. block or inline layout).
By removing this code we can get the actual width of the grid later on
when we call m_renderGrid->contentLogicalWidth() rather than the
incorrect 0 value that it was being set to.
The following example highlights the changes that were made.
<style>
grid {
display: grid;
grid-template-columns:masonry;
grid-template-rows: auto;
}
</style>
<grid>
<svg width="100" height="100" viewBox="0 0 1 1" style="width: 100%; max-width: 100px; background: green;"></svg>
</grid>
By removing the extra code in RenderGrid::layoutMasonry, the grid will
get sizes as a block level box in the block formatting context it is
participating in, giving it a logical width that takes up its available
space. The svg's containing block logical width is set to its value so
it is able to resolve its percentage width to the correct value whereas
before the containing block logical width would have been 0px.
https://drafts.csswg.org/css-grid-3/#containing-block
* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width.html: Added.
* LayoutTests/platform/glib/TestExpectations:
* Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp:
(WebCore::GridTrackSizingAlgorithm::gridAreaBreadthForChild const):
* Source/WebCore/rendering/GridTrackSizingAlgorithm.h:
* Source/WebCore/rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutMasonry):
Canonical link: https://commits.webkit.org/264011@main
Identifier: 263769.30@safari-7616.1.14.10-branch- Loading branch information
