| <!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.js"></script> |
| <script> |
| function shouldHaveBackground(element, bg) { |
| background = getComputedStyle(element, null).getPropertyValue("background-color") |
| shouldBeEqualToString('background', bg) |
| } |
| |
| jsTestIsAsync = true; |
| |
| onload = async () => { |
| description("Dragging out of an element should cause it to lose :hover") |
| testRunner?.dumpAsText(); |
| var box = document.getElementById('box') |
| var box2 = document.getElementById('box2') |
| |
| 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 |
| await eventSender.asyncMouseDown() |
| await eventSender.asyncMouseUp() |
| |
| // Move into the first box. |
| await eventSender.asyncMouseMoveTo(50, 50) |
| shouldHaveBackground(box, 'rgb(255, 0, 0)') |
| shouldHaveBackground(box2, 'rgb(0, 0, 0)') |
| |
| await eventSender.asyncMouseDown() |
| shouldHaveBackground(box, 'rgb(255, 255, 0)') |
| shouldHaveBackground(box2, 'rgb(0, 0, 0)') |
| |
| // With the mouse still down, move into the second box. |
| await eventSender.asyncMouseMoveTo(50, 150) |
| shouldHaveBackground(box, 'rgb(0, 255, 0)') |
| shouldHaveBackground(box2, 'rgb(0, 0, 0)') |
| |
| // Mouse still down, move outside of both boxes. |
| await eventSender.asyncMouseMoveTo(400, 50) |
| shouldHaveBackground(box, 'rgb(0, 255, 0)') |
| shouldHaveBackground(box2, 'rgb(0, 0, 0)') |
| |
| await eventSender.asyncMouseUp() |
| shouldHaveBackground(box, 'rgb(0, 0, 0)') |
| shouldHaveBackground(box2, 'rgb(0, 0, 0)') |
| |
| // Move into the textarea. |
| await eventSender.asyncMouseMoveTo(50, 250) |
| shouldHaveBackground(textarea, 'rgb(255, 0, 0)') |
| |
| await eventSender.asyncMouseDown() |
| shouldHaveBackground(textarea, 'rgb(255, 255, 0)') |
| |
| await eventSender.asyncMouseMoveTo(400, 250) |
| shouldHaveBackground(textarea, 'rgb(0, 255, 0)') |
| |
| await eventSender.asyncMouseUp() |
| shouldHaveBackground(textarea, 'rgb(0, 0, 0)') |
| |
| finishJSTest(); |
| } |
| </script> |
