<html>
<head>
<script>

if (window.layoutTestController) {
    layoutTestController.dumpAsText();
    layoutTestController.waitUntilDone();
}
function test()
{
    document.getElementById("target").addEventListener("click", targetClick, true);

    if (window.eventSender) {
        eventSender.mouseMoveTo(52, 52);
        eventSender.mouseDown();
        eventSender.mouseUp();
	window.setTimeout(finish, 0);
    }
}

var finished = false;
function finish()
{
    if (finished)
        return;
    finished = true;
    log("targetClickFired: " + targetClickFired);
    log("containerClickFired: " + containerClickFired);
    if (targetClickFired && !containerClickFired)
        log("test passed");
    else
        log("test failed");
    if (window.layoutTestController)
        layoutTestController.notifyDone();
}
        
function log(text) {
    document.getElementById("result").innerHTML = document.getElementById("result").innerHTML + text + "<br>";
}

var targetClickFired = false;
var containerClickFired = false;

function targetClick(e) { 
    window.setTimeout(finish, 0);
    targetClickFired = true;
    e.stopPropagation();
    e.preventDefault();
};

function containerClick(e) { 
    window.setTimeout(finish, 0);
    containerClickFired = true;
};

</script>

</head>
<body onload="test()">
    
    <p>This tests checks that capturing event handlers trigger on the node that is the target of the event, and that stopPropagation in such a handler prevents further bubble handlers from triggering.</p>
    <div onclick="containerClick(event)">
        <div style="position:absolute; top: 40; left: 40; width: 100; height: 40; background-color: pink" id="target" onclick="targetClick(event)">Click here</a>
    </div>
        
    <div id="result" style="position: absolute; top: 100; left: 50;"><br></div>
</body>
</html>