custom-highlight-painting-020.html (932B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Highlight API Test: Highlighting Ligatures</title> 4 <link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 6 <link rel="match" href="custom-highlight-painting-020-ref.html"> 7 <meta name="assert" value="Highlights should split ligatures."> 8 <meta name="fuzzy" content="0-128;0-28"> 9 <style> 10 @font-face { 11 font-family: 'mplus'; 12 src: url('../../../fonts/mplus-1p-regular.woff'); 13 } 14 ::highlight(foo) { 15 color:green; 16 text-decoration: blue 2px line-through; 17 } 18 div { 19 font-size: 7em; 20 font-family: mplus, serif; 21 } 22 </style> 23 <body><div>fii ffi fff</div> 24 <script> 25 let textNode = document.body.firstChild.firstChild; 26 27 let r1 = new Range(); 28 r1.setStart(textNode, 1); 29 r1.setEnd(textNode, 9); 30 let h1 = new Highlight(r1); 31 CSS.highlights.set("foo", h1); 32 </script>