grid-item-dynamic-min-contribution-001.html (1202B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Grid Layout Test: dynamic minimum contribution</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-contribution"> 6 <meta name="assert" content="This test checks that grid items are sized correctly when their minimum contribution is dynamically changed with JavaScript." /> 7 <style> 8 #grid { 9 display: grid; 10 height: 100px; 11 width: 100px; 12 } 13 </style> 14 <div id="log"></div> 15 <div id="grid"> 16 <div id="item"></div> 17 </div> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script> 21 const tests = [ 22 ["auto", "100px"], 23 ["0%", "100px"], 24 ["100%", "100px"], 25 ["200%", "200px"], 26 ["300%", "300px"], 27 ["400px", "400px"], 28 ["500px", "500px"], 29 ]; 30 const item = document.getElementById("item"); 31 for (let [minSize, expectedSize] of tests) { 32 test(() => { 33 item.style.minHeight = item.style.minWidth = minSize; 34 let cs = getComputedStyle(item); 35 assert_equals(cs.height, expectedSize, "height"); 36 assert_equals(cs.width, expectedSize, "width"); 37 }, `Minimum size: ${minSize}`); 38 } 39 </script>