42 lines
1.6 KiB
HTML
42 lines
1.6 KiB
HTML
<!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>
|