Chromium Code Reviews Chromium Code Reviews
Issue 16285002:
Do not invoke or clear hover effects on node deletion when cursor is invisible (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| Index: LayoutTests/fast/dom/hover-after-dom-delete-invisible-cursor.html |
| diff --git a/LayoutTests/fast/dom/hover-after-dom-delete-invisible-cursor.html b/LayoutTests/fast/dom/hover-after-dom-delete-invisible-cursor.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..690ddff4f4e2e2b0906cf602aa897e8ff42e8178 |
| --- /dev/null |
| +++ b/LayoutTests/fast/dom/hover-after-dom-delete-invisible-cursor.html |
| @@ -0,0 +1,130 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| +<style> |
| +#red { |
| + background-color: red; |
| + position: absolute; |
| + left: 50px; |
| + top: 50px; |
| + height: 100px; |
| + width: 100px; |
| +} |
| + |
| +#blue { |
| + background-color: blue; |
| + position: absolute; |
| + left: 50px; |
| + top: 200px; |
| + height: 100px; |
| + width: 100px; |
| +} |
| +#blue:hover::after { |
| + content: "Hovered."; |
| +} |
| + |
| +</style> |
| +<script src="../js/resources/js-test-pre.js"></script> |
| +</head> |
| +<body onload="runtest()" style="margin:0"> |
| + |
| +<script type="text/javascript"> |
| +var redDiv; |
| +var blueDiv; |
| +var blueText; |
| +var redTextWhenHovered = "Red hovered."; |
| +var blueTextWhenNotHovered = ""; |
| +var blueTextWhenHovered = "'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'); |
| + blueDiv = document.getElementById('blue'); |
| + |
| + redDiv.addEventListener('mouseover', function(e) { |
| + this.innerHTML = redTextWhenHovered; |
| + }); |
| + |
| + document.addEventListener('keydown', function(e) { |
| + blueDiv.style.top = "50px"; |
| + redDiv.parentNode.removeChild(redDiv); |
| + }); |
| + |
| + debug("Mouse is visible, moving it over the red div."); |
| + internals.setIsCursorVisible(document, true); |
| + eventSender.mouseMoveTo(100, 100); |
| + shouldBeEqualToString("redDiv.innerHTML", redTextWhenHovered); |
| + shouldBeEqualToString("blueDiv.innerHTML", blueTextWhenNotHovered); |
| + |
| + debug("Mouse is visible, deleting the red div."); |
| + eventSender.keyDown("a"); |
| + window.setTimeout(testAfterDeleteCursorVisible, 0); |
| +} |
| + |
| +function testAfterDeleteCursorVisible() |
| +{ |
| + checkBlueHoverText(blueTextWhenHovered); |
| + window.setTimeout(testWithInvisibleCursor, 0); |
| +} |
| + |
| +function testWithInvisibleCursor() |
| +{ |
| + debug("Re-adding the red and blue divs."); |
| + blueDiv.parentNode.removeChild(blueDiv); |
| + document.body.innerHTML += "<div id='red'></div>"; |
|
Rick Byers
2013/06/05 14:47:13
rather than re-add them with html, it would be cle
tdanderson
2013/06/05 17:43:27
Done.
|
| + document.body.innerHTML += "<div id='blue'></div>"; |
| + redDiv = document.getElementById('red'); |
| + blueDiv = document.getElementById('blue'); |
| + redDiv.addEventListener('mouseover', function(e) { |
| + this.innerHTML = redTextWhenHovered; |
| + }); |
| + shouldBe("blueDiv.offsetTop", "200"); |
| + shouldBe("redDiv.offsetTop", "50"); |
| + |
| + debug("Mouse is visible, moving it over the red div."); |
| + internals.setIsCursorVisible(document, true); |
| + eventSender.mouseMoveTo(100, 100); |
| + shouldBeEqualToString("redDiv.innerHTML", redTextWhenHovered); |
| + shouldBeEqualToString("blueDiv.innerHTML", blueTextWhenNotHovered); |
| + |
| + debug("Setting the mouse cursor to be invisible."); |
| + internals.setIsCursorVisible(document, false); |
| + shouldBeEqualToString("redDiv.innerHTML", redTextWhenHovered); |
| + shouldBeEqualToString("blueDiv.innerHTML", blueTextWhenNotHovered); |
| + |
| + debug("Mouse is invisible, deleting the red div."); |
| + eventSender.keyDown("a"); |
| + window.setTimeout(testAfterDeleteCursorInvisible, 0); |
| +} |
| + |
| +function testAfterDeleteCursorInvisible() |
| +{ |
| + checkBlueHoverText(blueTextWhenNotHovered); |
| + testRunner.notifyDone(); |
| +} |
| + |
| +function checkBlueHoverText(expectedText) |
| +{ |
| + shouldBe("blueDiv.offsetTop", "50"); |
| + blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content; |
| + shouldBeEqualToString("blueText", expectedText); |
| +} |
| +</script> |
| + |
| +<div id="red"></div> |
| +<div id="blue"></div> |
| + |
| +<p>Test for <a href="http://crbug.com/240722">http://crbug.com/240722</a>. If the mouse cursor is not visible, no new hover effects should be invoked when the currently hovered node is removed from the DOM. Press any key to delete the red div.</p> |
| + |
| +<div id="console"></div> |
| +</body> |
| +</html> |
