<!DOCTYPE html>
<style type="text/css">
input, em { cursor: pointer; margin-right: 100px; }
label, span { cursor: pointer; background: transparent; }
</style>
<script src="../../resources/js-test.js"></script>
<div><label id="clickme1" for="checkbox"><input id="checkbox" type="checkbox">Click the empty area on the left</input></label></div>
<div><span id="clickme2"> <em id="em">Click the empty area</em><em>in middle</em></span></div>
<p id="description"></p>
<div id="console"></div>
<script>
description('Click event should be fired when it occurs within culled inline.');
var parent;
var gotClick;
function hitTest(id) {
var element = document.getElementById(id);
parent = element.parentElement;
// the x, y coordinates on margin of element
x = element.offsetLeft + element.offsetWidth + 10;
y = element.offsetTop + element.offsetHeight / 2;
shouldBeEqualToString('document.elementFromPoint(x, y).id', parent.id);
if (window.eventSender) {
gotClick = false;
parent.addEventListener('click', function(e) {
debug(parent.nodeName + ' that is a parent of ' + element.nodeName + ' is clicked.');
gotClick = true;
});
eventSender.mouseMoveTo(x, y);
eventSender.mouseDown();
eventSender.mouseUp();
shouldBeTrue('gotClick');
}
debug('');
}
hitTest('checkbox');
hitTest('em');
if (window.eventSender)
shouldBeTrue('document.getElementById("checkbox").checked');
</script>