align-content-block-011.html (10228B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Box Alignment: align-content content change on small block container with floats</title> 4 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/check-layout-th.js"></script> 9 10 <style title="Needed for automation; delete to review/debug"> 11 @import "/fonts/ahem.css"; 12 html { font: 10px/1 Ahem; max-width: 800px; } 13 .label { display: none; } 14 #manual { display: none; } 15 </style> 16 17 <style id="initial"> 18 .in-flow .float { height: 0; !important } 19 </style> 20 <script> 21 function doTest() 22 { 23 document.body.offsetHeight; // trigger layout 24 document.getElementById('initial').disabled = true; 25 checkLayout('.test'); 26 } 27 window.onload = () => { 28 requestAnimationFrame(() => { 29 requestAnimationFrame(doTest); 30 }); 31 }; 32 window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; }); 33 </script> 34 35 <style> 36 html, body { margin: 0; padding: 0; } 37 38 .test { height: 1em; margin: 0.5em 2em; 39 /* show bounds of test box without interfering with margin-collapsing */ 40 background: black; padding-right: 2px; } 41 /* ensure float is contained */ 42 .float { float: right; background: orange; height: 2em } 43 /* ensure margin is contained */ 44 .in-flow { margin-top: 1em; background: orange } 45 /* ensure relpos is ignored */ 46 .relpos { position: relative; top: -1.5em; } 47 /* ensure abspos static position follows alignment */ 48 .wrapper { position: relative; } 49 .abspos { position: absolute; right: 0; margin-top: -1.5em; } 50 /* ensure overflow is not counted */ 51 .overflow { height: 0; } 52 53 /* cram into 800x600 */ 54 html { max-height: 600px; columns: 3 } 55 .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; } 56 57 /* readability */ 58 .test > * { color: #8888; } 59 .label { color: black; font-weight: bold; } 60 </style> 61 62 <!-- 63 Results should be same as align-content-block-005.html. 64 --> 65 66 <div class="wrapper"> 67 <div class="test" style="align-content: start" title="start"> 68 <div class="float" data-offset-y="35">FLT</div> 69 <div class="in-flow" data-offset-y="45"></div> 70 <div class="in-flow"> 71 <div class="float" data-offset-y="45">FLT</div> 72 <span class="label">START</span> 73 <span class="abspos">ABS</span> 74 <span class="relpos">REL</span> 75 <div class="overflow">OVERFLOW</div> 76 </div> 77 </div> 78 </div> 79 <div class="wrapper"> 80 <div class="test" style="align-content: center" title="center"> 81 <div class="float" data-offset-y="35">FLT</div> 82 <div class="in-flow" data-offset-y="45"></div> 83 <div class="in-flow"> 84 <div class="float" data-offset-y="45">FLT</div> 85 <span class="label">CENTER</span> 86 <span class="abspos">ABS</span> 87 <span class="relpos">REL</span> 88 <div class="overflow">OVERFLOW</div> 89 </div> 90 </div> 91 </div> 92 <div class="wrapper"> 93 <div class="test" style="align-content: end" title="end"> 94 <div class="float" data-offset-y="35">FLT</div> 95 <div class="in-flow" data-offset-y="45"></div> 96 <div class="in-flow"> 97 <div class="float" data-offset-y="45">FLT</div> 98 <span class="label">END</span> 99 <span class="abspos">ABS</span> 100 <span class="relpos">REL</span> 101 <div class="overflow">OVERFLOW</div> 102 </div> 103 </div> 104 </div> 105 <div class="wrapper"> 106 <div class="test" style="align-content: baseline" title="baseline"> 107 <div class="float" data-offset-y="35">FLT</div> 108 <div class="in-flow" data-offset-y="45"></div> 109 <div class="in-flow"> 110 <div class="float" data-offset-y="45">FLT</div> 111 <span class="label">BASELINE</span> 112 <span class="abspos">ABS</span> 113 <span class="relpos">REL</span> 114 <div class="overflow">OVERFLOW</div> 115 </div> 116 </div> 117 </div> 118 <div class="wrapper"> 119 <div class="test" style="align-content: last baseline" title="last baseline"> 120 <div class="float" data-offset-y="35">FLT</div> 121 <div class="in-flow" data-offset-y="45"></div> 122 <div class="in-flow"> 123 <div class="float" data-offset-y="45">FLT</div> 124 <span class="label">LAST BASELINE</span> 125 <span class="abspos">ABS</span> 126 <span class="relpos">REL</span> 127 <div class="overflow">OVERFLOW</div> 128 </div> 129 </div> 130 </div> 131 <div class="wrapper"> 132 <div class="test" style="align-content: flex-start" title="flex-start"> 133 <div class="float" data-offset-y="35">FLT</div> 134 <div class="in-flow" data-offset-y="45"></div> 135 <div class="in-flow"> 136 <div class="float" data-offset-y="45">FLT</div> 137 <span class="label">FLEX-START</span> 138 <span class="abspos">ABS</span> 139 <span class="relpos">REL</span> 140 <div class="overflow">OVERFLOW</div> 141 </div> 142 </div> 143 </div> 144 <div class="wrapper"> 145 <div class="test" style="align-content: flex-end" title="flex-end"> 146 <div class="float" data-offset-y="35">FLT</div> 147 <div class="in-flow" data-offset-y="45"></div> 148 <div class="in-flow"> 149 <div class="float" data-offset-y="45">FLT</div> 150 <span class="label">FLEX-END</span> 151 <span class="abspos">ABS</span> 152 <span class="relpos">REL</span> 153 <div class="overflow">OVERFLOW</div> 154 </div> 155 </div> 156 </div> 157 <div class="wrapper"> 158 <div class="test" style="align-content: unsafe start" title="unsafe start"> 159 <div class="float" data-offset-y="35">FLT</div> 160 <div class="in-flow" data-offset-y="45"></div> 161 <div class="in-flow"> 162 <div class="float" data-offset-y="45">FLT</div> 163 <span class="label">UNSAFE START</span> 164 <span class="abspos">ABS</span> 165 <span class="relpos">REL</span> 166 <div class="overflow">OVERFLOW</div> 167 </div> 168 </div> 169 </div> 170 <div class="wrapper"> 171 <div class="test" style="align-content: unsafe center" title="unsafe center"> 172 <div class="float" data-offset-y="25">FLT</div> 173 <div class="in-flow" data-offset-y="35"></div> 174 <div class="in-flow"> 175 <div class="float" data-offset-y="35">FLT</div> 176 <span class="label">UNSAFE CENTER</span> 177 <span class="abspos">ABS</span> 178 <span class="relpos">REL</span> 179 <div class="overflow">OVERFLOW</div> 180 </div> 181 </div> 182 </div> 183 <div class="wrapper"> 184 <div class="test" style="align-content: unsafe end" title="unsafe end"> 185 <div class="float" data-offset-y="15">FLT</div> 186 <div class="in-flow" data-offset-y="25"></div> 187 <div class="in-flow"> 188 <div class="float" data-offset-y="25">FLT</div> 189 <span class="label">UNSAFE END</span> 190 <span class="abspos">ABS</span> 191 <span class="relpos">REL</span> 192 <div class="overflow">OVERFLOW</div> 193 </div> 194 </div> 195 </div> 196 <div class="wrapper"> 197 <div class="test" style="align-content: safe start" title="safe start"> 198 <div class="float" data-offset-y="35">FLT</div> 199 <div class="in-flow" data-offset-y="45"></div> 200 <div class="in-flow"> 201 <div class="float" data-offset-y="45">FLT</div> 202 <span class="label">SAFE START</span> 203 <span class="abspos">ABS</span> 204 <span class="relpos">REL</span> 205 <div class="overflow">OVERFLOW</div> 206 </div> 207 </div> 208 </div> 209 <div class="wrapper"> 210 <div class="test" style="align-content: safe center" title="safe center"> 211 <div class="float" data-offset-y="35">FLT</div> 212 <div class="in-flow" data-offset-y="45"></div> 213 <div class="in-flow"> 214 <div class="float" data-offset-y="45">FLT</div> 215 <span class="label">SAFE CENTER</span> 216 <span class="abspos">ABS</span> 217 <span class="relpos">REL</span> 218 <div class="overflow">OVERFLOW</div> 219 </div> 220 </div> 221 </div> 222 <div class="wrapper"> 223 <div class="test" style="align-content: safe end" title="safe end"> 224 <div class="float" data-offset-y="35">FLT</div> 225 <div class="in-flow" data-offset-y="45"></div> 226 <div class="in-flow"> 227 <div class="float" data-offset-y="45">FLT</div> 228 <span class="label">SAFE END</span> 229 <span class="abspos">ABS</span> 230 <span class="relpos">REL</span> 231 <div class="overflow">OVERFLOW</div> 232 </div> 233 </div> 234 </div> 235 <div class="wrapper"> 236 <div class="test" style="align-content: space-evenly" title="space-evenly"> 237 <div class="float" data-offset-y="35">FLT</div> 238 <div class="in-flow" data-offset-y="45"></div> 239 <div class="in-flow"> 240 <div class="float" data-offset-y="45">FLT</div> 241 <span class="label">SPACE-EVENLY</span> 242 <span class="abspos">ABS</span> 243 <span class="relpos">REL</span> 244 <div class="overflow">OVERFLOW</div> 245 </div> 246 </div> 247 </div> 248 <div class="wrapper"> 249 <div class="test" style="align-content: space-between" title="space-between"> 250 <div class="float" data-offset-y="35">FLT</div> 251 <div class="in-flow" data-offset-y="45"></div> 252 <div class="in-flow"> 253 <div class="float" data-offset-y="45">FLT</div> 254 <span class="label">SPACE-BETWEEN</span> 255 <span class="abspos">ABS</span> 256 <span class="relpos">REL</span> 257 <div class="overflow">OVERFLOW</div> 258 </div> 259 </div> 260 </div> 261 <div class="wrapper"> 262 <div class="test" style="align-content: space-around" title="space-around"> 263 <div class="float" data-offset-y="35">FLT</div> 264 <div class="in-flow" data-offset-y="45"></div> 265 <div class="in-flow"> 266 <div class="float" data-offset-y="45">FLT</div> 267 <span class="label">SPACE-AROUND</span> 268 <span class="abspos">ABS</span> 269 <span class="relpos">REL</span> 270 <div class="overflow">OVERFLOW</div> 271 </div> 272 </div> 273 </div> 274 <div class="wrapper"> 275 <div class="test" style="align-content: normal" title="normal"> 276 <div class="float" data-offset-y="40">FLT</div> 277 <div class="in-flow" data-offset-y="40"></div> 278 <div class="in-flow"> 279 <div class="float" data-offset-y="40">FLT</div> 280 <span class="label">NORMAL</span> 281 <span class="abspos">ABS</span> 282 <span class="relpos">REL</span> 283 <div class="overflow">OVERFLOW</div> 284 </div> 285 </div> 286 </div> 287 288 <p> 289 <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>