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

   1 <!DOCTYPE html>
   2 <style>
   3   div { background: rgb(0, 0, 0); }
   4   div:hover { background: rgb(255, 0, 0); }
   5   div:hover:active { background: rgb(255, 255, 0); }
   6   div:active { background: rgb(0, 255, 0); }
   7   div {
   8     width: 100px;
   9     height: 100px;
  10     border: 2px solid rgb(0, 0, 255);
  11   }
  12 </style>
  13
  14 <body>
  15   <div id="box"></div>
  16   <div id="box2"></div>
  17   <pre id="description"></div>
  18   <pre id="console"></pre>
  19 </body>
  20
  21 <script src="../../resources/js-test.js"></script>
  22 <script>
  23   function shouldHaveBackground(element, bg) {
  24     background = getComputedStyle(element, null).getPropertyValue("background-color")
  25     shouldBeEqualToString('background', bg)
  26   }
  27
  28   if (window.testRunner) {
  29     description("Dragging out of an element should cause it to lose :hover")
  30     var box = document.getElementById('box')
  31     var box2 = document.getElementById('box2')
  32     testRunner.dumpAsText();
  33
  34     eventSender.dragMode = false;
  35     // This mouse click seems to be required for WebKit's event handling to
  36     // pick up the :hover class. See https://bugs.webkit.org/show_bug.cgi?id=74264
  37     eventSender.mouseDown()
  38     eventSender.mouseUp()
  39
  40     // Move into the first box.
  41     eventSender.mouseMoveTo(50, 50)
  42     shouldHaveBackground(box, 'rgb(255, 0, 0)')
  43     shouldHaveBackground(box2, 'rgb(0, 0, 0)')
  44
  45     eventSender.mouseDown()
  46     shouldHaveBackground(box, 'rgb(255, 255, 0)')
  47     shouldHaveBackground(box2, 'rgb(0, 0, 0)')
  48
  49     // With the mouse still down, move into the second box.
  50     eventSender.mouseMoveTo(50, 150)
  51     shouldHaveBackground(box, 'rgb(0, 255, 0)')
  52     shouldHaveBackground(box2, 'rgb(0, 0, 0)')
  53
  54     // Mouse still down, move outside of both boxes.
  55     eventSender.mouseMoveTo(400, 50)
  56     shouldHaveBackground(box, 'rgb(0, 255, 0)')
  57     shouldHaveBackground(box2, 'rgb(0, 0, 0)')
  58
  59     eventSender.mouseUp()
  60     shouldHaveBackground(box, 'rgb(0, 0, 0)')
  61     shouldHaveBackground(box2, 'rgb(0, 0, 0)')
  62   }
  63 </script>