change-table-border-width.html | Explore in Territory

<!doctype html>
<style>
    td {
        width: 50px;
        height: 50px;
        padding: 0px;
    }
</style>
<script src="../../resources/check-layout.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script type="text/javascript">
    function shrinkTableBorder() {
        theTable.style.borderWidth = "4px";
        checkLayout("div");
    }
    runAfterLayoutAndPaint(shrinkTableBorder, true);
</script>
<p>Changing a collapsed border's width should change the width of the table and the width of a shrink-to-fit containing block.</p>
<p>There should be a square with a 4px inner blue border and a 1px outer black border.</p>
<p>Firefox 52.0a1 (2016-09-20) fails this, so it should probably be upstreamed, except it uses chrome-specific `runAfterLayoutAndPaint`.</p>
<div style="float:left; border: 1px solid black" data-expected-width=60>
    <table id=theTable style="border:18px solid lightblue; border-collapse:collapse" data-expected-width=58 data-expected-height=58>
        <tr>
            <td></td>
        </tr>
    </table>
</div>

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