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

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

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

  jsTestIsAsync = true;

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

    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
    await eventSender.asyncMouseDown()
    await eventSender.asyncMouseUp()

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

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

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

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

    await eventSender.asyncMouseUp()
    shouldHaveBackground(box, 'rgb(0, 0, 0)')
    shouldHaveBackground(box2, 'rgb(0, 0, 0)')

    // Move into the textarea.
    await eventSender.asyncMouseMoveTo(50, 250)
    shouldHaveBackground(textarea, 'rgb(255, 0, 0)')

    await eventSender.asyncMouseDown()
    shouldHaveBackground(textarea, 'rgb(255, 255, 0)')

    await eventSender.asyncMouseMoveTo(400, 250)
    shouldHaveBackground(textarea, 'rgb(0, 255, 0)')

    await eventSender.asyncMouseUp()
    shouldHaveBackground(textarea, 'rgb(0, 0, 0)')

    finishJSTest();
  }
</script>