<!DOCTYPE html>
<style>
div { background: rgb(0, 0, 0); }
div:hover { background: rgb(255, 0, 0); }
div:hover:active { background: rgb(255, 255, 0); }
div:active { background: rgb(0, 255, 0); }
div {
width: 100px;
height: 100px;
border: 2px solid rgb(0, 0, 255);
}
</style>
<body>
<div id="box"></div>
<div id="box2"></div>
<pre id="description"></div>
<pre id="console"></pre>
</body>
<script src="../../resources/js-test.js"></script>
<script>
function shouldHaveBackground(element, bg) {
background = getComputedStyle(element, null).getPropertyValue("background-color")
shouldBeEqualToString('background', bg)
}
if (window.testRunner) {
description("Dragging out of an element should cause it to lose :hover")
var box = document.getElementById('box')
var box2 = document.getElementById('box2')
testRunner.dumpAsText();
eventSender.dragMode = false;
// This mouse click seems to be required for WebKit's event handling to
// pick up the :hover class. See https://bugs.webkit.org/show_bug.cgi?id=74264
eventSender.mouseDown()
eventSender.mouseUp()
// Move into the first box.
eventSender.mouseMoveTo(50, 50)
shouldHaveBackground(box, 'rgb(255, 0, 0)')
shouldHaveBackground(box2, 'rgb(0, 0, 0)')
eventSender.mouseDown()
shouldHaveBackground(box, 'rgb(255, 255, 0)')
shouldHaveBackground(box2, 'rgb(0, 0, 0)')
// With the mouse still down, move into the second box.
eventSender.mouseMoveTo(50, 150)
shouldHaveBackground(box, 'rgb(0, 255, 0)')
shouldHaveBackground(box2, 'rgb(255, 0, 0)')
// Mouse still down, move outside of both boxes.
eventSender.mouseMoveTo(400, 50)
shouldHaveBackground(box, 'rgb(0, 255, 0)')
shouldHaveBackground(box2, 'rgb(0, 0, 0)')
eventSender.mouseUp()
shouldHaveBackground(box, 'rgb(0, 0, 0)')
shouldHaveBackground(box2, 'rgb(0, 0, 0)')
}
</script>
Codebase Browser
chromium