198 lines
6.5 KiB
HTML
198 lines
6.5 KiB
HTML
<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>
|
|
|
|
<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="../svg/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="../svg/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="../svg/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 src="../resources/js-test-pre.js"></script>
|
|
<script>
|
|
|
|
function msgDumpRenderTreeRequired()
|
|
{
|
|
if (!window.testRunner)
|
|
debug("The following tests may fail if not run in DumpRenderTree:");
|
|
}
|
|
|
|
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("");
|
|
|
|
var div1 = document.getElementById("div1").getBoundingClientRect();
|
|
shouldBe('div1.left', '0');
|
|
shouldBe('div1.top', '0');
|
|
shouldBe('div1.width', '100');
|
|
shouldBe('div1.height', '50');
|
|
shouldBe('div1.right', '100');
|
|
shouldBe('div1.bottom', '50');
|
|
debug("");
|
|
|
|
var div2 = document.getElementById("div2").getBoundingClientRect();
|
|
shouldBe('div2.left', '0');
|
|
shouldBe('div2.top', '25');
|
|
shouldBe('div2.width', '100');
|
|
shouldBe('div2.height', '50');
|
|
shouldBe('div2.right', '100');
|
|
shouldBe('div2.bottom', '75');
|
|
debug("");
|
|
|
|
var div3 = document.getElementById("div3").getBoundingClientRect();
|
|
shouldBe('div3.left', '0');
|
|
shouldBe('div3.top', '300');
|
|
shouldBe('div3.width', '200');
|
|
shouldBe('div3.height', '100');
|
|
shouldBe('div3.right', '200');
|
|
shouldBe('div3.bottom', '400');
|
|
debug("");
|
|
|
|
debug("Checking SVG elements:");
|
|
debug("");
|
|
|
|
var svg1 = document.getElementById("svg1").getBoundingClientRect();
|
|
shouldBe('svg1.left', '0');
|
|
shouldBe('svg1.top', '250');
|
|
shouldBe('svg1.width', '150');
|
|
shouldBe('svg1.height', '50');
|
|
shouldBe('svg1.right', '150');
|
|
shouldBe('svg1.bottom', '300');
|
|
var rect1 = document.getElementById("rect1").getBoundingClientRect();
|
|
shouldBe('rect1.left', '0');
|
|
shouldBe('rect1.top', '250');
|
|
shouldBe('rect1.width', '100');
|
|
shouldBe('rect1.height', '50');
|
|
shouldBe('rect1.right', '100');
|
|
shouldBe('rect1.bottom', '300');
|
|
var image1 = document.getElementById("image1").getBoundingClientRect();
|
|
shouldBe('image1.left', '100');
|
|
shouldBe('image1.top', '250');
|
|
shouldBe('image1.width', '50');
|
|
shouldBe('image1.height', '25');
|
|
shouldBe('image1.right', '150');
|
|
shouldBe('image1.bottom', '275');
|
|
var text1 = document.getElementById("text1").getBoundingClientRect();
|
|
shouldBe('text1.left', '100');
|
|
msgDumpRenderTreeRequired();
|
|
shouldBeCloseTo('text1.top', 282, 1);
|
|
shouldBeCloseTo('text1.width', 46, 1);
|
|
shouldBeCloseTo('text1.height', 6, 1);
|
|
shouldBeCloseTo('text1.right', 146, 1);
|
|
shouldBeCloseTo('text1.bottom', 289, 1);
|
|
debug("");
|
|
|
|
var svg2 = document.getElementById("svg2").getBoundingClientRect();
|
|
shouldBe('svg2.left', '75');
|
|
shouldBe('svg2.top', '100');
|
|
shouldBe('svg2.width', '150');
|
|
shouldBe('svg2.height', '50');
|
|
shouldBe('svg2.right', '225');
|
|
shouldBe('svg2.bottom', '150');
|
|
var rect2 = document.getElementById("rect2").getBoundingClientRect();
|
|
shouldBe('rect2.left', '75');
|
|
shouldBe('rect2.top', '100');
|
|
shouldBe('rect2.width', '100');
|
|
shouldBe('rect2.height', '50');
|
|
shouldBe('rect2.right', '175');
|
|
shouldBe('rect2.bottom', '150');
|
|
var image2 = document.getElementById("image2").getBoundingClientRect();
|
|
shouldBe('image2.left', '175');
|
|
shouldBe('image2.top', '100');
|
|
shouldBe('image2.width', '50');
|
|
shouldBe('image2.height', '25');
|
|
shouldBe('image2.right', '225');
|
|
shouldBe('image2.bottom', '125');
|
|
var text2 = document.getElementById("text2").getBoundingClientRect();
|
|
shouldBe('text2.left', '175');
|
|
msgDumpRenderTreeRequired();
|
|
shouldBeCloseTo('text2.top', 132, 1);
|
|
shouldBeCloseTo('text2.width', 49, 1);
|
|
shouldBeCloseTo('text2.height', 6, 1);
|
|
shouldBeCloseTo('text2.right', 224, 1);
|
|
shouldBeCloseTo('text2.bottom', 139, 1);
|
|
debug("");
|
|
|
|
var svg3 = document.getElementById("svg3").getBoundingClientRect();
|
|
shouldBe('svg3.left', '900');
|
|
shouldBe('svg3.top', '500');
|
|
shouldBe('svg3.width', '300');
|
|
shouldBe('svg3.height', '100');
|
|
shouldBe('svg3.right', '1200');
|
|
shouldBe('svg3.bottom', '600');
|
|
var rect3 = document.getElementById("rect3").getBoundingClientRect();
|
|
shouldBe('rect3.left', '900');
|
|
shouldBe('rect3.top', '500');
|
|
shouldBe('rect3.width', '200');
|
|
shouldBe('rect3.height', '100');
|
|
shouldBe('rect3.right', '1100');
|
|
shouldBe('rect3.bottom', '600');
|
|
var image3 = document.getElementById("image3").getBoundingClientRect();
|
|
shouldBe('image3.left', '1100');
|
|
shouldBe('image3.top', '500');
|
|
shouldBe('image3.width', '100');
|
|
shouldBe('image3.height', '50');
|
|
shouldBe('image3.right', '1200');
|
|
shouldBe('image3.bottom', '550');
|
|
var text3 = document.getElementById("text3").getBoundingClientRect();
|
|
shouldBe('text3.left', '1100');
|
|
msgDumpRenderTreeRequired();
|
|
shouldBeCloseTo('text3.top', 565, 1);
|
|
shouldBeCloseTo('text3.width', 92, 1);
|
|
shouldBeCloseTo('text3.height', 12, 1);
|
|
shouldBeCloseTo('text3.right', 1192, 1);
|
|
shouldBeCloseTo('text3.bottom', 577, 1);
|
|
debug("");
|
|
|
|
|
|
</script>
|
|
<script src="../resources/js-test-post.js"></script>
|
|
|
|
</body>
|
|
</html>
|