css/css-break/widows-orphans-017.html

<!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="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans">
  <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>