test_animLengthUnits.xhtml (4105B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=507067 4 --> 5 <head> 6 <title>Test for units of SVG animated lengths</title> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 9 </head> 10 <body> 11 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=507067">Mozilla Bug 507067</a> 12 <p id="display"></p> 13 <div id="content"> 14 <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" 15 onload="this.pauseAnimations()"> 16 <g font-size="10px"> 17 <circle cx="-100" cy="20" r="15" fill="blue" id="circle"> 18 <animate attributeName="cx" from="0em" to="10em" dur="8s" begin="1s" 19 fill="freeze" id="animate"/> 20 </circle> 21 </g> 22 </svg> 23 </div> 24 <pre id="test"> 25 <script class="testbody" type="text/javascript"> 26 <![CDATA[ 27 /** Test units of animated lengths */ 28 29 /* Global Variables */ 30 const svgns = "http://www.w3.org/2000/svg"; 31 var svg = document.getElementById("svg"); 32 var circle = document.getElementById("circle"); 33 var animate = document.getElementById("animate"); 34 35 SimpleTest.waitForExplicitFinish(); 36 37 // Interop comments are based on: 38 // 39 // Opera -- 10 beta 2 40 // WebKit -- July 09 trunk build 41 // Batik -- 1.7 42 // Firefox -- July 09 trunk build 43 // 44 45 function main() { 46 ok(svg.animationsPaused(), "should be paused by <svg> load handler"); 47 is(svg.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler"); 48 49 // Sanity check: check initial values 50 is(circle.cx.baseVal.valueInSpecifiedUnits, -100, 51 "Unexpected initial baseVal"); 52 is(circle.cx.baseVal.unitType, SVGLength.SVG_LENGTHTYPE_NUMBER, 53 "Unexpected initial baseVal units"); 54 is(circle.cx.animVal.valueInSpecifiedUnits, -100, 55 "Unexpected initial animVal"); 56 is(circle.cx.animVal.unitType, SVGLength.SVG_LENGTHTYPE_NUMBER, 57 "Unexpected initial animVal units"); 58 59 // Sample mid-way through the animation 60 svg.setCurrentTime(5); 61 62 // (1) Check the absolute value is right 63 // 64 // We're not too worried about the units. Based on our testing we get: 65 // Opera: Will use user units for the animVal 66 // Safari: Doesn't work 67 // Batik: Will use the units specified on the animation function provided they 68 // are the same 69 // FF: Will use the units of the baseVal for the animVal 70 // 71 is(circle.cx.baseVal.value, -100, 72 "(1) Unexpected value for baseVal during animation"); 73 is(circle.cx.animVal.value, 50, 74 "(1) Unexpected value for animVal during animation"); 75 76 // Change font-size and check 77 circle.parentNode.setAttribute("font-size", "5px"); 78 79 // Currently, changing the font-size on a parent doesn't force a resample (see 80 // bug 508206) so we have to give the animation a chance to run 81 window.requestAnimationFrame(checkAfterChangeFontSize); 82 } 83 84 function checkAfterChangeFontSize() { 85 // (2) Check that changing the font-size of the parent element is reflected in 86 // the anim val 87 is(circle.cx.baseVal.value, -100, 88 "(2) Unexpected value for baseVal after changing font-size during " + 89 "animation"); 90 is(circle.cx.animVal.value, 25, 91 "(2) Unexpected value for animVal after changing font-size during " + 92 "animation"); 93 94 // Do the same again, when the animation is frozen 95 svg.setCurrentTime(10); 96 circle.parentNode.setAttribute("font-size", "7px"); 97 98 // Again, due to bug 508206 we need to give the animation a chance to resample 99 window.requestAnimationFrame(checkWhilstFrozen); 100 } 101 102 function checkWhilstFrozen() { 103 // (3) Check that changing the font-size of the parent element is reflected in 104 // the anim val 105 is(circle.cx.baseVal.value, -100, 106 "(3) Unexpected value for baseVal after changing font-size whilst " + 107 "frozen"); 108 is(circle.cx.animVal.value, 70, 109 "(3) Unexpected value for animVal after changing font-size whilst " + 110 "frozen"); 111 112 SimpleTest.finish(); 113 } 114 115 if (animate && animate.targetElement) { 116 window.addEventListener("load", main); 117 } else { 118 ok(true); // Skip tests but don't report 'todo' either 119 SimpleTest.finish(); 120 } 121 ]]> 122 </script> 123 </pre> 124 </body> 125 </html>