widows-orphans-005.html (1947B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-break/#widows-orphans"> 4 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1022348"> 5 <meta name="assert" content="Here's a multicol container with four lines, and a widows requirement of 2. We cannot honor that requirement, because the third line alone is too tall to fit in a column."> 6 <style> 7 .multicol { 8 position: relative; 9 columns: 3; 10 column-fill: auto; 11 column-gap: 10px; 12 width: 320px; 13 height: 200px; 14 orphans: 1; 15 widows: 2; 16 column-rule: 1px dotted; 17 line-height: 20px; 18 } 19 .ibk { 20 display: inline-block; 21 width: 70px; 22 } 23 </style> 24 <p> 25 There should be three columns below. In the first column there should be a 26 black rectangle and a yellow rectangle. In the second column there should be a 27 cyan rectangle. In the third column there should be a hotpink rectangle.</p> 28 <div class="multicol"> 29 <div class="ibk" style="height:50px; background:black;" data-offset-x="0"></div><br> 30 <div class="ibk" style="height:50px; background:yellow;" data-offset-x="0"></div><br> 31 <div class="ibk" style="height:285px;" data-offset-x="110"> 32 <!-- The implementations differ here. Gecko lets the inline-block overflow 33 the column, while Blink slices the inline-block and puts what doesn't 34 fit in the second column into the third. Blink has a bug, but that's 35 not the bug we want to test here. --> 36 <div style="height:100px; background:cyan;"></div> 37 </div><br> 38 <div class="ibk" style="height:10px; background:hotpink;" data-offset-x="220"></div><br> 39 </div> 40 <script src="/resources/testharness.js"></script> 41 <script src="/resources/testharnessreport.js"></script> 42 <script src="/resources/check-layout-th.js"></script> 43 <script> 44 checkLayout("[data-offset-x]"); 45 </script>