| <!doctype html> |
| <meta charset="utf-8"> |
| <title>CSS Pseudo-Elements Test: highlight painting</title> |
| <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> |
| <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting"> |
| <link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order"> |
| <link rel="match" href="highlight-painting-002-ref.html"> |
| <meta name="assert" value="::selection overlay is painted in the correct order, including originating element shadows (but not text proper) where selected"> |
| <script src="support/selections.js"></script> |
| <style> |
| :root { |
| writing-mode: vertical-rl; |
| } |
| p { |
| font-size: 7em; |
| color: #E03838C0; |
| text-shadow: 0.1250em 0.1250em #C0C000C0; |
| |
| /* |
| https://drafts.csswg.org/css-pseudo-4/#highlight-bounds |
| For text, the corresponding overlay must cover at least |
| the entire em box and may extend further above/below the |
| em box to the line box edges. |
| */ |
| line-height: 1; |
| } |
| p::selection { |
| color: #707070C0; |
| background: #38E038C0; |
| text-shadow: 0.2500em 0.2500em #3838E0C0; |
| } |
| </style> |
| <p>quick |
| <script> |
| const target = document.querySelector("p"); |
| selectRangeWith(range => { |
| range.selectNodeContents(target); |
| range.setStart(target.childNodes[0], 1); |
| range.setEnd(target.childNodes[0], 4); |
| }); |
| </script> |
