container-units-selection-pseudo-ref.html (662B)
1 <!DOCTYPE html> 2 <title>Container-relative units in ::selection (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 4 <style> 5 #outer { 6 width: 200px; 7 height: 200px; 8 border: 1px solid black; 9 } 10 #inner { 11 width: 100px; 12 height: 100px; 13 background-color: skyblue; 14 } 15 #inner::selection { 16 background-color: seagreen; 17 text-decoration: underline solid; 18 text-underline-offset: 10px; 19 } 20 </style> 21 <div id=outer> 22 <div id=inner> 23 Some text 24 </div> 25 </div> 26 27 <script> 28 let range = document.createRange(); 29 range.selectNode(inner); 30 window.getSelection().addRange(range); 31 </script>