testing/web-platform/tests/css/css-break/widows-orphans-010.html
author Sandor Molnar <smolnar@mozilla.com>
Fri, 11 Jul 2025 19:57:29 +0300 (12 hours ago)
changeset 796221 8ba6984a5604ac7dcf50325b1a0ebadf9e305d22
parent 606595 895e9f55c489ee2cc6e5bb3b1039f863e5b72809
permissions -rw-r--r--
Revert "Bug 1972411 - give gnome-shell and pipewire more time to start, and retry the task if we time out. r=jmaher" for causing linux perma failures This reverts commit 2b905fe7199c9210434f7c7f8326b57025c91c55. Revert "Bug 1972411 - make /builds/worker/fetches a volume in the test docker image. r=releng-reviewers,Eijebong" This reverts commit 9d15aecaf6a08b98d3c47f2d0e644e35341b2520.
<!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="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans">
  <link rel="match" href="reference/widows-orphans-010-ref.html">

  <!--
  Date created: November 26th 2020
  Last modified: December 6th 2020
  -->

  <!--

  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 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: 2;
      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   ^    -->