custom-highlight-font-metrics-004.html (1180B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: </title> 4 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 5 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling"> 6 <link rel="match" href="custom-highlight-font-metrics-003-ref.html"> 7 <meta name="assert" value="combining a font relative highlight with another highlight"> 8 <meta name="fuzzy" content="0-120;0-8"> 9 <head> 10 <style> 11 div { 12 margin: 40px; 13 font-size: 20px; 14 } 15 ::highlight(highlight1) { 16 text-underline-offset: 0.5em; 17 text-decoration-line: underline; 18 text-decoration-color: green; 19 text-decoration-thickness: 0.25rem; 20 } 21 ::highlight(highlight2) { 22 text-decoration-line: overline; 23 text-decoration-color: green; 24 text-decoration-thickness: 4px; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="h1">A green 10px offset underline 4px thick and green overline 4px thick</div> 30 <script> 31 let r1 = new Range(); 32 r1.setStart(h1, 0); 33 r1.setEnd(h1, 1); 34 CSS.highlights.set("highlight1", new Highlight(r1)); 35 CSS.highlights.set("highlight2", new Highlight(r1)); 36 </script> 37 </body> 38 </html>