| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| </head> |
| <body style="margin:0; border:0; padding:0;"> |
| |
| <div style="width:500px;height=100px"> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" |
| width="100px" height="100px"> |
| <rect id="r1" x="20" y="30" width="40" height="50" fill="blue" /> |
| </svg><svg xmlns="http://www.w3.org/2000/svg" version="1.1" |
| width="200px" height="100px" viewBox="0 0 50 200" |
| preserveAspectRatio="none"> |
| <rect id="r2" x="20" y="30" width="40" height="50" fill="green" /> |
| </svg><svg xmlns="http://www.w3.org/2000/svg" version="1.1" |
| width="200px" height="100px"> |
| <svg x="0" y="0" width="100px" height="100px"> |
| <rect id="r3" x="0" y="0" width="210px" height="50px" fill="yellow" overflow="hidden" /> |
| <rect id="r4" x="0" y="50px" width="210px" height="60px" fill="orange" overflow="visible" /> |
| </svg> |
| </svg> |
| </div> |
| |
| <div id="description"></div> |
| <div id="console"></div> |
| |
| <script> |
| function executeTest() { |
| description("This test checks getBoundingClientRect() on rectangles"); |
| |
| debug("Checking a rectangle of absolute size at absolute coordinates:"); |
| r1 = document.getElementById("r1").getBoundingClientRect(); |
| shouldBeEqualToString('r1.left.toFixed(2)', '20.00'); |
| shouldBeEqualToString('r1.top.toFixed(2)', '30.00'); |
| shouldBeEqualToString('r1.width.toFixed(2)', '40.00'); |
| shouldBeEqualToString('r1.height.toFixed(2)', '50.00'); |
| shouldBeEqualToString('r1.right.toFixed(2)', '60.00'); |
| shouldBeEqualToString('r1.bottom.toFixed(2)', '80.00'); |
| debug(""); |
| |
| debug("Checking a resized rectangle at relative coordinates:"); |
| r2 = document.getElementById("r2").getBoundingClientRect(); |
| shouldBeEqualToString('r2.left.toFixed(2)', '180.00'); |
| shouldBeEqualToString('r2.top.toFixed(2)', '15.00'); |
| shouldBeEqualToString('r2.width.toFixed(2)', '160.00'); |
| shouldBeEqualToString('r2.height.toFixed(2)', '25.00'); |
| shouldBeEqualToString('r2.right.toFixed(2)', '340.00'); |
| shouldBeEqualToString('r2.bottom.toFixed(2)', '40.00'); |
| debug(""); |
| |
| debug("Checking rectangles with overflow:"); |
| r3 = document.getElementById("r3").getBoundingClientRect(); |
| shouldBeEqualToString('r3.left.toFixed(2)', '300.00'); |
| shouldBeEqualToString('r3.top.toFixed(2)', '0.00'); |
| shouldBeEqualToString('r3.width.toFixed(2)', '210.00'); |
| shouldBeEqualToString('r3.height.toFixed(2)', '50.00'); |
| shouldBeEqualToString('r3.right.toFixed(2)', '510.00'); |
| shouldBeEqualToString('r3.bottom.toFixed(2)', '50.00'); |
| |
| r4 = document.getElementById("r4").getBoundingClientRect(); |
| shouldBeEqualToString('r4.left.toFixed(2)', '300.00'); |
| shouldBeEqualToString('r4.top.toFixed(2)', '50.00'); |
| shouldBeEqualToString('r4.width.toFixed(2)', '210.00'); |
| shouldBeEqualToString('r4.height.toFixed(2)', '60.00'); |
| shouldBeEqualToString('r4.right.toFixed(2)', '510.00'); |
| shouldBeEqualToString('r4.bottom.toFixed(2)', '110.00'); |
| debug(""); |
| } |
| </script> |
| |
| <script src="../../../resources/js-test.js"></script> |
| <script>var zoomCount = 2;</script> |
| <script src="../../../resources/run-after-layout-and-paint.js"></script> |
| <script src="../resources/testPageZoom.js"></script> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| window.postZoomCallback = executeTest; |
| runAfterLayoutAndPaint(repaintTest); |
| } else { |
| debug("This test only works in DRT."); |
| } |
| </script> |
| |
| </body> |
| </html> |
