test_smilRestart.xhtml (3318B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>Test for SMIL Restart Behavior </title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 6 </head> 7 <body> 8 <p id="display"></p> 9 <div id="content" style="display: none"> 10 <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" 11 onload="this.pauseAnimations()"> 12 <!-- These 3 circles only differ in their animation's "restart" value --> 13 <circle cx="20" cy="20" r="15" fill="blue"> 14 <animate attributeName="cx" from="20" to="100" begin="1s" dur="4s" 15 restart="always" id="always" attributeType="XML"/> 16 </circle> 17 <circle cx="20" cy="60" r="15" fill="blue"> 18 <animate attributeName="cx" from="20" to="100" begin="1s" dur="4s" 19 restart="whenNotActive" id="whenNotActive" attributeType="XML"/> 20 </circle> 21 <circle cx="20" cy="100" r="15" fill="blue"> 22 <animate attributeName="cx" from="20" to="100" begin="1s" dur="4s" 23 restart="never" id="never" attributeType="XML"/> 24 </circle> 25 </svg> 26 </div> 27 <pre id="test"> 28 <script class="testbody" type="text/javascript"> 29 <![CDATA[ 30 /** Test for SMIL Restart Behavior */ 31 32 /* Global Variables */ 33 var svg = document.getElementById("svg"); 34 var always = document.getElementById("always"); 35 var whenNotActive = document.getElementById("whenNotActive"); 36 var never = document.getElementById("never"); 37 38 SimpleTest.waitForExplicitFinish(); 39 40 function tryRestart(elem, state, expected) { 41 var restartTime = svg.getCurrentTime(); 42 elem.beginElement(); 43 var restart = false; 44 try { 45 restart = (elem.getStartTime() === restartTime); 46 } catch (e) { 47 if (e.name != "InvalidStateError" || 48 e.code != DOMException.INVALID_STATE_ERR) 49 throw e; 50 restart = false; 51 } 52 if (expected) { 53 var msg = elem.id + " can't restart in " + state + " state"; 54 ok(restart, msg); 55 } else { 56 var msg = elem.id + " can restart in " + state + " state"; 57 ok(!restart, msg); 58 } 59 } 60 61 function main() { 62 ok(svg.animationsPaused(), "should be paused by <svg> load handler"); 63 is(svg.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler"); 64 65 // At first everything should be starting at 1s 66 is(always.getStartTime(), 1); 67 is(whenNotActive.getStartTime(), 1); 68 is(never.getStartTime(), 1); 69 70 // Now try to restart everything early, should be allowed by all 71 tryRestart(always, "waiting", true); 72 tryRestart(whenNotActive, "waiting", true); 73 tryRestart(never, "waiting", true); 74 75 // Now skip to half-way 76 var newTime = always.getStartTime() + 0.5 * always.getSimpleDuration(); 77 svg.setCurrentTime(newTime); 78 79 // Only 'always' should be able to be restarted 80 tryRestart(always, "active", true); 81 tryRestart(whenNotActive, "active", false); 82 tryRestart(never, "active", false); 83 84 // Now skip to the end 85 newTime = always.getStartTime() + always.getSimpleDuration() + 1; 86 svg.setCurrentTime(newTime); 87 88 // All animations have finished, so 'always' and 'whenNotActive' should be 89 // able to be restarted 90 tryRestart(always, "postactive", true); 91 tryRestart(whenNotActive, "postactive", true); 92 tryRestart(never, "postactive", false); 93 94 SimpleTest.finish(); 95 } 96 97 window.addEventListener("load", main); 98 ]]> 99 </script> 100 </pre> 101 </body> 102 </html>