selection-universal-shadow-dom.html (943B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: Universal ::selection in Shadow DOM</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 ::selection { 9 background-color: pink; 10 color: red; 11 } 12 </style> 13 <div id="host"></div> 14 <script> 15 const root = host.attachShadow({mode:"open"}); 16 root.innerHTML = ` 17 <style> 18 ::selection { 19 background-color: green; 20 color: lime; 21 } 22 </style> 23 <div id="target"></div> 24 `; 25 test(() => { 26 const style = getComputedStyle(root.querySelector("#target"), "::selection"); 27 assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "Background color is green."); 28 assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime."); 29 }, "getComputedStyle() for #target ::selection"); 30 </script>