| <!DOCTYPE html> |
| <p>Below there should be a black square surrounded by a rather thick |
| (10px wide) hotpink border on all sides.</p> |
| <div style="columns:2; column-fill:auto; height:300px;"> |
| <div style="height:10px;"></div> |
| <table id="table" style="border-spacing:10px; width:120px; background:hotpink;"> |
| <thead style="break-inside:avoid;"> |
| <tr> |
| <td id="cell" style="padding:0;"> |
| <div id="pete" style="width:99px; height:100px; background:black;"></div> |
| </td> |
| </tr> |
| </thead> |
| </table> |
| </div> |
| <script> |
| </script> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script> |
| test(() => { |
| document.body.offsetTop; |
| document.getElementById("pete").style.width = "100px"; |
| assert_equals(document.getElementById("cell").offsetTop, 10); |
| assert_equals(document.getElementById("table").offsetHeight, 120); |
| }, "THEAD near the top of the first fragmentainer"); |
| </script> |
