commit de4606cd6e095cf4c1d7e4bb621c2bb367c790f3 parent ee47edb708e584dd3d80c532e435b15a655968f1 Author: Yanling Wang <yanlingwang@microsoft.com> Date: Fri, 31 Oct 2025 08:57:02 +0000 Bug 1996970 [wpt PR 55737] - [Masonry] Fix column-intrinsic-maximums.html, a=testonly Automatic update from web-platform-tests [Masonry] Fix column-intrinsic-maximums.html This test was failing because padding was excluded when the containing block for out-of-flow items was a masonry container. This CL restores the padding area in the containing block calculation, aligning the behavior with grid. This CL also updates the expectation files for several other OOF static position tests in masonry to match the new logic. Bug: 343257585 Change-Id: I3282acf4905a363b3368b9ebfc635600e0567c1c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7076955 Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Yanling Wang <yanlingwang@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1536865} -- wpt-commits: 20def35d4f478e3dad2dbbfd84bf90de80696561 wpt-pr: 55737 Diffstat:
15 files changed, 0 insertions(+), 72 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/column-masonry-alignment-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/column-masonry-alignment-ref.html @@ -48,7 +48,6 @@ .align-self { grid-column: 2 / 3; - grid-row: 1 / 2; } .align-start { @@ -68,7 +67,6 @@ .justify-self { grid-column: 4 / 5; - grid-row: 1 / 2; } .justify-start { @@ -88,7 +86,6 @@ .combo-center-center { grid-column: 3 / 4; - grid-row: 1 / 2; align-self: center; justify-self: center; background: hotpink; @@ -99,7 +96,6 @@ background: orange; border: 1px solid darkorange; grid-column: 1 / 2; - grid-row: 1 / 2; width: 170px; height: 30px; justify-self: safe end; @@ -112,7 +108,6 @@ background: purple; border: 1px solid darkmagenta; grid-column: 5 / 6; - grid-row: 1 / 2; width: 170px; height: 30px; justify-self: unsafe end; diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-001-ref.html @@ -24,7 +24,6 @@ } .abspos-first { - grid-row: 1 / 2; grid-column: span 2; position: absolute; top: 70px; @@ -35,7 +34,6 @@ } .abspos-second { - grid-row: 1 / 2; grid-column: 4 / 5; position: absolute; top: 10px; @@ -44,7 +42,6 @@ } .abspos-third { - grid-row: 1 / 2; grid-column: 4 / 5; position: absolute; width: 50px; @@ -69,7 +66,6 @@ background: lightcoral; border: 2px solid red; grid-column: span 2; - grid-row: 1 / 2; } </style> </head> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-002-ref.html @@ -36,7 +36,6 @@ .absolute { position: absolute; grid-column: 1 / 2; - grid-row: 1 / 2; background: red; top: 30px; width: 20px; @@ -46,7 +45,6 @@ .static-pos-with-grid-column { position: absolute; background: yellow; - grid-row: 1 / 2; grid-column: 2 / 3; width: 10px; height: 10px; diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/row-masonry-alignment-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/row-masonry-alignment-ref.html @@ -48,7 +48,6 @@ .align-self { grid-row: 2 / 3; - grid-column: 1 / 2; } .align-start { @@ -68,7 +67,6 @@ .justify-self { grid-row: 4 / 5; - grid-column: 1 / 2; } .justify-start { @@ -99,7 +97,6 @@ background: orange; border: 1px solid darkorange; grid-row: 1 / 2; - grid-column: 1 / 2; height: 170px; width: 30px; align-self: safe end; @@ -112,7 +109,6 @@ background: purple; border: 1px solid darkmagenta; grid-row: 5 / 6; - grid-column: 1 / 2; height: 170px; width: 30px; align-self: unsafe end; diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-001-ref.html @@ -24,7 +24,6 @@ .abspos-first { grid-row: span 2; - grid-column: 1 / 2; position: absolute; top: 80px; bottom: 30px; @@ -35,7 +34,6 @@ .abspos-second { grid-row: 4 / 5; - grid-column: 1 / 2; position: absolute; top: 10px; left: 10px; @@ -46,7 +44,6 @@ .abspos-third { grid-row: 4 / 5; - grid-column: 1 / 2; position: absolute; width: 50px; height: 60px; @@ -70,7 +67,6 @@ background: lightcoral; border: 2px solid red; grid-row: span 2; - grid-column: 1 / 2; } </style> </head> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-002-ref.html @@ -37,7 +37,6 @@ .absolute { position: absolute; grid-row: 1 / 2; - grid-column: 1 / 2; background: red; left: 20px; width: 20px; @@ -48,7 +47,6 @@ position: absolute; background: yellow; grid-row: 2 / 3; - grid-column: 1 / 2; width: 10px; height: 10px; } diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-001-ref.html @@ -24,28 +24,24 @@ .grid > :nth-child(1) { grid-column: 1/2; - grid-row: 1/2; align-self: start; background: green; } .grid > :nth-child(2) { grid-column: 2/3; - grid-row: 1/2; align-self: start; background: blue; } .grid > :nth-child(3) { grid-column: 1/2; - grid-row: 1/2; align-self: end; background: yellow; } .grid > :nth-child(4) { grid-column: 2/3; - grid-row: 1/2; align-self: end; background: red; } diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-002-ref.html @@ -31,42 +31,36 @@ .safe-start { grid-column: 1 / 2; - grid-row: 1 / 2; align-self: safe start; background: lightcoral; } .unsafe-start { grid-column: 2 / 3; - grid-row: 1 / 2; align-self: unsafe start; background: lightblue; } .safe-end { grid-column: 3 / 4; - grid-row: 1 / 2; align-self: safe end; background: lightgreen; } .unsafe-end { grid-column: 1 / 2; - grid-row: 1 / 2; align-self: unsafe end; background: lightyellow; } .safe-center { grid-column: 2 / 3; - grid-row: 1 / 2; align-self: safe center; background: plum; } .unsafe-center { grid-column: 3 / 4; - grid-row: 1 / 2; align-self: unsafe center; background: orange; } diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-003-ref.html @@ -31,7 +31,6 @@ .flex-start-item { grid-column: 1 / 2; - grid-row: 1 / 2; align-self: flex-start; justify-self: flex-start; background: lightcoral; @@ -39,7 +38,6 @@ .flex-end-item { grid-column: 2 / 3; - grid-row: 1 / 2; align-self: flex-end; justify-self: flex-end; background: lightblue; @@ -47,7 +45,6 @@ .mixed-legacy { grid-column: 3 / 4; - grid-row: 1 / 2; align-self: flex-start; justify-self: end; background: lightgreen; @@ -55,7 +52,6 @@ .normal-item { grid-column: 1 / 2; - grid-row: 1 / 2; align-self: normal; justify-self: normal; background: lightyellow; @@ -63,7 +59,6 @@ .auto-item { grid-column: 2 / 3; - grid-row: 1 / 2; align-self: auto; justify-self: auto; background: plum; @@ -71,7 +66,6 @@ .legacy-center { grid-column: 3 / 4; - grid-row: 1 / 2; align-self: flex-start; justify-self: center; background: orange; diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-004-ref.html @@ -31,7 +31,6 @@ .start-start { grid-column: 1 / 2; - grid-row: 1 / 2; align-self: start; justify-self: start; background: red; @@ -39,7 +38,6 @@ .start-center { grid-column: 2 / 3; - grid-row: 1 / 2; align-self: start; justify-self: center; background: orange; @@ -47,7 +45,6 @@ .start-end { grid-column: 3 / 4; - grid-row: 1 / 2; align-self: start; justify-self: end; background: yellow; @@ -55,7 +52,6 @@ .center-start { grid-column: 1 / 2; - grid-row: 1 / 2; align-self: center; justify-self: start; background: green; @@ -63,7 +59,6 @@ .center-center { grid-column: 2 / 3; - grid-row: 1 / 2; align-self: center; justify-self: center; background: blue; @@ -71,7 +66,6 @@ .center-end { grid-column: 3 / 4; - grid-row: 1 / 2; align-self: center; justify-self: end; background: indigo; @@ -79,7 +73,6 @@ .end-start { grid-column: 1 / 2; - grid-row: 1 / 2; align-self: end; justify-self: start; background: violet; @@ -87,7 +80,6 @@ .end-center { grid-column: 2 / 3; - grid-row: 1 / 2; align-self: end; justify-self: center; background: pink; @@ -95,7 +87,6 @@ .end-end { grid-column: 3 / 4; - grid-row: 1 / 2; align-self: end; justify-self: end; background: brown; diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-001-ref.html @@ -24,28 +24,24 @@ } .grid > :nth-child(1) { - grid-column: 1/2; grid-row: 1/2; justify-self: start; background: green; } .grid > :nth-child(2) { - grid-column: 1/2; grid-row: 2/3; justify-self: start; background: blue; } .grid > :nth-child(3) { - grid-column: 1/2; grid-row: 1/2; justify-self: end; background: yellow; } .grid > :nth-child(4) { - grid-column: 1/2; grid-row: 2/3; justify-self: end; background: red; diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-002-ref.html @@ -31,42 +31,36 @@ } .safe-start { - grid-column: 1 / 2; grid-row: 1 / 2; justify-self: safe start; background: lightcoral; } .unsafe-start { - grid-column: 1 / 2; grid-row: 2 / 3; justify-self: unsafe start; background: lightblue; } .safe-end { - grid-column: 1 / 2; grid-row: 3 / 4; justify-self: safe end; background: lightgreen; } .unsafe-end { - grid-column: 1 / 2; grid-row: 1 / 2; justify-self: unsafe end; background: lightyellow; } .safe-center { - grid-column: 1 / 2; grid-row: 2 / 3; justify-self: safe center; background: plum; } .unsafe-center { - grid-column: 1 / 2; grid-row: 3 / 4; justify-self: unsafe center; background: orange; diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-003-ref.html @@ -31,7 +31,6 @@ } .flex-start-item { - grid-column: 1 / 2; grid-row: 1 / 2; justify-self: flex-start; align-self: flex-start; @@ -39,7 +38,6 @@ } .flex-end-item { - grid-column: 1 / 2; grid-row: 2 / 3; justify-self: flex-end; align-self: flex-end; @@ -47,7 +45,6 @@ } .mixed-legacy { - grid-column: 1 / 2; grid-row: 3 / 4; justify-self: flex-start; align-self: end; @@ -55,7 +52,6 @@ } .normal-item { - grid-column: 1 / 2; grid-row: 1 / 2; justify-self: normal; align-self: normal; @@ -63,7 +59,6 @@ } .auto-item { - grid-column: 1 / 2; grid-row: 2 / 3; justify-self: auto; align-self: auto; @@ -71,7 +66,6 @@ } .legacy-center { - grid-column: 1 / 2; grid-row: 3 / 4; justify-self: flex-start; align-self: center; diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-004-ref.html @@ -31,7 +31,6 @@ } .start-start { - grid-column: 1 / 2; grid-row: 1 / 2; justify-self: start; align-self: start; @@ -39,7 +38,6 @@ } .start-center { - grid-column: 1 / 2; grid-row: 2 / 3; justify-self: start; align-self: center; @@ -47,7 +45,6 @@ } .start-end { - grid-column: 1 / 2; grid-row: 3 / 4; justify-self: start; align-self: end; @@ -55,7 +52,6 @@ } .center-start { - grid-column: 1 / 2; grid-row: 1 / 2; justify-self: center; align-self: start; @@ -63,7 +59,6 @@ } .center-center { - grid-column: 1 / 2; grid-row: 2 / 3; justify-self: center; align-self: center; @@ -71,7 +66,6 @@ } .center-end { - grid-column: 1 / 2; grid-row: 3 / 4; justify-self: center; align-self: end; @@ -79,7 +73,6 @@ } .end-start { - grid-column: 1 / 2; grid-row: 1 / 2; justify-self: end; align-self: start; @@ -87,7 +80,6 @@ } .end-center { - grid-column: 1 / 2; grid-row: 2 / 3; justify-self: end; align-self: center; @@ -95,7 +87,6 @@ } .end-end { - grid-column: 1 / 2; grid-row: 3 / 4; justify-self: end; align-self: end; diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-maximums-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-maximums-ref.html @@ -1,6 +1,5 @@ <!DOCTYPE html> <html> -<link href="/css/support/grid.css" rel="stylesheet"> <link href="/css/support/width-keyword-classes.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style>