third_party/blink/web_tests/css3/zoom-coords.xhtml - chromium/src - Git at Google

 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
 <head>
 <script src="../resources/ahem.js"></script>
 <style type="text/css">
     body {
         margin:0px;
         border:0px;
         padding:0px;
     }
     text {
         text-rendering: geometricPrecision;
         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.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");

 if (self.testRunner)
   self.testRunner.setTextSubpixelPositioning(true);

 debug("Gray rectangles: 100x50");
 debug("Green rectangles: 100x50, zoom=200%");
 debug("Blue rectangles: 200x100, zoom=50%");
 debug("");

 debug("Checking HTML elements:");
 debug("");

 // Slightly bigger than one layout unit.
 var tolerance = 0.02;

 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', 283, 1);
 shouldBeCloseTo('text1.height', 6, 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', 'text1.width', tolerance);
 shouldBeCloseTo('text2.height', 'text1.height', tolerance);
 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', '(text1.width * 2)', tolerance);
 shouldBeCloseTo('text3.height', '(text1.height * 2)', tolerance);
 debug("");
 </script>

 </body>
 </html>
	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
	<head>
	<script src="../resources/ahem.js"></script>
	<style type="text/css">
	body {
	margin:0px;
	border:0px;
	padding:0px;
	}
	text {
	text-rendering: geometricPrecision;
	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.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");

	if (self.testRunner)
	self.testRunner.setTextSubpixelPositioning(true);

	debug("Gray rectangles: 100x50");
	debug("Green rectangles: 100x50, zoom=200%");
	debug("Blue rectangles: 200x100, zoom=50%");
	debug("");

	debug("Checking HTML elements:");
	debug("");

	// Slightly bigger than one layout unit.
	var tolerance = 0.02;

	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', 283, 1);
	shouldBeCloseTo('text1.height', 6, 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', 'text1.width', tolerance);
	shouldBeCloseTo('text2.height', 'text1.height', tolerance);
	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', '(text1.width * 2)', tolerance);
	shouldBeCloseTo('text3.height', '(text1.height * 2)', tolerance);
	debug("");
	</script>

	</body>
	</html>