1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/smil/test/test_smilSync.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,255 @@
1.4 +<html xmlns="http://www.w3.org/1999/xhtml">
1.5 +<head>
1.6 + <title>Test for SMIL sync behaviour </title>
1.7 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.8 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.9 +</head>
1.10 +<body>
1.11 +<p id="display"></p>
1.12 +<div id="content" style="display: none">
1.13 +<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px">
1.14 + <circle cx="20" cy="20" r="15" fill="blue">
1.15 + <animate attributeName="cx" attributeType="XML" from="20" to="100"
1.16 + begin="indefinite" dur="4s" restart="always" id="anim1"/>
1.17 + </circle>
1.18 + <circle cx="20" cy="20" r="15" fill="blue">
1.19 + <animate attributeName="cx" attributeType="XML" from="0" to="50"
1.20 + begin="0" dur="1s" additive="sum" fill="freeze" id="anim2"/>
1.21 + </circle>
1.22 + <circle cx="20" cy="20" r="15" fill="blue">
1.23 + <animate attributeName="cx" attributeType="XML" from="0" to="50"
1.24 + begin="0" dur="10s" additive="sum" fill="freeze" id="anim3"/>
1.25 + </circle>
1.26 + <circle cx="20" cy="20" r="15" fill="blue">
1.27 + <animate attributeName="cx" attributeType="XML" from="0" to="50"
1.28 + begin="0" dur="10s" additive="sum" fill="freeze" id="anim4"/>
1.29 + </circle>
1.30 + <circle cx="20" cy="20" r="15" fill="blue">
1.31 + <animate attributeName="cx" attributeType="XML" from="0" to="50"
1.32 + begin="0" dur="40s" additive="sum" fill="freeze" id="anim5"/>
1.33 + </circle>
1.34 + <circle cx="20" cy="20" r="15" fill="blue">
1.35 + <animate attributeName="cx" attributeType="XML" from="20" to="100"
1.36 + begin="100s" dur="4s" restart="always" id="anim6"/>
1.37 + </circle>
1.38 +</svg>
1.39 +</div>
1.40 +<pre id="test">
1.41 +<script class="testbody" type="text/javascript">
1.42 +<![CDATA[
1.43 +/** Test for SMIL sync behavior **/
1.44 +
1.45 +/* Global Variables */
1.46 +var svg = document.getElementById("svg");
1.47 +
1.48 +SimpleTest.waitForExplicitFinish();
1.49 +
1.50 +function main() {
1.51 + testBeginAt(document.getElementById("anim1"));
1.52 + testChangeBaseVal(document.getElementById("anim2"));
1.53 + testChangeWhilePaused(document.getElementById("anim3"));
1.54 + testChangeAnimAttribute(document.getElementById("anim4"));
1.55 + testChangeTimingAttribute(document.getElementById("anim5"));
1.56 + testSetCurrentTime(document.getElementById("anim6"));
1.57 + SimpleTest.finish();
1.58 +}
1.59 +
1.60 +function testBeginAt(anim) {
1.61 + // This (hugely important) test checks that a call to beginElement updates to
1.62 + // the new interval
1.63 +
1.64 + // Check some pre-conditions
1.65 + is(anim.getAttribute("restart"), "always");
1.66 + ok(anim.getSimpleDuration() >= 4);
1.67 +
1.68 + // First start the animation
1.69 + svg.setCurrentTime(2);
1.70 + anim.beginElement();
1.71 +
1.72 + // Then restart it--twice
1.73 + svg.setCurrentTime(4);
1.74 + anim.beginElement();
1.75 + anim.beginElementAt(-1);
1.76 +
1.77 + // The first restart should win if the state machine has been successfully
1.78 + // updated. If we get '3' back instead we haven't updated properly.
1.79 + is(anim.getStartTime(), 4);
1.80 +}
1.81 +
1.82 +function testChangeBaseVal(anim) {
1.83 + // Check that a change to the base value is updated even after animation is
1.84 + // frozen
1.85 +
1.86 + // preconditions -- element should have ended
1.87 + try {
1.88 + anim.getStartTime();
1.89 + ok(false, "Element has not ended yet.");
1.90 + } catch (e) { }
1.91 +
1.92 + // check frozen value is applied
1.93 + var target = anim.targetElement;
1.94 + is(target.cx.animVal.value, 70);
1.95 + is(target.cx.baseVal.value, 20);
1.96 +
1.97 + // change base val and re-check
1.98 + target.cx.baseVal.value = 30;
1.99 + is(target.cx.animVal.value, 80);
1.100 + is(target.cx.baseVal.value, 30);
1.101 +}
1.102 +
1.103 +function testChangeWhilePaused(anim) {
1.104 + // Check that a change to the base value is updated even when the animation is
1.105 + // paused
1.106 +
1.107 + svg.pauseAnimations();
1.108 + svg.setCurrentTime(anim.getSimpleDuration() / 2);
1.109 +
1.110 + // check paused value is applied
1.111 + var target = anim.targetElement;
1.112 + is(target.cx.animVal.value, 45);
1.113 + is(target.cx.baseVal.value, 20);
1.114 +
1.115 + // change base val and re-check
1.116 + target.cx.baseVal.value = 30;
1.117 + is(target.cx.animVal.value, 55);
1.118 + is(target.cx.baseVal.value, 30);
1.119 +}
1.120 +
1.121 +function testChangeAnimAttribute(anim) {
1.122 + // Check that a change to an animation attribute causes an update even when
1.123 + // the animation is frozen and paused
1.124 +
1.125 + // Make sure animation is paused and frozen
1.126 + svg.pauseAnimations();
1.127 + svg.setCurrentTime(anim.getStartTime() + anim.getSimpleDuration() + 1);
1.128 +
1.129 + // Check frozen value is applied
1.130 + var target = anim.targetElement;
1.131 + is(target.cx.animVal.value, 70);
1.132 + is(target.cx.baseVal.value, 20);
1.133 +
1.134 + // Make the animation no longer additive
1.135 + anim.removeAttribute("additive");
1.136 + is(target.cx.animVal.value, 50);
1.137 + is(target.cx.baseVal.value, 20);
1.138 +}
1.139 +
1.140 +function testChangeTimingAttribute(anim) {
1.141 + // Check that a change to a timing attribute causes an update even when
1.142 + // the animation is paused
1.143 +
1.144 + svg.pauseAnimations();
1.145 + svg.setCurrentTime(anim.getSimpleDuration() / 2);
1.146 +
1.147 + // Check part-way value is applied
1.148 + var target = anim.targetElement;
1.149 + is(target.cx.animVal.value, 45);
1.150 + is(target.cx.baseVal.value, 20);
1.151 +
1.152 + // Make the animation no longer additive
1.153 + anim.setAttribute("dur", String(anim.getSimpleDuration() / 2) + "s");
1.154 + is(target.cx.animVal.value, 70);
1.155 + is(target.cx.baseVal.value, 20);
1.156 +
1.157 + // Remove fill
1.158 + anim.removeAttribute("fill");
1.159 + is(target.cx.animVal.value, 20);
1.160 + is(target.cx.baseVal.value, 20);
1.161 +}
1.162 +
1.163 +function testSetCurrentTime(anim) {
1.164 + // This test checks that a call to setCurrentTime flushes restarts
1.165 + //
1.166 + // Actually, this same scenario arises in test_smilRestart.xhtml but we
1.167 + // isolate this particular situation here for easier diagnosis if this ever
1.168 + // fails.
1.169 + //
1.170 + // At first we have:
1.171 + // currentTime begin="100s"
1.172 + // v v
1.173 + // Doc time: 0---\/\/\/-------99----------100-------
1.174 + //
1.175 + svg.setCurrentTime(99);
1.176 + is(anim.getStartTime(), 100);
1.177 +
1.178 + // Then we restart giving us:
1.179 + //
1.180 + // beginElement begin="100s"
1.181 + // v v
1.182 + // Doc time: 0---\/\/\/-------99----------100-------
1.183 + //
1.184 + // So our current interval is
1.185 + //
1.186 + // begin="100s"
1.187 + // v
1.188 + // +---------------|
1.189 + // Doc time: 0---\/\/\/-------99-100-101-102-103-----
1.190 + //
1.191 + anim.beginElement();
1.192 + is(anim.getStartTime(), svg.getCurrentTime());
1.193 +
1.194 + // Then we skip to half-way, i.e.
1.195 + //
1.196 + // currentTime
1.197 + // v
1.198 + // begin="100s"
1.199 + // v
1.200 + // +---------------|
1.201 + // Doc time: 0---\/\/\/-------99-100-101-102-103-----
1.202 + //
1.203 + // At this point we should flush our restarts and early end the first interval
1.204 + // and start the second interval, giving us
1.205 + //
1.206 + // So our timegraph looks like:
1.207 + //
1.208 + // currentTime
1.209 + // v
1.210 + // +---------------|
1.211 + // +---|
1.212 + // Doc time: 0---\/\/\/-------99-100-101-102-103-104-
1.213 + //
1.214 + var newTime = anim.getStartTime() + 0.5 * anim.getSimpleDuration();
1.215 + svg.setCurrentTime(newTime);
1.216 +
1.217 + // Finally we call beginElement again giving us
1.218 + //
1.219 + // currentTime
1.220 + // v
1.221 + // +---------------|
1.222 + // +---|
1.223 + // +---|
1.224 + // Doc time: 0---\/\/\/-------99-100-101-102-103-104-105-
1.225 + //
1.226 + // If, however, setCurrentTime failed to flush restarts out starting point
1.227 + // we do come to update the timegraph would be:
1.228 + //
1.229 + // beginElementAt
1.230 + // v
1.231 + // begin="100s"
1.232 + // v
1.233 + // +---------------|
1.234 + // Doc time: 0---\/\/\/-------99-100-101-102-103-----
1.235 + //
1.236 + // And as soon as we encountered the begin="100s" spec we'd do a restart
1.237 + // according to the SMIL algorithms and a restart involves a reset which
1.238 + // clears the instance times created by DOM calls and so we'd end up with
1.239 + // just:
1.240 + //
1.241 + // currentTime
1.242 + // v
1.243 + // +---------------|
1.244 + // +---|
1.245 + // Doc time: 0---\/\/\/-------99-100-101-102-103-104-
1.246 + //
1.247 + // Which is probably not what the author intended.
1.248 + //
1.249 + anim.beginElement();
1.250 + is(anim.getStartTime(), svg.getCurrentTime());
1.251 +}
1.252 +
1.253 +window.addEventListener("load", main, false);
1.254 +]]>
1.255 +</script>
1.256 +</pre>
1.257 +</body>
1.258 +</html>
