<!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.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('clonedTable.getBoundingClientRect().width', '150'); shouldBe('clonedTable.getBoundingClientRect().height', '20'); } var testCasesContainer = document.getElementById('testCases'); document.body.removeChild(testCasesContainer); </script> </body> </html>