stretch-alias-block-size-001.tentative.html (8447B)
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="block-size:stretch (setting 'height' in this case) causes an element's content-box to be sized such that its margin-box-size will fill the containing block's content-box."> 15 <style> 16 .cb { 17 block-size: 50px; 18 inline-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-block: 5px; 29 padding-inline: 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 block 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-block-start: 2px; 42 margin-block-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-height` expectations, since those 47 * correspond to the border-box size. */ 48 border: 3px solid blue; 49 padding: 2px; 50 51 block-size: -webkit-fill-available; 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), and retest: 62 for (let elem of document.querySelectorAll(".test")) { 63 elem.style.boxSizing = "border-box"; 64 } 65 checkLayout('[data-expected-height]'); 66 } 67 </script> 68 <body onload="runTests()"> 69 <!-- 'stretch' on a block box, replaced element, various form controls: --> 70 <div class="cb"> 71 <div class="test" data-expected-height="45"></div> 72 </div> 73 <div class="cb"> 74 <canvas class="test" data-expected-height="45"></canvas> 75 </div> 76 <div class="cb"> 77 <input class="test" data-expected-height="45"> 78 </div> 79 <div class="cb"> 80 <textarea class="test" data-expected-height="45"></textarea> 81 </div> 82 <div class="cb"> 83 <button class="test" data-expected-height="45"></button> 84 </div> 85 <div class="cb"> 86 <div class="test" style="float: left" data-expected-height="45"></div> 87 </div> 88 89 <br> 90 91 <!-- 'stretch' on various abspos configurations, which use the container's 92 padding-box as the area-to-fill (which in this case is 10px larger than 93 the container's content-box, hence the larger 'data-expected-*' 94 values vs. the previous subtests). --> 95 <!-- With 0 insets, the child's margin-box fills the CB's padding-box, so 96 the child's border-box should end being 97 cb-padding-box-size - child-margin-size = 60px - 5px = 55px --> 98 <div class="cb" style="position: relative"> 99 <div class="test" style="position: absolute; inset-block: 0;" 100 data-expected-height="55"></div> 101 </div> 102 103 <!-- With auto insets, the child is placed at its static position which is 104 the origin of the CB's content-box, and then 'stretch' makes it extend 105 to reach the far end of the CB's padding-box. So it should be as large 106 as the zero-insets case above, minus the CB's block-start-padding 107 which is 5px. --> 108 <div class="cb" style="position: relative"> 109 <div class="test" style="position: absolute" data-expected-height="50"></div> 110 </div> 111 112 <!-- When we specify an inset, the child should be as large as the 113 zero-insets case above, minus whatever nonzero inset we choose. --> 114 <div class="cb" style="position: relative"> 115 <div class="test" style="position: absolute; inset-block-start: 10px" 116 data-expected-height="45"></div> 117 </div> 118 <div class="cb" style="position: relative"> 119 <div class="test" style="position: absolute; inset-block-end: 10px" 120 data-expected-height="45"></div> 121 </div> 122 123 <!-- If an inset pushes the child past the edge of the CB, 'stretch' shrinks 124 to just the 10px needed for the child's border/padding: --> 125 <div class="cb" style="position: relative"> 126 <div class="test" style="position: absolute; inset-block-end: 55px" 127 data-expected-height="10"></div> 128 </div> 129 <div class="cb" style="position: relative"> 130 <div class="test" style="position: absolute; inset-block-start: 55px" 131 data-expected-height="10"></div> 132 </div> 133 134 <br> 135 136 <!-- 'stretch' on various abspos configurations in a grid: similar to 137 above, but the grid area forms the containing block. --> 138 <!-- Similar to zero insets case above, but just now in a grid: --> 139 <div class="cb" 140 style="display: inline-grid; position: relative"> 141 <div class="test" 142 style="position: absolute; inset-block: 0;" 143 data-expected-height="55"></div> 144 </div> 145 146 <!-- With no insets, we're placed at our static position which is the grid's 147 padding-box origin, and then we stretch to reach the far end of its 148 padding-box. So we should be as large as the zero-insets case above. --> 149 <div class="cb" 150 style="display: inline-grid; position: relative"> 151 <div class="test" 152 style="position: absolute" 153 data-expected-height="55"></div> 154 </div> 155 156 <!-- When we specify an inset, the child should be as large as the 157 zero-insets case above, minus whatever nonzero inset we choose. --> 158 <div class="cb" 159 style="display: inline-grid; position: relative"> 160 <div class="test" 161 style="position: absolute; inset-block-start: 10px" 162 data-expected-height="45"></div> 163 </div> 164 <div class="cb" 165 style="display: inline-grid; position: relative"> 166 <div class="test" 167 style="position: absolute; inset-block-end: 10px" 168 data-expected-height="45"></div> 169 </div> 170 171 <!-- If an inset pushes the child past the edge of the CB, 'stretch' shrinks 172 to just the 10px needed for the child's border/padding: --> 173 <div class="cb" 174 style="display: inline-grid; position: relative"> 175 <div class="test" 176 style="position: absolute; inset-block-end: 55px" 177 data-expected-height="10"></div> 178 </div> 179 <div class="cb" 180 style="display: inline-grid; position: relative"> 181 <div class="test" 182 style="position: absolute; inset-block-start: 55px" 183 data-expected-height="10"></div> 184 </div> 185 186 <br> 187 188 <!-- 'stretch' on a flex item: --> 189 <div class="cb" style="display: inline-flex; flex-direction: row"> 190 <div class="test" data-expected-height="45"></div> 191 </div> 192 <div class="cb" style="display: inline-flex; flex-direction: column"> 193 <div class="test" data-expected-height="45"></div> 194 </div> 195 <!--...now with an extra-large sibling sharing the child's flex line, to be 196 sure our 'stretch' sizing value resolves against the flex line's size: --> 197 <div class="cb" style="display: inline-flex; flex-flow: row wrap"> 198 <div class="test" data-expected-height="55"></div> 199 <div style="block-size: 60px"></div> 200 </div> 201 202 <!-- 'stretch' on a grid item in a definite-size grid track: --> 203 <div class="cb" style="display: inline-grid; grid-template-rows: 35px"> 204 <div class="test" data-expected-height="30"></div> 205 </div> 206 207 <!-- 'stretch' on a grid item in an automatically-sized grid track: --> 208 <div class="cb" style="display: inline-grid"> 209 <div class="test" data-expected-height="45"></div> 210 </div> 211 </body>