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