Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/masonry/tentative/parsing/masonry-parsing.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Masonry Test: parsing properties and shortands</title>
<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>
function masonry_test_template_prop(name) {
test_valid_value(name, 'masonry');
test_invalid_value(name, 'masonry []');
test_invalid_value(name, 'masonry [foo] 40px');
test_invalid_value(name, 'masonry 40px');
test_invalid_value(name, '[foo] masonry');
test_invalid_value(name, '0px masonry');
test_invalid_value(name, 'masonry masonry');
test_invalid_value(name, 'subgrid masonry');
test_invalid_value(name, 'masonry subgrid');
test_invalid_value(name, 'masonry repeat(1, [])');
test_invalid_value(name, 'masonry repeat(auto-fill, [])');
test_invalid_value(name, 'masonry / none');
}
masonry_test_template_prop("grid-template-columns");
masonry_test_template_prop("grid-template-rows");
test_shorthand_value("grid-template", 'masonry / masonry', {
'grid-template-rows': 'masonry',
'grid-template-columns': 'masonry',
'grid-template-areas': 'none'
});
test_shorthand_value("grid-template", 'masonry / subgrid [foo]', {
'grid-template-rows': 'masonry',
'grid-template-columns': 'subgrid [foo]',
'grid-template-areas': 'none'
});
test_shorthand_value("grid-template", '10px / masonry', {
'grid-template-rows': '10px',
'grid-template-columns': 'masonry',
'grid-template-areas': 'none'
});
test_shorthand_value("grid", 'masonry / masonry', {
'grid-template-rows': 'masonry',
'grid-template-columns': 'masonry',
'grid-template-areas': 'none',
'grid-auto-rows': 'auto',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'row'
});
test_shorthand_value("grid", 'masonry / subgrid [foo]', {
'grid-template-rows': 'masonry',
'grid-template-columns': 'subgrid [foo]',
'grid-template-areas': 'none',
'grid-auto-rows': 'auto',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'row'
});
test_shorthand_value("grid", '10px / masonry', {
'grid-template-rows': '10px',
'grid-template-columns': 'masonry',
'grid-template-areas': 'none',
'grid-auto-rows': 'auto',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'row'
});
test_valid_value("masonry-auto-flow", 'pack');
test_valid_value("masonry-auto-flow", 'pack ordered', 'ordered');
test_valid_value("masonry-auto-flow", 'ordered next', 'next ordered');
test_valid_value("masonry-auto-flow", 'next definite-first', 'next');
test_valid_value("masonry-auto-flow", 'definite-first pack', 'pack');
test_invalid_value("masonry-auto-flow", 'auto');
test_invalid_value("masonry-auto-flow", 'none');
test_invalid_value("masonry-auto-flow", '10px');
test_invalid_value("masonry-auto-flow", 'row');
test_invalid_value("masonry-auto-flow", 'dense');
</script>
</body>
</html>