summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/dynamic-pattern-01.svg
blob: e129d24493cf53b6d49ff71dc19a605b20c70962 (plain)
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait"
     xmlns:xlink="http://www.w3.org/1999/xlink" onload="startTest()">
  <title>Testing that dynamic changes to the element for a given ID are reflected in patterns</title>

  <rect id="u1" x="10%" width="11%" height="100%" fill="url(#r1)"/>
  <script>
    // force frame construction; test that parsing "r1" after frame construction
    // is still bound to "u1" eventually
    var rect = document.getElementById("u1").getBoundingClientRect();
  </script>
  <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="lime"/>
  </pattern>

  <pattern id="x" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="lime"/>
  </pattern>
  <rect id="u2" x="20%" width="11%" height="100%" fill="url(#r2)"/>

  <pattern id="r3" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="red"/>
  </pattern>
  <pattern id="r3" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="lime"/>
  </pattern>
  <rect id="u3" x="30%" width="11%" height="100%" fill="url(#r3)"/>

  <pattern id="r4" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="red"/>
  </pattern>
  <pattern id="r4" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="lime"/>
  </pattern>
  <rect id="u4" x="40%" width="11%" height="100%" fill="url(#r4)"/>

  <pattern id="r5" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="red"/>
  </pattern>
  <rect id="u5" x="50%" width="11%" height="100%" fill="url(#r5)"/>

  <pattern id="r6" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="red"/>
  </pattern>
  <pattern id="r6-2" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="lime"/>
  </pattern>
  <rect id="u6" x="60%" width="11%" height="100%" fill="url(#r6)"/>

  <pattern id="r7" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="lime"/>
  </pattern>
  <pattern id="r7-2" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="red"/>
  </pattern>
  <rect id="u7" x="70%" width="11%" height="100%" fill="url(#r7)"/>

  <pattern id="r8-2" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="lime"/>
  </pattern>
  <pattern id="r8" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="red"/>
  </pattern>
  <rect id="u8" x="80%" width="11%" height="100%" fill="url(#r8)"/>

  <rect width="11%" height="100%" fill="lime"/>
  <rect x="90%" width="11%" height="100%" fill="lime"/>

  <script>
  function startTest() {
    document.addEventListener("MozReftestInvalidate", doTest, false);
    setTimeout(doTest, 4000); // fallback for running outside reftest
  }

  function doTest() {
    // check that changing an id to "r2" lets u2 find it
    var r2 = document.getElementById("x");
    r2.setAttribute("id", "r2");

    var rect = document.getElementById("u3").getBoundingClientRect();
    // check that removing the bad r3 lets u3 find the good one
    var r3 = document.getElementById("r3");
    r3.parentNode.removeChild(r3);

    // check that renaming the bad r4 lets u4 find the good one
    var r4 = document.getElementById("r4");
    r4.removeAttribute("id");

    // check that changing u5's reference works
    var u5 = document.getElementById("u5");
    u5.setAttribute("fill", "url(#r1)");

    // check that inserting a good element before the bad r6 works
    var r6 = document.getElementById("r6-2");
    r6.parentNode.removeChild(r6);
    r6.setAttribute("id", "r6");
    document.documentElement.insertBefore(r6, document.documentElement.firstChild);

    // check that inserting a bad element after a good one doesn't break anything
    var r7 = document.getElementById("r7-2");
    r7.parentNode.removeChild(r7);
    r7.setAttribute("id", "r7");
    document.documentElement.appendChild(r7);

    // check that renaming a good element to r8 works
    var r8 = document.getElementById("r8-2");
    r8.setAttribute("id", "r8");

    document.documentElement.removeAttribute("class");
  }
  </script>
</svg>