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