LayoutTests/fast/sub-pixel/table-cells-with-padding-do-not-wrap.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
     <head>
         <style>
             #cell {
                 font: menu;
                 background-color: skyblue;
                 padding-left: .73em;
                 white-space: nowrap;
             }
             #display-cell {
                 font: menu;
                 background-color: green;
                 display: table-cell;
                 padding-left: .73em;
                 white-space: nowrap;
             }
         </style>
         <script src="../../resources/js-test-pre.js"></script>
     </head>
     <body>
         <table>
             <tr>
                 <td id="cell">Should not wrap</td>
             </tr>
         </table>
         <div id="display-cell">Should not wrap</div>

         <script>

             function getElementHeight(element)
             {
                 var rect = element.getBoundingClientRect();;
                 return rect.bottom - rect.top;
             }

             function testHeight(id, description)
             {
                 var cellElement = document.getElementById(id);
                 var expectedHeight = getElementHeight(cellElement);
                 cellElement.style.whiteSpace = 'normal';
                 if (getElementHeight(cellElement) == expectedHeight)
                     testPassed(description + ' does not wrap.');
                 else
                     testFailed(description + ' wrapps.');
             }

             testHeight('cell', 'table cell');
             testHeight('display-cell', 'display: table-cell');


         </script>
   </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#cell {
	font: menu;
	background-color: skyblue;
	padding-left: .73em;
	white-space: nowrap;
	}
	#display-cell {
	font: menu;
	background-color: green;
	display: table-cell;
	padding-left: .73em;
	white-space: nowrap;
	}
	</style>
	<script src="../../resources/js-test-pre.js"></script>
	</head>
	<body>
	<table>
	<tr>
	<td id="cell">Should not wrap</td>
	</tr>
	</table>
	<div id="display-cell">Should not wrap</div>

	<script>

	function getElementHeight(element)
	{
	var rect = element.getBoundingClientRect();;
	return rect.bottom - rect.top;
	}

	function testHeight(id, description)
	{
	var cellElement = document.getElementById(id);
	var expectedHeight = getElementHeight(cellElement);
	cellElement.style.whiteSpace = 'normal';
	if (getElementHeight(cellElement) == expectedHeight)
	testPassed(description + ' does not wrap.');
	else
	testFailed(description + ' wrapps.');
	}

	testHeight('cell', 'table cell');
	testHeight('display-cell', 'display: table-cell');


	</script>
	</body>
	</html>