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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
class="reftest-wait">
<style>
.background { fill: lime }
.workspace { fill: red }
.test { fill: lime }
</style>
<defs>
<!-- 'Dummy' path -->
<path id="moveFarAway" d="M300,300 h0"/>
<path id="moveToUpperLeft" d="M100,100 h0"/>
<path id="pathWhoseDAttrChanges" d="M360,360 h0"/>
<!-- The first of these two elems w/ same ID should be used. -->
<path id="moveToMiddleLeft" d="M100,150 h0"/>
<path id="moveToMiddleLeft" d="M350,350 h0"/>
<!-- The first of these two elems w/ same ID initially wins, but then
it gets removed via script. -->
<path id="moveToMiddleCenter" d="M340,340 h0"/>
<path id="moveToMiddleCenter" d="M150,150 h0"/>
<!-- This elem doesn't do what its id would suggest, but we'll use JS to
add an earlier elem with the same ID that *does* do what it says. -->
<path id="moveToMiddleRight" d="M330,330 h0"/>
<path id="moveToLowerLeft" d="M100,200 h0"/>
<path id="moveToLowerCenter" d="M150,200 h0"/>
</defs>
<script xlink:href="../smil-util.js" type="text/javascript"/>
<script type="text/javascript">
const SVGNS = "http://www.w3.org/2000/svg";
const XLINKNS = "http://www.w3.org/1999/xlink";
function insertPathElem(aPathId, aPathSpec) {
var newPath = document.createElementNS(SVGNS, "path");
newPath.setAttribute("id", aPathId);
newPath.setAttribute("d", aPathSpec);
// Insert new path into defs
var defsElem = document.getElementsByTagName("defs")[0];
defsElem.insertBefore(newPath, defsElem.firstChild);
}
function doTest() {
// Seek already, so we'll have sampled the initial 'stale' state
document.documentElement.setCurrentTime(1);
// Make tweaks
var mpathToModify = document.getElementById("modifyMyTarget");
mpathToModify.setAttributeNS(XLINKNS, "href", "#moveToUpperLeft");
var mpathWhoseHrefNeedsClearing = document.getElementById("unsetMyTarget");
mpathWhoseHrefNeedsClearing.removeAttributeNS(XLINKNS, "href");
var pathToTweak = document.getElementById("pathWhoseDAttrChanges");
pathToTweak.setAttribute("d", "M200 100 h0");
var mpathToDelete = document.getElementById("removeMe");
mpathToDelete.parentNode.removeChild(mpathToDelete);
var pathToDelete = document.getElementById("moveToMiddleCenter");
pathToDelete.parentNode.removeChild(pathToDelete);
insertPathElem("moveToMiddleRight", "M200,150 h0");
insertPathElem("moveToLowerRight", "M200,200 h0");
setTimeAndSnapshot(1, true);
}
window.addEventListener("MozReftestInvalidate", doTest, false);
</script>
<!-- Big green background to match lime.svg -->
<rect class="background" width="100%" height="100%" />
<!-- Red "workspace" (should be covered up, if tests pass) -->
<rect class="workspace" x="100" y="100" width="150" height="150"/>
<!-- FIRST ROW: Test behavior... -->
<!-- ...when mpath's 'xlink:href' attr is modified. -->
<rect class="test" x="0" y="0" width="50" height="50">
<animateMotion begin="1" dur="1" fill="freeze">
<mpath id="modifyMyTarget" xlink:href="#moveFarAway"/>
</animateMotion>
</rect>
<!-- ...when mpath's 'xlink:href' is unset. -->
<rect class="test" x="150" y="100" width="50" height="50">
<animateMotion begin="1" dur="1" fill="freeze">
<mpath id="unsetMyTarget" xlink:href="#moveFarAway"/>
</animateMotion>
</rect>
<!-- ...when the target-path's "d" attr is modified. -->
<rect class="test" x="0" y="0" width="50" height="50">
<animateMotion begin="1" dur="1" fill="freeze">
<mpath xlink:href="#pathWhoseDAttrChanges"/>
</animateMotion>
</rect>
<!-- SECOND ROW: Test behavior... -->
<!-- ...when there are two paths with same ID (first should win) -->
<rect class="test" x="0" y="0" width="50" height="50">
<animateMotion begin="1" dur="1" fill="freeze">
<mpath xlink:href="#moveToMiddleLeft"/>
</animateMotion>
</rect>
<!-- ...when there are two paths with same ID, and the first is removed. -->
<rect class="test" x="0" y="0" width="50" height="50">
<animateMotion begin="1" dur="1" fill="freeze">
<mpath xlink:href="#moveToMiddleCenter"/>
</animateMotion>
</rect>
<!-- ...when an earlier path is added with our target ID. -->
<rect class="test" x="0" y="0" width="50" height="50">
<animateMotion begin="1" dur="1" fill="freeze">
<mpath xlink:href="#moveToMiddleRight"/>
</animateMotion>
</rect>
<!-- THIRD ROW: Test behavior... -->
<!-- ...when there are two mpath children (first should win). -->
<rect class="test" x="0" y="0" width="50" height="50">
<animateMotion begin="1" dur="1" fill="freeze">
<mpath xlink:href="#moveToLowerLeft"/>
<mpath xlink:href="#moveFarAway"/>
</animateMotion>
</rect>
<!-- ...when there are two mpath children, and the first is removed. -->
<rect class="test" x="0" y="0" width="50" height="50">
<animateMotion begin="1" dur="1" fill="freeze">
<mpath id="removeMe" xlink:href="#moveFarAway"/>
<mpath xlink:href="#moveToLowerCenter"/>
</animateMotion>
</rect>
<!-- ...when there's an mpath child that initially matches nothing, until
a node with the right ID is inserted into the DOM. -->
<rect class="test" x="0" y="0" width="50" height="50">
<animateMotion begin="1" dur="1" fill="freeze">
<mpath xlink:href="#moveToLowerRight"/>
</animateMotion>
</rect>
</svg>
|
