Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-break/widows-orphans-008.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="match" href="reference/widows-orphans-008-ref.html">
<!--
Date created: November 26th 2020
Last modified: December 6th 2020
-->
<!--
-->
<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 the test, since the 3rd column box was going to get only 1 line box, then a class B break point should occur between the '6' and the '7' so that there is a minimum of 3 line boxes at the top of the 3rd column box.">
<style>
div
{
border: orange solid 4px;
font-size: 20px;
line-height: 1.3; /* computes to 26px */
height: 104px; /* Therefore, exactly 4 line boxes */
margin-bottom: 1em;
padding: 0.5em; /* computes to 10px */
width: 460px;
columns: 4 auto;
column-fill: auto;
column-gap: 1em; /* computes to 20px */
column-rule: blue solid 4px;
}
div#test
{
orphans: 1;
widows: 3;
}
div#reference
{
orphans: 1;
widows: 1;
}
</style>
<p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>.
<div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div>
<div id="reference">1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div>
<!-- Same as div#test except 2 extra br here ^ -->