third_party/WebKit/LayoutTests/fast/table/form-with-non-table-display-inside-table-elements.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <style>
   5 table {
   6     background:red;
   7     border-spacing:0;
   8     border-collapse:collapse;
   9     display:none
  10 }
  11
  12 td {
  13     width:148px;
  14     background:green;
  15     height:18px;
  16 }
  17 form {
  18     width:50px;
  19     height:20px;
  20 }
  21 </style>
  22 <script src="../../resources/js-test.js"></script>
  23 <div id="testCases">
  24 <div id="case1">
  25  <p> CASE 1 : Form element inside table.</p>
  26  <table>
  27   <form></form>
  28   <tr>
  29    <td></td>
  30   </tr>
  31  </table>
  32 </div>
  33 <div id="case2">
  34  <p> CASE 2 : Form element inside table section(tbody,thead or tfoot).</p>
  35  <table>
  36   <tbody>
  37    <form></form>
  38    <tr>
  39     <td></td>
  40    </tr>
  41   </tbody>
  42  </table>
  43 </div>
  44 <div id="case3">
  45  <p> CASE 3 : Form element inside table row.</p>
  46  <table>
  47   <tr>
  48     <form></form>
  49     <td></td>
  50   </tr>
  51  </table>
  52 </div>
  53 </div>
  54 <div id="description"></div>
  55 <div id="console"></div>
  56 <script>
  57 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, \
  58 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 \
  59 non table type (Eg. BLOCK, INLINE, etc). However when a table containing form element is cloned, <br>the form element is not properly demoted. \
  60 This results in the creation of an unexpected renderer for the form element.');
  61 debug('Expected: The tables should contain only one row of width 150px and one column of height 20px.<br>');
  62
  63 for(var i = 1; i <=3; i++) {
  64     var container = document.getElementById('case' + i);
  65     clonedTable = container.getElementsByTagName("TABLE")[0].cloneNode(true);
  66     clonedTable.style.display = 'table';
  67     container.appendChild(clonedTable);
  68     shouldBe('clonedTable.getBoundingClientRect().width', '150');
  69     shouldBe('clonedTable.getBoundingClientRect().height', '20');
  70 }
  71
  72 var testCasesContainer = document.getElementById('testCases');
  73 document.body.removeChild(testCasesContainer);
  74 </script>
  75 </body>
  76 </html>