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>