Add table test to cover the document.write line layout bug.
[WebKit-https.git] / LayoutTests / fast / table / 040.html
1
2 <head>
3 <style>
4 .one {
5   background-color: cyan;
6 }
7
8 .two {
9   background-color: yellow;
10 }
11
12 .three {
13   background-color: lime;
14 }
15
16 .span {
17   background-color: pink;
18 }
19
20 td {
21   height: 20px;
22 }
23
24 </style>
25
26 <script>
27 function dumpWidths(table)
28
29   var cell1 = document.getElementById(table + "-one");
30   var cell2 = document.getElementById(table + "-two");
31   document.write("<p>");
32   document.write("The table width is: " + document.getElementById(table).offsetWidth + "<br>");
33   document.write("Column One is: " + Math.round(100*cell1.offsetWidth/(cell1.offsetWidth+cell2.offsetWidth)) + "%");
34   document.write("<br>");
35   document.write("Column Two is: " + Math.round(100*cell2.offsetWidth/(cell1.offsetWidth+cell2.offsetWidth)) + "%");
36   document.write("</p><hr>");
37 }
38 </script>
39 </head>
40
41 <h1>Fixed Columns, Auto Span, Minwidth Table</h1>
42
43 <table width="1" id="one" cellpadding=0 cellspacing=0>
44 <tr>
45 <td width=100 id="one-one" class="one">
46 <td width=200 id="one-two" class="two">
47 </tr>
48 <tr>
49 <td colspan=2 class="span">
50 <div style="width:100px"></div>
51 </td>
52 </tr>
53 </table>
54
55 <script>
56 dumpWidths("one");
57 </script>
58
59 <table width="1" id="two" cellpadding=0 cellspacing=0>
60 <tr>
61 <td width=100 id="two-one" class="one">
62 <td width=200 id="two-two" class="two">
63 </tr>
64 <tr>
65 <td colspan=2 class="span">
66 <div style="width:600px"></div>
67 </td>
68 </tr>
69 </table>
70
71 <script>
72 dumpWidths("two");
73 </script>
74
75 <table width="1" id="three" cellpadding=0 cellspacing=0>
76 <tr>
77 <td width=100 id="three-one" class="one">Fixed cell in column one with some text.
78 <td width=200 id="three-two" class="two">Fixed cell in column two with a lot more text. Will the ratios be preserved?
79 </tr>
80 <tr>
81 <td colspan=2 class="span">
82 <div style="width:600px"></div>
83 </td>
84 </tr>
85 </table>
86
87 <script>
88 dumpWidths("three");
89 </script>
90
91 <table width="1" id="four" cellpadding=0 cellspacing=0>
92 <tr>
93 <td width=50 id="four-one" class="one"><div style="width:100px"></div>
94 <td width=100 id="four-two" class="two"><div style="width:250px"></div>
95 </tr>
96 <tr>
97 <td colspan=2 class="span">
98 <div style="width:600px"></div>
99 </td>
100 </tr>
101 </table>
102
103 <script>
104 dumpWidths("four");
105 </script>