testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-022.html

   1 <!DOCTYPE html>
   2 <title>
   3   Multi-line row flex fragmentation with break-before. A forced break should
   4   trump break-before:avoid and break-after:avoid.
   5 </title>
   6 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
   7 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
   8 <style>
   9   #flex {
  10     display: flex;
  11     flex-wrap: wrap;
  12   }
  13   #flex > div {
  14     background: green;
  15     width: 50px;
  16   }
  17 </style>
  18 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
  19 <div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;">
  20   <div style="position: absolute; height: 20px; width: 50px; background: green; top: 80px;"></div>
  21   <div id="flex">
  22     <div style="height: 80px; break-after: avoid;"></div>
  23     <div style="width: 25px; break-before: avoid;"></div>
  24     <div style="height: 100px; width: 25px;">
  25       <div>
  26         <div style="break-before: column;"></div>
  27       </div>
  28     </div>
  29   </div>
  30 </div>