custom-highlight-painting-text-decoration-dynamic-001.html (1037B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Highlight API Test: ::highlight dynamic change text-decoration</title> 5 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 6 <link rel="match" href="custom-highlight-painting-text-decoration-dynamic-001-ref.html"> 7 <meta name="assert" content="This test checks that it's possible to modify dynamically the text-decoration of a custom highlight through ::highlight pseudo-element."> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 ::highlight(example) { 11 text-decoration: solid underline red; 12 } 13 </style> 14 <p>The test passes if it line below has a green underline.</p> 15 <div id="target">target</div> 16 <script> 17 let range = new Range(); 18 range.setStart(target, 0); 19 range.setEnd(target, 1); 20 CSS.highlights.set(`example`, new Highlight(range)); 21 22 requestAnimationFrame(() => requestAnimationFrame(() => { 23 document.styleSheets[0].cssRules[0].style.textDecorationColor = "green"; 24 takeScreenshot(); 25 })); 26 </script> 27 </html>