widows-orphans-019.html (1337B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> 4 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1486252"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <style> 7 .multicol { 8 width: 100px; 9 columns: 4; 10 column-fill: auto; 11 gap: 0; 12 height: 100px; 13 line-height:25px; 14 orphans: 4; 15 widows: 4; 16 background: red; 17 } 18 .float { 19 float: left; 20 width: 20%; 21 height: 400px; 22 background: green; 23 } 24 .ib { 25 display: inline-block; 26 vertical-align: top; 27 width: 40%; 28 height: 25px; 29 background: green; 30 } 31 </style> 32 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 33 <div class="multicol"> 34 <div class="float"></div> 35 <div class="float"></div> 36 <div class="float"></div> 37 <div class="ib"></div><br> 38 <div class="ib"></div><br> 39 <div class="ib"></div><br> 40 <div class="ib"></div><br> 41 <div class="ib"></div><br> 42 <div class="ib"></div><br> 43 <div class="ib"></div><br> 44 <div class="ib"></div><br> 45 <div class="ib"></div><br> 46 <div class="ib"></div><br> 47 <div class="ib"></div><br> 48 <div class="ib"></div><br> 49 <div class="ib" style="height:100px;"></div><br> 50 </div>