| <!DOCTYPE html> |
| <style> |
| #inner > div { break-inside:avoid; } |
| </style> |
| <p>The word "PASS" should be seen 7 times below.</p> |
| <div id="container" style="position:relative; overflow:hidden; line-height:20px;"> |
| <div id="multicol" style="float:left; columns:3; column-fill:auto; height:70px; text-align:right;"> |
| <div style="width:6em;"> |
| <div id="inner"> |
| <div id="child1">PA</div> |
| <div id="child2">PA</div> |
| <div id="child3">PA</div> |
| <div id="child4">PA</div> |
| <div id="child5">PA</div> |
| <div id="child6">PA</div> |
| <div id="child7">PA</div> |
| </div> |
| </div> |
| </div> |
| <div style="float:left;"> |
| SS<br> |
| SS<br> |
| SS<br> |
| SS<br> |
| SS<br> |
| SS<br> |
| SS<br> |
| </div> |
| </div> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script> |
| test(() => { |
| // Make the content unfragmented. That should clear all pagination |
| // struts that were needed while we were fragmented. |
| document.body.offsetTop; |
| document.getElementById("multicol").style.columns = "auto"; |
| |
| assert_equals(document.getElementById("child1").offsetTop, 0); |
| assert_equals(document.getElementById("child2").offsetTop, 20); |
| assert_equals(document.getElementById("child3").offsetTop, 40); |
| assert_equals(document.getElementById("child4").offsetTop, 60); |
| assert_equals(document.getElementById("child5").offsetTop, 80); |
| assert_equals(document.getElementById("child6").offsetTop, 100); |
| assert_equals(document.getElementById("child7").offsetTop, 120); |
| }, "No pagination struts should be left behind."); |
| </script> |
