align-content-block-break-content-020.html (4342B)
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; these are two possibilities --> 7 <link rel="match" href="align-content-block-break-content-020-aligned-ref.html"> 8 <link rel="match" href="align-content-block-break-content-020-unaligned-ref.html"> 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 </style> 14 15 <style> 16 .pager { 17 column-fill: auto; 18 column-width: 15em; 19 height: 5em; 20 } 21 .test { 22 height: 19.5em; 23 /* show bounds of test box without interfering with margin-collapsing */ 24 border-inline: solid black 1em; 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; margin: 0.5em; } 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 </style> 50 51 <!-- 52 This test creates breaks: 53 * between two blocks with collapsing negative margins 54 * through the middle of a float 55 * through some nested text 56 * after a nested float 57 --> 58 59 <div class="pager"> 60 <div class="test" style="align-content: center"> 61 <span class="label">CENTER</span> 62 <div class="margin"> 63 <div class="large"></div> 64 <div class="large"></div> 65 </div> 66 LINE 1<br> 67 <div class="float">FLT</div> 68 LINE 2<br>LINE 3 69 <hr> 70 <div> 71 LINE 4<br>LINE 5<br>LINE 6 72 <div class="float">FLT</div> 73 </div> 74 LINE 7 75 </div> 76 </div> 77 </div> 78 79 <div class="pager"> 80 <div class="test" style="align-content: end"> 81 <span class="label">END</span> 82 <div class="margin"> 83 <div class="large"></div> 84 <div class="large"></div> 85 </div> 86 LINE 1<br> 87 <div class="float">FLT</div> 88 LINE 2<br>LINE 3 89 <hr> 90 <div> 91 LINE 4<br>LINE 5<br>LINE 6 92 <div class="float">FLT</div> 93 </div> 94 LINE 7 95 </div> 96 </div> 97 </div> 98 99 <div class="pager"> 100 <div class="test" style="align-content: baseline"> 101 <span class="label">BASELINE</span> 102 <div class="margin"> 103 <div class="large"></div> 104 <div class="large"></div> 105 </div> 106 LINE 1<br> 107 <div class="float">FLT</div> 108 LINE 2<br>LINE 3 109 <hr> 110 <div> 111 LINE 4<br>LINE 5<br>LINE 6 112 <div class="float">FLT</div> 113 </div> 114 LINE 7 115 </div> 116 </div> 117 </div> 118 119 <div class="pager"> 120 <div class="test" style="align-content: last baseline"> 121 <span class="label">LAST BASELINE</span> 122 <div class="margin"> 123 <div class="large"></div> 124 <div class="large"></div> 125 </div> 126 LINE 1<br> 127 <div class="float">FLT</div> 128 LINE 2<br>LINE 3 129 <hr> 130 <div> 131 LINE 4<br>LINE 5<br>LINE 6 132 <div class="float">FLT</div> 133 </div> 134 LINE 7 135 </div> 136 </div> 137 </div> 138 139 <div class="pager"> 140 <div class="test" style="align-content: unsafe center"> 141 <span class="label">UNSAFE CENTER</span> 142 <div class="margin"> 143 <div class="large"></div> 144 <div class="large"></div> 145 </div> 146 LINE 1<br> 147 <div class="float">FLT</div> 148 LINE 2<br>LINE 3 149 <hr> 150 <div> 151 LINE 4<br>LINE 5<br>LINE 6 152 <div class="float">FLT</div> 153 </div> 154 LINE 7 155 </div> 156 </div> 157 </div> 158 159 <div class="pager"> 160 <div class="test" style="align-content: unsafe end"> 161 <span class="label">UNSAFE END</span> 162 <div class="margin"> 163 <div class="large"></div> 164 <div class="large"></div> 165 </div> 166 LINE 1<br> 167 <div class="float">FLT</div> 168 LINE 2<br>LINE 3 169 <hr> 170 <div> 171 LINE 4<br>LINE 5<br>LINE 6 172 <div class="float">FLT</div> 173 </div> 174 LINE 7 175 </div> 176 </div> 177 </div>