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