align-content-block-break-overflow-020-ref.html (4515B)
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; 19 break-inside: avoid; 20 /* show bounds of test box without interfering with margin-collapsing */ 21 border-left: solid black 1em; 22 } 23 .test:last-child { 24 height: 4.5em; 25 } 26 .large, .float { 27 height: 2.5em; 28 break-inside: avoid; 29 background: orange; 30 } 31 .float { 32 float: right; 33 } 34 .margin { 35 padding: 0.2em; /* using padding because of margin handling bugs 36 margin-block: 0.5em; 37 } 38 .margin > * { 39 margin-block: -0.3em; 40 switch back once fixed */ 41 } 42 hr { 43 border: solid 1px; 44 margin: 0.5em; 45 } 46 47 /* readability */ 48 .pager { border: solid 2px gray; margin: 0.5em 0; } 49 .test { color: #8888; text-align: center; } 50 .label { color: black; font-weight: bold; } 51 52 /* reference */ 53 /* margins are truncated by unforced breaks, so mimic that */ 54 .margin:first-child { margin-top: 0; padding-top: 0; } 55 .margin:last-child { margin-bottom: 0; padding-bottom: 0; } 56 57 </style> 58 59 <!-- 60 This test creates breaks in overflow: 61 * between two blocks with collapsing negative margins 62 * through the middle of a float 63 * through some nested text 64 * after a nested float 65 --> 66 67 <div class="pager"> 68 <div class="test"> 69 <span class="label">CENTER</span> 70 <div class="margin"> 71 <div class="large"></div> 72 </div> 73 </div> 74 <div class="test"> 75 <div class="margin"> 76 <div class="large"></div> 77 </div> 78 LINE 1<br>LINE 2 79 </div> 80 <div class="test"> 81 <div class="float">FLT</div> 82 LINE 3 83 <hr> 84 LINE 4<br>LINE 5 85 </div> 86 <div class="test"> 87 <div class="float">FLT</div> 88 LINE 6<br>LINE 7 89 </div> 90 </div> 91 92 <div class="pager"> 93 <div class="test"> 94 <span class="label">END</span> 95 <div class="margin"> 96 <div class="large"></div> 97 </div> 98 </div> 99 <div class="test"> 100 <div class="margin"> 101 <div class="large"></div> 102 </div> 103 LINE 1<br>LINE 2 104 </div> 105 <div class="test"> 106 <div class="float">FLT</div> 107 LINE 3 108 <hr> 109 LINE 4<br>LINE 5 110 </div> 111 <div class="test"> 112 <div class="float">FLT</div> 113 LINE 6<br>LINE 7 114 </div> 115 </div> 116 117 <div class="pager"> 118 <div class="test"> 119 <span class="label">BASELINE</span> 120 <div class="margin"> 121 <div class="large"></div> 122 </div> 123 </div> 124 <div class="test"> 125 <div class="margin"> 126 <div class="large"></div> 127 </div> 128 LINE 1<br>LINE 2 129 </div> 130 <div class="test"> 131 <div class="float">FLT</div> 132 LINE 3 133 <hr> 134 LINE 4<br>LINE 5 135 </div> 136 <div class="test"> 137 <div class="float">FLT</div> 138 LINE 6<br>LINE 7 139 </div> 140 </div> 141 142 <div class="pager"> 143 <div class="test"> 144 <span class="label">LAST BASELINE</span> 145 <div class="margin"> 146 <div class="large"></div> 147 </div> 148 </div> 149 <div class="test"> 150 <div class="margin"> 151 <div class="large"></div> 152 </div> 153 LINE 1<br>LINE 2 154 </div> 155 <div class="test"> 156 <div class="float">FLT</div> 157 LINE 3 158 <hr> 159 LINE 4<br>LINE 5 160 </div> 161 <div class="test"> 162 <div class="float">FLT</div> 163 LINE 6<br>LINE 7 164 </div> 165 </div> 166 167 <div class="pager"> 168 <div class="test"> 169 <span class="label">UNSAFE CENTER</span> 170 <div class="margin"> 171 <div class="large"></div> 172 </div> 173 </div> 174 <div class="test"> 175 <div class="margin"> 176 <div class="large"></div> 177 </div> 178 LINE 1<br>LINE 2 179 </div> 180 <div class="test"> 181 <div class="float">FLT</div> 182 LINE 3 183 <hr> 184 LINE 4<br>LINE 5 185 </div> 186 <div class="test"> 187 <div class="float">FLT</div> 188 LINE 6<br>LINE 7 189 </div> 190 </div> 191 192 <div class="pager"> 193 <div class="test"> 194 <span class="label">UNSAFE END</span> 195 <div class="margin"> 196 <div class="large"></div> 197 </div> 198 </div> 199 <div class="test"> 200 <div class="margin"> 201 <div class="large"></div> 202 </div> 203 LINE 1<br>LINE 2 204 </div> 205 <div class="test"> 206 <div class="float">FLT</div> 207 LINE 3 208 <hr> 209 LINE 4<br>LINE 5 210 </div> 211 <div class="test"> 212 <div class="float">FLT</div> 213 LINE 6<br>LINE 7 214 </div> 215 </div>