File: change-sync-for-nested-use.html

package info (click to toggle)
firefox-esr 91.13.0esr-1~deb11u1
  • links: PTS, VCS
  • area: main
  • in suites: bullseye
  • size: 3,375,652 kB
  • sloc: cpp: 5,762,054; javascript: 5,481,714; ansic: 3,121,191; python: 851,492; asm: 331,172; xml: 178,949; java: 155,554; sh: 63,704; makefile: 20,127; perl: 12,825; yacc: 4,583; cs: 3,846; objc: 3,026; lex: 1,720; exp: 762; pascal: 635; php: 436; lisp: 260; awk: 231; ruby: 103; sed: 53; sql: 46; csh: 45
file content (30 lines) | stat: -rw-r--r-- 958 bytes parent folder | download | duplicates (28) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!doctype html>
<html class="reftest-wait">
<title>Change sync for nested use</title>
<link rel="match" href="change-sync-for-nested-use-ref.html">
<svg width="400" height="500" onload="main()">
  <rect id="r1" width="40" height="40" style="fill:red" />
  <rect id="r2" x="50" y="50" width="40" height="40" style="fill:gray" />
  <g id="g1">
    <use id="u1" x="120" href="#r1" />
    <use id="u2" x="120" href="#r2" />
    <rect x="120" y="120" width="50" height="50" style="fill:skyblue" />
  </g>
  <use id="u3" x="120" href="#g1" />
  <use id="u4" y="170" href="#u2" />
  <use id="u5" x="-30" y="220" href="#u2" />
</svg>

<script>
  function main() {
    let r1 = document.getElementById("r1"),
        r2 = document.getElementById("r2");

    requestAnimationFrame(() => requestAnimationFrame(() => {
      r1.style.fill = "navy";
      r2.style.fill = "purple";
      document.documentElement.removeAttribute("class");
    }));
  };
</script>
</html>