align-content-block-break-overflow-020.html (4808B)
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 <meta name="flags" content="may"> 6 <!-- fragmented alignment is underdefined; this is one possibility --> 7 <link rel="match" href="align-content-block-break-overflow-020-ref.html"> 8 9 <style title="Needed for automation; delete to review/debug"> 10 @import "/fonts/ahem.css"; 11 html { font: 10px/1 Ahem; max-width: 800px; } 12 </style> 13 14 <style> 15 .pager { 16 column-fill: auto; 17 column-width: 15em; 18 height: 5em; 19 } 20 .test { 21 height: 19.5em; 22 /* show bounds of test box without interfering with margin-collapsing */ 23 border-left: solid black 1em; 24 } 25 .overflow { 26 height: 0; 27 /* show bounds of overflow box without interfering with margin-collapsing */ 28 background: red; 29 } 30 .large, .float { 31 height: 2.5em; 32 break-inside: avoid; 33 background: orange; 34 } 35 .float { 36 float: right; 37 } 38 .margin { 39 padding: 0.2em; /* using padding because of margin handling bugs 40 margin-block: 0.5em; 41 } 42 .margin > * { 43 margin-block: -0.3em; 44 switch back once fixed */ 45 } 46 hr { 47 border: solid 1px; 48 margin: 0.5em; 49 } 50 51 /* readability */ 52 .pager { border: solid 2px gray; margin: 0.5em 0; } 53 .test { color: #8888; text-align: center; } 54 .label { color: black; font-weight: bold; } 55 </style> 56 57 <!-- 58 This test creates breaks in overflow: 59 * between two blocks with collapsing negative margins 60 * through the middle of a float 61 * through some nested text 62 * after a nested float 63 --> 64 65 <div class="pager"> 66 <div class="test" style="align-content: center"> 67 <span class="label">CENTER</span> 68 <div class="overflow"> 69 <div class="margin"> 70 <div class="large"></div> 71 <div class="large"></div> 72 </div> 73 LINE 1<br> 74 <div class="float">FLT</div> 75 LINE 2<br>LINE 3 76 <hr> 77 <div> 78 LINE 4<br>LINE 5<br>LINE 6 79 <div class="float">FLT</div> 80 </div> 81 LINE 7 82 </div> 83 </div> 84 </div> 85 </div> 86 87 <div class="pager"> 88 <div class="test" style="align-content: end"> 89 <span class="label">END</span> 90 <div class="overflow"> 91 <div class="margin"> 92 <div class="large"></div> 93 <div class="large"></div> 94 </div> 95 LINE 1<br> 96 <div class="float">FLT</div> 97 LINE 2<br>LINE 3 98 <hr> 99 <div> 100 LINE 4<br>LINE 5<br>LINE 6 101 <div class="float">FLT</div> 102 </div> 103 LINE 7 104 </div> 105 </div> 106 </div> 107 </div> 108 109 <div class="pager"> 110 <div class="test" style="align-content: baseline"> 111 <span class="label">BASELINE</span> 112 <div class="overflow"> 113 <div class="margin"> 114 <div class="large"></div> 115 <div class="large"></div> 116 </div> 117 LINE 1<br> 118 <div class="float">FLT</div> 119 LINE 2<br>LINE 3 120 <hr> 121 <div> 122 LINE 4<br>LINE 5<br>LINE 6 123 <div class="float">FLT</div> 124 </div> 125 LINE 7 126 </div> 127 </div> 128 </div> 129 </div> 130 131 <div class="pager"> 132 <div class="test" style="align-content: last baseline"> 133 <span class="label">LAST BASELINE</span> 134 <div class="overflow"> 135 <div class="margin"> 136 <div class="large"></div> 137 <div class="large"></div> 138 </div> 139 LINE 1<br> 140 <div class="float">FLT</div> 141 LINE 2<br>LINE 3 142 <hr> 143 <div> 144 LINE 4<br>LINE 5<br>LINE 6 145 <div class="float">FLT</div> 146 </div> 147 LINE 7 148 </div> 149 </div> 150 </div> 151 </div> 152 153 <div class="pager"> 154 <div class="test" style="align-content: unsafe center"> 155 <span class="label">UNSAFE CENTER</span> 156 <div class="overflow"> 157 <div class="margin"> 158 <div class="large"></div> 159 <div class="large"></div> 160 </div> 161 LINE 1<br> 162 <div class="float">FLT</div> 163 LINE 2<br>LINE 3 164 <hr> 165 <div> 166 LINE 4<br>LINE 5<br>LINE 6 167 <div class="float">FLT</div> 168 </div> 169 LINE 7 170 </div> 171 </div> 172 </div> 173 </div> 174 175 <div class="pager"> 176 <div class="test" style="align-content: unsafe end"> 177 <span class="label">UNSAFE END</span> 178 <div class="overflow"> 179 <div class="margin"> 180 <div class="large"></div> 181 <div class="large"></div> 182 </div> 183 LINE 1<br> 184 <div class="float">FLT</div> 185 LINE 2<br>LINE 3 186 <hr> 187 <div> 188 LINE 4<br>LINE 5<br>LINE 6 189 <div class="float">FLT</div> 190 </div> 191 LINE 7 192 </div> 193 </div> 194 </div> 195 </div>