align-content-block-break-content-010-unaligned-ref.html (3066B)
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: 19em; 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 padding: 2px; /* using padding because of margin handling bugs 26 margin: 2px; 27 switch back once fixed */ 28 background: orange; 29 } 30 .float { 31 float: right; 32 } 33 .nobr { 34 break-inside: avoid; 35 } 36 37 /* readability */ 38 .pager { border: solid 2px gray; margin: 0.5em 0; } 39 .test { color: #8888; text-align: center; } 40 .label { color: black; font-weight: bold; } 41 .test .large { margin-top: 0; } /* margins truncated by unforced breaks */ 42 </style> 43 44 <!-- 45 This test creates breaks: 46 * after some directly-contained text 47 * after a fixed-height block 48 * through some nested text 49 * after a block containing text 50 --> 51 52 <div class="pager"> 53 <div class="test"> 54 <span class="label">CENTER</span><br>LINE 2<br>LINE 3 55 <div class="large"></div> 56 <div class="large"></div> 57 <div> 58 LINE 4 59 <div class="nobr">LINE 5<br>LINE 6</div> 60 </div> 61 </div> 62 </div> 63 </div> 64 65 66 <div class="pager"> 67 <div class="test"> 68 <span class="label">END</span><br>LINE 2<br>LINE 3 69 <div class="large"></div> 70 <div class="large"></div> 71 <div> 72 LINE 4 73 <div class="nobr">LINE 5<br>LINE 6</div> 74 </div> 75 </div> 76 </div> 77 </div> 78 79 <div class="pager"> 80 <div class="test"> 81 <span class="label">BASELINE</span><br>LINE 2<br>LINE 3 82 <div class="large"></div> 83 <div class="large"></div> 84 <div> 85 LINE 4 86 <div class="nobr">LINE 5<br>LINE 6</div> 87 </div> 88 </div> 89 </div> 90 </div> 91 92 <div class="pager"> 93 <div class="test"> 94 <span class="label">LAST BASELINE</span><br>LINE 2<br>LINE 3 95 <div class="large"></div> 96 <div class="large"></div> 97 <div> 98 LINE 4 99 <div class="nobr">LINE 5<br>LINE 6</div> 100 </div> 101 </div> 102 </div> 103 </div> 104 105 <div class="pager"> 106 <div class="test"> 107 <span class="label">UNSAFE CENTER</span><br>LINE 2<br>LINE 3 108 <div class="large"></div> 109 <div class="large"></div> 110 <div> 111 LINE 4 112 <div class="nobr">LINE 5<br>LINE 6</div> 113 </div> 114 </div> 115 </div> 116 </div> 117 118 119 <div class="pager"> 120 <div class="test"> 121 <span class="label">UNSAFE END</span><br>LINE 2<br>LINE 3 122 <div class="large"></div> 123 <div class="large"></div> 124 <div> 125 LINE 4 126 <div class="nobr">LINE 5<br>LINE 6</div> 127 </div> 128 </div> 129 </div> 130 </div>