target-text-dynamic-004.html (1054B)
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 span::target-text { 12 background-color: cyan; 13 } 14 15 span { 16 background-color: cyan; 17 } 18 </style> 19 20 <p>The test passes if the following word has a magenta background.</p> 21 <div><span>Example</span></div> 22 23 <script> 24 location.href = "#:~:text=Example"; 25 requestAnimationFrame(() => requestAnimationFrame(() => { 26 document.styleSheets[0].cssRules[0].style.backgroundColor = "magenta"; 27 takeScreenshot(); 28 })); 29 </script> 30 </html>