commit 6a2bb50c8fbc972cae91aa80b48b3e18c4f1ed42 parent 8656d9cad692026cc1c48febbe83ed9834f17d7d Author: Alison Maher <almaher@microsoft.com> Date: Tue, 21 Oct 2025 10:39:08 +0000 Bug 1995446 [wpt PR 55565] - [Masonry] Fix row/column-intrinsic-track-sizes.html, a=testonly Automatic update from web-platform-tests [Masonry] Fix row/column-intrinsic-track-sizes.html Fixing these tests involved the following updates: 1. Update all grid id refs to masonry. 2. In the row test, update the item.style.expectedRows to item.style.gridRow. I suspect this was a bad AI suggestion I didn't catch originally. 3. The min-content/max-content contribution in the block direction (i.e. row direction) is always the same (which is the block content contribution). This means that the row test expectations needed to be updated for all min-content entries to match that of max-content. The reason the grid test for #3 is different is that test sets both column and row constraints, which impacts what the rows are sized to. In this case, we are only constraining the row sizes, so we can end up with different expectations as a result. Bug: 343257585 Change-Id: I81f19a30d332eab5e18b7638d98467fbb81cde02 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7038202 Commit-Queue: Alison Maher <almaher@microsoft.com> Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1532680} -- wpt-commits: 33901d53e6a6b768c446371c36d80b2f02945eb4 wpt-pr: 55565 Diffstat:
3 files changed, 16 insertions(+), 17 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/support/testing-utils.js b/testing/web-platform/tests/css/css-grid/grid-definition/support/testing-utils.js @@ -35,7 +35,7 @@ var TestingUtils = (function() { var grid = document.getElementById(gridId); grid.style.gridTemplateRows = rowsStyle; checkGridTemplateRows(grid, rowsComputedValue); - }, (label ? label + " " : "") + "'" + gridId +"with: grid-template-rows: " + rowsStyle + ";"); + }, (label ? label + " " : "") + "'" + gridId +"' with: grid-template-rows: " + rowsStyle + ";"); } function checkGridTemplateAreas(element, value) { diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-track-sizes.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-track-sizes.html @@ -21,7 +21,7 @@ } </style> -<div id="grid"> +<div id="masonry"> <div id="item">XXX XX<br>XX<br>XX</div> </div> @@ -34,7 +34,7 @@ const item = document.getElementById("item"); function checkTrackSizes(span, trackList, expectedCols) { item.style.gridColumn = `span ${span}`; - TestingUtils.testGridTemplateColumns("grid", trackList, expectedCols); + TestingUtils.testGridTemplateColumns("masonry", trackList, expectedCols); } setup({ explicit_done: true }); diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-intrinsic-track-sizes.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-intrinsic-track-sizes.html @@ -22,7 +22,7 @@ } </style> -<div id="grid"> +<div id="masonry"> <div id="item">XXX XX<br>XX<br>XX</div> </div> @@ -34,51 +34,50 @@ <script> const item = document.getElementById("item"); function checkTrackSizes(span, trackList, expectedRows) { - item.style.expectedRows = `span ${span}`; - TestingUtils.testGridTemplateRows("grid", trackList, expectedRows); + item.style.gridRow = `span ${span}`; + TestingUtils.testGridTemplateRows("masonry", trackList, expectedRows); } setup({ explicit_done: true }); document.fonts.ready.then(() => { // Item spanning a single track checkTrackSizes(1, "auto", "120px"); - checkTrackSizes(1, "min-content", "40px"); - checkTrackSizes(1, "max-content", "60px", "30px"); + checkTrackSizes(1, "min-content", "30px"); + checkTrackSizes(1, "max-content", "30px"); checkTrackSizes(1, "minmax(0, auto)", "120px"); - checkTrackSizes(1, "minmax(0, min-content)", "40px"); + checkTrackSizes(1, "minmax(0, min-content)", "30px"); checkTrackSizes(1, "minmax(0, max-content)", "30px"); checkTrackSizes(1, "minmax(auto, 10px)", "12px"); - checkTrackSizes(1, "minmax(min-content, 10px)", "40px"); + checkTrackSizes(1, "minmax(min-content, 10px)", "30px"); checkTrackSizes(1, "minmax(max-content, 10px)", "30px"); // Item spanning two identical tracks - checkTrackSizes(2, "auto auto", "60px 60px"); - checkTrackSizes(2, "min-content min-content", "20px 20px"); + checkTrackSizes(2, "min-content min-content", "15px 15px"); checkTrackSizes(2, "max-content max-content", "15px 15px"); checkTrackSizes(2, "minmax(0, auto) minmax(0, auto)", "60px 60px"); - checkTrackSizes(2, "minmax(0, min-content) minmax(0, min-content)", "20px 20px"); + checkTrackSizes(2, "minmax(0, min-content) minmax(0, min-content)", "15px 15px"); checkTrackSizes(2, "minmax(0, max-content) minmax(0, max-content)", "15px 15px"); checkTrackSizes(2, "minmax(auto, 4px) minmax(auto, 4px)", "6px 6px"); checkTrackSizes(2, "minmax(auto, 10px) minmax(auto, 10px)", "10px 10px"); - checkTrackSizes(2, "minmax(min-content, 10px) minmax(min-content, 10px)", "20px 20px"); + checkTrackSizes(2, "minmax(min-content, 10px) minmax(min-content, 10px)", "15px 15px"); checkTrackSizes(2, "minmax(max-content, 10px) minmax(max-content, 10px)", "15px 15px"); // Item spanning a fixed track also checkTrackSizes(2, "20px auto", "20px 100px"); - checkTrackSizes(2, "20px min-content", "20px 20px"); + checkTrackSizes(2, "20px min-content", "20px 10px"); checkTrackSizes(2, "20px max-content", "20px 10px"); checkTrackSizes(2, "20px minmax(0, auto)", "20px 100px"); - checkTrackSizes(2, "20px minmax(0, min-content)", "20px 20px"); + checkTrackSizes(2, "20px minmax(0, min-content)", "20px 10px"); checkTrackSizes(2, "20px minmax(0, max-content)", "20px 10px"); checkTrackSizes(2, "20px minmax(auto, 30px)", "20px 30px"); - checkTrackSizes(2, "20px minmax(min-content, 6px)", "20px 20px"); + checkTrackSizes(2, "20px minmax(min-content, 6px)", "20px 10px"); checkTrackSizes(2, "20px minmax(min-content, 40px)", "20px 40px"); checkTrackSizes(2, "20px minmax(max-content, 6px)", "20px 10px"); checkTrackSizes(2, "20px minmax(max-content, 30px)", "20px 30px");