third_party/WebKit/LayoutTests/fast/dom/hover-after-dom-delete.html

   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="../../resources/js-test.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 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>
 137
 138 <div id="console"></div>
 139 </body>
 140 </html>