| <!DOCTYPE html> |
| <title>Container-relative units in ::selection</title> |
| <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> |
| <link rel="match" href="container-units-selection-pseudo-ref.html"> |
| <style> |
| #outer, #inner { |
| container-type: size; |
| } |
| #outer { |
| width: 200px; |
| height: 200px; |
| border: 1px solid black; |
| } |
| #inner { |
| width: 100px; |
| height: 100px; |
| background-color: skyblue; |
| } |
| #inner::selection { |
| background-color: seagreen; |
| text-decoration: underline solid; |
| text-underline-offset: 10cqh; |
| } |
| </style> |
| <div id=outer> |
| <div id=inner> |
| Some text |
| </div> |
| </div> |
| |
| <script> |
| let range = document.createRange(); |
| range.selectNode(inner); |
| window.getSelection().addRange(range); |
| </script> |
