dom/svg/test/test_animLengthReadonly.xhtml

   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>