LayoutTests/fast/transforms/matrix-with-zoom.html - WebKit - Git at Google

 <html>
 <head>
 <style>
 body {
     zoom: 1.2;
     padding: 0;
     margin: 0;
 }

 .box {
     width: 100px;
     height: 100px;
     background-color: blue;
     position: absolute;
     top: 60px;
     left: 40px;
 }

 .translate {
     -webkit-transform: translate(100px, 50px);
     background-color: red;
 }

 .matrix {
     -webkit-transform: matrix(1, 0, 0, 1, 100, 50);
     background-color: green;
 }
 </style>
 <script type="text/javascript">

 function runTest() {

     if (!window.testRunner) {

         var id1 = "a";
         var id2 = "b";
         var element1 = document.getElementById(id1);
         var element2 = document.getElementById(id2);
         var x1 = webkitConvertPointFromNodeToPage(element1, new WebKitPoint(0,0)).x;
         var y1 = webkitConvertPointFromNodeToPage(element1, new WebKitPoint(0,0)).y;
         var x2 = webkitConvertPointFromNodeToPage(element2, new WebKitPoint(0,0)).x;
         var y2 = webkitConvertPointFromNodeToPage(element2, new WebKitPoint(0,0)).y;

         var resultString = '';
         if (x1 == x2 && y1 == y2) {
             resultString += "PASS - Element " + id1 + " and Element " + id2 + " had identical positions";
         } else {
             resultString += "FAIL - Element " + id1 + " and Element " + id2 + " had different positions";
         }

         document.body.appendChild(document.createTextNode(resultString));
     }
 }
 </script>
 </head>
 <body onload="runTest();">

 <!-- You should see green box only. If you see red, the test has failed -->

 <div id='a' class="box translate"></div>
 <div id='b' class="box matrix"></div>

 </body>
 </html>
	<html>
	<head>
	<style>
	body {
	zoom: 1.2;
	padding: 0;
	margin: 0;
	}

	.box {
	width: 100px;
	height: 100px;
	background-color: blue;
	position: absolute;
	top: 60px;
	left: 40px;
	}

	.translate {
	-webkit-transform: translate(100px, 50px);
	background-color: red;
	}

	.matrix {
	-webkit-transform: matrix(1, 0, 0, 1, 100, 50);
	background-color: green;
	}
	</style>
	<script type="text/javascript">

	function runTest() {

	if (!window.testRunner) {

	var id1 = "a";
	var id2 = "b";
	var element1 = document.getElementById(id1);
	var element2 = document.getElementById(id2);
	var x1 = webkitConvertPointFromNodeToPage(element1, new WebKitPoint(0,0)).x;
	var y1 = webkitConvertPointFromNodeToPage(element1, new WebKitPoint(0,0)).y;
	var x2 = webkitConvertPointFromNodeToPage(element2, new WebKitPoint(0,0)).x;
	var y2 = webkitConvertPointFromNodeToPage(element2, new WebKitPoint(0,0)).y;

	var resultString = '';
	if (x1 == x2 && y1 == y2) {
	resultString += "PASS - Element " + id1 + " and Element " + id2 + " had identical positions";
	} else {
	resultString += "FAIL - Element " + id1 + " and Element " + id2 + " had different positions";
	}

	document.body.appendChild(document.createTextNode(resultString));
	}
	}
	</script>
	</head>
	<body onload="runTest();">

	<!-- You should see green box only. If you see red, the test has failed -->

	<div id='a' class="box translate"></div>
	<div id='b' class="box matrix"></div>

	</body>
	</html>