| <!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="../js/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)') |
| } |
| </script> |
