LayoutTests/fast/table/fixed-table-layout-toggle-colwidth.html - WebKit - Git at Google

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
     <head>
         <style type="text/css">
             table
             {
                 border-collapse: collapse;
                 table-layout: fixed;
                 width: 200px;
             }
             #cell
             {
                 background: black;
             }
             #div1
             {
                 background: blue;
                 width: 100px;
             }
             #div1, #cell
             {
                 height: 1em;
             }
         </style>
         <script>
             if (window.testRunner) {
                 testRunner.dumpAsText();
                 testRunner.waitUntilDone();
             }
             function log(msg)
             {
                 var console = document.getElementById('console');
                 console.appendChild(document.createTextNode(msg));
                 console.appendChild(document.createElement('br'));
             }
             function toggleWidth()
             {
                 var col = document.getElementById('colgroup').children[0];
                 var oldCellWidth = getComputedStyle(document.getElementById('cell')).width;
                 col.style.width = "100px";
                 var newCellWidth = getComputedStyle(document.getElementById('cell')).width;

                 log("Cell width was " + oldCellWidth);
                 log("Cell width is " + newCellWidth);
                 if (oldCellWidth != newCellWidth)
                     log("PASSED: Cell changed width");
                 else
                     log("FAILED: Cell did not change width");
                 testRunner.notifyDone();
             }
         </script>
     </head>
     <body onload="toggleWidth();">
         <table id="table">
             <colgroup id="colgroup">
                 <col style="width: 50px">
                 <col>
             </colgroup>
             <tr>
                 <td id="cell"></td>
                 <td></td>
            </tr>
         </table>
         <div id="div1"></div>
         <p id="console"></p>
     </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<style type="text/css">
	table
	{
	border-collapse: collapse;
	table-layout: fixed;
	width: 200px;
	}
	#cell
	{
	background: black;
	}
	#div1
	{
	background: blue;
	width: 100px;
	}
	#div1, #cell
	{
	height: 1em;
	}
	</style>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}
	function log(msg)
	{
	var console = document.getElementById('console');
	console.appendChild(document.createTextNode(msg));
	console.appendChild(document.createElement('br'));
	}
	function toggleWidth()
	{
	var col = document.getElementById('colgroup').children[0];
	var oldCellWidth = getComputedStyle(document.getElementById('cell')).width;
	col.style.width = "100px";
	var newCellWidth = getComputedStyle(document.getElementById('cell')).width;

	log("Cell width was " + oldCellWidth);
	log("Cell width is " + newCellWidth);
	if (oldCellWidth != newCellWidth)
	log("PASSED: Cell changed width");
	else
	log("FAILED: Cell did not change width");
	testRunner.notifyDone();
	}
	</script>
	</head>
	<body onload="toggleWidth();">
	<table id="table">
	<colgroup id="colgroup">
	<col style="width: 50px">
	<col>
	</colgroup>
	<tr>
	<td id="cell"></td>
	<td></td>
	</tr>
	</table>
	<div id="div1"></div>
	<p id="console"></p>
	</body>
	</html>