| <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <head> |
| <style type="text/css"> |
| body { |
| margin:0px; |
| border:0px; |
| padding:0px; |
| } |
| text { |
| font: 12px Ahem; |
| } |
| #div2, #svg2 { |
| zoom:200%; |
| } |
| #div3, #svg3 { |
| zoom:50%; |
| } |
| </style> |
| </head> |
| <body onload="runRepaintTest()"> |
| |
| <div id="div1" style="width:100px;height:50px;background-color:gray;"></div> |
| <div id="div2" style="width:100px;height:50px;background-color:green;"></div> |
| <div id="div3" style="width:200px;height:100px;background-color:blue;"></div> |
| <div style="width:600px;height=100px;"> |
| <svg id="svg1" xmlns="http://www.w3.org/2000/svg" |
| width="150px" height="50px" viewBox="0 0 150 100" |
| preserveAspectRatio="none"> |
| <rect id="rect1" x="0" y="0" width="100px" height="100px" fill="gray" /> |
| <image id="image1" x="100px" y="0" width="50px" height="50px" xlink:href="../../W3C-SVG-1.1/resources/magnify.png" /> |
| <text id="text1" x="100px" y="75px">Test</text> |
| </svg><svg id="svg2" xmlns="http://www.w3.org/2000/svg" |
| width="150px" height="50px" viewBox="0 0 150 100" |
| preserveAspectRatio="none"> |
| <rect id="rect2" x="0" y="0" width="100px" height="100px" fill="green" /> |
| <image id="image2" x="100px" y="0" width="50px" height="50px" xlink:href="../../W3C-SVG-1.1/resources/magnify.png" /> |
| <text id="text2" x="100px" y="75px">Test</text> |
| </svg><svg id="svg3" xmlns="http://www.w3.org/2000/svg" |
| width="300px" height="100px" viewBox="0 0 150 100" |
| preserveAspectRatio="none"> |
| <rect id="rect3" x="0" y="0" width="100px" height="100px" fill="blue" /> |
| <image id="image3" x="100px" y="0" width="50px" height="50px" xlink:href="../../W3C-SVG-1.1/resources/magnify.png" /> |
| <text id="text3" x="100px" y="75px">Test</text> |
| </svg> |
| </div> |
| |
| <div id="description"></div> |
| <div id="console"></div> |
| |
| <script> |
| function executeTest() { |
| description("This test checks getBoundingClientRect() on zoomed HTML and SVG elements"); |
| |
| debug("Gray rectangles: 100x50"); |
| debug("Green rectangles: 100x50, zoom=200%"); |
| debug("Blue rectangles: 200x100, zoom=50%"); |
| debug(""); |
| |
| debug("Checking HTML elements:"); |
| debug(""); |
| |
| div1 = document.getElementById("div1").getBoundingClientRect(); |
| shouldBeEqualToString('div1.left.toFixed(2)', '0.00'); |
| shouldBeEqualToString('div1.top.toFixed(2)', '0.00'); |
| shouldBeEqualToString('div1.width.toFixed(2)', '100.00'); |
| shouldBeEqualToString('div1.height.toFixed(2)', '50.00'); |
| shouldBeEqualToString('div1.right.toFixed(2)', '100.00'); |
| shouldBeEqualToString('div1.bottom.toFixed(2)', '50.00'); |
| debug(""); |
| |
| div2 = document.getElementById("div2").getBoundingClientRect(); |
| shouldBeEqualToString('div2.left.toFixed(2)', '0.00'); |
| shouldBeEqualToString('div2.top.toFixed(2)', '25.00'); |
| shouldBeEqualToString('div2.width.toFixed(2)', '100.00'); |
| shouldBeEqualToString('div2.height.toFixed(2)', '50.00'); |
| shouldBeEqualToString('div2.right.toFixed(2)', '100.00'); |
| shouldBeEqualToString('div2.bottom.toFixed(2)', '75.00'); |
| debug(""); |
| |
| div3 = document.getElementById("div3").getBoundingClientRect(); |
| shouldBeEqualToString('div3.left.toFixed(2)', '0.00'); |
| shouldBeEqualToString('div3.top.toFixed(2)', '300.00'); |
| shouldBeEqualToString('div3.width.toFixed(2)', '200.00'); |
| shouldBeEqualToString('div3.height.toFixed(2)', '100.00'); |
| shouldBeEqualToString('div3.right.toFixed(2)', '200.00'); |
| shouldBeEqualToString('div3.bottom.toFixed(2)', '400.00'); |
| debug(""); |
| |
| debug("Checking SVG elements:"); |
| debug(""); |
| |
| svg1 = document.getElementById("svg1").getBoundingClientRect(); |
| shouldBeEqualToString('svg1.left.toFixed(2)', '0.00'); |
| shouldBeEqualToString('svg1.top.toFixed(2)', '250.00'); |
| shouldBeEqualToString('svg1.width.toFixed(2)', '150.00'); |
| shouldBeEqualToString('svg1.height.toFixed(2)', '50.00'); |
| shouldBeEqualToString('svg1.right.toFixed(2)', '150.00'); |
| shouldBeEqualToString('svg1.bottom.toFixed(2)', '300.00'); |
| rect1 = document.getElementById("rect1").getBoundingClientRect(); |
| shouldBeEqualToString('rect1.left.toFixed(2)', '0.00'); |
| shouldBeEqualToString('rect1.top.toFixed(2)', '250.00'); |
| shouldBeEqualToString('rect1.width.toFixed(2)', '100.00'); |
| shouldBeEqualToString('rect1.height.toFixed(2)', '50.00'); |
| shouldBeEqualToString('rect1.right.toFixed(2)', '100.00'); |
| shouldBeEqualToString('rect1.bottom.toFixed(2)', '300.00'); |
| image1 = document.getElementById("image1").getBoundingClientRect(); |
| shouldBeEqualToString('image1.left.toFixed(2)', '100.00'); |
| shouldBeEqualToString('image1.top.toFixed(2)', '250.00'); |
| shouldBeEqualToString('image1.width.toFixed(2)', '50.00'); |
| shouldBeEqualToString('image1.height.toFixed(2)', '25.00'); |
| shouldBeEqualToString('image1.right.toFixed(2)', '150.00'); |
| shouldBeEqualToString('image1.bottom.toFixed(2)', '275.00'); |
| text1 = document.getElementById("text1").getBoundingClientRect(); |
| shouldBeEqualToString('text1.left.toFixed(2)', '100.00'); |
| shouldBeEqualToString('text1.top.toFixed(2)', '282.66'); |
| shouldBeEqualToString('text1.width.toFixed(2)', '49.20'); |
| shouldBeEqualToString('text1.height.toFixed(2)', '6.16'); |
| shouldBeEqualToString('text1.right.toFixed(2)', '149.20'); |
| shouldBeEqualToString('text1.bottom.toFixed(2)', '288.82'); |
| debug(""); |
| |
| svg2 = document.getElementById("svg2").getBoundingClientRect(); |
| shouldBeEqualToString('svg2.left.toFixed(2)', '75.00'); |
| shouldBeEqualToString('svg2.top.toFixed(2)', '100.00'); |
| shouldBeEqualToString('svg2.width.toFixed(2)', '150.00'); |
| shouldBeEqualToString('svg2.height.toFixed(2)', '50.00'); |
| shouldBeEqualToString('svg2.right.toFixed(2)', '225.00'); |
| shouldBeEqualToString('svg2.bottom.toFixed(2)', '150.00'); |
| rect2 = document.getElementById("rect2").getBoundingClientRect(); |
| shouldBeEqualToString('rect2.left.toFixed(2)', '75.00'); |
| shouldBeEqualToString('rect2.top.toFixed(2)', '100.00'); |
| shouldBeEqualToString('rect2.width.toFixed(2)', '100.00'); |
| shouldBeEqualToString('rect2.height.toFixed(2)', '50.00'); |
| shouldBeEqualToString('rect2.right.toFixed(2)', '175.00'); |
| shouldBeEqualToString('rect2.bottom.toFixed(2)', '150.00'); |
| image2 = document.getElementById("image2").getBoundingClientRect(); |
| shouldBeEqualToString('image2.left.toFixed(2)', '175.00'); |
| shouldBeEqualToString('image2.top.toFixed(2)', '100.00'); |
| shouldBeEqualToString('image2.width.toFixed(2)', '50.00'); |
| shouldBeEqualToString('image2.height.toFixed(2)', '25.00'); |
| shouldBeEqualToString('image2.right.toFixed(2)', '225.00'); |
| shouldBeEqualToString('image2.bottom.toFixed(2)', '125.00'); |
| text2 = document.getElementById("text2").getBoundingClientRect(); |
| shouldBeEqualToString('text2.left.toFixed(2)', '175.00'); |
| shouldBeEqualToString('text2.top.toFixed(2)', '132.66'); |
| shouldBeEqualToString('text2.width.toFixed(2)', '47.44'); |
| shouldBeEqualToString('text2.height.toFixed(2)', '5.94'); |
| shouldBeEqualToString('text2.right.toFixed(2)', '222.44'); |
| shouldBeEqualToString('text2.bottom.toFixed(2)', '138.60'); |
| debug(""); |
| |
| svg3 = document.getElementById("svg3").getBoundingClientRect(); |
| shouldBeEqualToString('svg3.left.toFixed(2)', '900.00'); |
| shouldBeEqualToString('svg3.top.toFixed(2)', '500.00'); |
| shouldBeEqualToString('svg3.width.toFixed(2)', '300.00'); |
| shouldBeEqualToString('svg3.height.toFixed(2)', '100.00'); |
| shouldBeEqualToString('svg3.right.toFixed(2)', '1200.00'); |
| shouldBeEqualToString('svg3.bottom.toFixed(2)', '600.00'); |
| rect3 = document.getElementById("rect3").getBoundingClientRect(); |
| shouldBeEqualToString('rect3.left.toFixed(2)', '900.00'); |
| shouldBeEqualToString('rect3.top.toFixed(2)', '500.00'); |
| shouldBeEqualToString('rect3.width.toFixed(2)', '200.00'); |
| shouldBeEqualToString('rect3.height.toFixed(2)', '100.00'); |
| shouldBeEqualToString('rect3.right.toFixed(2)', '1100.00'); |
| shouldBeEqualToString('rect3.bottom.toFixed(2)', '600.00'); |
| image3 = document.getElementById("image3").getBoundingClientRect(); |
| shouldBeEqualToString('image3.left.toFixed(2)', '1100.00'); |
| shouldBeEqualToString('image3.top.toFixed(2)', '500.00'); |
| shouldBeEqualToString('image3.width.toFixed(2)', '100.00'); |
| shouldBeEqualToString('image3.height.toFixed(2)', '50.00'); |
| shouldBeEqualToString('image3.right.toFixed(2)', '1200.00'); |
| shouldBeEqualToString('image3.bottom.toFixed(2)', '550.00'); |
| text3 = document.getElementById("text3").getBoundingClientRect(); |
| shouldBeEqualToString('text3.left.toFixed(2)', '1100.00'); |
| shouldBeEqualToString('text3.top.toFixed(2)', '565.33'); |
| shouldBeEqualToString('text3.width.toFixed(2)', '98.41'); |
| shouldBeEqualToString('text3.height.toFixed(2)', '12.31'); |
| shouldBeEqualToString('text3.right.toFixed(2)', '1198.41'); |
| shouldBeEqualToString('text3.bottom.toFixed(2)', '577.64'); |
| debug(""); |
| } |
| </script> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| window.postZoomCallback = executeTest; |
| } else { |
| debug("This test only works in DRT."); |
| } |
| </script> |
| |
| <script src="../../../resources/js-test-pre.js"></script> |
| <script>var zoomCount = 2;</script> |
| <script src="../../../fast/repaint/resources/repaint.js"></script> |
| <script src="../resources/testPageZoom.js"></script> |
| |
| </body> |
| </html> |
