<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>