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