align-content-block-break-overflow-010.html (3865B)
1 <!DOCTYPE html> 2 <title>CSS Box Alignment: align-content fragmentation: simple 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-010-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: 780px; } 12 </style> 13 14 <style> 15 .pager { 16 column-fill: auto; 17 column-width: 15em; 18 height: 5em; 19 } 20 .test { 21 height: 19em; 22 /* show bounds of test box without interfering with margin-collapsing */ 23 border-inline: 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 padding: 2px; /* using padding because of margin handling bugs 34 margin: 2px; 35 switch back once fixed */ 36 background: orange; 37 } 38 .float { 39 float: right; 40 } 41 .nobr { 42 break-inside: avoid; 43 } 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 in overflow: 53 * after some directly-contained text 54 * after a fixed-height block 55 * through some nested text 56 * after a block containing text 57 --> 58 59 <div class="pager"> 60 <div class="test" style="align-content: center"> 61 <span class="label">CENTER</span> 62 <div class="overflow"> 63 LINE 2<br>LINE 3 64 <div class="large"></div> 65 <div class="large"></div> 66 <div> 67 LINE 4 68 <div class="nobr">LINE 5<br>LINE 6</div> 69 </div> 70 </div> 71 </div> 72 </div> 73 </div> 74 75 76 <div class="pager"> 77 <div class="test" style="align-content: end"> 78 <span class="label">END</span> 79 <div class="overflow"> 80 LINE 2<br>LINE 3 81 <div class="large"></div> 82 <div class="large"></div> 83 <div> 84 LINE 4 85 <div class="nobr">LINE 5<br>LINE 6</div> 86 </div> 87 </div> 88 </div> 89 </div> 90 </div> 91 92 <div class="pager"> 93 <div class="test" style="align-content: baseline"> 94 <span class="label">BASELINE</span> 95 <div class="overflow"> 96 LINE 2<br>LINE 3 97 <div class="large"></div> 98 <div class="large"></div> 99 <div> 100 LINE 4 101 <div class="nobr">LINE 5<br>LINE 6</div> 102 </div> 103 </div> 104 </div> 105 </div> 106 </div> 107 108 <div class="pager"> 109 <div class="test" style="align-content: last baseline"> 110 <span class="label">LAST BASELINE</span> 111 <div class="overflow"> 112 LINE 2<br>LINE 3 113 <div class="large"></div> 114 <div class="large"></div> 115 <div> 116 LINE 4 117 <div class="nobr">LINE 5<br>LINE 6</div> 118 </div> 119 </div> 120 </div> 121 </div> 122 </div> 123 124 <div class="pager"> 125 <div class="test" style="align-content: unsafe center"> 126 <span class="label">UNSAFE CENTER</span> 127 <div class="overflow"> 128 LINE 2<br>LINE 3 129 <div class="large"></div> 130 <div class="large"></div> 131 <div> 132 LINE 4 133 <div class="nobr">LINE 5<br>LINE 6</div> 134 </div> 135 </div> 136 </div> 137 </div> 138 </div> 139 140 <div class="pager"> 141 <div class="test" style="align-content: unsafe end"> 142 <span class="label">UNSAFE END</span> 143 <div class="overflow"> 144 LINE 2<br>LINE 3 145 <div class="large"></div> 146 <div class="large"></div> 147 <div> 148 LINE 4 149 <div class="nobr">LINE 5<br>LINE 6</div> 150 </div> 151 </div> 152 </div> 153 </div> 154 </div>