blob: 4ff9839087f173a04dd65df21404ee44c349d721 (
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
|
<!DOCTYPE html>
<style>
#thecol { width: 200px; }
#thecol2 { width: 300px; }
td { height: 25px; }
</style>
<script type="text/javascript">
onload = function () {
var col = document.getElementById('thecol');
var col2 = document.getElementById('thecol2');
var output = document.getElementById('test-output');
col.offsetTop;
col.style.width="100px";
col2.style.width="200px";
checkLayout("#td1", output);
checkLayout("#td2", output);
checkLayout("#td3", output);
checkLayout("#td4", output);
checkLayout("#td5", output);
checkLayout("#td6", output);
checkLayout("#td7", output);
checkLayout("#td8", output);
checkLayout("#td9", output);
}
</script>
<script src="../../resources/check-layout.js"></script>
Tests that the width of table cell changes on changing the colgroup width to new width.
<table>
<colgroup>
<col id="thecol" span="2" style="background-color:red">
<col id="thecol2" span="1" style="background-color:blue">
</colgroup>
<thead>
<tr>
<td id="td1" data-expected-width="100"></td>
<td id="td2" data-expected-width="100"></td>
<td id="td3" data-expected-width="200"></td>
</tr>
</thead>
<tfoot>
<tr>
<td id="td4" data-expected-width="100"></td>
<td id="td5" data-expected-width="100"></td>
<td id="td6" data-expected-width="200"></td>
</tr>
</tfoot>
<tbody>
<tr>
<td id="td7" data-expected-width="100"></td>
<td id="td8" data-expected-width="100"></td>
<td id="td9" data-expected-width="200"></td>
</tr>
</tbody>
</table>
<div id="test-output"></div>
|
