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