align-content-block-break-content-020-aligned-ref.html (4861B)
1 <!DOCTYPE html> 2 <title>CSS Box Alignment: align-content block fragmentation: complex block content</title> 3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 4 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> 5 6 <style title="Needed for automation; delete to review/debug"> 7 @import "/fonts/ahem.css"; 8 html { font: 10px/1 Ahem; max-width: 800px; } 9 </style> 10 11 <style> 12 .pager { 13 column-fill: auto; 14 column-width: 15em; 15 height: 5em; 16 } 17 .test { 18 height: 5em; break-inside: avoid; 19 /* show bounds of test box without interfering with margin-collapsing */ 20 border-inline: solid black 1em; 21 } 22 .test:last-child { 23 height: 4.5em; 24 } 25 .large, .float { 26 height: 2.5em; 27 break-inside: avoid; 28 background: orange; 29 } 30 .float { 31 float: right; 32 } 33 .margin { 34 padding: 0.2em; /* using padding because of margin handling bugs 35 margin-block: 0.5em; 36 } 37 .margin > * { 38 margin-block: -0.3em; 39 switch back once fixed */ 40 } 41 hr { 42 border: solid 1px; margin: 0.5em; 43 } 44 45 /* readability */ 46 .pager { border: solid 2px gray; margin: 0.5em 0; } 47 .test { color: #8888; text-align: center; } 48 .label { color: black; font-weight: bold; } 49 50 /* reference */ 51 .center .test { align-content: center; } 52 .end .test { align-content: end; } 53 /* margins are truncated by unforced breaks, so mimic that */ 54 .test .large:first-child { margin-top: 0; } 55 .test .large:last-child { margin-bottom: 0; } 56 </style> 57 58 <!-- 59 This test creates breaks: 60 * between two blocks with collapsing negative margins 61 * through the middle of a float 62 * through some nested text 63 * after a nested float 64 --> 65 66 <div class="pager center"> 67 <div class="test"> 68 <span class="label">CENTER</span> 69 <div class="margin"> 70 <div class="large"></div> 71 </div> 72 </div> 73 <div class="test"> 74 <div class="margin"> 75 <div class="large"></div> 76 </div> 77 LINE 1<br>LINE 2 78 </div> 79 <div class="test"> 80 <div class="float">FLT</div> 81 LINE 3 82 <hr> 83 <div> 84 LINE 4<br>LINE 5 85 </div> 86 </div> 87 <div class="test"> 88 <div> 89 LINE 6 90 <div class="float">FLT</div> 91 </div> 92 LINE 7 93 </div> 94 </div> 95 96 <div class="pager end"> 97 <div class="test"> 98 <span class="label">END</span> 99 <div class="margin"> 100 <div class="large"></div> 101 </div> 102 </div> 103 <div class="test"> 104 <div class="margin"> 105 <div class="large"></div> 106 </div> 107 LINE 1<br>LINE 2 108 </div> 109 <div class="test"> 110 <div class="float">FLT</div> 111 LINE 3 112 <hr> 113 <div> 114 LINE 4<br>LINE 5 115 </div> 116 </div> 117 <div class="test"> 118 <div> 119 LINE 6 120 <div class="float">FLT</div> 121 </div> 122 LINE 7 123 </div> 124 </div> 125 126 <div class="pager"> 127 <div class="test"> 128 <span class="label">BASELINE</span> 129 <div class="margin"> 130 <div class="large"></div> 131 </div> 132 </div> 133 <div class="test"> 134 <div class="margin"> 135 <div class="large"></div> 136 </div> 137 LINE 1<br>LINE 2 138 </div> 139 <div class="test"> 140 <div class="float">FLT</div> 141 LINE 3 142 <hr> 143 <div> 144 LINE 4<br>LINE 5 145 </div> 146 </div> 147 <div class="test"> 148 <div> 149 LINE 6 150 <div class="float">FLT</div> 151 </div> 152 LINE 7 153 </div> 154 </div> 155 156 <div class="pager"> 157 <div class="test"> 158 <span class="label">LAST BASELINE</span> 159 <div class="margin"> 160 <div class="large"></div> 161 </div> 162 </div> 163 <div class="test"> 164 <div class="margin"> 165 <div class="large"></div> 166 </div> 167 LINE 1<br>LINE 2 168 </div> 169 <div class="test"> 170 <div class="float">FLT</div> 171 LINE 3 172 <hr> 173 <div> 174 LINE 4<br>LINE 5 175 </div> 176 </div> 177 <div class="test"> 178 <div> 179 LINE 6 180 <div class="float">FLT</div> 181 </div> 182 LINE 7 183 </div> 184 </div> 185 186 <div class="pager center"> 187 <div class="test"> 188 <span class="label">UNSAFE CENTER</span> 189 <div class="margin"> 190 <div class="large"></div> 191 </div> 192 </div> 193 <div class="test"> 194 <div class="margin"> 195 <div class="large"></div> 196 </div> 197 LINE 1<br>LINE 2 198 </div> 199 <div class="test"> 200 <div class="float">FLT</div> 201 LINE 3 202 <hr> 203 <div> 204 LINE 4<br>LINE 5 205 </div> 206 </div> 207 <div class="test"> 208 <div> 209 LINE 6 210 <div class="float">FLT</div> 211 </div> 212 LINE 7 213 </div> 214 </div> 215 216 <div class="pager end"> 217 <div class="test"> 218 <span class="label">UNSAFE END</span> 219 <div class="margin"> 220 <div class="large"></div> 221 </div> 222 </div> 223 <div class="test"> 224 <div class="margin"> 225 <div class="large"></div> 226 </div> 227 LINE 1<br>LINE 2 228 </div> 229 <div class="test"> 230 <div class="float">FLT</div> 231 LINE 3 232 <hr> 233 <div> 234 LINE 4<br>LINE 5 235 </div> 236 </div> 237 <div class="test"> 238 <div> 239 LINE 6 240 <div class="float">FLT</div> 241 </div> 242 LINE 7 243 </div> 244 </div>