stretch-min-inline-size-001.html (8153B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values"> 3 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <meta name="assert" 8 content="min-inline-size:stretch (setting 'min-width' in this case) resolves and clamps as expected (producing similar results as if we had specified the keyword for the inline-size property)"> 9 <style> 10 .cb { 11 inline-size: 50px; 12 block-size: 40px; 13 14 /* This margin & border are purely cosmetic and don't impact the sizing 15 * calculations in this test: */ 16 margin: 5px; 17 border: 2px solid black; 18 19 /* This padding only comes into play for the subtests with absolutely 20 * positioned children (where our padding-box forms the containing block 21 * for the abspos child). */ 22 padding-inline: 5px; 23 padding-block: 3px; 24 25 /* We make each containing block an inline-level box, so we can display 26 * subtests in multiple rows, for easier visualization: */ 27 display: inline-block; 28 vertical-align: top; 29 } 30 31 .test { 32 /* We have 2+3 = 5px of margin in the inline axis. This means the stretched 33 * children should all have a border-box size that's 5px less than the 34 * containing block's content-box size, i.e. 50 - 5 = 45px. */ 35 margin-inline-start: 2px; 36 margin-inline-end: 3px; 37 38 /* We also have some border/padding that UAs will need to account for 39 * when computing the stretched children's content-box sizes; but these 40 * don't reduce our `data-expected-width` expectations, since those 41 * correspond to the border-box size. */ 42 border: 3px solid blue; 43 padding: 2px; 44 45 /* We expect "min-inline-size:stretch" to cause the used value of 46 * "inline-size" to be clamped to the resolved "stretch" size. */ 47 min-inline-size: stretch; 48 inline-size: 0; 49 block-size: 20px; 50 background: fuchsia; 51 } 52 </style> 53 <script> 54 function runTests() { 55 checkLayout('[data-expected-width]'); 56 57 // Add box-sizing:border-box (which shouldn't impact the actual resolved 58 // box sizes that 'stretch' produces), and retest: 59 for (let elem of document.querySelectorAll(".test")) { 60 elem.style.boxSizing = "border-box"; 61 } 62 checkLayout('[data-expected-width]'); 63 } 64 </script> 65 <body onload="runTests()"> 66 <!-- 'stretch' on a block box, replaced element, form controls, float: --> 67 <div class="cb"> 68 <div class="test" data-expected-width="45"></div> 69 </div> 70 <div class="cb"> 71 <canvas class="test" data-expected-width="45"></canvas> 72 </div> 73 <div class="cb"> 74 <input class="test" data-expected-width="45"> 75 </div> 76 <div class="cb"> 77 <textarea class="test" data-expected-width="45"></textarea> 78 </div> 79 <div class="cb"> 80 <button class="test" data-expected-width="45"></button> 81 </div> 82 <div class="cb"> 83 <div class="test" style="float: left" data-expected-width="45"></div> 84 </div> 85 86 <br> 87 88 <!-- 'stretch' on various abspos configurations, which use the container's 89 padding-box as the area-to-fill (which in this case is 10px larger than 90 the container's content-box, hence the larger 'data-expected-*' 91 values vs. the previous subtests). --> 92 <!-- With 0 insets, the child's margin-box fills the CB's padding-box, so 93 the child's border-box should end being 94 cb-padding-box-size - child-margin-size = 60px - 5px = 55px --> 95 <div class="cb" style="position: relative"> 96 <div class="test" style="position: absolute; inset-inline: 0;" 97 data-expected-width="55"></div> 98 </div> 99 100 <!-- With auto insets, the child is placed at its static position which is 101 the origin of the CB's content-box, and then 'stretch' makes it extend 102 to reach the far end of the CB's padding-box. So it should be as large 103 as the zero-insets case above, minus the CB's inline-start-padding 104 which is 5px. --> 105 <div class="cb" style="position: relative"> 106 <div class="test" style="position: absolute" data-expected-width="50"></div> 107 </div> 108 109 <!-- When we specify an inset, the child should be as large as the 110 zero-insets case above, minus whatever nonzero inset we choose. --> 111 <div class="cb" style="position: relative"> 112 <div class="test" style="position: absolute; inset-inline-start: 10px" 113 data-expected-width="45"></div> 114 </div> 115 <div class="cb" style="position: relative"> 116 <div class="test" style="position: absolute; inset-inline-end: 10px" 117 data-expected-width="45"></div> 118 </div> 119 120 <!-- If an inset pushes the child past the edge of the CB, 'stretch' shrinks 121 to just the 10px needed for the child's border/padding: --> 122 <div class="cb" style="position: relative"> 123 <div class="test" style="position: absolute; inset-inline-end: 55px" 124 data-expected-width="10"></div> 125 </div> 126 <div class="cb" style="position: relative"> 127 <div class="test" style="position: absolute; inset-inline-start: 55px" 128 data-expected-width="10"></div> 129 </div> 130 131 <br> 132 133 <!-- 'stretch' on various abspos configurations in a grid: similar to 134 above, but the grid area forms the containing block. --> 135 <!-- Similar to zero insets case above, but just now in a grid: --> 136 <div class="cb" 137 style="display: inline-grid; position: relative"> 138 <div class="test" 139 style="position: absolute; inset-inline: 0;" 140 data-expected-width="55"></div> 141 </div> 142 143 <!-- With no insets, we're placed at our static position which is the grid's 144 padding-box origin, and then we stretch to reach the far end of its 145 padding-box. So we should be as large as the zero-insets case above. --> 146 <div class="cb" 147 style="display: inline-grid; position: relative"> 148 <div class="test" 149 style="position: absolute" 150 data-expected-width="55"></div> 151 </div> 152 153 <!-- When we specify an inset, the child should be as large as the 154 zero-insets case above, minus whatever nonzero inset we choose. --> 155 <div class="cb" 156 style="display: inline-grid; position: relative"> 157 <div class="test" 158 style="position: absolute; inset-inline-start: 10px" 159 data-expected-width="45"></div> 160 </div> 161 <div class="cb" 162 style="display: inline-grid; position: relative"> 163 <div class="test" 164 style="position: absolute; inset-inline-end: 10px" 165 data-expected-width="45"></div> 166 </div> 167 168 <!-- If an inset pushes the child past the edge of the CB, 'stretch' shrinks 169 to just the 10px needed for the child's border/padding: --> 170 <div class="cb" 171 style="display: inline-grid; position: relative"> 172 <div class="test" 173 style="position: absolute; inset-inline-end: 55px" 174 data-expected-width="10"></div> 175 </div> 176 <div class="cb" 177 style="display: inline-grid; position: relative"> 178 <div class="test" 179 style="position: absolute; inset-inline-start: 55px" 180 data-expected-width="10"></div> 181 </div> 182 183 <br> 184 185 <!-- 'stretch' on a flex item: --> 186 <div class="cb" style="display: inline-flex; flex-direction: row"> 187 <div class="test" data-expected-width="45"></div> 188 </div> 189 <div class="cb" style="display: inline-flex; flex-direction: column"> 190 <div class="test" data-expected-width="45"></div> 191 </div> 192 <!--...now with an extra-large sibling sharing the child's flex line, to be 193 sure our 'stretch' sizing value resolves against the flex line's size: --> 194 <div class="cb" style="display: inline-flex; flex-flow: column wrap"> 195 <div class="test" data-expected-width="55"></div> 196 <div style="inline-size: 60px"></div> 197 </div> 198 199 <!-- 'stretch' on a grid item in a definite-size grid track: --> 200 <div class="cb" style="display: inline-grid; grid-template-columns: 35px"> 201 <div class="test" data-expected-width="30"></div> 202 </div> 203 204 <!-- 'stretch' on a grid item in an automatically-sized grid track: --> 205 <div class="cb" style="display: inline-grid"> 206 <div class="test" data-expected-width="45"></div> 207 </div> 208 </body>