commit 3d4a3d0a5ca6146af5b9a48c503c8a01ca154af1
parent 92cd88ec531e2da036ebd512727fc52bfcab72a0
Author: Alison Maher <almaher@microsoft.com>
Date: Tue, 25 Nov 2025 21:16:43 +0000
Bug 2001778 [wpt PR 56204] - [Masonry] Update masonry-flow shorthand to grid-lanes-flow, a=testonly
Automatic update from web-platform-tests
[Masonry] Update masonry-flow shorthand to grid-lanes-flow
Match the shorthand name to the new display name.
Bug: 343257585
Change-Id: I54a1327cefaed719102e950c28d7b7bae5f381f0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7181827
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Commit-Queue: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1548246}
--
wpt-commits: f307e3ef9188cee840781fe4d9d4f675e7aff1d2
wpt-pr: 56204
Diffstat:
7 files changed, 83 insertions(+), 83 deletions(-)
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,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masonry: masonry-flow getComputedStyle()</title>
+ <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>
@@ -12,17 +12,17 @@
<body>
<div id="target"></div>
<script>
- test_computed_value("masonry-flow", "column normal");
- test_computed_value("masonry-flow", "column reverse");
+ test_computed_value("grid-lanes-flow", "column normal");
+ test_computed_value("grid-lanes-flow", "column reverse");
- test_computed_value("masonry-flow", "row normal");
- test_computed_value("masonry-flow", "row reverse");
+ test_computed_value("grid-lanes-flow", "row normal");
+ test_computed_value("grid-lanes-flow", "row reverse");
- test_computed_value("masonry-flow", "column-reverse normal");
- test_computed_value("masonry-flow", "column-reverse reverse");
+ test_computed_value("grid-lanes-flow", "column-reverse normal");
+ test_computed_value("grid-lanes-flow", "column-reverse reverse");
- test_computed_value("masonry-flow", "row-reverse normal");
- test_computed_value("masonry-flow", "row-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
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>CSS Masonry: masonry-flow parsing</title>
+ <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>
@@ -11,13 +11,13 @@
</head>
<body>
<script>
- test_invalid_value("masonry-flow", "nowrap row nowrap");
- test_invalid_value("masonry-flow", "column wrap column");
- test_invalid_value("masonry-flow", "reverse-column column");
- test_invalid_value("masonry-flow", "reverse-row, row");
- test_invalid_value("masonry-flow", "normal row-reverse");
- test_invalid_value("masonry-flow", "reverse column");
- test_invalid_value("masonry-flow", "auto, auto");
+ 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
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>CSS Masonry: parsing masonry-flow with valid values</title>
+ <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>
@@ -12,46 +12,46 @@
</head>
<body>
<script>
- test_valid_value("masonry-flow", "column normal");
- test_valid_value("masonry-flow", "column reverse");
- test_shorthand_value('masonry-flow', 'column normal', {
+ test_valid_value("grid-lanes-flow", "column normal");
+ test_valid_value("grid-lanes-flow", "column reverse");
+ test_shorthand_value('grid-lanes-flow', 'column normal', {
'masonry-direction': 'column',
'masonry-fill': 'normal'
});
- test_shorthand_value('masonry-flow', 'column reverse', {
+ test_shorthand_value('grid-lanes-flow', 'column reverse', {
'masonry-direction': 'column',
'masonry-fill': 'reverse'
});
- test_valid_value("masonry-flow", "row normal");
- test_valid_value("masonry-flow", "row reverse");
- test_shorthand_value('masonry-flow', 'row normal', {
+ test_valid_value("grid-lanes-flow", "row normal");
+ test_valid_value("grid-lanes-flow", "row reverse");
+ test_shorthand_value('grid-lanes-flow', 'row normal', {
'masonry-direction': 'row',
'masonry-fill': 'normal'
});
- test_shorthand_value('masonry-flow', 'row reverse', {
+ test_shorthand_value('grid-lanes-flow', 'row reverse', {
'masonry-direction': 'row',
'masonry-fill': 'reverse'
});
- test_valid_value("masonry-flow", "column-reverse normal");
- test_valid_value("masonry-flow", "column-reverse reverse");
- test_shorthand_value('masonry-flow', 'column-reverse normal', {
+ 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', {
'masonry-direction': 'column-reverse',
'masonry-fill': 'normal'
});
- test_shorthand_value('masonry-flow', 'column-reverse reverse', {
+ test_shorthand_value('grid-lanes-flow', 'column-reverse reverse', {
'masonry-direction': 'column-reverse',
'masonry-fill': 'reverse'
});
- test_valid_value("masonry-flow", "row-reverse normal");
- test_valid_value("masonry-flow", "row-reverse reverse");
- test_shorthand_value('masonry-flow', 'row-reverse normal', {
+ 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', {
'masonry-direction': 'row-reverse',
'masonry-fill': 'normal'
});
- test_shorthand_value('masonry-flow', 'row-reverse reverse', {
+ test_shorthand_value('grid-lanes-flow', 'row-reverse reverse', {
'masonry-direction': 'row-reverse',
'masonry-fill': 'reverse'
});
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
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masonry: masonry getComputedStyle()</title>
+ <title>CSS Grid Lanes: grid-lanes getComputedStyle()</title>
<link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-3">
<script src="/resources/testharness.js"></script>
@@ -12,12 +12,12 @@
<body>
<div id="target"></div>
<script>
- test_computed_value("masonry", '"a b" 1fr 2fr row normal');
- test_computed_value("masonry", "8px column normal");
- test_computed_value("masonry", '"a b c" 10% 20% 30% row-reverse', '"a b c" 10% 20% 30% row-reverse normal');
- test_computed_value("masonry", '"a b" 10px 20px column-reverse reverse');
- test_computed_value("masonry", 'min-content row', 'min-content row normal');
- test_computed_value("masonry", 'repeat(5, auto) reverse', 'repeat(5, auto) column reverse');
+ 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) column reverse');
</script>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-shorthand-invalid.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/parsing/grid-lanes-shorthand-invalid.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>CSS Masonry: parsing masonry with invalid values</title>
+ <title>CSS Grid Lanes: parsing grid-lanes with invalid values</title>
<link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-3">
<script src="/resources/testharness.js"></script>
@@ -11,18 +11,18 @@
</head>
<body>
<script>
- test_invalid_value("masonry", '"a a" 1fr row normal extra');
- test_invalid_value("masonry", '"a a a" "b b b" 1fr 1fr 1fr column normal');
- test_invalid_value("masonry", 'row normal "a a" 1fr');
- test_invalid_value("masonry", '"a a" 1fr invalid normal');
- test_invalid_value("masonry", '10px reverse invalid');
- test_invalid_value("masonry", 'fit-content(-10px)');
- test_invalid_value("masonry", '[] normal');
- test_invalid_value("masonry", '[] repeat(auto-fill, 10px) "a" row-reverse');
- test_invalid_value("masonry", '[one] 10px [two] [three]');
- test_invalid_value("masonry", '[auto] 1px');
- test_invalid_value("masonry", '20% 40% column, reverse');
- test_invalid_value("masonry", 'none auto column-reverse reverse');
+ test_invalid_value("grid-lanes", '"a a" 1fr row normal extra');
+ test_invalid_value("grid-lanes", '"a a a" "b b b" 1fr 1fr 1fr column normal');
+ test_invalid_value("grid-lanes", 'row normal "a a" 1fr');
+ test_invalid_value("grid-lanes", '"a a" 1fr invalid normal');
+ test_invalid_value("grid-lanes", '10px reverse invalid');
+ test_invalid_value("grid-lanes", 'fit-content(-10px)');
+ test_invalid_value("grid-lanes", '[] normal');
+ test_invalid_value("grid-lanes", '[] repeat(auto-fill, 10px) "a" row-reverse');
+ test_invalid_value("grid-lanes", '[one] 10px [two] [three]');
+ test_invalid_value("grid-lanes", '[auto] 1px');
+ test_invalid_value("grid-lanes", '20% 40% column, reverse');
+ test_invalid_value("grid-lanes", 'none auto column-reverse reverse');
</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
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masonry: masonry serializes properly when longhands are set</title>
+ <title>CSS Grid Lanes: grid-lanes serializes properly when longhands are set</title>
<link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-3">
<script src="/resources/testharness.js"></script>
@@ -9,7 +9,7 @@
</head>
<body>
<script>
- function testValidMasonry(gridTemplateRowsValue, gridTemplateColumnsValue, gridTemplateAreasValue, masonryDirectionValue, masonryFillValue, serializedMasonryValue) {
+ function testValidGridLanes(gridTemplateRowsValue, gridTemplateColumnsValue, gridTemplateAreasValue, masonryDirectionValue, masonryFillValue, serializedGridLanesValue) {
test(()=>{
const root = document.documentElement;
const properties = [
@@ -23,7 +23,7 @@
root.style[property] = "";
root.style[property] = value;
}
- assert_equals(root.style.masonry, serializedMasonryValue);
+ assert_equals(root.style.gridLanes, serializedGridLanesValue);
}, `grid-template-rows: ${gridTemplateRowsValue},
grid-template-columns: ${gridTemplateColumnsValue},
grid-template-areas: ${gridTemplateAreasValue},
@@ -31,13 +31,13 @@
masonry-fill: ${masonryFillValue} should be valid.`);
}
- testValidMasonry("none", "none", "none", "column", "normal", "none column normal");
- testValidMasonry("10px", "none", "none", "column", "reverse", "none column reverse");
- testValidMasonry("10px 20px", "10% 20%", "none", "row", "normal", "10px 20px row normal");
- testValidMasonry("none", "1fr 1fr 3fr", '"a a b"', 'column', 'reverse','"a a b" 1fr 1fr 3fr column reverse');
- testValidMasonry("20% 40%", "none", '"b" "a"', 'row', 'normal', '"b a" 20% 40% row normal');
- testValidMasonry("none", "fit-content(calc(0.5em + 10px))", "none", "column-reverse", "normal", "fit-content(calc(0.5em + 10px)) column-reverse normal");
- testValidMasonry("10% 20% 40%", "none", '"a" "b" "c"', "row-reverse", "normal", '"a b c" 10% 20% 40% row-reverse normal');
+ 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');
</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
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>CSS Masonry: parsing masonry with valid values</title>
+ <title>CSS Grid Lanes: parsing grid-lanes with valid values</title>
<link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-3">
<script src="/resources/testharness.js"></script>
@@ -12,7 +12,7 @@
</head>
<style>
#div {
- masonry: "test" max-content row !important;
+ grid-lanes: "test" max-content row !important;
}
</style>
<body>
@@ -20,10 +20,10 @@
<div id=testDiv></div>
<script>
test(() => {
- assert_equals(getComputedStyle(div).masonry, '"test" max-content row normal');
- }, 'masonry followed by !important');
+ assert_equals(getComputedStyle(div).gridLanes, '"test" max-content row normal');
+ }, 'grid-lanes followed by !important');
- function test_valid_masonry_value(property, value, serializedValue) {
+ function test_valid_grid_lanes_value(property, value, serializedValue) {
if (arguments.length < 3)
serializedValue = value;
var stringifiedValue = JSON.stringify(value);
@@ -34,42 +34,42 @@
var readValue = getComputedStyle(testDiv).getPropertyValue(property);
assert_not_equals(readValue, "", "property should be set");
assert_equals(readValue, serializedValue, "serialization should be canonical");
- }, `masonry: ${value} should be valid.`);
+ }, `grid-lanes: ${value} should be valid.`);
}
- test_valid_value("masonry", '"a" calc(10px) column-reverse normal');
- test_valid_value("masonry", 'minmax(calc(30% + 40vw), 10px)', 'minmax(calc(30% + 40vw), 10px) column normal');
- test_valid_masonry_value("masonry", 'minmax(10px, 20px) row', 'minmax(10px, 20px) row normal');
- test_valid_masonry_value("masonry", '1px 2px', '1px 2px column normal');
- test_valid_masonry_value("masonry", '"a" 10px reverse', '"a" 10px column reverse');
- test_valid_masonry_value("masonry", '"a b" 10px 20px row normal');
- test_valid_masonry_value("masonry", '"a b c" 10% 20% 30% row-reverse', '"a b c" 10% 20% 30% row-reverse normal');
- test_valid_masonry_value("masonry", 'repeat(5, auto) row reverse');
- test_shorthand_value('masonry', 'none', {
+ 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) column 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 column normal');
+ test_valid_grid_lanes_value("grid-lanes", '"a" 10px reverse', '"a" 10px column 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_shorthand_value('grid-lanes', 'none', {
'grid-template-columns': 'none',
'grid-template-areas': 'none',
'masonry-direction': 'column',
'masonry-fill': 'normal'
});
- test_shorthand_value('masonry', '10px reverse', {
+ test_shorthand_value('grid-lanes', '10px reverse', {
'grid-template-columns': '10px',
'grid-template-areas': 'none',
'masonry-direction': 'column',
'masonry-fill': 'reverse'
});
- test_shorthand_value('masonry', '"b a" 20% 40% column normal', {
+ test_shorthand_value('grid-lanes', '"b a" 20% 40% column normal', {
'grid-template-columns': '20% 40%',
'grid-template-areas': '"b a"',
'masonry-direction': 'column',
'masonry-fill': 'normal'
});
- test_shorthand_value('masonry', '"b b a" 1fr 2fr 3fr row', {
+ test_shorthand_value('grid-lanes', '"b b a" 1fr 2fr 3fr row', {
'grid-template-rows': '1fr 2fr 3fr',
'grid-template-areas': '"b" "b" "a"',
'masonry-direction': 'row',
'masonry-fill': 'normal'
});
- test_shorthand_value('masonry', 'repeat(2, auto) row-reverse', {
+ test_shorthand_value('grid-lanes', 'repeat(2, auto) row-reverse', {
'grid-template-rows': 'repeat(2, auto)',
'grid-template-areas': 'none',
'masonry-direction': 'row-reverse',
