<!doctype html>
<style>
    td {
        width: 50px;
        height: 50px;
        padding: 0px;
        background: lime;
    }
</style>
<script src="../../resources/check-layout.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script type="text/javascript">
    function removeMiddleCell() {
        theRow.removeChild(cellToRemove);
        checkLayout("table");
    }
    runAfterLayoutAndPaint(removeMiddleCell, true);
</script>
<p>After removing the middle cell with the red border the 2 remaining cells' widths should depend on sharing the black border, and not have stale widths from sharing the red border.</p>
<table style="border-collapse:collapse" data-expected-width=108>
  <tr id="theRow">
    <td style="border:4px solid black" data-expected-width=54></td>
    <td style="border:18px solid red" id="cellToRemove"></td>
    <td data-expected-width=52></td>
  </tr>
</table>