Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 15 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/grid-lanes/tentative/parsing/grid-lanes-shorthand-serialization.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Lanes: grid-lanes serializes properly when longhands are set</title>
<link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="testDiv"></div>
<script>
function testValidGridLanes(gridTemplateRowsValue, gridTemplateColumnsValue, gridTemplateAreasValue, gridLanesDirectionValue, serializedGridLanesValue) {
test(()=>{
const root = document.documentElement;
const properties = [
["gridTemplateRows", gridTemplateRowsValue],
["gridTemplateColumns", gridTemplateColumnsValue],
["gridTemplateAreas", gridTemplateAreasValue],
["gridLanesDirection", gridLanesDirectionValue],
];
for (const [property, value] of properties) {
root.style[property] = "";
root.style[property] = value;
}
assert_equals(root.style.gridLanes, serializedGridLanesValue);
}, `grid-template-rows: ${gridTemplateRowsValue},
grid-template-columns: ${gridTemplateColumnsValue},
grid-template-areas: ${gridTemplateAreasValue},
grid-lanes-direction: ${gridLanesDirectionValue} should be valid.`);
}
function test_grid_lanes_serialization(description, setupCallback, expectedValue) {
test(() => {
const testDiv = document.getElementById('testDiv');
testDiv.style.gridLanes = "";
testDiv.style.gridTemplateRows = "";
testDiv.style.gridTemplateColumns = "";
testDiv.style.gridTemplateAreas = "";
testDiv.style.gridLanesDirection = "";
setupCallback(testDiv);
const computedValue = getComputedStyle(testDiv).gridLanes;
assert_equals(computedValue, expectedValue, `grid-lanes should serialize as: ${expectedValue}`);
}, description);
}
testValidGridLanes("none", "none", "none", "column", "column");
testValidGridLanes("10px", "none", "none", "column", "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 track-reverse fill-reverse", "fit-content(calc(0.5em + 10px)) column track-reverse fill-reverse");
testValidGridLanes("10% 20% 40%", "none", '"a" "b" "c"', "row fill-reverse track-reverse", '"a b c" 10% 20% 40% row fill-reverse track-reverse');
testValidGridLanes("repeat(2, 1fr)", "10px 20px", '"a b"', "normal", '"a b" 10px 20px normal');
test_grid_lanes_serialization(
"grid-lanes: normal 100px, then grid-template-rows: 200px",
(element) => {
element.style.gridLanes = "normal 100px";
element.style.gridTemplateRows = "200px";
},
"100px normal"
);
test_grid_lanes_serialization(
"grid-lanes: normal 100px, then grid-template-columns: 200px",
(element) => {
element.style.gridLanes = "normal 100px";
element.style.gridTemplateColumns = "200px";
},
"200px normal"
);
test_grid_lanes_serialization(
"grid-lanes: row 100px, then grid-lanes-direction: normal",
(element) => {
element.style.gridLanes = "row 100px";
element.style.gridLanesDirection = "normal";
},
"normal"
);
test_grid_lanes_serialization(
"grid-lanes: column 100px, then grid-lanes-direction: normal",
(element) => {
element.style.gridLanes = "column 100px";
element.style.gridLanesDirection = "normal";
},
"100px normal"
);
test_grid_lanes_serialization(
"grid-lanes-direction: column, then grid-lanes: row 100px 200px",
(element) => {
element.style.gridLanesDirection = "column";
element.style.gridLanes = "row 100px 200px";
},
"100px 200px row"
);
test_grid_lanes_serialization(
'grid-lanes: "a b" 100px column, then grid-template-areas: "c d"',
(element) => {
element.style.gridLanes = '"a b" 100px column';
element.style.gridTemplateAreas = '"c d"';
},
'"c d" 100px column'
);
test_grid_lanes_serialization(
"grid-template-columns: 10px, grid-lanes-direction: column, then grid-lanes: row 100px",
(element) => {
element.style.gridTemplateColumns = "10px";
element.style.gridLanesDirection = "column";
element.style.gridLanes = "row 100px";
},
"100px row"
);
</script>
</body>
</html>