widows-orphans-018.html (2268B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</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-009-ref.html"> 10 11 <!-- 12 Date created: December 16th 2020 13 Last modified: December 16th 2020 14 --> 15 16 <!-- 17 18 Bug 137367: Implement orphans and widows 19 https://bugzilla.mozilla.org/show_bug.cgi?id=137367 20 21 --> 22 23 <meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In this test, the 3rd column box is going to get only 1 line box which is insufficient to honor 'widows: 3'. If a class B break point would occur between the '6' and the '7' so that 3 line boxes would be at the top of the 3rd column box, then this would leave only 2 line boxes in the 2nd column box and this would violate the 'orphans: 3' constraint. For that reason, a class B break must not happen in the 2nd column between the '6' and the '7'. On the other hand, a class B break can occur between the '7' and the '8' in the 2nd column box and doing so does not violate the 'orphans: 3' constraint."> 24 25 <style> 26 div 27 { 28 border: orange solid 4px; 29 font-size: 20px; 30 line-height: 1.3; /* computes to 26px */ 31 height: 104px; /* Therefore, exactly 4 line boxes */ 32 margin-bottom: 1em; 33 padding: 0.5em; /* computes to 10px */ 34 width: 460px; 35 36 columns: 4 auto; 37 38 column-fill: auto; 39 40 column-gap: 1em; /* computes to 20px */ 41 42 column-rule: blue solid 4px; 43 } 44 45 div#test 46 { 47 orphans: 3; 48 widows: 3; 49 } 50 51 div#reference 52 { 53 orphans: 1; 54 widows: 1; 55 } 56 </style> 57 58 <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. 59 60 <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div> 61 62 <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> 63 64 <!-- Same as div#test except 1 extra br here ^ -->