custom-highlight-painting-invalidation-007.html (1024B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <title>CSS Highlight API Test: CSS Rule change</title> 5 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> 6 <link rel="match" href="custom-highlight-painting-invalidation-007-ref.html"> 7 <meta name="assert" value="::highlight overlay is correctly invalidated and repainted after CSS rule is changed"> 8 <script src="resources/run-after-layout-and-paint.js"></script> 9 <style> 10 span::highlight(example-highlight) { 11 background: yellow; 12 } 13 14 .blue::highlight(example-highlight) { 15 background: blue; 16 } 17 </style> 18 <body> 19 <span>Hello</span> 20 <script> 21 const range = new Range(); 22 const span = document.querySelector("span"); 23 range.setStart(span, 0); 24 range.setEnd(span, 1); 25 CSS.highlights.set("example-highlight", new Highlight(range)); 26 27 // Force frame paint before changing style 28 runAfterLayoutAndPaint(() => { 29 span.className = "blue"; 30 document.documentElement.removeAttribute("class"); 31 }); 32 </script> 33 </body> 34 </html>