blob: 56e669683911df161988594e46d45b10fdbad17d (
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
|
<head>
<script type="text/javascript">
function rectsShouldBeEqual(baseline, other, outputElt)
{
if (baseline.left != other.left ||
baseline.top != other.top ||
baseline.right != other.right ||
baseline.bottom != other.bottom)
outputElt.innerHTML = '<span style="color:red;"><b>FAIL<BR></b></span>' +
"left should be " + baseline.left + " but is " + other.left + "<BR>" +
"top should be " + baseline.top + " but is " + other.top + "<BR>" +
"right should be " + baseline.right + " but is " + other.right + "<BR>" +
"bottom should be " + baseline.bottom + " but is " + other.bottom;
else
outputElt.innerHTML = '<span style="color:green;"><b>PASS</b></span>';
}
function testGetClientBoundingRect()
{
var baseline = document.getElementById("baseline1");
var moveme = document.getElementById("moveme1");
var bounds = baseline.getBoundingClientRect();
moveme.style.left = bounds.left;
moveme.style.top = bounds.top;
moveme.style.width = bounds.right - bounds.left;
moveme.style.height = bounds.bottom - bounds.top;
var newBounds = moveme.getBoundingClientRect();
rectsShouldBeEqual(bounds, newBounds, document.getElementById("results1"));
}
function testGetClientRects()
{
var baseline = document.getElementById("baseline2");
var moveme = document.getElementById("moveme2");
var boundsList = baseline.getClientRects();
moveme.style.left = boundsList[0].left;
moveme.style.top = boundsList[0].top;
moveme.style.width = boundsList[0].right - boundsList[0].left;
moveme.style.height = boundsList[0].bottom - boundsList[0].top;
var newBoundList = moveme.getClientRects();
rectsShouldBeEqual(boundsList[0], newBoundList[0], document.getElementById("results2"));
}
function runTest()
{
document.body.style.zoom = "0.9";
testGetClientBoundingRect();
testGetClientRects();
}
</script>
</head>
<body onload="runTest();">
<p>Tests that these functions account for full page zoom.<br>There should be no red visible.</p>
<table width="100%"><tr><td width="200px">getClientBoundingRect():
<div id="baseline1" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:red;"></div>
<div id="moveme1" style="position:absolute; left:0px; top:0px; width:50px; height:50px; background-color:green;"></div>
<div id="results1" style="position:absolute; left:10px; top:220px">...</div>
</td><td>getClientRects():
<div id="baseline2" style="position:absolute; left:300px; top:100px; width:100px; height:100px; background-color:red;"></div>
<div id="moveme2" style="position:absolute; left:0px; top:0px; width:50px; height:50px; background-color:green;"></div>
<div id="results2" style="position:absolute; left:220px; top:220px">...</div>
</td>
</body>
|
