Skip to content
Permalink
Browse files
[css-grid] Transfer size for grid item with an aspect-ratio and stret…
…ch alignment against the definite row

https://bugs.webkit.org/show_bug.cgi?id=232987

Reviewed by Javier Fernandez.

Source/WebCore:

For a grid item with an aspect-ratio, if it has stretch alignment against the definite row, it should
try and resolve it if possible and transfer this size into the inline direction for the min/max content
size. For the case that the grid width is content sized, we need to update the width before laying out
the grid items. Since the min-content contribution of the grid item has changed based on the row sizes
calculated in step 2 of sizing algorithm, we also need to repeat the sizing algorithm steps to update
the width of the track sizes.

* rendering/GridLayoutFunctions.cpp:
(WebCore::GridLayoutFunctions::isAspectRatioBlockSizeDependentChild):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::updateGridAreaForAspectRatioItems):
* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::needsPreferredWidthsRecalculation const):

LayoutTests:

* TestExpectations: unskip the test that is now passing.



Canonical link: https://commits.webkit.org/244384@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@285987 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
ziransun committed Nov 18, 2021
1 parent 2b6f86b commit 1172e24733362a1094015642379cf1ed6230889a
Showing 6 changed files with 37 additions and 4 deletions.
@@ -1,3 +1,12 @@
2021-11-18 Ziran Sun <zsun@igalia.com>

[css-grid] Transfer size for grid item with an aspect-ratio and stretch alignment against the definite row
https://bugs.webkit.org/show_bug.cgi?id=232987

Reviewed by Javier Fernandez.

* TestExpectations: unskip the test that is now passing.

2021-11-17 Youenn Fablet <youenn@apple.com>

Add support for more rvfc metadata
@@ -1395,7 +1395,6 @@ imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-a
imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-001.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-repeat-max-width-001.html [ ImageOnlyFailure ]

imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-004.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-item-inline-contribution-003.html [ ImageOnlyFailure ]
webkit.org/b/231021 imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-size-with-orthogonal-child-dynamic.html [ ImageOnlyFailure ]
webkit.org/b/231021 imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-margin-dynamic.html [ ImageOnlyFailure ]
@@ -1,3 +1,24 @@
2021-11-18 Ziran Sun <zsun@igalia.com>

[css-grid] Transfer size for grid item with an aspect-ratio and stretch alignment against the definite row
https://bugs.webkit.org/show_bug.cgi?id=232987

Reviewed by Javier Fernandez.

For a grid item with an aspect-ratio, if it has stretch alignment against the definite row, it should
try and resolve it if possible and transfer this size into the inline direction for the min/max content
size. For the case that the grid width is content sized, we need to update the width before laying out
the grid items. Since the min-content contribution of the grid item has changed based on the row sizes
calculated in step 2 of sizing algorithm, we also need to repeat the sizing algorithm steps to update
the width of the track sizes.

* rendering/GridLayoutFunctions.cpp:
(WebCore::GridLayoutFunctions::isAspectRatioBlockSizeDependentChild):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::updateGridAreaForAspectRatioItems):
* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::needsPreferredWidthsRecalculation const):

2021-11-18 Antoine Quint <graouts@webkit.org>

[Model] [macOS] Add support for interaction on macOS
@@ -84,7 +84,7 @@ bool isOrthogonalChild(const RenderGrid& grid, const RenderBox& child)

bool isAspectRatioBlockSizeDependentChild(const RenderBox& child)
{
return (child.style().hasAspectRatio() || child.hasIntrinsicAspectRatio()) && child.hasRelativeLogicalHeight();
return (child.style().hasAspectRatio() || child.hasIntrinsicAspectRatio()) && (child.hasRelativeLogicalHeight() || child.hasStretchedLogicalHeight());
}

GridTrackSizingDirection flowAwareDirectionForChild(const RenderGrid& grid, const RenderBox& child, GridTrackSizingDirection direction)
@@ -960,8 +960,12 @@ void RenderGrid::updateGridAreaForAspectRatioItems(const Vector<RenderBox*>& aut
populateGridPositionsForDirection(ForColumns);
populateGridPositionsForDirection(ForRows);

for (auto& autoGridItem : autoGridItems)
for (auto& autoGridItem : autoGridItems) {
updateGridAreaLogicalSize(*autoGridItem, gridAreaBreadthForChildIncludingAlignmentOffsets(*autoGridItem, ForColumns), gridAreaBreadthForChildIncludingAlignmentOffsets(*autoGridItem, ForRows));
// For an item wtih aspect-ratio, if it has stretch alignment that stretches to the definite row, we also need to transfer the size before laying out the grid item.
if (autoGridItem->hasStretchedLogicalHeight())
applyStretchAlignmentToChildIfNeeded(*autoGridItem);
}
}

void RenderGrid::layoutGridItems()
@@ -802,7 +802,7 @@ bool RenderReplaced::isContentLikelyVisibleInViewport()
bool RenderReplaced::needsPreferredWidthsRecalculation() const
{
// If the height is a percentage and the width is auto, then the containingBlocks's height changing can cause this node to change it's preferred width because it maintains aspect ratio.
return hasRelativeLogicalHeight() && style().logicalWidth().isAuto();
return (hasRelativeLogicalHeight() || (isGridItem() && hasStretchedLogicalHeight())) && style().logicalWidth().isAuto();
}

}

0 comments on commit 1172e24

Please sign in to comment.