grid-item-min-auto-size-001.html (1745B)
1 <!DOCTYPE html> 2 <title>CSS Grid Test: computed style for auto minimum size</title> 3 <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org" /> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 .grid { display: grid } 9 .none { display: none } 10 .min-wh { 11 min-width: auto; 12 min-height: auto; 13 } 14 .contents { display: contents } 15 </style> 16 <div class="grid"> 17 <div class="min-wh"></div> 18 </div> 19 <div class="none"> 20 <div class="grid"> 21 <div class="min-wh"></div> 22 </div> 23 </div> 24 <div class="grid"> 25 <div class="contents"> 26 <div class="min-wh"></div> 27 </div> 28 </div> 29 <div class="grid"> 30 <div class="min-wh none"></div> 31 </div> 32 <script> 33 const tests = [ 34 { description: "Computed min-width/min-height of specified auto for grid item.", computed: "auto" }, 35 { description: "Computed min-width/min-height of specified auto inside display:none which would otherwise have been a grid item.", computed: "0px" }, 36 { description: "Computed min-width/min-height of specified auto for grid item inside display:contents.", computed: "auto" }, 37 { description: "Computed min-width/min-height of specified auto with display:none which would otherwise have been a grid item.", computed: "0px" } 38 ]; 39 40 const testElements = document.querySelectorAll(".min-wh"); 41 let testNo = 0; 42 for (let testElement of testElements) { 43 test(() => { 44 assert_equals(getComputedStyle(testElement).minWidth, tests[testNo].computed); 45 assert_equals(getComputedStyle(testElement).minHeight, tests[testNo].computed); 46 }, tests[testNo].description); 47 testNo++; 48 } 49 </script>