highlight-text-decorations.html (2581B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Text decorations in custom highlight pseudo elements.</title> 6 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#applicable-properties"> 7 <link rel="match" href="highlight-text-decorations-ref.html"> 8 <meta name="assert" content="Text decorations in highlights should be displayed."> 9 <style> 10 html { 11 font-size: 24pt; 12 } 13 ::highlight(example-highlight1) { 14 text-decoration: underline; 15 text-decoration-color: red; 16 color: blue; 17 } 18 ::highlight(example-highlight2) { 19 text-decoration: line-through; 20 text-decoration-color: violet; 21 text-decoration-style: double; 22 } 23 ::highlight(example-highlight3) { 24 text-decoration: overline; 25 text-decoration-color: orange; 26 text-decoration-style: dotted; 27 } 28 /* 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> */ 29 .obscurer1 { 30 position: absolute; 31 top: 25px; 32 left: 95px; 33 width: 10px; 34 height: 10px; 35 background: grey; 36 } 37 .obscurer2 { 38 position: absolute; 39 top: 35px; 40 left: 180px; 41 width: 10px; 42 height: 10px; 43 background: grey; 44 } 45 </style> 46 </head> 47 <body> 48 <span id="text1">One two three</span> 49 <div class='obscurer1'></div> 50 <div class='obscurer2'></div> 51 52 <script> 53 let textElement = document.getElementById('text1'); 54 let highlight1 = new Highlight(new StaticRange({startContainer: textElement.childNodes[0], startOffset: 1, endContainer: textElement.childNodes[0], endOffset: 2})); 55 let highlight2 = new Highlight(new StaticRange({startContainer: textElement.childNodes[0], startOffset: 5, endContainer: textElement.childNodes[0], endOffset: 6})); 56 let highlight3 = new Highlight(new StaticRange({startContainer: textElement.childNodes[0], startOffset: 10, endContainer: textElement.childNodes[0], endOffset: 13})); 57 58 CSS.highlights.set("example-highlight1", highlight1); 59 CSS.highlights.set("example-highlight2", highlight2); 60 CSS.highlights.set("example-highlight3", highlight3); 61 </script> 62 </body> 63 </html>