Hovering over a slotted Text node clears hover state
[WebKit-https.git] / LayoutTests / fast / shadow-dom / activate-over-slotted-content.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 my-host {
6     display: block;
7     width: 100px;
8     height: 100px;
9     background: purple;
10 }
11 </style>
12 </head>
13 <body>
14 <p>Test passes if you see a single 100px by 100px green box below.</p>
15 <my-host>Mouse down over this text</my-host>
16
17 <script>
18 const host = document.querySelector('my-host');
19 host.attachShadow({mode: 'closed'}).innerHTML = `
20 <a><span><slot></slot></span></a>
21 <style>
22 a {
23     display: block;
24     width: 80px;
25     height: 80px;
26     padding: 10px;
27     background: red;
28 }
29 a:active {
30     background: green;
31     color: green;
32 }
33 span {
34     background: green;
35 }
36 </style>`;
37
38 if (window.eventSender) {
39     eventSender.mouseMoveTo(host.offsetLeft + 15, host.offsetTop + 15);
40     eventSender.mouseDown();
41 }
42
43 </script>
44 </body>
45 </html>