highlight-custom-properties-dynamic-001.html (963B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Pseudo Test: Dynamic Custom Properties for Highlights</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling"> 5 <link rel="match" href="highlight-custom-properties-dynamic-001-ref.html"> 6 <link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com"> 7 <meta name="assert" value="Custom property values in highlights update correctly when the property is updated."> 8 <head> 9 <style> 10 div { 11 --background-color: red; 12 } 13 ::selection { 14 background-color: var(--background-color, red); 15 } 16 </style> 17 </head> 18 <div id="originating">Green background when selected</div> 19 <script> 20 window.getSelection().selectAllChildren(document.body); 21 requestAnimationFrame(() => { 22 requestAnimationFrame(() => { 23 originating.style.setProperty("--background-color", "green"); 24 requestAnimationFrame(() => takeScreenshot()); 25 }); 26 }); 27 </script> 28 </html>