<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=800">
<style>
body {
margin: 0;
overflow-y: hidden;
font-size: 16px;
}
#description {
overflow: clip;
width: 600px;
height: 3em;
}
table {
outline: 1px solid black;
margin: 1px;
border-collapse: collapse;
}
td {
background-color: honeydew;
border: 1px dotted darkgreen;
}
</style>
<script src="../resources/autosizingTest.js"></script>
</head>
<body>
<div id="description">
Table autosizing tests - table-with-inline-block.html<br/>
This test passes if there is not extra space in the pink boxes.
</div>
<table>
<tr>
<td>
Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize
<b style="display: inline-block; background-color: pink; font-size: 16px;">wrapped text</b>
Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize Autosize
</td>
</tr>
</table>
<table>
<tr>
<td>
Autosize<br/>
<b style="display: inline-block; background-color: pink; font-size: 16px;">Wrapped text</b><br/>
Autosize<br/>Autosize<br/>Autosize<br/>Autosize<br/>Autosize<br/>Autosize<br/>Autosize<br/>Autosize<br/>
Autosize<br/>Autosize<br/>Autosize<br/>Autosize<br/>Autosize<br/>Autosize<br/>Autosize<br/>Autosize<br/>
</td>
</tr>
</table>
</body>
</html>