getComputedStyle-resolved-min-size-auto.html (4157B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSSOM: resolved value of min-width and min-height:auto should be 0 except in certain defined cases</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto"> 6 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11716"> 8 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 9 <link rel="author" title="Mozilla" href="https://mozilla.org"> 10 <script src=/resources/testharness.js></script> 11 <script src=/resources/testharnessreport.js></script> 12 <!-- OVERVIEW: 13 * Elements to be tested here must include an 'id'. 14 * We use a "preservesAuto" attribute to tag the elements 15 are expected to preserve "auto" in the resolved value of 16 min-width and min-height. 17 --> 18 19 <!-- The test content is in a scrollable div for cosmetic reasons, so that it 20 can be inspected but also doesn't push the testharness output off the 21 bottom of the screen: --> 22 <div style="overflow: scroll; width: 300px; height: 200px"> 23 <div id="block-box"></div> 24 <div id="inline-box"></div> 25 26 <!-- Elements with a nondefault aspect-ratio preserve 'auto': --> 27 <div id="block-with-valid-aspect-ratio" style="aspect-ratio: 1/1" 28 preservesAuto></div> 29 <div id="block-with-degenerate-aspect-ratio" style="aspect-ratio: 0/1" 30 preservesAuto></div> 31 <div id="block-with-two-part-valid-aspect-ratio" 32 style="aspect-ratio: auto 1/1" preservesAuto></div> 33 <div id="block-with-two-part-degenerate-aspect-ratio" 34 style="aspect-ratio: auto 0/1" preservesAuto></div> 35 36 <!-- Note: aspect-ratio doesn't apply to inline boxes, but we treat it as 37 toggling getComputedStyle to return the true 'min-width:auto' value 38 regardless. --> 39 <span id="inline-with-valid-aspect-ratio" style="aspect-ratio: 1/1" 40 preservesAuto></span> 41 <span id="inline-with-degenerate-aspect-ratio" style="aspect-ratio: 0/1" 42 preservesAuto></span> 43 44 <!-- flex and grid items should preserve 'auto': --> 45 <div style="display: flex"> 46 <div id="flex-item-row" preservesAuto></div> 47 </div> 48 <div style="display: flex; flex-direction: column;"> 49 <div id="flex-item-column" preservesAuto></div> 50 </div> 51 <div style="display: grid"> 52 <div id="grid-item" preservesAuto></div> 53 </div> 54 55 <!-- Per https://drafts.csswg.org/css-sizing/#valdef-width-auto 56 the min-width/min-height:auto value "resolves to zero when no box is 57 generated" (regardless of aspect-ratio & flex/grid-item special cases) 58 --> 59 <div id="display-none" style="display: none"></div> 60 <div id="display-none-valid-aspect-ratio" 61 style="display: none; aspect-ratio:2/1"></div> 62 <div style="display:none"> 63 <div id="display-none-subtree-valid-aspect-ratio" 64 style="aspect-ratio:2/1"></div> 65 </div> 66 <div style="display: none"> 67 <div style="display: flex"> 68 <div id="display-none-subtree-flex-item"></div> 69 </div> 70 </div> 71 <div style="display: none"> 72 <div style="display: grid"> 73 <div id="display-none-subtree-grid-item"></div> 74 </div> 75 </div> 76 </div> 77 78 <script> 79 for (const e of document.querySelectorAll("[id]")) { 80 test(function() { 81 const cs = getComputedStyle(e); 82 const doesPreserveAuto = e.hasAttribute("preservesAuto"); 83 const expectedVal = doesPreserveAuto ? "auto" : "0px"; 84 const expectationMessage = doesPreserveAuto ? 85 "should round-trip through getComputedStyle" : 86 `should be converted to ${expectedVal} in getComputedStyle`; 87 88 for (const prop of ["min-width", "min-height"]) { 89 assert_equals(cs[prop], expectedVal, `${e.id}: '${prop}:auto' ${expectationMessage} (as initial value)`); 90 e.style.setProperty(prop, "auto"); 91 assert_equals(cs[prop], expectedVal, `${e.id}: '${prop}:auto' ${expectationMessage} (as specified value)`); 92 e.style.removeProperty(prop); 93 } 94 }, `Resolved value of min-width & min-height 'auto' keyword behaves as expected on element with id="${e.id}"`); 95 } 96 </script>