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>