<!DOCTYPE html>
<style>
#test {
color: blue;
}
#test:hover {
color: green;
}
</style>
<script src="../../resources/js-test.js"></script>
<script>
function verify(expectedColor)
{
shouldBeEqualToString('window.getComputedStyle(document.getElementById("test")).color', expectedColor);
}
function runTest()
{
if (!window.eventSender)
return false;
document.onclick = function () { testFailed("Click should not have bubbled from embed!"); };
var pluginElement = document.getElementById('plugin');
var x = pluginElement.offsetLeft + pluginElement.offsetWidth / 2;
var y = pluginElement.offsetTop + pluginElement.offsetHeight / 2;
eventSender.mouseMoveTo(x, y);
eventSender.mouseDown();
eventSender.mouseUp();
var testElement = document.getElementById('test');
x = testElement.offsetLeft + testElement.offsetWidth / 2;
y = testElement.offsetTop + testElement.offsetHeight / 2;
eventSender.mouseMoveTo(x, y);
verify('rgb(0, 128, 0)');
}
</script>
<body onload="runTest()">
<p>Test that mouse state is correctly reset after clicking on a node that captures mouse events. To run this test, first click on the embed element, then mouse over "Hover me". It should change from blue to green.
<embed id="plugin" type="application/x-shockwave-flash"></embed>
<p><a id="test" href="#">Hover me</a>
<div id="console"></div>
</body>