78 lines
2.4 KiB
HTML
78 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
div, textarea { background: rgb(0, 0, 0); }
|
|
div:hover, textarea:hover { background: rgb(255, 0, 0); }
|
|
div:hover:active, textarea:hover:active { background: rgb(255, 255, 0); }
|
|
div:active, textarea:active { background: rgb(0, 255, 0); }
|
|
div, textarea {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 2px solid rgb(0, 0, 255);
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div id="box"></div>
|
|
<div id="box2"></div>
|
|
<textarea id="textarea"></textarea>
|
|
<pre id="description"></div>
|
|
<pre id="console"></pre>
|
|
</body>
|
|
|
|
<script src="../../resources/js-test-pre.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(0, 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)')
|
|
|
|
// Move into the textarea.
|
|
eventSender.mouseMoveTo(50, 250)
|
|
shouldHaveBackground(textarea, 'rgb(255, 0, 0)')
|
|
|
|
eventSender.mouseDown()
|
|
shouldHaveBackground(textarea, 'rgb(255, 255, 0)')
|
|
|
|
eventSender.mouseMoveTo(400, 250)
|
|
shouldHaveBackground(textarea, 'rgb(0, 255, 0)')
|
|
|
|
eventSender.mouseUp()
|
|
shouldHaveBackground(textarea, 'rgb(0, 0, 0)')
|
|
}
|
|
</script>
|