<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Masonry Test: parsing properties and shortands</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns">
<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>