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

   1 <!DOCTYPE html>
   2 <style>
   3     span::selection { background-color: rgba(63, 128, 33, 0.95); color: yellow; }
   4 </style>
   5 <body onload="SelectText()">
   6     <div id="container">
   7         <span>DOM </span>
   8         <div id="shadowDiv" style="display:inline"></div>
   9         <span> DOM</span>
  10     </div>
  11     <div>
  12         Above Textual Selection should have Green background and yellow color on "DOM" <br>
  13         and Red background, Green color on "Shadow DOM".
  14     </div>
  15 </body>
  16 <script>
  17     var host = document.getElementById('shadowDiv');
  18     var root = host.createShadowRoot();
  19     root.innerHTML = '<style> span::selection { background-color: rgba(255, 0, 0, 0.95); color: green; } </style>' +
  20                         '<span>Shadow DOM </span>';
  21
  22     function SelectText() {
  23         var ele = document.getElementById('container');
  24         var selection = window.getSelection();
  25         selection.selectAllChildren(ele);
  26     }
  27 </script>