resize-table-width-using-multiple-col-span.html

<!DOCTYPE html>
<style>
    #thecol { width: 200px; }
    #thecol2 { width: 300px; }
    td { height: 25px; }
</style>
<script type="text/javascript">
    onload = function () {
        var col = document.getElementById('thecol');
        var col2 = document.getElementById('thecol2');
        var output = document.getElementById('test-output');
        col.offsetTop;
        col.style.width="100px";
        col2.style.width="200px";
        checkLayout("#td1", output);
        checkLayout("#td2", output);
        checkLayout("#td3", output);
        checkLayout("#td4", output);
        checkLayout("#td5", output);
        checkLayout("#td6", output);
        checkLayout("#td7", output);
        checkLayout("#td8", output);
        checkLayout("#td9", output);
    }
</script>
<script src="../../resources/check-layout.js"></script>
Tests that the width of table cell changes on changing the colgroup width to new width.
<table>
    <colgroup>
        <col id="thecol" span="2" style="background-color:red">
        <col id="thecol2" span="1" style="background-color:blue">
    </colgroup>
    <thead>
        <tr>
            <td id="td1" data-expected-width="100"></td>
            <td id="td2" data-expected-width="100"></td>
            <td id="td3" data-expected-width="200"></td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td id="td4" data-expected-width="100"></td>
            <td id="td5" data-expected-width="100"></td>
            <td id="td6" data-expected-width="200"></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td id="td7" data-expected-width="100"></td>
            <td id="td8" data-expected-width="100"></td>
            <td id="td9" data-expected-width="200"></td>
        </tr>
    </tbody>
</table>
<div id="test-output"></div>
chromium/third_party/blink/web_tests/fast/table/resize-table-width-using-multiple-col-span.html
