<!DOCTYPE html>
<style>
table {
border-collapse: separate;
}
#cell {
width: 200px;
height: 24px;
border: 1px solid red;
vertical-align: baseline;
}
#input {
display: block;
width: 100%;
height: 100%;
border: none;
}
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
runAfterLayoutAndPaint(function() {
var cell = document.getElementById('cell');
var input = document.getElementById('input');
// Baseline of the table cell will change when the input is set a text.
input.value = 'abc';
runAfterLayoutAndPaint(function() {
cell.style.borderColor = 'green';
runAfterLayoutAndPaint(function() {
if (window.testRunner)
testRunner.notifyDone();
});
});
});
</script>
Tests layout and painting of table cell after baseline and border changes.
<table>
<tr>
<td id="cell">
<input id="input">
</td>
</tr>
</table>