summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/table/form-with-non-table-display-inside-table-elements.html
blob: c2df4ab0c4d7c8f8aaf6a080c9f3e4425f9e0b35 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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>