Col width is not honored when dynamically updated and it would not make table narrower

LayoutTests/fast/table/resize-table-width-using-multiple-col-span.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>