- Revision
- 285497
- Author
- z...@igalia.com
- Date
- 2021-11-09 06:48:01 -0800 (Tue, 09 Nov 2021)
Log Message
[css-grid] update the content-sized grid width before laying out a grid item with block constraints and aspect-ratio
https://bugs.webkit.org/show_bug.cgi?id=231802
Reviewed by Javier Fernandez.
Source/WebCore:
For a grid item with an aspect-ratio, if it has block-constraints such as the relative logical height
case we consider in this CL, 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/GridLayoutFunctions.h:
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutBlock):
(WebCore::RenderGrid::updateGridAreaForAspectRatioItems):
* rendering/RenderGrid.h:
LayoutTests:
Unskip the tests that are now passing and add a new test to check track size updates.
* imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-005-expected.html: Added.
* imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-005.html: Added.
* TestExpectations:
* platform/ios-wk2/TestExpectations:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (285496 => 285497)
--- trunk/LayoutTests/ChangeLog 2021-11-09 14:40:32 UTC (rev 285496)
+++ trunk/LayoutTests/ChangeLog 2021-11-09 14:48:01 UTC (rev 285497)
@@ -1,3 +1,17 @@
+2021-11-09 Ziran Sun <z...@igalia.com>
+
+ [css-grid] update the content-sized grid width before laying out a grid item with block constraints and aspect-ratio
+ https://bugs.webkit.org/show_bug.cgi?id=231802
+
+ Reviewed by Javier Fernandez.
+
+ Unskip the tests that are now passing and add a new test to check track size updates.
+
+ * imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-005-expected.html: Added.
+ * imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-005.html: Added.
+ * TestExpectations:
+ * platform/ios-wk2/TestExpectations:
+
2021-11-09 Alan Bujtas <za...@apple.com>
Rendering bug with height: min-content, position: absolute, and box-sizing: border-box
Modified: trunk/LayoutTests/TestExpectations (285496 => 285497)
--- trunk/LayoutTests/TestExpectations 2021-11-09 14:40:32 UTC (rev 285496)
+++ trunk/LayoutTests/TestExpectations 2021-11-09 14:48:01 UTC (rev 285497)
@@ -1399,7 +1399,6 @@
imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/flex-sizing-rows-indefinite-height.html [ ImageOnlyFailure ]
-webkit.org/b/231021 imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-size-dynamic-block-size.html [ ImageOnlyFailure ]
webkit.org/b/231021 imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-template-flexible-rerun-track-sizing.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/masonry-align-content-001.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/masonry-align-content-002.html [ ImageOnlyFailure ]
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-005-expected.html (0 => 285497)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-005-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-005-expected.html 2021-11-09 14:48:01 UTC (rev 285497)
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href=""
+<p>Test passes if there is a filled green square.</p>
+<div style="width:100px; height:100px; background:green;"></div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-005.html (0 => 285497)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-005.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-005.html 2021-11-09 14:48:01 UTC (rev 285497)
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href=""
+<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row and the track sizes get updated.">
+<link rel="match" href=""
+<style>
+ body { overflow: hidden; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div style="display: inline-grid; grid-template-rows: 50px 50px; background: red; height: 100px;">
+ <div style="grid-row: 1; background: green; aspect-ratio: 2/1; height: 100%;"></div>
+ <div style="grid-row: 2; background: green;"></div>
+</div>
Modified: trunk/LayoutTests/platform/ios-wk2/TestExpectations (285496 => 285497)
--- trunk/LayoutTests/platform/ios-wk2/TestExpectations 2021-11-09 14:40:32 UTC (rev 285496)
+++ trunk/LayoutTests/platform/ios-wk2/TestExpectations 2021-11-09 14:48:01 UTC (rev 285497)
@@ -1993,14 +1993,8 @@
webkit.org/b/209461 imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-item-dynamic-min-contribution-001.html [ Failure ]
-webkit.org/b/227283 imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-001.html [ ImageOnlyFailure ]
-webkit.org/b/227283 imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-002.html [ ImageOnlyFailure ]
-webkit.org/b/227283 imported/w3c/web-platform-tests/css/css-grid/grid-items/aspect-ratio-003.html [ ImageOnlyFailure ]
webkit.org/b/227283 imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-item-inline-contribution-001.html [ ImageOnlyFailure ]
webkit.org/b/227283 imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-item-inline-contribution-002.html [ ImageOnlyFailure ]
-webkit.org/b/227283 imported/w3c/web-platform-tests/css/css-grid/grid-items/replaced-element-011.html [ ImageOnlyFailure ]
-webkit.org/b/227283 imported/w3c/web-platform-tests/css/css-grid/grid-items/replaced-element-012.html [ ImageOnlyFailure ]
-webkit.org/b/227283 imported/w3c/web-platform-tests/css/css-grid/grid-items/replaced-element-013.html [ ImageOnlyFailure ]
webkit.org/b/215929 compositing/video/poster.html [ Pass Timeout ]
Modified: trunk/Source/WebCore/ChangeLog (285496 => 285497)
--- trunk/Source/WebCore/ChangeLog 2021-11-09 14:40:32 UTC (rev 285496)
+++ trunk/Source/WebCore/ChangeLog 2021-11-09 14:48:01 UTC (rev 285497)
@@ -1,3 +1,25 @@
+2021-11-09 Ziran Sun <z...@igalia.com>
+
+ [css-grid] update the content-sized grid width before laying out a grid item with block constraints and aspect-ratio
+ https://bugs.webkit.org/show_bug.cgi?id=231802
+
+ Reviewed by Javier Fernandez.
+
+ For a grid item with an aspect-ratio, if it has block-constraints such as the relative logical height
+ case we consider in this CL, 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/GridLayoutFunctions.h:
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::layoutBlock):
+ (WebCore::RenderGrid::updateGridAreaForAspectRatioItems):
+ * rendering/RenderGrid.h:
+
2021-11-09 Alan Bujtas <za...@apple.com>
Rendering bug with height: min-content, position: absolute, and box-sizing: border-box
Modified: trunk/Source/WebCore/rendering/GridLayoutFunctions.cpp (285496 => 285497)
--- trunk/Source/WebCore/rendering/GridLayoutFunctions.cpp 2021-11-09 14:40:32 UTC (rev 285496)
+++ trunk/Source/WebCore/rendering/GridLayoutFunctions.cpp 2021-11-09 14:48:01 UTC (rev 285497)
@@ -82,6 +82,11 @@
return child.isHorizontalWritingMode() != grid.isHorizontalWritingMode();
}
+bool isAspectRatioBlockSizeDependentChild(const RenderBox& child)
+{
+ return (child.style().hasAspectRatio() || child.hasIntrinsicAspectRatio()) && child.hasRelativeLogicalHeight();
+}
+
GridTrackSizingDirection flowAwareDirectionForChild(const RenderGrid& grid, const RenderBox& child, GridTrackSizingDirection direction)
{
return !isOrthogonalChild(grid, child) ? direction : (direction == ForColumns ? ForRows : ForColumns);
Modified: trunk/Source/WebCore/rendering/GridLayoutFunctions.h (285496 => 285497)
--- trunk/Source/WebCore/rendering/GridLayoutFunctions.h 2021-11-09 14:40:32 UTC (rev 285496)
+++ trunk/Source/WebCore/rendering/GridLayoutFunctions.h 2021-11-09 14:48:01 UTC (rev 285497)
@@ -40,6 +40,7 @@
LayoutUnit computeMarginLogicalSizeForChild(const RenderGrid&, GridTrackSizingDirection, const RenderBox&);
LayoutUnit marginLogicalSizeForChild(const RenderGrid&, GridTrackSizingDirection, const RenderBox&);
bool isOrthogonalChild(const RenderGrid&, const RenderBox&);
+bool isAspectRatioBlockSizeDependentChild(const RenderBox&);
GridTrackSizingDirection flowAwareDirectionForChild(const RenderGrid&, const RenderBox&, GridTrackSizingDirection);
bool hasOverridingContainingBlockContentSizeForChild(const RenderBox&, GridTrackSizingDirection);
std::optional<LayoutUnit> overridingContainingBlockContentSizeForChild(const RenderBox&, GridTrackSizingDirection);
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (285496 => 285497)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2021-11-09 14:40:32 UTC (rev 285496)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2021-11-09 14:48:01 UTC (rev 285497)
@@ -161,7 +161,7 @@
// a new cycle of the sizing algorithm; there may be more. In addition, not all the
// cases with orthogonal flows require this extra cycle; we need a more specific
// condition to detect whether child's min-content contribution has changed or not.
- if (m_hasAnyOrthogonalItem || m_trackSizingAlgorithm.hasAnyPercentSizedRowsIndefiniteHeight()) {
+ if (m_hasAnyOrthogonalItem || m_trackSizingAlgorithm.hasAnyPercentSizedRowsIndefiniteHeight() || m_hasAspectRatioBlockSizeDependentItem) {
computeTrackSizesForDefiniteSize(ForColumns, availableSpaceForColumns);
computeContentPositionAndDistributionOffset(ForColumns, m_trackSizingAlgorithm.freeSpace(ForColumns).value(), nonCollapsedTracks(ForColumns));
computeTrackSizesForDefiniteSize(ForRows, availableSpaceForRows);
@@ -199,6 +199,8 @@
// FIXME: We might need to cache the hasDefiniteLogicalHeight if the call of RenderBlock::hasDefiniteLogicalHeight() causes a relevant performance regression.
bool hasDefiniteLogicalHeight = RenderBlock::hasDefiniteLogicalHeight() || hasOverridingLogicalHeight() || computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), std::nullopt);
m_hasAnyOrthogonalItem = false;
+ m_hasAspectRatioBlockSizeDependentItem = false;
+ Vector<RenderBox*> aspectRatioBlockSizeDependentGridItems;
for (auto* child = firstChildBox(); child; child = child->nextSiblingBox()) {
if (child->isOutOfFlowPositioned())
continue;
@@ -210,7 +212,13 @@
// We may need to repeat the track sizing in case of any grid item was orthogonal.
if (GridLayoutFunctions::isOrthogonalChild(*this, *child))
m_hasAnyOrthogonalItem = true;
-
+
+ // For a grid item that has an aspect-ratio and block-constraints such as the relative logical height,
+ // when the grid width is auto, we may need get the real grid width before laying out the item.
+ if (GridLayoutFunctions::isAspectRatioBlockSizeDependentChild(*child) && (style().logicalWidth().isAuto() || style().logicalWidth().isMinContent() || style().logicalWidth().isMaxContent())) {
+ aspectRatioBlockSizeDependentGridItems.append(child);
+ m_hasAspectRatioBlockSizeDependentItem = true;
+ }
// We keep a cache of items with baseline as alignment values so
// that we only compute the baseline shims for such items. This
// cache is needed for performance related reasons due to the
@@ -273,6 +281,11 @@
// 2.5- Compute Content Distribution offsets for rows tracks
computeContentPositionAndDistributionOffset(ForRows, m_trackSizingAlgorithm.freeSpace(ForRows).value(), nonCollapsedTracks(ForRows));
+ if (!aspectRatioBlockSizeDependentGridItems.isEmpty()) {
+ updateGridAreaForAspectRatioItems(aspectRatioBlockSizeDependentGridItems);
+ updateLogicalWidth();
+ }
+
// 3- If the min-content contribution of any grid items have changed based on the row
// sizes calculated in step 2, steps 1 and 2 are repeated with the new min-content
// contribution (once only).
@@ -942,6 +955,15 @@
child.setOverridingContainingBlockContentLogicalHeight(height);
}
+void RenderGrid::updateGridAreaForAspectRatioItems(const Vector<RenderBox*>& autoGridItems)
+{
+ populateGridPositionsForDirection(ForColumns);
+ populateGridPositionsForDirection(ForRows);
+
+ for (auto& autoGridItem : autoGridItems)
+ updateGridAreaLogicalSize(*autoGridItem, gridAreaBreadthForChildIncludingAlignmentOffsets(*autoGridItem, ForColumns), gridAreaBreadthForChildIncludingAlignmentOffsets(*autoGridItem, ForRows));
+}
+
void RenderGrid::layoutGridItems()
{
populateGridPositionsForDirection(ForColumns);
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (285496 => 285497)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2021-11-09 14:40:32 UTC (rev 285496)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2021-11-09 14:48:01 UTC (rev 285497)
@@ -130,6 +130,7 @@
void repeatTracksSizingIfNeeded(LayoutUnit availableSpaceForColumns, LayoutUnit availableSpaceForRows);
+ void updateGridAreaForAspectRatioItems(const Vector<RenderBox*>&);
void layoutGridItems();
void populateGridPositionsForDirection(GridTrackSizingDirection);
@@ -204,6 +205,7 @@
OutOfFlowPositionsMap m_outOfFlowItemRow;
bool m_hasAnyOrthogonalItem {false};
+ bool m_hasAspectRatioBlockSizeDependentItem { false };
bool m_baselineItemsCached {false};
};
