grid-shorthand-001.html (1454B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: 'grid' shorthand does not reset gutter properties</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-shorthand"> 6 <meta name="flags" content="dom"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 #grid { 11 display: grid; 12 grid-column-gap: 10px; 13 grid-row-gap: 20px; 14 } 15 </style> 16 <div id="grid"></div> 17 <script> 18 var grid = document.getElementById("grid"); 19 20 test( 21 () => { 22 assert_equals(window.getComputedStyle(grid)["grid-template-columns"], "none"); 23 assert_equals(window.getComputedStyle(grid)["grid-template-rows"], "none"); 24 assert_equals(window.getComputedStyle(grid)["grid-column-gap"], "10px"); 25 assert_equals(window.getComputedStyle(grid)["grid-row-gap"], "20px"); 26 }, "Check gutter properties initial values"); 27 28 grid.style.grid = "100px / 200px"; 29 30 test( 31 () => { 32 assert_equals(window.getComputedStyle(grid)["grid-template-columns"], "200px"); 33 assert_equals(window.getComputedStyle(grid)["grid-template-rows"], "100px"); 34 assert_equals(window.getComputedStyle(grid)["grid-column-gap"], "10px"); 35 assert_equals(window.getComputedStyle(grid)["grid-row-gap"], "20px"); 36 }, "Check gutter properties after setting 'grid' shorthand"); 37 </script>