Blitz - WPT: widows-001.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Fragmentation level 3 Test: 'widows' and content distribution in columns</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-001-ref.html">

  <!--
  Date created: November 7th 2020
  Last modified: November 17th 2020
  -->

  <!--

  Bug 1562420: Implement orphans and widows for individual columns of a multicolumn element
  https://bugzilla.mozilla.org/show_bug.cgi?id=1562420

  Bug 137367: Implement orphans and widows
  https://bugzilla.mozilla.org/show_bug.cgi?id=137367

  -->

  <meta name="assert" content="When column boxes are filled sequentially, their content should be adjusted and fragmented in accordance with the 'widows' declaration. In the test, since the 3rd column box was going to get only 1 line box, then a class B break point is allowed and should occur before the last line box of the 2nd column box and after the next-to-last line box of the 2nd column box so that there is a minimum of 2 line boxes at the top of the 3rd column box.">

  <!--

    Breaking at a class B break point is allowed only if (...)
    the number of line boxes between the break and the end
    of the box is the value of widows or more.
    4.4 Unforced Breaks
    https://www.w3.org/TR/css-break-3/#unforced-breaks

  -->

  <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: 490px;

      columns: 3 auto;
      column-fill: auto;
      column-gap: 1em;
      column-rule: blue solid 4px;
    }

  div#test
    {
      widows: 2; /* widows' initial value is 2 */

      /*
      "The widows property specifies the minimum number of line boxes of a
      block container that must be left in a fragment <em>after</em> a
      column break."

      coming from
      CSS Fragmentation Module Level 3, section 3.3 Breaks Between Lines: orphans, widows
      https://www.w3.org/TR/css-break-3/#widows-orphans
      */
    }

  div#reference
    {
      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>7<br><br>8<br>9</div>

  <!--           Same as div#test except 1 extra br here   ^      -->

/css/css-break/reference/widows-001-ref.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

  <!--
  Date created: November 7th 2020
  Last modified: November 17th 2020
  -->

  <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: 490px;

      columns: 3 auto;
      column-fill: auto;
      column-gap: 1em; /* computes to 20px */
      column-rule: blue solid 4px;

      widows: 1;
    }
  </style>

   <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>.

  <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div>

  <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div>