70 lines
2.7 KiB
HTML
70 lines
2.7 KiB
HTML
<!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> |