| <!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> |
