relayout-out-of-flow-with-border-spacing.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  body { margin: 0 }
  #ref { margin-left: 100px }
  #table { border-spacing: 100px 0 }
  #cell { position: relative }
  #div { position: absolute }
</style>
<p>The two Xs below should be horizontally aligned</p>
<div id="ref">X</div>
<table id="table">
  <td id="cell">
    <div id="div">X</div>
  </td>
</table>
<script>
  test(() => {
    // Force initial layout of the table.
    table.offsetTop;
    // Trigger StyleDidChange() on LayoutTable to cause crbug.com/716006
    table.style.backgroundColor = "white";
    table.offsetTop;
    // Trigger a re-layout which does not update the column positions.
    div.appendChild(document.createTextNode(' '));

    assert_equals(cell.offsetLeft, 100, "Check that cell is offset by border-spacing.");
  }, "Test a re-layout of out-of-flow children of a table cell with border-spacing.");
</script>

chromium/third_party/blink/web_tests/fast/table/relayout-out-of-flow-with-border-spacing.html