blob: ed39fdefcc05871536090ef32aafd6839bff661b [file] [log] [blame]
<!DOCTYPE html>
<html>
<body>
<p>This tests dragging an element inside a shadow tree. To manually test, drag and drop the blue box below into a green box.</p>
<div id="target" class="box"></div>
<div id="destination" class="box green">here</div>
<pre id="log"></pre>
<style>
.box { margin: 10px 0; }
.green { width: 100px; height: 100px; padding: 10px; border: solid 5px green; }
</style>
<script>
target.addEventListener('dragstart', (event) => log.textContent += `dragstart event fired on target for: ${event.target.id}\n`);
target.addEventListener('dragend', (event) => log.textContent += `dragend event fired on target for: ${event.target.id}\n`);
destination.addEventListener('dragenter', (event) => log.textContent += `dragenter event fired on destination for: ${event.target.id}\n`);
destination.addEventListener('dragover', (event) => {
event.dataTransfer.effectAllowed = "copyMove";
event.preventDefault();
});
destination.addEventListener('drop', (event) => log.textContent += `drop event fired on destination for: ${event.target.id}\n`);
const shadowRoot = target.attachShadow({mode: 'closed'});
shadowRoot.innerHTML = `
<style>
.box { width: 100px; height: 100px; padding: 10px; background: #36f; }
</style>
<div class="box" draggable="true">Drag this</div>`;
if (window.eventSender) {
testRunner.dumpAsText();
eventSender.mouseMoveTo(target.offsetLeft + 10, target.offsetTop + 10);
eventSender.mouseDown();
eventSender.leapForward(300);
eventSender.mouseMoveTo(destination.offsetLeft + 10, destination.offsetTop + 10);
eventSender.mouseUp();
}
</script>
</body>
</html>