add-cell-with-large-border.html | Explore in Territory

<!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 addMiddleCell() {
        var cellToAdd = document.createElement("td");
        cellToAdd.style.border = "18px solid lightblue";
        theRow.insertBefore(cellToAdd, rightCell);
        checkLayout("table");
    }
    runAfterLayoutAndPaint(addMiddleCell, true);
</script>
<p>Adding a middle cell with a large border should make the table expand to accommodate it. The outer two cells' widths should also take on half of the new large border's width.</p>
<table style="border-collapse:collapse" data-expected-width=190>
  <tr id="theRow">
    <td style="border:4px solid black" data-expected-width=61></td>
    <td data-expected-width=59 id="rightCell"></td>
  </tr>
</table>

chromium/third_party/blink/web_tests/fast/table/add-cell-with-large-border.html