third_party/WebKit/LayoutTests/fast/dom/hover-after-dom-delete-child-invisible-cursor.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 #red:hover::after {
  14     content: "Hovered.";
  15 }
  16
  17 #blue {
  18     background-color: blue;
  19     position: absolute;
  20     left: 50px;
  21     top: 50px;
  22     height: 100px;
  23     width: 100px;
  24 }
  25 #blue:hover::after {
  26     content: "Hovered.";
  27 }
  28
  29 </style>
  30 <script src="../../resources/js-test.js"></script>
  31 </head>
  32 <body onload="runtest()" style="margin:0">
  33
  34 <script type="text/javascript">
  35 var redDiv;
  36 var blueText;
  37 var redText;
  38 var hoveredText = '\"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     redDiv = document.getElementById('red');
  52
  53     document.addEventListener('keydown', function(e) {
  54         redDiv.parentNode.removeChild(redDiv);
  55     });
  56
  57     debug("Mouse is visible, moving it over the red div.");
  58     internals.setIsCursorVisible(document, true);
  59     eventSender.mouseMoveTo(175, 175);
  60     blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content;
  61     redText = window.getComputedStyle(document.querySelector('#red'), ':after').content;
  62     shouldBeEqualToString("blueText", hoveredText);
  63     shouldBeEqualToString("redText", hoveredText);
  64
  65     debug("Setting mouse cursor to be invisible.");
  66     internals.setIsCursorVisible(document, false);
  67     blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content;
  68     redText = window.getComputedStyle(document.querySelector('#red'), ':after').content;
  69     shouldBeEqualToString("blueText", hoveredText);
  70     shouldBeEqualToString("redText", hoveredText);
  71
  72     debug("Deleting red div.");
  73     eventSender.keyDown("a");
  74     window.setTimeout(testAfterDelete, 0);
  75 }
  76
  77 function testAfterDelete()
  78 {
  79     blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content;
  80     shouldBeEqualToString("blueText", hoveredText);
  81     testRunner.notifyDone();
  82 }
  83
  84 </script>
  85
  86 <div id="blue">
  87   <div id="red"></div>
  88 </div>
  89
  90 <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>
  91
  92 <div id="console"></div>
  93 </body>
  94 </html>