third_party/WebKit/LayoutTests/fast/css/hover-after-drag.html

   1 <!DOCTYPE html>
   2 <style>
   3 #drag {
   4   color: blue;
   5 }
   6 #drag:hover {
   7   color: green;
   8 }
   9 #drag:active {
  10   color: red;
  11 }
  12 </style>
  13 <script src="../../resources/js-test.js"></script>
  14 <script>
  15 function verify(expectedColor)
  16 {
  17     shouldBeEqualToString('window.getComputedStyle(document.getElementById("drag")).color', expectedColor);
  18 }
  19
  20 function runTest()
  21 {
  22     if (!window.eventSender)
  23         return false;
  24
  25     verify('rgb(0, 0, 255)');
  26     var draggedElement = document.getElementById('drag');
  27     var x = draggedElement.offsetLeft + draggedElement.offsetWidth / 2;
  28     var y = draggedElement.offsetTop + draggedElement.offsetHeight / 2;
  29     eventSender.mouseMoveTo(x, y);
  30     eventSender.mouseDown();
  31     eventSender.leapForward(200);
  32     eventSender.mouseMoveTo(x, y + 200);
  33     verify('rgb(255, 0, 0)');
  34     eventSender.mouseUp();
  35
  36     // Due to how mouse press / hover state is updated, the first mouse move is expected to generate incorrect hover state.
  37     eventSender.mouseMoveTo(x, y);
  38     verify('rgb(255, 0, 0)');
  39
  40     eventSender.mouseMoveTo(x, y + 200);
  41     eventSender.mouseMoveTo(x, y);
  42     verify('rgb(0, 128, 0)');
  43 }
  44 </script>
  45 <body onload="runTest()">
  46 <p>Test that mouse state is correctly reset after a drag. To run this test, use a mouse to drag the link "Drag me" around. It should change from blue to red while being dragged, and red to green once the drag ends by releasing the mouse button.</p>
  47 <div draggable="true" id="drag" href="#">Drag me</div>
  48 <div id="console"></div>
  49 </body>