<!DOCTYPE html>
<title>Tests that server-side image maps with zooms and transforms produce the right click coordinates.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
img {
position: absolute;
left: 50px;
top: 60px;
width: 100px;
height: 50px;
border-left: 13px solid;
border-top: 13px solid;
border-right: 10px solid;
border-bottom: 10px solid;
padding-left: 17px;
padding-top: 17px;
padding-right: 10px;
padding-bottom: 10px;
transform: rotate(45deg);
}
</style>
<div style="zoom: 2;"><a href="#"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" ismap></a></div>
<script>
async_test(function(t) {
window.onload = t.step_func_done(function() {
function testClick(x, y, expectedHash) {
location.hash = '#';
eventSender.mouseMoveTo(x, y);
eventSender.mouseDown();
eventSender.mouseUp();
assert_equals(location.hash, expectedHash);
}
if (window.testRunner) {
internals.setPageScaleFactor(1.25); // pinch scale
testRunner.setPageZoomFactor(1.5, 0, 0); // browser zoom
testClick(402, 122, '#?0,0'); // top left border
testClick(407, 204, '#?0,0'); // top left padding
testClick(517, 562, '#?82,39'); // content area
testClick(539, 662, '#?105,54'); // lower right padding
testClick(540, 714, '#?115,63'); // lower right border
testClick(179, 350, '#?0,63'); // lower left border
testClick(248, 362, '#?0,52'); // lower left padding
testClick(695, 488, '#?102,0'); // upper right padding
testClick(759, 479, '#?112,0'); // upper right border
}
});
});
</script>