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