Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>`pointercancel` target at drag start should be the draggable element even if iframe moves under the pointer</title>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
div[draggable=true] {
width: 64px;
height: 64px;
font-size: 64px;
padding: 0;
overflow: hidden;
}
iframe {
width: 64px;
height: 1px;
margin: 0;
display: block;
}
</style>
<script>
"use strict";
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(async () => {
const iframe = document.querySelector("iframe");
let unexpectedPointerCancel;
iframe.contentWindow.addEventListener("pointercancel", event => {
unexpectedPointerCancel = event;
}, {once: true});
const draggable = document.querySelector("div[draggable]");
draggable.addEventListener("dragstart", () => {
iframe.style.height = "64px";
iframe.getBoundingClientRect();
}, {once: true});
let pointerCancelTarget;
draggable.addEventListener("pointercancel", event => {
pointerCancelTarget = event.target;
});
await synthesizePlainDragAndDrop({
srcElement: draggable,
destElement: document.getElementById("dest"),
srcX: draggable.getBoundingClientRect().width / 2,
srcY: draggable.getBoundingClientRect().height / 2,
});
is(
pointerCancelTarget,
draggable,
"`pointercancel` event target should be the draggable element even if an iframe moves under the pointer"
);
is(
unexpectedPointerCancel,
undefined,
"`pointercancel` event shouldn't be fired on the sub-document"
);
SimpleTest.finish();
});
</script>
</head>
<body>
<iframe srcdoc="Here is a sub-document"></iframe>
<div draggable="true">DragMe!</div>
<div id="dest" style="width: 100px; height: 100px"></div>
</body>
</html>