Hovering over a slotted Text node clears hover state
[WebKit-https.git] / LayoutTests / fast / shadow-dom / hover-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>Hover over this text</my-host>
16
17 <script>
18 const host = document.querySelector('my-host');
19 host.attachShadow({mode: 'closed'}).innerHTML = `
20 <div id="container"><span><slot></slot></span></div>
21 <style>
22 #container {
23     width: 80px;
24     height: 80px;
25     padding: 10px;
26     background: red;
27 }
28 #container:hover {
29     background: green;
30     color: green;
31 }
32 span {
33     background: green;
34 }
35 </style>`;
36
37 if (window.eventSender)
38     eventSender.mouseMoveTo(host.offsetLeft + 15, host.offsetTop + 15);
39
40 </script>
41 </body>
42 </html>