OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 #red { |
| 6 background-color: red; |
| 7 position: absolute; |
| 8 left: 50px; |
| 9 top: 50px; |
| 10 height: 100px; |
| 11 width: 100px; |
| 12 } |
| 13 |
| 14 #blue { |
| 15 background-color: blue; |
| 16 position: absolute; |
| 17 left: 50px; |
| 18 top: 200px; |
| 19 height: 100px; |
| 20 width: 100px; |
| 21 } |
| 22 #blue:hover::after { |
| 23 content: "Hovered."; |
| 24 } |
| 25 |
| 26 </style> |
| 27 <script src="../js/resources/js-test-pre.js"></script> |
| 28 </head> |
| 29 <body onload="runtest()" style="margin:0"> |
| 30 |
| 31 <script type="text/javascript"> |
| 32 var redDiv; |
| 33 var blueDiv; |
| 34 var containerDiv; |
| 35 var blueText; |
| 36 var redTextWhenHovered = "Red hovered."; |
| 37 var blueTextWhenNotHovered = ""; |
| 38 var blueTextWhenHovered = "'Hovered.'"; |
| 39 function runtest() |
| 40 { |
| 41 if (!window.testRunner || !window.eventSender) |
| 42 return; |
| 43 |
| 44 if (!window.internals || !window.internals.setIsCursorVisible) { |
| 45 debug("window.internals.setIsCursorVisible is required to run this test.
"); |
| 46 return; |
| 47 } |
| 48 |
| 49 testRunner.waitUntilDone(); |
| 50 |
| 51 containerDiv = document.getElementById('container'); |
| 52 |
| 53 redDiv = document.createElement("div"); |
| 54 redDiv.id = "red"; |
| 55 blueDiv = document.createElement("div"); |
| 56 blueDiv.id = "blue"; |
| 57 insertDivs(); |
| 58 |
| 59 document.addEventListener('keydown', function(e) { |
| 60 blueDiv.style.top = "50px"; |
| 61 redDiv.parentNode.removeChild(redDiv); |
| 62 }); |
| 63 |
| 64 initialHoverOverRedDiv(); |
| 65 |
| 66 debug("Mouse is visible, deleting the red div."); |
| 67 eventSender.keyDown("a"); |
| 68 window.setTimeout(testAfterDeleteCursorVisible, 0); |
| 69 } |
| 70 |
| 71 function testAfterDeleteCursorVisible() |
| 72 { |
| 73 checkBlueHoverText(blueTextWhenHovered); |
| 74 window.setTimeout(testWithInvisibleCursor, 0); |
| 75 } |
| 76 |
| 77 function testWithInvisibleCursor() |
| 78 { |
| 79 blueDiv.parentNode.removeChild(blueDiv); |
| 80 insertDivs(); |
| 81 |
| 82 initialHoverOverRedDiv(); |
| 83 |
| 84 debug("Setting the mouse cursor to be invisible."); |
| 85 internals.setIsCursorVisible(document, false); |
| 86 shouldBeEqualToString("redDiv.innerHTML", redTextWhenHovered); |
| 87 shouldBeEqualToString("blueDiv.innerHTML", blueTextWhenNotHovered); |
| 88 |
| 89 debug("Mouse is invisible, deleting the red div."); |
| 90 eventSender.keyDown("a"); |
| 91 window.setTimeout(testAfterDeleteCursorInvisible, 0); |
| 92 } |
| 93 |
| 94 function testAfterDeleteCursorInvisible() |
| 95 { |
| 96 checkBlueHoverText(blueTextWhenNotHovered); |
| 97 testRunner.notifyDone(); |
| 98 } |
| 99 |
| 100 |
| 101 // Helper functions |
| 102 |
| 103 function checkBlueHoverText(expectedText) |
| 104 { |
| 105 shouldBe("blueDiv.offsetTop", "50"); |
| 106 blueText = window.getComputedStyle(document.querySelector('#blue'), ':after'
).content; |
| 107 shouldBeEqualToString("blueText", expectedText); |
| 108 } |
| 109 |
| 110 function insertDivs() |
| 111 { |
| 112 debug("Adding the red and blue divs."); |
| 113 blueDiv.style.top = "200px"; |
| 114 containerDiv.appendChild(redDiv); |
| 115 containerDiv.appendChild(blueDiv); |
| 116 redDiv.addEventListener('mouseover', function(e) { |
| 117 this.innerHTML = redTextWhenHovered; |
| 118 }); |
| 119 shouldBe("blueDiv.offsetTop", "200"); |
| 120 shouldBe("redDiv.offsetTop", "50"); |
| 121 } |
| 122 |
| 123 function initialHoverOverRedDiv() |
| 124 { |
| 125 debug("Mouse is visible, moving it over the red div."); |
| 126 internals.setIsCursorVisible(document, true); |
| 127 eventSender.mouseMoveTo(100, 100); |
| 128 shouldBeEqualToString("redDiv.innerHTML", redTextWhenHovered); |
| 129 shouldBeEqualToString("blueDiv.innerHTML", blueTextWhenNotHovered); |
| 130 } |
| 131 </script> |
| 132 |
| 133 <div id="container"> |
| 134 </div> |
| 135 |
| 136 <p>Test for <a href="http://crbug.com/240722">http://crbug.com/240722</a>. If th
e mouse cursor is not visible, no new hover effects should be invoked when the c
urrently hovered node is removed from the DOM. Press any key to delete the red d
iv.</p> |
| 137 |
| 138 <div id="console"></div> |
| 139 </body> |
| 140 </html> |
OLD | NEW |