Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 57 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/grid-lanes/tentative/parsing/grid-lanes-shorthand-valid.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Lanes: parsing grid-lanes with valid values</title>
<link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
<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>
<style>
#div {
grid-lanes: "test" max-content row !important;
}
</style>
<body>
<div id=div></div>
<div id=testDiv></div>
<script>
test(() => {
assert_equals(getComputedStyle(div).gridLanes, '"test" max-content row');
}, 'grid-lanes followed by !important');
function test_valid_grid_lanes_value(property, value, serializedValue) {
if (arguments.length < 3)
serializedValue = value;
var stringifiedValue = JSON.stringify(value);
test(()=>{
var testDiv = document.getElementById('testDiv');
testDiv.style[property] = "";
testDiv.style[property] = value;
var readValue = getComputedStyle(testDiv).getPropertyValue(property);
assert_not_equals(readValue, "", "property should be set");
assert_equals(readValue, serializedValue, "serialization should be canonical");
}, `grid-lanes: ${value} should be valid.`);
}
test_valid_grid_lanes_value("grid-lanes", 'column fill-reverse "a" calc(10px)', '"a" 10px column fill-reverse');
test_valid_grid_lanes_value("grid-lanes", 'minmax(calc(30% + 5px), 200px)', 'minmax(calc(30% + 5px), 200px) column');
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 column');
test_valid_grid_lanes_value("grid-lanes", '"a" 10px', '"a" 10px column');
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 track-reverse', '"a b c" 10% 20% 30% row track-reverse');
test_valid_grid_lanes_value("grid-lanes", 'repeat(5, auto) row');
test_valid_grid_lanes_value("grid-lanes", 'row 10px 20px "a b"', '"a b" 10px 20px row');
test_valid_grid_lanes_value("grid-lanes", '10px 20px "a b"', '"a b" 10px 20px column');
test_valid_grid_lanes_value("grid-lanes", 'column fill-reverse repeat(4, 10px)', 'repeat(4, 10px) column fill-reverse');
test_shorthand_value('grid-lanes', 'none', {
'grid-template-columns': 'none',
'grid-template-rows': 'none',
'grid-template-areas': 'none',
'grid-lanes-direction': 'column'
});
test_shorthand_value('grid-lanes', '10px', {
'grid-template-columns': '10px',
'grid-template-rows': 'none',
'grid-template-areas': 'none',
'grid-lanes-direction': 'column'
});
test_shorthand_value('grid-lanes', '"b a" 20% 40% column', {
'grid-template-columns': '20% 40%',
'grid-template-rows': 'none',
'grid-template-areas': '"b a"',
'grid-lanes-direction': 'column'
});
test_shorthand_value('grid-lanes', '"b b a" 1fr 2fr 3fr row', {
'grid-template-columns': 'none',
'grid-template-rows': '1fr 2fr 3fr',
'grid-template-areas': '"b" "b" "a"',
'grid-lanes-direction': 'row'
});
test_shorthand_value('grid-lanes', 'repeat(2, auto) row track-reverse fill-reverse', {
'grid-template-columns': 'none',
'grid-template-rows': 'repeat(2, auto)',
'grid-template-areas': 'none',
'grid-lanes-direction': 'row track-reverse fill-reverse'
});
test_shorthand_value('grid-lanes', '"b a" 20% 40% normal', {
'grid-template-columns': '20% 40%',
'grid-template-rows': 'none',
'grid-template-areas': '"b a"',
'grid-lanes-direction': 'normal'
});
test_shorthand_value('grid-lanes', 'row fill-reverse 20% 40% "b a"', {
'grid-template-columns': 'none',
'grid-template-rows': '20% 40%',
'grid-template-areas': '"b" "a"',
'grid-lanes-direction': 'row fill-reverse'
});
test_shorthand_value('grid-lanes', 'column track-reverse repeat(5, auto)', {
'grid-template-columns': 'repeat(5, auto)',
'grid-template-rows': 'none',
'grid-template-areas': 'none',
'grid-lanes-direction': 'column track-reverse'
});
test_shorthand_value('grid-lanes', '"a b c" row track-reverse 1fr 2fr 3fr', {
'grid-template-columns': 'none',
'grid-template-rows': '1fr 2fr 3fr',
'grid-template-areas': '"a" "b" "c"',
'grid-lanes-direction': 'row track-reverse'
});
</script>
</body>
</html>