test_animLengthReadonly.xhtml (7749B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=506856 4 --> 5 <head> 6 <title>Test for read-only times 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=506856">Mozilla Bug 506856</a> 12 <p id="display"></p> 13 <div id="content" style="display: none"> 14 <svg id="svg" xmlns="http://www.w3.org/2000/svg" 15 width="100px" height="100px" viewBox="0 0 100 100" 16 onload="this.pauseAnimations()"> 17 <!-- Note: Need a viewBox on the SVG element, or else our percent-length 18 basis will be '0' (based off of the viewport width, which is 0 in this 19 case since we're in a display:none iframe. We use viewport width because 20 the lack of a viewbox forces us into the not-mViewBox::IsValid() case of 21 SVGSVGElement::GetLength). 22 23 And we don't want a percent-length basis of 0, because then when we call 24 convertToSpecifiedUnits to convert out of percent units, we divide by 0 25 and get unexpected results. 26 --> 27 <circle cx="-100" cy="-100" r="15" fill="blue" id="circle"> 28 <animate attributeName="cx" from="0" to="100" dur="4s" begin="1s; 10s" 29 fill="freeze" id="animate"/> 30 <animate attributeName="cy" from="-100" to="-100" dur="4s" begin="1s; 10s" 31 fill="remove"/> 32 </circle> 33 </svg> 34 </div> 35 <pre id="test"> 36 <script class="testbody" type="text/javascript"> 37 <![CDATA[ 38 /** Test read-only times of animated lengths */ 39 40 /* Global Variables */ 41 const svgns = "http://www.w3.org/2000/svg"; 42 var svg = document.getElementById("svg"); 43 var circle = document.getElementById("circle"); 44 45 SimpleTest.waitForExplicitFinish(); 46 47 function main() { 48 ok(svg.animationsPaused(), "should be paused by <svg> load handler"); 49 is(svg.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler"); 50 51 // Sanity check: check initial values 52 is(circle.cx.baseVal.value, -100); 53 is(circle.cx.animVal.value, -100); 54 is(circle.cy.baseVal.value, -100); 55 is(circle.cy.animVal.value, -100); 56 57 // (1): Check before animation that animVal's are readonly 58 ok(checkReadOnly(circle.cx), 59 "(1) animVal cx is editable when not animated"); 60 ok(checkReadOnly(circle.cy), 61 "(1) animVal cy is editable when not animated"); 62 63 // Skip to mid-way through the animation 64 svg.setCurrentTime(4); 65 66 // (2): Check that whilst animations are active the animVal's are readonly 67 ok(checkReadOnly(circle.cx), 68 "(2) animVal cx is editable when animated"); 69 ok(checkReadOnly(circle.cy), 70 "(2) animVal cy is editable when animated"); 71 72 // Skip to past end 73 svg.setCurrentTime(6); 74 75 // (3): Check that frozen animations are readonly and have different values 76 ok(checkReadOnly(circle.cx), 77 "(3) animVal cx is editable when frozen"); 78 checkDiffValue(circle.cx); 79 80 // (4): Check that finished animations are readonly and have same values 81 ok(checkReadOnly(circle.cy), 82 "(4) animVal cy is editable when inactive"); 83 checkSameValue(circle.cy); 84 85 SimpleTest.finish(); 86 } 87 88 function checkReadOnly(animLength) { 89 var exceptionCaught = false; 90 var oldAnimValue = animLength.animVal.value; 91 92 // Try changing value 93 try { 94 animLength.animVal.value = (animLength.animVal.value == 77) ? 88 : 77; 95 } catch (e) { 96 if (e.name == "NoModificationAllowedError" && 97 e.code == DOMException.NO_MODIFICATION_ALLOWED_ERR) { 98 exceptionCaught = true; 99 } else { 100 ok(false, "Got unexpected exception " + e); 101 return false; 102 } 103 } 104 is(animLength.animVal.value, oldAnimValue, 105 "No exception thrown, but animVal was changed."); 106 if (animLength.animVal.value != oldAnimValue) return false; 107 108 // valueInSpecifiedUnits 109 try { 110 exceptionCaught = false; 111 animLength.animVal.valueInSpecifiedUnits = -100; 112 } catch (e) { exceptionCaught = true; } 113 ok(exceptionCaught, "animVal.valueInSpecifiedUnits failed to throw."); 114 if (!exceptionCaught) return false; 115 116 // valueAsString 117 try { 118 exceptionCaught = false; 119 animLength.animVal.valueAsString = "-100px"; 120 } catch (e) { exceptionCaught = true; } 121 ok(exceptionCaught, "animVal.valueAsString failed to throw."); 122 if (!exceptionCaught) return false; 123 124 // newValueSpecifiedUnits 125 try { 126 exceptionCaught = false; 127 animLength.animVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, -100); 128 } catch (e) { exceptionCaught = true; } 129 ok(exceptionCaught, "animVal.newValueSpecifiedUnits failed to throw."); 130 if (!exceptionCaught) return false; 131 132 // convertToSpecifiedUnits 133 try { 134 exceptionCaught = false; 135 animLength.animVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER); 136 } catch (e) { exceptionCaught = true; } 137 ok(exceptionCaught, "animVal.convertToSpecifiedUnits failed to throw."); 138 139 return exceptionCaught; 140 } 141 142 function checkSameValue(animLength) { 143 // value 144 animLength.baseVal.value = 1; 145 is(animLength.animVal.value, 1, 146 "un-animated animVal.value not changed after setting baseValue.value"); 147 148 // valueInSpecifiedUnits 149 animLength.baseVal.valueInSpecifiedUnits = 2; 150 is(animLength.animVal.value, 2, 151 "un-animated animVal.value not changed after setting " 152 + "baseValue.valueInSpecifiedUnits"); 153 154 // valueAsString 155 animLength.baseVal.valueAsString = "3"; 156 is(animLength.animVal.value, 3, 157 "un-animated animVal.value not changed after setting " 158 + "baseValue.valueAsString"); 159 160 // newValueSpecifiedUnits 161 animLength.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_CM, 4); 162 is(animLength.animVal.valueInSpecifiedUnits, 4, 163 "un-animated animVal.value not changed after setting " 164 + "baseValue.newValueSpecifiedUnits"); 165 166 // convertToSpecifiedUnits 167 animLength.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM); 168 is(animLength.animVal.valueInSpecifiedUnits, 40, 169 "un-animated animVal.value not changed after calling " 170 + "baseValue.convertToSpecifiedUnits"); 171 } 172 173 function checkDiffValue(animLength) { 174 // We assume here that the animation is not additive and hence changing the 175 // baseValue will not be reflected in the animValue 176 var origValue = animLength.animVal.value; 177 178 // value 179 animLength.baseVal.value = 1; 180 is(animLength.animVal.value, origValue, 181 "animated animVal.value changed after setting baseValue.value"); 182 183 // valueInSpecifiedUnits 184 animLength.baseVal.valueInSpecifiedUnits = 2; 185 is(animLength.animVal.value, origValue, 186 "animated animVal.value changed after setting " 187 + "baseValue.valueInSpecifiedUnits"); 188 189 // valueAsString 190 animLength.baseVal.valueAsString = "3"; 191 is(animLength.animVal.value, origValue, 192 "animated animVal.value changed after setting baseValue.valueAsString"); 193 194 // newValueSpecifiedUnits 195 // (Note: we'd like to convert to MM here and CM in the next step for 196 // consistency with the other tests. However, internally that will cause the 197 // animVal to be converted to MM and back again which, given certain dpi 198 // values such as we get in Linux, this may lead to rounding errors so that 199 // 100 becomes 99.99999237060547. So instead we convert to something 200 // independent of dpi) 201 animLength.baseVal.newValueSpecifiedUnits( 202 SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 40); 203 is(animLength.animVal.value, origValue, 204 "animated animVal.value changed after setting " 205 + "baseValue.newValueSpecifiedUnits"); 206 207 // convertToSpecifiedUnits 208 animLength.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX); 209 is(animLength.animVal.value, origValue, 210 "animated animVal.value changed after calling " 211 + "baseValue.convertToSpecifiedUnits"); 212 } 213 214 window.addEventListener("load", main); 215 ]]> 216 </script> 217 </pre> 218 </body> 219 </html>