<!DOCTYPE html>
<html>
<head>
<style>

.scroll {
    height: 100px;
    overflow: auto;
}

.filler {
    height: 200px;
}

</style>
</head>
<body>
<p>Ensure that simulated click on label elements uses the original mouse coordinates.</p>
<input type="checkbox" id="target" onclick="validateEventProperties(event)">
<label for="target" onclick="storeEvent(event)">Click Me</label>

<div class="scroll">
    <div class="filler"></div>
    <input type="radio" id="target2" onclick="validateEventProperties(event)">
    <label for="target2" onclick="storeEvent(event)">Click Me</label>
</div>

<pre id="out"></pre>
<script>

if (window.testRunner)
    testRunner.dumpAsText();

function clickOn(element)
{
    if (!window.eventSender)
        return;
    var rect = element.getBoundingClientRect();
    var x = rect.left + rect.width / 2;
    var y = rect.top + rect.height / 2;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

function print(s)
{
    document.getElementById('out').textContent += s + '\n';
}

var realClickEvent, simulatedEvent;

function storeEvent(event)
{
    realClickEvent = event;
}

function validateEventProperty(name)
{
    if (realClickEvent[name] === simulatedEvent[name])
        print('PASS: event.' + name + ' is same for both real and simulated event.');
    else
        print('FAIL: event.' + name + ' is ' + simulatedEvent[name] + ', expected ' + realClickEvent[name]);
}

function validateEventProperties(event)
{
    simulatedEvent = event;

    validateEventProperty('clientX');
    validateEventProperty('clientY');
    validateEventProperty('layerX');
    validateEventProperty('layerY');
    validateEventProperty('pageX');
    validateEventProperty('pageY');
    validateEventProperty('screenX');
    validateEventProperty('screenY');
    validateEventProperty('x');
    validateEventProperty('y');
}

clickOn(document.querySelector('label'));

print('');
document.querySelector('.scroll').scrollTop = 999;
clickOn(document.querySelector('.scroll label'));

</script>
</body>
</html>