target-text-dynamic-001.html (1042B)
1 <!DOCTYPE html> 2 <html lang="en" class="reftest-wait"> 3 <meta charset="utf-8" /> 4 <title>CSS Pseudo-Elements Test: Dynamic change ::target-text background color</title> 5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text"> 7 <meta name="assert" content="This test checks that it's possible to modify dinamically the background color of a targeted text through ::target-text pseudo-element."> 8 <link rel="match" href="target-text-dynamic-001-ref.html"> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 ::target-text { 12 background-color: cyan; 13 } 14 </style> 15 16 <p>The test passes if the following word has a magenta background.</p> 17 <div>Example</div> 18 19 <script> 20 location.href = "#:~:text=Example"; 21 requestAnimationFrame(() => requestAnimationFrame(() => { 22 if (document.styleSheets[0].cssRules[0]) 23 document.styleSheets[0].cssRules[0].style.backgroundColor = "magenta"; 24 takeScreenshot(); 25 })); 26 </script> 27 </html>