69 lines
2.2 KiB
HTML
69 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<p>This tests mouseenter and mouseleave events across shadow boundaries.</p>
|
|
<div id="hostParent" style="display: inline-block; border: solid 10px green;">
|
|
<div id="host" style="display: inline-block;">
|
|
text content
|
|
<p id="targetParent" style="margin: 0;"><span id="target">element content</span></p>
|
|
</div></div><pre id="log"></pre>
|
|
<script>
|
|
|
|
const host = document.getElementById('host');
|
|
const shadowRoot = host.attachShadow({mode: 'closed'});
|
|
shadowRoot.innerHTML = `
|
|
<div id="slotParent" style="width: 200px; margin: 10px; padding: 10px; border: solid 10px blue;">
|
|
<slot id="slot"></slot>
|
|
</div>`;
|
|
const slot = shadowRoot.querySelector('slot');
|
|
|
|
const target = document.getElementById('target');
|
|
for (const element of [host.parentNode, host, target, target.parentNode, slot, slot.parentNode]) {
|
|
element.addEventListener('mouseenter', logEvent);
|
|
element.addEventListener('mouseleave', logEvent);
|
|
}
|
|
|
|
function log(text) {
|
|
document.getElementById('log').textContent += text + '\n';
|
|
}
|
|
|
|
function logEvent(event) {
|
|
log(`${event.type} on ${event.target.id}`);
|
|
}
|
|
|
|
function logPhase(phase) {
|
|
log(`\n==${phase}==`);
|
|
}
|
|
|
|
if (!window.eventSender)
|
|
document.write('This test requires eventSender');
|
|
else {
|
|
testRunner.dumpAsText();
|
|
const hostRect = host.getBoundingClientRect();
|
|
const targetRect = target.getBoundingClientRect();
|
|
const xAboveText = hostRect.x + 40;
|
|
let y = hostRect.top;
|
|
logPhase('Entering host parent');
|
|
eventSender.mouseMoveTo(xAboveText, y - 5);
|
|
logPhase('Entering host');
|
|
eventSender.mouseMoveTo(xAboveText, y + 5);
|
|
logPhase('Entering shadow content');
|
|
eventSender.mouseMoveTo(xAboveText, y + 15);
|
|
|
|
logPhase('Entering slotted text');
|
|
eventSender.mouseMoveTo(xAboveText, targetRect.top - 5);
|
|
logPhase('Entering slotted element');
|
|
eventSender.mouseMoveTo(xAboveText, targetRect.top + 5);
|
|
|
|
logPhase('Leaving slotted element');
|
|
eventSender.mouseMoveTo(xAboveText, targetRect.bottom + 5);
|
|
logPhase('Leaving host');
|
|
eventSender.mouseMoveTo(xAboveText, hostRect.bottom + 5);
|
|
|
|
host.parentNode.style.display = 'none';
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|