highlight-styling-005.html (1372B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Pseudo-Elements Test: Invalidation on custom property changes</title> 5 <link rel="author" title="Stephen Chenney" href="mailto:schenney@schenney.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling"> 7 <link rel="match" href="highlight-styling-005-ref.html"> 8 <meta name="assert" value="Verify that changing a custom property value on the root updates highlights that use the property."> 9 <script src="support/selections.js"></script> 10 <link rel="stylesheet" href="support/highlights.css"> 11 <script src="/common/reftest-wait.js"></script> 12 <style> 13 :root { 14 --bg: red; 15 } 16 main::selection { 17 background-color: var(--bg, red); 18 } 19 </style> 20 <body onload="runTest()"> 21 <p>Test passes if the text below has green background.</p> 22 <main class="highlight_reftest"> 23 <p id="selected">quick</p> 24 </main> 25 <script> 26 function runTest() { 27 selectNodeContents(document.querySelector('main')); 28 requestAnimationFrame(() => { 29 requestAnimationFrame(() => { 30 document.querySelector(':root').style.setProperty('--bg', 'green'); 31 requestAnimationFrame(() => { 32 takeScreenshot(); 33 }); 34 }); 35 }); 36 } 37 </script> 38 </body> 39 </html>