css-highlight-invalidation-001.html (1356B)
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="css-highlight-invalidation-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 <meta name="fuzzy" content="0-56;0-10"> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 ::highlight(example) { 12 text-decoration: wavy underline overline green 5px; 13 text-underline-offset: 20px; 14 } 15 div { 16 border: solid 1px black; 17 padding: 50px; 18 } 19 </style> 20 <div id="upper">This line starts with under/over lines that remain.</div> 21 <div id="lower">This line starts with under/over lines that are removed.</div> 22 <script> 23 let range_upper = new Range(); 24 range_upper.setStart(upper, 0); 25 range_upper.setEnd(upper, 1); 26 let range_lower = new Range(); 27 range_lower.setStart(lower, 0); 28 range_lower.setEnd(lower, 1); 29 CSS.highlights.set(`example`, new Highlight(range_lower)); 30 31 requestAnimationFrame(() => requestAnimationFrame(() => { 32 CSS.highlights.set(`example`, new Highlight(range_upper)); 33 requestAnimationFrame(() => takeScreenshot()); 34 })); 35 </script> 36 </html>