| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #red { |
| background-color: red; |
| position: absolute; |
| left: 50px; |
| top: 50px; |
| height: 100px; |
| width: 100px; |
| } |
| #red:hover::after { |
| content: "Hovered."; |
| } |
| |
| #blue { |
| background-color: blue; |
| position: absolute; |
| left: 50px; |
| top: 50px; |
| height: 100px; |
| width: 100px; |
| } |
| #blue:hover::after { |
| content: "Hovered."; |
| } |
| |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body onload="runtest()" style="margin:0"> |
| |
| <script type="text/javascript"> |
| var redDiv; |
| var blueText; |
| var redText; |
| var hoveredText = '\"Hovered.\"'; |
| function runtest() |
| { |
| if (!window.testRunner || !window.eventSender) |
| return; |
| |
| if (!window.internals || !window.internals.setIsCursorVisible) { |
| debug("window.internals.setIsCursorVisible is required to run this test."); |
| return; |
| } |
| |
| testRunner.waitUntilDone(); |
| |
| redDiv = document.getElementById('red'); |
| |
| document.addEventListener('keydown', function(e) { |
| redDiv.parentNode.removeChild(redDiv); |
| }); |
| |
| debug("Mouse is visible, moving it over the red div."); |
| internals.setIsCursorVisible(document, true); |
| eventSender.mouseMoveTo(175, 175); |
| blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content; |
| redText = window.getComputedStyle(document.querySelector('#red'), ':after').content; |
| shouldBeEqualToString("blueText", hoveredText); |
| shouldBeEqualToString("redText", hoveredText); |
| |
| debug("Setting mouse cursor to be invisible."); |
| internals.setIsCursorVisible(document, false); |
| blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content; |
| redText = window.getComputedStyle(document.querySelector('#red'), ':after').content; |
| shouldBeEqualToString("blueText", hoveredText); |
| shouldBeEqualToString("redText", hoveredText); |
| |
| debug("Deleting red div."); |
| eventSender.keyDown("a"); |
| window.setTimeout(testAfterDelete, 0); |
| } |
| |
| function testAfterDelete() |
| { |
| blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content; |
| shouldBeEqualToString("blueText", hoveredText); |
| testRunner.notifyDone(); |
| } |
| |
| </script> |
| |
| <div id="blue"> |
| <div id="red"></div> |
| </div> |
| |
| <p>Test for <a href="http://crbug.com/240722">http://crbug.com/240722</a>. If the mouse cursor is not visible, existing hover effects on a parent should be preserved if the child is the currently hovered element and is removed from the DOM. Press any key to delete the red div.</p> |
| |
| <div id="console"></div> |
| </body> |
| </html> |
