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
77
78
79
80
81
82
83
84
85
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=414190
-->
<head>
<title>Test for Bug 414190</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=414190">Mozilla Bug 414190</a>
<p id="display"></p>
<table id="table" border="0" cellspacing="0" cellpadding="0"
style="width:100px; border:10px solid silver;">
<tr><td id="cell" style="height:100px;"></td></tr>
<caption id="caption" style="caption-side:bottom; width:50px; height:70px; background:yellow;"></caption>
</table>
<div id="content" style="display: none">
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
function isEqualRect(r1, r2, r1border, s) {
is(r1.left + r1border, r2.left, s + " (left)");
is(r1.right - r1border, r2.right, s + " (right)");
is(r1.top + r1border, r2.top, s + " (top)");
is(r1.bottom - r1border, r2.bottom, s + " (bottom)");
}
var table = document.getElementById("table");
var cell = document.getElementById("cell");
var caption = document.getElementById("caption");
var tableRects = table.getClientRects();
var tableBoundingRect = table.getBoundingClientRect();
var cellBoundingRect = cell.getBoundingClientRect();
var captionBoundingRect = caption.getBoundingClientRect();
is(tableRects.length, 2, "Table should have rects for body and caption");
isEqualRect(tableRects[0], cellBoundingRect, 10,
"Table first rect should be cell rect");
isEqualRect(tableRects[1], captionBoundingRect, 0,
"Table second rect should be caption rect");
is(cellBoundingRect.right - cellBoundingRect.left, 80, "Cell incorrect width");
is(cellBoundingRect.bottom - cellBoundingRect.top, 100, "Cell incorrect height");
is(captionBoundingRect.right - captionBoundingRect.left, 50, "Caption incorrect width");
is(captionBoundingRect.bottom - captionBoundingRect.top, 70, "Caption incorrect height");
is(captionBoundingRect.top, cellBoundingRect.bottom + 10, "Discontiguous vertical geometry");
is(tableBoundingRect.top, cellBoundingRect.top - 10, "Table top error");
is(tableBoundingRect.left, cellBoundingRect.left - 10, "Table left error");
is(tableBoundingRect.bottom, captionBoundingRect.bottom, "Table bottom error");
is(tableBoundingRect.right, cellBoundingRect.right + 10, "Table right error");
caption.style.captionSide = "left";
tableRects = table.getClientRects();
tableBoundingRect = table.getBoundingClientRect();
cellBoundingRect = cell.getBoundingClientRect();
captionBoundingRect = caption.getBoundingClientRect();
is(tableRects.length, 2, "Table should have rects for body and caption");
isEqualRect(tableRects[0], cellBoundingRect, 10,
"Table first rect should be cell rect plus border");
isEqualRect(tableRects[1], captionBoundingRect, 0,
"Table second rect should be caption rect");
is(cellBoundingRect.right - cellBoundingRect.left, 80, "Cell incorrect width");
is(cellBoundingRect.bottom - cellBoundingRect.top, 100, "Cell incorrect height");
is(captionBoundingRect.right - captionBoundingRect.left, 50, "Caption incorrect width");
is(captionBoundingRect.bottom - captionBoundingRect.top, 70, "Caption incorrect height");
is(captionBoundingRect.right + 10, cellBoundingRect.left, "Discontiguous horizontal geometry");
is(tableBoundingRect.top, cellBoundingRect.top - 10, "Table top error");
is(tableBoundingRect.left, captionBoundingRect.left, "Table left error");
is(tableBoundingRect.bottom, cellBoundingRect.bottom + 10, "Table bottom error");
is(tableBoundingRect.right, cellBoundingRect.right + 10, "Table right error");
</script>
</pre>
</body>
</html>
|
