Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /shadow-dom/dragenter-related-target.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" href="mailto:masonf@chromium.org">
<link rel="author" href="mailto:dbaron@dbaron.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
div {
width: 100px;
height: 100px;
}
#target1 {
background: blue;
}
#host {
background: red;
}
</style>
<body>
<div id="target1">Target 1</div>
<div id="host"></div>
<script>
async_test(t => {
const source = document.getElementById('source');
const target1 = document.getElementById('target1');
const host = document.getElementById('host');
const shadow = host.attachShadow({mode: 'closed'});
shadow.innerHTML = `<div id=doNotExposeThisNode style="width: 100px; height: 100px; background: green;" draggable=true></div>`;
const secretNode = shadow.firstChild;
secretNode.addEventListener('dragstart', t.step_func(e => {
e.dataTransfer.setData('text/plain', 'foo');
e.dataTransfer.effectAllowed = 'copy';
}));
secretNode.addEventListener('dragenter', t.step_func(e => {
e.preventDefault();
}));
secretNode.addEventListener('dragover', t.step_func(e => {
e.preventDefault();
}));
let dragEnterFiredOnTarget1 = false;
target1.addEventListener('dragenter', t.step_func(e => {
dragEnterFiredOnTarget1 = true;
assert_equals(e.relatedTarget, host, "relatedTarget should be host, not node in shadow tree");
e.preventDefault();
}));
target1.addEventListener('dragover', t.step_func(e => {
e.preventDefault();
}));
const actions = new test_driver.Actions()
.pointerMove(0, 0, {origin: host})
.pointerDown()
.pointerMove(5, 5, {origin: host}) // First drag within host
.pointerMove(0, 0, {origin: target1}) // Then drag over target1
.pointerUp();
actions.send().then(t.step_func_done(() => {
assert_true(dragEnterFiredOnTarget1, "dragenter should have fired on target1");
}));
}, "dragleave relatedTarget should be retargeted to shadow host when entering shadow DOM");
</script>
</body>