align-content-block-break-content-010-aligned-ref.html (4023B)
1 <!DOCTYPE html> 2 <title>CSS Box Alignment: align-content block fragmentation: simple 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: 780px; } 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: 4em; 24 } 25 .large, .float { 26 height: 2.5em; 27 break-inside: avoid; 28 padding: 2px; /* using padding because of margin handling bugs 29 margin: 2px; 30 switch back once fixed */ 31 background: orange; 32 } 33 .float { 34 float: right; 35 } 36 .nobr { 37 break-inside: avoid; 38 } 39 40 /* readability */ 41 .pager { border: solid 2px gray; margin: 0.5em 0; } 42 .test { color: #8888; text-align: center; } 43 .label { color: black; font-weight: bold; } 44 45 /* reference */ 46 .center .test { align-content: center; } 47 .end .test { align-content: end; } 48 /* margins are truncated by unforced breaks, so mimic that */ 49 .test .large:first-child { margin-top: 0; } 50 .test .large:last-child { margin-bottom: 0; } 51 </style> 52 53 <!-- 54 This test creates breaks: 55 * after some directly-contained text 56 * after a fixed-height block 57 * through some nested text 58 * after a block containing text 59 --> 60 61 <div class="pager center"> 62 <div class="test"> 63 <span class="label">CENTER</span><br>LINE 2<br>LINE 3 64 </div> 65 <div class="test"> 66 <div class="large"></div> 67 </div> 68 <div class="test"> 69 <div class="large"></div> 70 <div> 71 LINE 4 72 </div> 73 </div> 74 <div class="test"> 75 <div> 76 <div class="nobr">LINE 5<br>LINE 6</div> 77 </div> 78 </div> 79 </div> 80 </div> 81 82 83 <div class="pager end"> 84 <div class="test"> 85 <span class="label">END</span><br>LINE 2<br>LINE 3 86 </div> 87 <div class="test"> 88 <div class="large"></div> 89 </div> 90 <div class="test"> 91 <div class="large"></div> 92 <div> 93 LINE 4 94 </div> 95 </div> 96 <div class="test"> 97 <div> 98 <div class="nobr">LINE 5<br>LINE 6</div> 99 </div> 100 </div> 101 </div> 102 </div> 103 104 <div class="pager"> 105 <div class="test"> 106 <span class="label">BASELINE</span><br>LINE 2<br>LINE 3 107 </div> 108 <div class="test"> 109 <div class="large"></div> 110 </div> 111 <div class="test"> 112 <div class="large"></div> 113 <div> 114 LINE 4 115 </div> 116 </div> 117 <div class="test"> 118 <div> 119 <div class="nobr">LINE 5<br>LINE 6</div> 120 </div> 121 </div> 122 </div> 123 </div> 124 125 <div class="pager"> 126 <div class="test"> 127 <span class="label">LAST BASELINE</span><br>LINE 2<br>LINE 3 128 </div> 129 <div class="test"> 130 <div class="large"></div> 131 </div> 132 <div class="test"> 133 <div class="large"></div> 134 <div> 135 LINE 4 136 </div> 137 </div> 138 <div class="test"> 139 <div> 140 <div class="nobr">LINE 5<br>LINE 6</div> 141 </div> 142 </div> 143 </div> 144 </div> 145 146 <div class="pager center"> 147 <div class="test"> 148 <span class="label">UNSAFE CENTER</span><br>LINE 2<br>LINE 3 149 </div> 150 <div class="test"> 151 <div class="large"></div> 152 </div> 153 <div class="test"> 154 <div class="large"></div> 155 <div> 156 LINE 4 157 </div> 158 </div> 159 <div class="test"> 160 <div> 161 <div class="nobr">LINE 5<br>LINE 6</div> 162 </div> 163 </div> 164 </div> 165 </div> 166 167 <div class="pager end"> 168 <div class="test"> 169 <span class="label">UNSAFE END</span><br>LINE 2<br>LINE 3 170 </div> 171 <div class="test"> 172 <div class="large"></div> 173 </div> 174 <div class="test"> 175 <div class="large"></div> 176 <div> 177 LINE 4 178 </div> 179 </div> 180 <div class="test"> 181 <div> 182 <div class="nobr">LINE 5<br>LINE 6</div> 183 </div> 184 </div> 185 </div> 186 </div>