78 lines
2.0 KiB
HTML
78 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<style>
|
|
table {
|
|
background:red;
|
|
border-spacing:0;
|
|
border-collapse:collapse;
|
|
display:none
|
|
}
|
|
|
|
td {
|
|
width:148px;
|
|
background:green;
|
|
height:18px;
|
|
}
|
|
form {
|
|
width:50px;
|
|
height:20px;
|
|
}
|
|
</style>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<div id="testCases">
|
|
<div id="case1">
|
|
<p> CASE 1 : Form element inside table.</p>
|
|
<table>
|
|
<form></form>
|
|
<tr>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="case2">
|
|
<p> CASE 2 : Form element inside table section(tbody,thead or tfoot).</p>
|
|
<table>
|
|
<tbody>
|
|
<form></form>
|
|
<tr>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="case3">
|
|
<p> CASE 3 : Form element inside table row.</p>
|
|
<table>
|
|
<tr>
|
|
<form></form>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="description"></div>
|
|
<div id="console"></div>
|
|
<script>
|
|
description('Testcase for bug <a href="http://webkit.org/b/86746">http://webkit.org/b/86746</a>. A form element whose immediate parent is either a table, \
|
|
table section or a table row is considered as a demoted element. <br>Renderer for such an element is not created when its display is to a \
|
|
non table type (Eg. BLOCK, INLINE, etc). However when a table containing form element is cloned, <br>the form element is not properly demoted. \
|
|
This results in the creation of an unexpected renderer for the form element.');
|
|
debug('Expected: The tables should contain only one row of width 150px and one column of height 20px.<br>');
|
|
|
|
for(var i = 1; i <=3; i++) {
|
|
var container = document.getElementById('case' + i);
|
|
clonedTable = container.getElementsByTagName("TABLE")[0].cloneNode(true);
|
|
clonedTable.style.display = 'table';
|
|
container.appendChild(clonedTable);
|
|
shouldBe('Math.round(clonedTable.getBoundingClientRect().width)', '150');
|
|
shouldBe('Math.round(clonedTable.getBoundingClientRect().height)', '20');
|
|
}
|
|
|
|
var testCasesContainer = document.getElementById('testCases');
|
|
document.body.removeChild(testCasesContainer);
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|