<!DOCTYPE html>
<style>
  div { background: rgb(0, 0, 0); }
  div:hover { background: rgb(255, 0, 0); }
  div:hover:active { background: rgb(255, 255, 0); }
  div:active { background: rgb(0, 255, 0); }
  div {
    width: 100px;
    height: 100px;
    border: 2px solid rgb(0, 0, 255);
  }
</style>

<body>
  <div id="box"></div>
  <div id="box2"></div>
  <pre id="description"></div>
  <pre id="console"></pre>
</body>

<script src="../js/resources/js-test-pre.js"></script>
<script>
  function shouldHaveBackground(element, bg) {
    background = getComputedStyle(element, null).getPropertyValue("background-color")
    shouldBeEqualToString('background', bg)
  }

  if (window.testRunner) {
    description("Dragging out of an element should cause it to lose :hover")
    var box = document.getElementById('box')
    var box2 = document.getElementById('box2')
    testRunner.dumpAsText();

    eventSender.dragMode = false;
    // This mouse click seems to be required for WebKit's event handling to
    // pick up the :hover class. See https://bugs.webkit.org/show_bug.cgi?id=74264
    eventSender.mouseDown()
    eventSender.mouseUp()

    // Move into the first box.
    eventSender.mouseMoveTo(50, 50)
    shouldHaveBackground(box, 'rgb(255, 0, 0)')
    shouldHaveBackground(box2, 'rgb(0, 0, 0)')

    eventSender.mouseDown()
    shouldHaveBackground(box, 'rgb(255, 255, 0)')
    shouldHaveBackground(box2, 'rgb(0, 0, 0)')

    // With the mouse still down, move into the second box.
    eventSender.mouseMoveTo(50, 150)
    shouldHaveBackground(box, 'rgb(0, 255, 0)')
    shouldHaveBackground(box2, 'rgb(0, 0, 0)')

    // Mouse still down, move outside of both boxes.
    eventSender.mouseMoveTo(400, 50)
    shouldHaveBackground(box, 'rgb(0, 255, 0)')
    shouldHaveBackground(box2, 'rgb(0, 0, 0)')

    eventSender.mouseUp()
    shouldHaveBackground(box, 'rgb(0, 0, 0)')
    shouldHaveBackground(box2, 'rgb(0, 0, 0)')
  }
</script>