custom-highlight-font-metrics-005.html (1372B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <title>CSS Highlight API Test: </title> 5 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 6 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling"> 7 <link rel="match" href="custom-highlight-font-metrics-005-ref.html"> 8 <meta name="assert" value="dynmamic font size changes with highlights and font relative metrics"> 9 <meta name="fuzzy" content="0-80;0-10"> 10 <script src="/common/reftest-wait.js"></script> 11 <head> 12 <style> 13 :root { 14 font-size: 16px; 15 } 16 div { 17 margin: 50px; 18 font-size: 40px; 19 } 20 #h2 { 21 font-size: 20px; 22 } 23 ::highlight(highlight1) { 24 text-underline-offset: 0.5em; 25 text-decoration-line: underline; 26 text-decoration-color: green; 27 text-decoration-thickness: 0.25rem; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="h1">Font relative units with 20px font</div> 33 <div id="h2">Font relative units with 20px font</div> 34 <script> 35 let r1 = new Range(); 36 r1.setStart(h1, 0); 37 r1.setEnd(h1, 1); 38 let r2 = new Range(); 39 r2.setStart(h2, 0); 40 r2.setEnd(h2, 1); 41 CSS.highlights.set("highlight1", new Highlight(r1, r2)); 42 43 requestAnimationFrame(() => { 44 h1.style.fontSize = "20px"; 45 requestAnimationFrame(() => { takeScreenshot() } 46 )}); 47 </script> 48 </body> 49 </html>