<!DOCTYPE HTML>
<script src="../../../../resources/js-test.js"></script>
<style>
#target {
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
}
#target div {
position: absolute;
top: 0;
left: 0;
background-color: white;
width: 100px;
height: 100px;
}
#ancestor12 {
width: 0;
height: 0;
}
</style>
<div id=target>
<div id=ancestor12>
<div id=child1>1</div>
<div id=child2>2</div>
</div>
<div id=child3>3</div>
</div>
<div id=console></div>
<script>
description("Verifies that each mouse event that occurs when tapping on an element reflects the node under the point at the time of that event, and the click event goes to the common ancestor of the mousedown and mouseup events.");
var rect = target.getBoundingClientRect();
var point = {
x: rect.left + rect.width / 2,
y: rect.top + rect.height / 2
};
var event;
function expectEventOn(e, node) {
debug("Received " + e.type + " on " + (e.target.id || e.target.nodeName));
event = e;
shouldBeEqualToString('event.target.id', node.id);
node.style.visibility = 'hidden';
}
document.addEventListener('mousemove', function(e) {
expectEventOn(e, child3);
});
document.addEventListener('mousedown', function(e) {
expectEventOn(e, child2);
});
document.addEventListener('mouseup', function(e) {
expectEventOn(e, child1);
});
document.addEventListener('click', function(e) {
expectEventOn(e, ancestor12);
});
if (window.eventSender) {
debug("Sending GestureTapDown");
eventSender.gestureTapDown(point.x, point.y, 30, 30);
debug("Sending GestureShowPress");
eventSender.gestureShowPress(point.x, point.y, 30, 30);
debug("Sending GestureTap");
eventSender.gestureTap(point.x, point.y, 30, 30);
} else {
debug("This test requires eventSender");
}
</script>
Codebase Browser
chromium