custom-highlight-painting-text-shadow-invalidation.html (1362B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <title>CSS Highlight API Test: 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-shadow-ref.html"> 7 <meta name="assert" value="A change to text shadow size in a highlight is correctly rendered"> 8 <meta name="fuzzy" content="0-64;0-2"> 9 <script src="resources/run-after-layout-and-paint.js"></script> 10 <style> 11 ::root { 12 --shadow-offset-x: 15px; 13 --shadow_offset-y: 20px; 14 } 15 ::highlight(example-highlight) { 16 background-color: yellow; 17 color: blue; 18 text-shadow: var(--shadow-offset-x, 5px) var(--shadow-offset-y, 10px) rgba(0, 255, 0, 0.5); 19 } 20 </style> 21 <body> 22 <span>One </span><span>two </span><span>three…</span> 23 <script> 24 let r = new Range(); 25 r.setStart(document.body, 1); 26 r.setEnd(document.body, 3); 27 CSS.highlights.set("example-highlight", new Highlight(r)); 28 29 runAfterLayoutAndPaint(()=>{ 30 document.documentElement.style.setProperty("--shadow-offset-x", "5px"); 31 document.documentElement.style.setProperty("--shadow-offset-y", "10px"); 32 runAfterLayoutAndPaint(()=>{ 33 document.documentElement.removeAttribute("class"); 34 }); 35 }); 36 </script> 37 </body> 38 </html>