| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | |
| 3 #inner > div { break-inside:avoid; } | |
| 4 </style> | |
| 5 <p>The word "PASS" should be seen 7 times below.</p> | 2 <p>The word "PASS" should be seen 7 times below.</p> |
| 6 <div id="container" style="position:relative; overflow:hidden; line-height:20px;
"> | 3 <div id="container" style="position:relative; overflow:hidden; line-height:20px;
"> |
| 7 <div id="multicol" style="float:left; columns:3; column-fill:auto; height:70
px; text-align:right;"> | 4 <div id="multicol" style="float:left; columns:3; column-fill:auto; height:70
px; orphans:1; widows:1; text-align:right;"> |
| 8 <div style="width:6em;"> | 5 <div style="width:6em;"> |
| 9 <div id="inner"> | 6 <div id="inner"> |
| 10 <div id="child1">PA</div> | 7 PA<br> |
| 11 <div id="child2">PA</div> | 8 PA<br> |
| 12 <div id="child3">PA</div> | 9 PA<br> |
| 13 <div id="child4">PA</div> | 10 PA<br> |
| 14 <div id="child5">PA</div> | 11 PA<br> |
| 15 <div id="child6">PA</div> | 12 PA<br> |
| 16 <div id="child7">PA</div> | 13 PA<br> |
| 17 </div> | 14 </div> |
| 18 </div> | 15 </div> |
| 19 </div> | 16 </div> |
| 20 <div style="float:left;"> | 17 <div style="float:left;"> |
| 21 SS<br> | 18 SS<br> |
| 22 SS<br> | 19 SS<br> |
| 23 SS<br> | 20 SS<br> |
| 24 SS<br> | 21 SS<br> |
| 25 SS<br> | 22 SS<br> |
| 26 SS<br> | 23 SS<br> |
| 27 SS<br> | 24 SS<br> |
| 28 </div> | 25 </div> |
| 29 </div> | 26 </div> |
| 30 <script src="../resources/testharness.js"></script> | 27 <script src="../resources/testharness.js"></script> |
| 31 <script src="../resources/testharnessreport.js"></script> | 28 <script src="../resources/testharnessreport.js"></script> |
| 32 <script> | 29 <script> |
| 33 test(() => { | 30 test(() => { |
| 34 // Make the content unfragmented. That should clear all pagination | 31 // Make the content unfragmented. That should clear all pagination |
| 35 // struts that were needed while we were fragmented. | 32 // struts that were needed while we were fragmented. |
| 36 document.body.offsetTop; | 33 document.body.offsetTop; |
| 37 document.getElementById("multicol").style.columns = "auto"; | 34 document.getElementById("multicol").style.columns = "auto"; |
| 38 | 35 |
| 39 assert_equals(document.getElementById("child1").offsetTop, 0); | 36 assert_equals(document.getElementById("inner").offsetHeight, 140); |
| 40 assert_equals(document.getElementById("child2").offsetTop, 20); | |
| 41 assert_equals(document.getElementById("child3").offsetTop, 40); | |
| 42 assert_equals(document.getElementById("child4").offsetTop, 60); | |
| 43 assert_equals(document.getElementById("child5").offsetTop, 80); | |
| 44 assert_equals(document.getElementById("child6").offsetTop, 100); | |
| 45 assert_equals(document.getElementById("child7").offsetTop, 120); | |
| 46 }, "No pagination struts should be left behind."); | 37 }, "No pagination struts should be left behind."); |
| 47 </script> | 38 </script> |
| OLD | NEW |