target-text-dynamic-002.html (980B)
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 .magenta::target-text { 12 background-color: magenta; 13 } 14 </style> 15 16 <p>The test passes if the following word has a magenta background.</p> 17 <div id="target">Example</div> 18 19 <script> 20 location.href = "#:~:text=Example"; 21 requestAnimationFrame(() => requestAnimationFrame(() => { 22 target.classList.add("magenta"); 23 takeScreenshot(); 24 })); 25 </script> 26 </html>