stretch-max-block-size-001.html (9441B)
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="max-block-size:stretch (setting 'max-height' in this case) resolves and clamps as expected (producing similar results as if we had specified the keyword for the block-size property)"> 9 <style> 10 .cb { 11 block-size: 50px; 12 inline-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-block: 5px; 23 padding-inline: 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 block 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-block-start: 2px; 36 margin-block-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-height` expectations, since those 41 * correspond to the border-box size. */ 42 border: 3px solid blue; 43 padding: 2px; 44 45 /* We expect "max-block-size:stretch" to cause the used value of 46 * "block-size" to be clamped to the "stretch" size. */ 47 max-block-size: stretch; 48 /* This is intentionally larger than our containing block's block-size, 49 * and we expect it to be clamped by our max-block-size specified above 50 * in nearly all of this test's subtests. */ 51 block-size: 55px; 52 inline-size: 20px; 53 background: fuchsia; 54 } 55 </style> 56 <script> 57 function runTests() { 58 checkLayout('[data-expected-height]'); 59 60 // Add box-sizing:border-box (which shouldn't impact the actual resolved 61 // box sizes that 'stretch' produces, aside from one subtest that we skip 62 // for this pass), and retest: 63 for (let elem of document.querySelectorAll(".test")) { 64 if (!elem.hasAttribute("skip-second-pass")) { 65 elem.style.boxSizing = "border-box"; 66 } 67 } 68 checkLayout('[data-expected-height]:not([skip-second-pass])'); 69 } 70 </script> 71 <body onload="runTests()"> 72 <!-- 'stretch' on a block box, replaced element, various form controls: --> 73 <div class="cb"> 74 <div class="test" data-expected-height="45"></div> 75 </div> 76 <div class="cb"> 77 <canvas class="test" data-expected-height="45"></canvas> 78 </div> 79 <div class="cb"> 80 <input class="test" data-expected-height="45"> 81 </div> 82 <div class="cb"> 83 <textarea class="test" data-expected-height="45"></textarea> 84 </div> 85 <div class="cb"> 86 <button class="test" data-expected-height="45"></button> 87 </div> 88 <div class="cb"> 89 <div class="test" style="float: left" data-expected-height="45"></div> 90 </div> 91 92 <br> 93 94 <!-- 'stretch' on various abspos configurations, which use the container's 95 padding-box as the area-to-fill (which in this case is 10px larger than 96 the container's content-box, hence the larger 'data-expected-*' 97 values vs. the previous subtests). --> 98 <!-- With 0 insets, the child's margin-box fills the CB's padding-box, so 99 the child's border-box should end being 100 cb-padding-box-size - child-margin-size = 60px - 5px = 55px --> 101 <div class="cb" style="position: relative"> 102 <div class="test" style="position: absolute; inset-block: 0;" 103 data-expected-height="55"></div> 104 </div> 105 106 <!-- With auto insets, the child is placed at its static position which is 107 the origin of the CB's content-box, and then 'stretch' makes it extend 108 to reach the far end of the CB's padding-box. So it should be as large 109 as the zero-insets case above, minus the CB's block-start-padding 110 which is 5px. --> 111 <div class="cb" style="position: relative"> 112 <div class="test" style="position: absolute" data-expected-height="50"></div> 113 </div> 114 115 <!-- When we specify an inset, the child should be as large as the 116 zero-insets case above, minus whatever nonzero inset we choose. --> 117 <div class="cb" style="position: relative"> 118 <div class="test" style="position: absolute; inset-block-start: 10px" 119 data-expected-height="45"></div> 120 </div> 121 <div class="cb" style="position: relative"> 122 <div class="test" style="position: absolute; inset-block-end: 10px" 123 data-expected-height="45"></div> 124 </div> 125 126 <!-- If an inset pushes the child past the edge of the CB, 'stretch' shrinks 127 to just the 10px needed for the child's border/padding: --> 128 <div class="cb" style="position: relative"> 129 <div class="test" style="position: absolute; inset-block-end: 55px" 130 data-expected-height="10"></div> 131 </div> 132 <div class="cb" style="position: relative"> 133 <div class="test" style="position: absolute; inset-block-start: 55px" 134 data-expected-height="10"></div> 135 </div> 136 137 <br> 138 139 <!-- 'stretch' on various abspos configurations in a grid: similar to 140 above, but the grid area forms the containing block. --> 141 <!-- Similar to zero insets case above, but just now in a grid: --> 142 <div class="cb" 143 style="display: inline-grid; position: relative"> 144 <div class="test" 145 style="position: absolute; inset-block: 0;" 146 data-expected-height="55"></div> 147 </div> 148 149 <!-- With no insets, we're placed at our static position which is the grid's 150 padding-box origin, and then we stretch to reach the far end of its 151 padding-box. So we should be as large as the zero-insets case above. --> 152 <div class="cb" 153 style="display: inline-grid; position: relative"> 154 <div class="test" 155 style="position: absolute" 156 data-expected-height="55"></div> 157 </div> 158 159 <!-- When we specify an inset, the child should be as large as the 160 zero-insets case above, minus whatever nonzero inset we choose. --> 161 <div class="cb" 162 style="display: inline-grid; position: relative"> 163 <div class="test" 164 style="position: absolute; inset-block-start: 10px" 165 data-expected-height="45"></div> 166 </div> 167 <div class="cb" 168 style="display: inline-grid; position: relative"> 169 <div class="test" 170 style="position: absolute; inset-block-end: 10px" 171 data-expected-height="45"></div> 172 </div> 173 174 <!-- If an inset pushes the child past the edge of the CB, 'stretch' shrinks 175 to just the 10px needed for the child's border/padding: --> 176 <div class="cb" 177 style="display: inline-grid; position: relative"> 178 <div class="test" 179 style="position: absolute; inset-block-end: 55px" 180 data-expected-height="10"></div> 181 </div> 182 <div class="cb" 183 style="display: inline-grid; position: relative"> 184 <div class="test" 185 style="position: absolute; inset-block-start: 55px" 186 data-expected-height="10"></div> 187 </div> 188 189 <br> 190 191 <!-- 'stretch' on a flex item: --> 192 <div class="cb" style="display: inline-flex; flex-direction: row"> 193 <div class="test" data-expected-height="45"></div> 194 </div> 195 <div class="cb" style="display: inline-flex; flex-direction: column"> 196 <div class="test" data-expected-height="45"></div> 197 </div> 198 <!--...now with an extra-large sibling sharing the child's flex line, to be 199 sure our 'stretch' sizing value resolves against the flex line's size: --> 200 <div class="cb" style="display: inline-flex; flex-flow: row wrap"> 201 <div class="test" data-expected-height="55"></div> 202 <div style="block-size: 60px"></div> 203 </div> 204 205 <!-- 'stretch' on a grid item in a definite-size grid track: --> 206 <div class="cb" style="display: inline-grid; grid-template-rows: 35px"> 207 <div class="test" data-expected-height="30"></div> 208 </div> 209 210 <!-- 'stretch' on a grid item in an automatically-sized grid track: 211 Here, the 'max-block-size:stretch' doesn't get to make a difference, 212 because it doesn't resolve (and hence doesn't have any clamping effect) 213 during the row's intrinsic-sizing pass. So the grid row ends up 214 being sized to exactly fit the *unclamped* 'block-size'; and that 215 row then establishes the containing block that we resolve the 216 "max-block-size:stretch" keyword against. This ultimately means that 217 the max-block-size happens to resolve to our unclamped block-size, 218 and hence it trivially has no clamping impact. (This also means that 219 'box-sizing' *does affect the expected size* in this subtest, unlike the 220 rest of this test's subtests! So, we use a dummy attribute to opt this 221 subtest out of this test's second pass, to avoid incorrectly asserting 222 that our data-expected-width is still the target size when 'box-sizing' 223 is tweaked.) --> 224 <div class="cb" style="display: inline-grid"> 225 <div class="test" data-expected-height="65" skip-second-pass></div> 226 </div> 227 </body>