change-cell-border-width.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 shrinkCellBorder() {
        middleCell.style.borderWidth = "4px";
        checkLayout("table");
    }
    runAfterLayoutAndPaint(shrinkCellBorder, true);
</script>
<p>Changing a cell's collapsed border's width should change the width of the sibling cells and the table.</p>
<p>There should be 3 squares. Outer two are lime, middle one is blue with a lightblue border.</p>
<p>Firefox 50.0a1 (nightly 2016-07-19) fails this, so it should probably be upstreamed, except it uses chrome-specific `runAfterLayoutAndPaint`.</p>
<table style="border-collapse:collapse" data-expected-width=158 data-expected-height=58>
  <tr>
    <td data-expected-width=52></td>
    <td style="background:blue; border:18px solid lightblue" id="middleCell" data-expected-width=54></td>
    <td data-expected-width=52></td>
  </tr>
</table>

chromium/third_party/blink/web_tests/fast/table/change-cell-border-width.html