commit f41a8d096340987c2d6256c45dcac3bd2324436a
parent 1ab4eda073ef8f2a563282895c3291ada1fc756d
Author: Alison Maher <almaher@microsoft.com>
Date: Thu, 6 Nov 2025 21:36:45 +0000
Bug 1997732 [wpt PR 55809] - [Masonry] Use max-content for stacking axis min-content, a=testonly
Automatic update from web-platform-tests
[Masonry] Use max-content for stacking axis min-content
Per the proposal in [1], "Have the min-content size of the stacking
axis of a masonry container be the same as its max-content size (same
as the "stacking axis" of block layout)."
This CL implements this proposal and updates the expectation of the
test that kicked of this issue originally. It also fixes crashes in a
few tests where orthogonal items in a row masonry had a larger
min-content size than max-content size, leading to a check that
expected the container min-content to be <= to the max-content size.
[1] https://github.com/w3c/csswg-drafts/issues/12843#issuecomment-3349066695
Bug: 343257585
Change-Id: I35eab974b3518968ee4d686dfbc0adafa43f9a43
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7107410
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1539388}
--
wpt-commits: 31a099e960a45e3028ef9c9155d5e2d5527528d1
wpt-pr: 55809
Diffstat:
1 file changed, 2 insertions(+), 8 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-min-content-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-min-content-ref.html
@@ -10,20 +10,14 @@ html,body {
.grid {
display: grid;
grid-template-rows: 15px auto auto;
- width: min-content;
+ width: max-content;
+ background: gray;
align-items: start;
padding: 10px;
}
-
-#gray-bg {
- background: gray;
- position: absolute;
- z-index: -1;
-}
</style>
<body>
<p>Ensure that masonry containers are sized correctly under min-content constraints even if the items do not have the min-content style.</p>
- <div id="gray-bg"></div>
<div id="shown-items" class="grid">
<div style="background: lightskyblue; width: max-content; grid-row: 1; grid-column: 1;">
Number 1
