LayoutTests/fast/table/fixed-table-layout/table-with-percent-width.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <script src="../../../resources/check-layout.js"></script>
 <script>
 function test()
 {
     checkLayout('#table1');
     checkLayout('#table2');
     checkLayout('#table3');
     checkLayout('#table4');
 }
 </script>
 <style>
 td {
     height: 20px;
     padding: 0px;
 }
 table { border-spacing: 0px; }
 #table1, #table3 {
     width: 100%;
     table-layout: fixed;
     border: 1px solid black;
 }
 #table2, #table4 {
     width: 50%;
     table-layout: fixed;
     border: 1px solid black;
 }
 body {
     max-width: 600px;
 }
 </style>
 </head>
 <body onload="test()">
 <div>Test for Bugzilla bug:<a href="https://bugs.webkit.org/show_bug.cgi?id=18153"> 18153</a>  table not aligned in center column and seems shrunk because of float:right (table-layout: fixed and width: 100%).</div>
 <p>The following fixed layout tables, with 100% percent widths, should expand to the full length of their containing blocks.</p>
 <div style="display: inline-block">
     <table id="table1" data-expected-width="600">
         <tr>
             <td style="width:100px;"></td>
             <td style="width:80px;"></td>
             <td style="width:120px;"></td>
             <td style="width:150px;"></td>
         </tr>
     </table>
     <table id="table2" data-expected-width="452">
         <tr>
             <td style="width:100px;"></td>
             <td style="width:80px;"></td>
             <td style="width:120px;"></td>
             <td style="width:150px;"></td>
         </tr>
     </table>
 </div>

 <table><tr><td>
     <table><tr><td>
         <table id="table3" data-expected-width="600">
             <tr><td></td></tr>
         </table>
     </td></tr></table>
 </td></tr></table>
 <table><tr><td>
     <table><tr><td>
         <table id="table4" data-expected-width="300">
             <tr><td></td></tr>
         </table>
     </td></tr></table>
 </td></tr></table>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../../../resources/check-layout.js"></script>
	<script>
	function test()
	{
	checkLayout('#table1');
	checkLayout('#table2');
	checkLayout('#table3');
	checkLayout('#table4');
	}
	</script>
	<style>
	td {
	height: 20px;
	padding: 0px;
	}
	table { border-spacing: 0px; }
	#table1, #table3 {
	width: 100%;
	table-layout: fixed;
	border: 1px solid black;
	}
	#table2, #table4 {
	width: 50%;
	table-layout: fixed;
	border: 1px solid black;
	}
	body {
	max-width: 600px;
	}
	</style>
	</head>
	<body onload="test()">
	<div>Test for Bugzilla bug:<a href="https://bugs.webkit.org/show_bug.cgi?id=18153"> 18153</a> table not aligned in center column and seems shrunk because of float:right (table-layout: fixed and width: 100%).</div>
	<p>The following fixed layout tables, with 100% percent widths, should expand to the full length of their containing blocks.</p>
	<div style="display: inline-block">
	<table id="table1" data-expected-width="600">
	<tr>
	<td style="width:100px;"></td>
	<td style="width:80px;"></td>
	<td style="width:120px;"></td>
	<td style="width:150px;"></td>
	</tr>
	</table>
	<table id="table2" data-expected-width="452">
	<tr>
	<td style="width:100px;"></td>
	<td style="width:80px;"></td>
	<td style="width:120px;"></td>
	<td style="width:150px;"></td>
	</tr>
	</table>
	</div>

	<table><tr><td>
	<table><tr><td>
	<table id="table3" data-expected-width="600">
	<tr><td></td></tr>
	</table>
	</td></tr></table>
	</td></tr></table>
	<table><tr><td>
	<table><tr><td>
	<table id="table4" data-expected-width="300">
	<tr><td></td></tr>
	</table>
	</td></tr></table>
	</td></tr></table>
	</body>
	</html>