76 lines
2.8 KiB
HTML
76 lines
2.8 KiB
HTML
<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>
|