change-sync-for-nested-use.html (958B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>Change sync for nested use</title> 4 <link rel="match" href="change-sync-for-nested-use-ref.html"> 5 <svg width="400" height="500" onload="main()"> 6 <rect id="r1" width="40" height="40" style="fill:red" /> 7 <rect id="r2" x="50" y="50" width="40" height="40" style="fill:gray" /> 8 <g id="g1"> 9 <use id="u1" x="120" href="#r1" /> 10 <use id="u2" x="120" href="#r2" /> 11 <rect x="120" y="120" width="50" height="50" style="fill:skyblue" /> 12 </g> 13 <use id="u3" x="120" href="#g1" /> 14 <use id="u4" y="170" href="#u2" /> 15 <use id="u5" x="-30" y="220" href="#u2" /> 16 </svg> 17 18 <script> 19 function main() { 20 let r1 = document.getElementById("r1"), 21 r2 = document.getElementById("r2"); 22 23 requestAnimationFrame(() => requestAnimationFrame(() => { 24 r1.style.fill = "navy"; 25 r2.style.fill = "purple"; 26 document.documentElement.removeAttribute("class"); 27 })); 28 }; 29 </script> 30 </html>