masonry-shorthand-valid.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 34 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-masonry/tentative/parsing/masonry-shorthand-valid.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Masonry: parsing masonry 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>

  <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 {

    masonry: "test" max-content row !important;

</style>

<body>

  <div id=div></div>

  <div id=testDiv></div>

  <script>

    test(() => {

      assert_equals(getComputedStyle(div).masonry, '"test" max-content row normal');

    }, 'masonry followed by !important');

    function test_valid_masonry_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");

      }, `masonry: ${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', {

      'grid-template-columns': 'none',

      'grid-template-areas': 'none',

      'masonry-direction': 'column',

      'masonry-fill': 'normal'

});

    test_shorthand_value('masonry', '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', {

      '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', {

      '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', {

      'grid-template-rows': 'repeat(2, auto)',

      'grid-template-areas': 'none',

      'masonry-direction': 'row-reverse',

      'masonry-fill': 'normal'

});

  </script>

</body>

</html>