| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Text decorations in custom highlight pseudo elements.</title> |
| <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#applicable-properties"> |
| <link rel="match" href="highlight-text-decorations-expected.html"> |
| <meta name="assert" content="Text decorations in highlights should be displayed."> |
| <style> |
| html { |
| font-size: 24pt; |
| } |
| ::highlight(example-highlight1) { |
| text-decoration: underline; |
| text-decoration-color: red; |
| color: blue; |
| } |
| ::highlight(example-highlight2) { |
| text-decoration: line-through; |
| text-decoration-color: violet; |
| text-decoration-style: double; |
| } |
| ::highlight(example-highlight3) { |
| text-decoration: overline; |
| text-decoration-color: orange; |
| text-decoration-style: dotted; |
| } |
| /* FIXME: There is a discrepency for how the underlines are displayed at the end of the line, leading to a pixel different in this text. Find a real fix, but in the meantime, obscure the offending pixel https://bugs.webkit.org/show_bug.cgi?id=207512 <rdar://problem/59327965> */ |
| .obscurer1 { |
| position: absolute; |
| top: 25px; |
| left: 95px; |
| width: 10px; |
| height: 10px; |
| background: grey; |
| } |
| .obscurer2 { |
| position: absolute; |
| top: 35px; |
| left: 180px; |
| width: 10px; |
| height: 10px; |
| background: grey; |
| } |
| </style> |
| </head> |
| <body> |
| <span id="text1">One two three</span> |
| <div class='obscurer1'></div> |
| <div class='obscurer2'></div> |
| |
| <script> |
| let textElement = document.getElementById('text1'); |
| let highlight1 = new Highlight(new StaticRange({startContainer: textElement.childNodes[0], startOffset: 1, endContainer: textElement.childNodes[0], endOffset: 2})); |
| let highlight2 = new Highlight(new StaticRange({startContainer: textElement.childNodes[0], startOffset: 5, endContainer: textElement.childNodes[0], endOffset: 6})); |
| let highlight3 = new Highlight(new StaticRange({startContainer: textElement.childNodes[0], startOffset: 10, endContainer: textElement.childNodes[0], endOffset: 13})); |
| |
| CSS.highlights.set("example-highlight1", highlight1); |
| CSS.highlights.set("example-highlight2", highlight2); |
| CSS.highlights.set("example-highlight3", highlight3); |
| </script> |
| </body> |
| </html> |
