commit 823cf690168bfc97a85b6d9323c8ea81360f9c18 parent 92602061247bdb5f2a4b07d2a336662bd03dd779 Author: Alison Maher <almaher@microsoft.com> Date: Thu, 8 Jan 2026 17:38:07 +0000 Bug 2009080 [wpt PR 57057] - [Masonry] Deprecate 'grid-lanes-fill' and 'grid-lanes-flow', a=testonly Automatic update from web-platform-tests [Masonry] Deprecate 'grid-lanes-fill' and 'grid-lanes-flow' Given current proposals in the CSSWG [1], these properties are no longer being considered. Deprecate them, and we can always add them back if needed. [1] https://github.com/w3c/csswg-drafts/issues/12803#issuecomment-3643945412 Bug: 343257585 Change-Id: Ie3659c8ea99be574f5588a827aa46389f108ecda Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7404852 Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1565976} -- wpt-commits: f84ad8110634f4621835ce0116afab20dcd123b8 wpt-pr: 57057 Diffstat:
9 files changed, 32 insertions(+), 213 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-fill-computed.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-fill-computed.html @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - <title>CSS Grid Lanes: grid-lanes-fill getComputedStyle()</title> - <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> - <link rel="help" href="https://drafts.csswg.org/css-grid-3"> - <script src="/resources/testharness.js"></script> - <script src="/resources/testharnessreport.js"></script> - <script src="/css/support/computed-testcommon.js"></script> - <script src="/css/support/inheritance-testcommon.js"></script> -</head> -<body> - <div id="target"></div> - </div> - <script> - test_computed_value("grid-lanes-fill", "normal"); - test_computed_value("grid-lanes-fill", "reverse"); - </script> -</body> -</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-fill-invalid.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-fill-invalid.html @@ -1,22 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - <title>CSS Grid Lanes: parsing grid-lanes-fill with invalid values</title> - <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> - <link rel="help" href="https://drafts.csswg.org/css-grid-3"> - <script src="/resources/testharness.js"></script> - <script src="/resources/testharnessreport.js"></script> - <script src="/css/support/parsing-testcommon.js"></script> -</head> -<body> - <div id="target"></div> - <script> - test_invalid_value('grid-lanes-fill', '10'); - test_invalid_value('grid-lanes-fill', 'true'); - test_invalid_value('grid-lanes-fill', 'default'); - test_invalid_value('grid-lanes-fill', 'set'); - test_invalid_value('grid-lanes-fill', 'before, after'); - </script> -</body> -</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-fill-valid.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-fill-valid.html @@ -1,19 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - <title>CSS Grid Lanes: parsing grid-lanes-fill with valid values</title> - <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> - <link rel="help" href="https://drafts.csswg.org/css-grid-3"> - <script src="/resources/testharness.js"></script> - <script src="/resources/testharnessreport.js"></script> - <script src="/css/support/parsing-testcommon.js"></script> -</head> -<body> - <div id="target"></div> - <script> - test_valid_value('grid-lanes-fill', 'normal'); - test_valid_value('grid-lanes-fill', 'reverse'); - </script> -</body> -</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-flow-computed.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-flow-computed.html @@ -1,28 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <title>CSS Grid Lanes: grid-lanes-flow getComputedStyle()</title> - <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> - <link rel="help" href="https://drafts.csswg.org/css-grid-3"> - <script src="/resources/testharness.js"></script> - <script src="/resources/testharnessreport.js"></script> - <script src="/css/support/computed-testcommon.js"></script> - <script src="/css/support/inheritance-testcommon.js"></script> -</head> -<body> - <div id="target"></div> - <script> - test_computed_value("grid-lanes-flow", "column normal"); - test_computed_value("grid-lanes-flow", "column reverse"); - - test_computed_value("grid-lanes-flow", "row normal"); - test_computed_value("grid-lanes-flow", "row reverse"); - - test_computed_value("grid-lanes-flow", "column-reverse normal"); - test_computed_value("grid-lanes-flow", "column-reverse reverse"); - - test_computed_value("grid-lanes-flow", "row-reverse normal"); - test_computed_value("grid-lanes-flow", "row-reverse reverse"); - </script> -</body> -</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-flow-invalid.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-flow-invalid.html @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - <title>CSS Grid Lanes: grid-lanes-flow parsing</title> - <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> - <link rel="help" href="https://drafts.csswg.org/css-grid-3"> - <script src="/resources/testharness.js"></script> - <script src="/resources/testharnessreport.js"></script> - <script src="/css/support/parsing-testcommon.js"></script> -</head> -<body> - <script> - test_invalid_value("grid-lanes-flow", "nowrap row nowrap"); - test_invalid_value("grid-lanes-flow", "column wrap column"); - test_invalid_value("grid-lanes-flow", "reverse-column column"); - test_invalid_value("grid-lanes-flow", "reverse-row, row"); - test_invalid_value("grid-lanes-flow", "normal row-reverse"); - test_invalid_value("grid-lanes-flow", "reverse column"); - test_invalid_value("grid-lanes-flow", "auto, auto"); - </script> -</body> -</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-flow-valid.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-flow-valid.html @@ -1,60 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - <title>CSS Grid Lanes: parsing grid-lanes-flow with valid values</title> - <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> - <link rel="help" href="https://drafts.csswg.org/css-grid-3"> - <script src="/resources/testharness.js"></script> - <script src="/resources/testharnessreport.js"></script> - <script src="/css/support/parsing-testcommon.js"></script> - <script src="/css/support/shorthand-testcommon.js"></script> -</head> -<body> - <script> - test_valid_value("grid-lanes-flow", "column normal"); - test_valid_value("grid-lanes-flow", "column reverse"); - test_shorthand_value('grid-lanes-flow', 'column normal', { - 'grid-lanes-direction': 'column', - 'grid-lanes-fill': 'normal' - }); - test_shorthand_value('grid-lanes-flow', 'column reverse', { - 'grid-lanes-direction': 'column', - 'grid-lanes-fill': 'reverse' - }); - - test_valid_value("grid-lanes-flow", "row normal"); - test_valid_value("grid-lanes-flow", "row reverse"); - test_shorthand_value('grid-lanes-flow', 'row normal', { - 'grid-lanes-direction': 'row', - 'grid-lanes-fill': 'normal' - }); - test_shorthand_value('grid-lanes-flow', 'row reverse', { - 'grid-lanes-direction': 'row', - 'grid-lanes-fill': 'reverse' - }); - - test_valid_value("grid-lanes-flow", "column-reverse normal"); - test_valid_value("grid-lanes-flow", "column-reverse reverse"); - test_shorthand_value('grid-lanes-flow', 'column-reverse normal', { - 'grid-lanes-direction': 'column-reverse', - 'grid-lanes-fill': 'normal' - }); - test_shorthand_value('grid-lanes-flow', 'column-reverse reverse', { - 'grid-lanes-direction': 'column-reverse', - 'grid-lanes-fill': 'reverse' - }); - - test_valid_value("grid-lanes-flow", "row-reverse normal"); - test_valid_value("grid-lanes-flow", "row-reverse reverse"); - test_shorthand_value('grid-lanes-flow', 'row-reverse normal', { - 'grid-lanes-direction': 'row-reverse', - 'grid-lanes-fill': 'normal' - }); - test_shorthand_value('grid-lanes-flow', 'row-reverse reverse', { - 'grid-lanes-direction': 'row-reverse', - 'grid-lanes-fill': 'reverse' - }); - </script> -</body> -</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-shorthand-computed.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-shorthand-computed.html @@ -12,12 +12,12 @@ <body> <div id="target"></div> <script> - test_computed_value("grid-lanes", '"a b" 1fr 2fr row normal'); - test_computed_value("grid-lanes", "8px column normal"); - test_computed_value("grid-lanes", '"a b c" 10% 20% 30% row-reverse', '"a b c" 10% 20% 30% row-reverse normal'); - test_computed_value("grid-lanes", '"a b" 10px 20px column-reverse reverse'); - test_computed_value("grid-lanes", 'min-content row', 'min-content row normal'); - test_computed_value("grid-lanes", 'repeat(5, auto) reverse', 'repeat(5, auto) normal reverse'); + test_computed_value("grid-lanes", '"a b" 1fr 2fr row'); + test_computed_value("grid-lanes", "8px column"); + test_computed_value("grid-lanes", '"a b c" 10% 20% 30% row-reverse', '"a b c" 10% 20% 30% row-reverse'); + test_computed_value("grid-lanes", '"a b" 10px 20px column-reverse'); + test_computed_value("grid-lanes", 'min-content row', 'min-content row'); + test_computed_value("grid-lanes", 'repeat(5, auto)', 'repeat(5, auto) normal'); </script> </body> </html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-shorthand-serialization.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-shorthand-serialization.html @@ -9,7 +9,7 @@ </head> <body> <script> - function testValidGridLanes(gridTemplateRowsValue, gridTemplateColumnsValue, gridTemplateAreasValue, gridLanesDirectionValue, gridLanesFillValue, serializedGridLanesValue) { + function testValidGridLanes(gridTemplateRowsValue, gridTemplateColumnsValue, gridTemplateAreasValue, gridLanesDirectionValue, serializedGridLanesValue) { test(()=>{ const root = document.documentElement; const properties = [ @@ -17,7 +17,6 @@ ["gridTemplateColumns", gridTemplateColumnsValue], ["gridTemplateAreas", gridTemplateAreasValue], ["gridLanesDirection", gridLanesDirectionValue], - ["gridLanesFill", gridLanesFillValue], ]; for (const [property, value] of properties) { root.style[property] = ""; @@ -27,17 +26,16 @@ }, `grid-template-rows: ${gridTemplateRowsValue}, grid-template-columns: ${gridTemplateColumnsValue}, grid-template-areas: ${gridTemplateAreasValue}, - grid-lanes-direction: ${gridLanesDirectionValue}, - grid-lanes-fill: ${gridLanesFillValue} should be valid.`); + grid-lanes-direction: ${gridLanesDirectionValue} should be valid.`); } - testValidGridLanes("none", "none", "none", "column", "normal", "none column normal"); - testValidGridLanes("10px", "none", "none", "column", "reverse", "none column reverse"); - testValidGridLanes("10px 20px", "10% 20%", "none", "row", "normal", "10px 20px row normal"); - testValidGridLanes("none", "1fr 1fr 3fr", '"a a b"', 'column', 'reverse','"a a b" 1fr 1fr 3fr column reverse'); - testValidGridLanes("20% 40%", "none", '"b" "a"', 'row', 'normal', '"b a" 20% 40% row normal'); - testValidGridLanes("none", "fit-content(calc(0.5em + 10px))", "none", "column-reverse", "normal", "fit-content(calc(0.5em + 10px)) column-reverse normal"); - testValidGridLanes("10% 20% 40%", "none", '"a" "b" "c"', "row-reverse", "normal", '"a b c" 10% 20% 40% row-reverse normal'); + testValidGridLanes("none", "none", "none", "column", "none column"); + testValidGridLanes("10px", "none", "none", "column", "none column"); + testValidGridLanes("10px 20px", "10% 20%", "none", "row", "10px 20px row"); + testValidGridLanes("none", "1fr 1fr 3fr", '"a a b"', 'column', '"a a b" 1fr 1fr 3fr column'); + testValidGridLanes("20% 40%", "none", '"b" "a"', 'row', '"b a" 20% 40% row'); + testValidGridLanes("none", "fit-content(calc(0.5em + 10px))", "none", "column-reverse", "fit-content(calc(0.5em + 10px)) column-reverse"); + testValidGridLanes("10% 20% 40%", "none", '"a" "b" "c"', "row-reverse", '"a b c" 10% 20% 40% row-reverse'); </script> </body> </html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-shorthand-valid.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-shorthand-valid.html @@ -20,7 +20,7 @@ <div id=testDiv></div> <script> test(() => { - assert_equals(getComputedStyle(div).gridLanes, '"test" max-content row normal'); + assert_equals(getComputedStyle(div).gridLanes, '"test" max-content row'); }, 'grid-lanes followed by !important'); function test_valid_grid_lanes_value(property, value, serializedValue) { @@ -37,49 +37,43 @@ }, `grid-lanes: ${value} should be valid.`); } - test_valid_value("grid-lanes", '"a" calc(10px) column-reverse normal'); - test_valid_value("grid-lanes", 'minmax(calc(30% + 40vw), 10px)', 'minmax(calc(30% + 40vw), 10px) normal normal'); - test_valid_grid_lanes_value("grid-lanes", 'minmax(10px, 20px) row', 'minmax(10px, 20px) row normal'); - test_valid_grid_lanes_value("grid-lanes", '1px 2px', '1px 2px normal normal'); - test_valid_grid_lanes_value("grid-lanes", '"a" 10px reverse', '"a" 10px normal reverse'); - test_valid_grid_lanes_value("grid-lanes", '"a b" 10px 20px row normal'); - test_valid_grid_lanes_value("grid-lanes", '"a b c" 10% 20% 30% row-reverse', '"a b c" 10% 20% 30% row-reverse normal'); - test_valid_grid_lanes_value("grid-lanes", 'repeat(5, auto) row reverse'); + test_valid_value("grid-lanes", '"a" calc(10px) column-reverse'); + test_valid_value("grid-lanes", 'minmax(calc(30% + 40vw), 10px)', 'minmax(calc(30% + 40vw), 10px) normal'); + test_valid_grid_lanes_value("grid-lanes", 'minmax(10px, 20px) row', 'minmax(10px, 20px) row'); + test_valid_grid_lanes_value("grid-lanes", '1px 2px', '1px 2px normal'); + test_valid_grid_lanes_value("grid-lanes", '"a" 10px', '"a" 10px normal'); + test_valid_grid_lanes_value("grid-lanes", '"a b" 10px 20px row'); + test_valid_grid_lanes_value("grid-lanes", '"a b c" 10% 20% 30% row-reverse', '"a b c" 10% 20% 30% row-reverse'); + test_valid_grid_lanes_value("grid-lanes", 'repeat(5, auto) row'); test_shorthand_value('grid-lanes', 'none', { 'grid-template-columns': 'none', 'grid-template-areas': 'none', - 'grid-lanes-direction': 'normal', - 'grid-lanes-fill': 'normal' + 'grid-lanes-direction': 'normal' }); - test_shorthand_value('grid-lanes', '10px reverse', { + test_shorthand_value('grid-lanes', '10px', { 'grid-template-columns': '10px', 'grid-template-areas': 'none', - 'grid-lanes-direction': 'normal', - 'grid-lanes-fill': 'reverse' + 'grid-lanes-direction': 'normal' }); - test_shorthand_value('grid-lanes', '"b a" 20% 40% column normal', { + test_shorthand_value('grid-lanes', '"b a" 20% 40% column', { 'grid-template-columns': '20% 40%', 'grid-template-areas': '"b a"', - 'grid-lanes-direction': 'column', - 'grid-lanes-fill': 'normal' + 'grid-lanes-direction': 'column' }); test_shorthand_value('grid-lanes', '"b b a" 1fr 2fr 3fr row', { 'grid-template-rows': '1fr 2fr 3fr', 'grid-template-areas': '"b" "b" "a"', - 'grid-lanes-direction': 'row', - 'grid-lanes-fill': 'normal' + 'grid-lanes-direction': 'row' }); test_shorthand_value('grid-lanes', 'repeat(2, auto) row-reverse', { 'grid-template-rows': 'repeat(2, auto)', 'grid-template-areas': 'none', - 'grid-lanes-direction': 'row-reverse', - 'grid-lanes-fill': 'normal' + 'grid-lanes-direction': 'row-reverse' }); test_shorthand_value('grid-lanes', '"b a" 20% 40% normal', { 'grid-template-columns': '20% 40%', 'grid-template-areas': '"b a"', - 'grid-lanes-direction': 'normal', - 'grid-lanes-fill': 'normal' + 'grid-lanes-direction': 'normal' }); </script> </body>