<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../utils.js"></script>
<script>

'use strict';

target_test({ x: "100px", y: "100px", width: "100px", height: "100px" }, (target, test) => {
    const eventTracker = new EventTracker(target, ["pointermove", "gotpointercapture", "lostpointercapture"]);

    // Start with the mouse outside of the target.
    eventSender.mouseMoveTo(50, 50);

    // Move it over the target, this yields a "pointermove" event.
    eventSender.mouseMoveTo(150, 150);
    eventTracker.assertMatchesEvents([
        { type: "pointermove", x: 150, y: 150 }
    ]);
    eventTracker.clear();

    // Press the mouse and move it outside the target and release it, this does not yield a "pointermove" event since there is no capture.
    eventSender.mouseDown();
    eventSender.mouseMoveTo(250, 250);
    eventSender.mouseUp();

    // Now, move the mouse over the target again.
    eventSender.mouseMoveTo(150, 150);
    eventTracker.assertMatchesEvents([
        { type: "pointermove", x: 150, y: 150 }
    ]);
    eventTracker.clear();

    // And press the mouse button again, but set the capture while handling the "pointerdown" event.
    let pointerId;
    target.addEventListener("pointerdown", event => {
        pointerId = event.pointerId;
        assert_false(target.hasPointerCapture(pointerId), "The target does not have pointer capture by default.");
        target.setPointerCapture(pointerId);
        assert_true(target.hasPointerCapture(pointerId), "The target has pointer capture after calling setPointerCapture().");
    });
    eventSender.mouseDown();

    // Move the mouse oustide the target again. This will yield a "gotpointercapture" event and a "pointermove" event since the target now has pointer capture.
    eventSender.mouseMoveTo(250, 250);
    eventTracker.assertMatchesEvents([
        { type: "gotpointercapture" },
        { type: "pointermove", x: 250, y: 250 }
    ]);
    eventTracker.clear();

    // Finally, release capture and mouse the mouse again, this should not yield a "pointermove" event.
    target.releasePointerCapture(pointerId);
    assert_false(target.hasPointerCapture(pointerId), "The target no longer has pointer capture after calling releasePointerCapture().");
    eventSender.mouseMoveTo(240, 240);
    eventTracker.assertMatchesEvents([
        { type: "lostpointercapture" }
    ]);

    test.done();
}, `Testing that setting pointer capture on an element dispatches pointermove events to that element even when the pointer is outside of its bounds.`);

</script>
</body>
</html>