widows-orphans-017.html (1530B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and auto-height multicolumn container with 'column-fill: auto'</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> 9 <link rel="match" href="reference/widows-orphans-017-ref.html"> 10 11 <!-- 12 Date created: November 26th 2020 13 Last modified: December 6th 2020 14 --> 15 16 <meta name="assert" content="If a multi-column container fills column boxes sequentially and its 'height' is 'auto', then soft breaks are inoperative since content can not overflow the fragmentainer. Therefore, in this test, the 'orphans' and 'widows' requirements can not be honored."> 17 18 <style> 19 div 20 { 21 border: orange solid 4px; 22 font-size: 20px; 23 line-height: 1.3; /* computes to 26px */ 24 margin-bottom: 1em; 25 padding: 0.5em; /* computes to 10px */ 26 width: 460px; 27 } 28 29 div#test 30 { 31 height: auto; 32 33 columns: 4 auto; 34 column-fill: auto; 35 column-gap: 1em; /* computes to 20px */ 36 column-rule: blue solid 4px; 37 38 orphans: 1; 39 widows: 2; 40 } 41 42 div#reference 43 { 44 height: 182px; 45 } 46 </style> 47 48 <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. 49 50 <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7</div> 51 52 <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7</div>