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-017.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and auto-height multicolumn container with 'column-fill: auto'</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="match" href="reference/widows-orphans-017-ref.html">
<!--
Date created: November 26th 2020
Last modified: December 6th 2020
-->
<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.">
<style>
div
{
border: orange solid 4px;
font-size: 20px;
line-height: 1.3; /* computes to 26px */
margin-bottom: 1em;
padding: 0.5em; /* computes to 10px */
width: 460px;
}
div#test
{
height: auto;
columns: 4 auto;
column-fill: auto;
column-gap: 1em; /* computes to 20px */
column-rule: blue solid 4px;
orphans: 1;
widows: 2;
}
div#reference
{
height: 182px;
}
</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</div>
<div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7</div>