src/third_party/WebKit/LayoutTests/fast/selectors/shadow-host-div-with-text.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     body, input {
   6       border: 0;
   7       margin: 0;
   8       padding: 0;
   9       font: 16px sans-serif;
  10     }
  11   </style>
  12 </head>
  13 <body>
  14   <template>
  15     <style>
  16       span::selection { background: rgba(255, 0, 0, 0.95); }
  17     </style>
  18     <span>
  19       Some hearts are diamonds some hearts are stones
  20     </span>
  21   </template>
  22   <input>
  23   <script>
  24     var input = document.querySelector('input');
  25     var template = document.querySelector('template');
  26     var root = input.createShadowRoot();
  27     root.appendChild(template.content);
  28     var span = root.querySelector('span');
  29
  30     var selection = window.getSelection();
  31     var range = document.createRange();
  32     range.selectNodeContents(span);
  33     selection.addRange(range);
  34   </script>
  35 </body>
  36 </html>