1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/smil/test/test_smilChangeAfterFrozen.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,569 @@
1.4 +<html xmlns="http://www.w3.org/1999/xhtml">
1.5 +<head>
1.6 + <title>Test for SMIL when things change after an animation is frozen</title>
1.7 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.8 + <script type="text/javascript" src="smilTestUtils.js"></script>
1.9 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.10 +</head>
1.11 +<body>
1.12 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=533291">Mozilla Bug 533291</a>
1.13 +<p id="display"></p>
1.14 +<!-- Bug 628848: The following should be display: none but we currently don't
1.15 + handle percentage lengths properly when the whole fragment is display: none
1.16 + -->
1.17 +<div id="content" style="visibility: hidden">
1.18 +<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"
1.19 + onload="this.pauseAnimations()">
1.20 + <g id="circleParent">
1.21 + <circle cx="0" cy="20" r="15" fill="blue" id="circle"/>
1.22 + </g>
1.23 +</svg>
1.24 +</div>
1.25 +<pre id="test">
1.26 +<script class="testbody" type="text/javascript">
1.27 +<![CDATA[
1.28 +/** Test for SMIL values that are context-sensitive **/
1.29 +
1.30 +/* See bugs 533291 and 562815.
1.31 +
1.32 + The format of each test is basically:
1.33 + 1) create some animated and frozen state
1.34 + 2) test the animated values
1.35 + 3) change the context
1.36 + 4) test that context-sensitive animation values have changed
1.37 +
1.38 + Ideally, after changing the context (3), the animated state would instantly
1.39 + update. However, this is not currently the case for many situations.
1.40 +
1.41 + For CSS properties we have bug 545282 - In animations involving 'inherit'
1.42 + / 'currentColor', changes to inherited value / 'color' don't show up in
1.43 + animated value immediately
1.44 +
1.45 + For SVG lengths we have bug 508206 - Relative units used in
1.46 + animation don't update immediately
1.47 +
1.48 + (There are a few of todo_is's in the following tests so that if those bugs
1.49 + are ever resolved we'll know to update this test case accordingly.)
1.50 +
1.51 + So in between (3) and (4) we force a sample. This is currently done by
1.52 + calling SVGSVGElement.setCurrentTime with the same current time which has the
1.53 + side effect of forcing a sample.
1.54 +
1.55 + What we *are* testing is that we're not too zealous with caching animation
1.56 + values whilst in the frozen state. Normally we'd say, "Hey, we're frozen,
1.57 + let's just use the same animation result as last time" but for some
1.58 + context-sensitive animation values that doesn't work.
1.59 +*/
1.60 +
1.61 +/* Global Variables */
1.62 +const SVGNS = "http://www.w3.org/2000/svg";
1.63 +
1.64 +// Animation parameters -- not used for <set> animation
1.65 +const ANIM_DUR = "4s";
1.66 +const TIME_ANIM_END = "4";
1.67 +const TIME_AFTER_ANIM_END = "5";
1.68 +
1.69 +const gSvg = document.getElementById("svg");
1.70 +const gCircle = document.getElementById("circle");
1.71 +const gCircleParent = document.getElementById("circleParent");
1.72 +
1.73 +SimpleTest.waitForExplicitFinish();
1.74 +
1.75 +// MAIN FUNCTION
1.76 +// -------------
1.77 +
1.78 +function main()
1.79 +{
1.80 + ok(gSvg.animationsPaused(), "should be paused by <svg> load handler");
1.81 + is(gSvg.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler");
1.82 +
1.83 + const tests =
1.84 + [ testBaseValueChange,
1.85 + testCurrentColorChange,
1.86 + testCurrentColorChangeUsingStyle,
1.87 + testCurrentColorChangeOnFallback,
1.88 + testInheritChange,
1.89 + testInheritChangeUsingStyle,
1.90 + testEmUnitChangeOnProp,
1.91 + testEmUnitChangeOnPropBase,
1.92 + testEmUnitChangeOnLength,
1.93 + testPercentUnitChangeOnProp,
1.94 + testPercentUnitChangeOnLength,
1.95 + testRelativeFontSize,
1.96 + testRelativeFontWeight,
1.97 + testRelativeFont,
1.98 + testCalcFontSize,
1.99 + testDashArray,
1.100 + testClip
1.101 + ];
1.102 +
1.103 + while (tests.length) {
1.104 + tests.shift()();
1.105 + }
1.106 + SimpleTest.finish();
1.107 +}
1.108 +
1.109 +// HELPER FUNCTIONS
1.110 +// ----------------
1.111 +function createAnimSetTo(attrName, toVal)
1.112 +{
1.113 + var anim = document.createElementNS(SVGNS,"set");
1.114 + anim.setAttribute("attributeName", attrName);
1.115 + anim.setAttribute("to", toVal);
1.116 + return gCircle.appendChild(anim);
1.117 +}
1.118 +
1.119 +function createAnimBy(attrName, byVal)
1.120 +{
1.121 + var anim = document.createElementNS(SVGNS,"animate");
1.122 + anim.setAttribute("attributeName", attrName);
1.123 + anim.setAttribute("dur", ANIM_DUR);
1.124 + anim.setAttribute("begin","0s");
1.125 + anim.setAttribute("by", byVal);
1.126 + anim.setAttribute("fill", "freeze");
1.127 + return gCircle.appendChild(anim);
1.128 +}
1.129 +
1.130 +function createAnimFromTo(attrName, fromVal, toVal)
1.131 +{
1.132 + var anim = document.createElementNS(SVGNS,"animate");
1.133 + anim.setAttribute("attributeName", attrName);
1.134 + anim.setAttribute("dur", ANIM_DUR);
1.135 + anim.setAttribute("begin","0s");
1.136 + anim.setAttribute("from", fromVal);
1.137 + anim.setAttribute("to", toVal);
1.138 + anim.setAttribute("fill", "freeze");
1.139 + return gCircle.appendChild(anim);
1.140 +}
1.141 +
1.142 +// Common setup code for each test function: seek to 0, and make sure
1.143 +// the previous test cleaned up its animations.
1.144 +function setupTest() {
1.145 + gSvg.setCurrentTime(0);
1.146 + if (gCircle.firstChild) {
1.147 + ok(false, "Previous test didn't clean up after itself.");
1.148 + }
1.149 +}
1.150 +
1.151 +// THE TESTS
1.152 +// ---------
1.153 +
1.154 +function testBaseValueChange()
1.155 +{
1.156 + setupTest();
1.157 + var anim = createAnimBy("cx", "50");
1.158 + gSvg.setCurrentTime(TIME_ANIM_END);
1.159 + is(gCircle.cx.animVal.value, 50,
1.160 + "Checking animated cx as anim ends");
1.161 +
1.162 + gSvg.setCurrentTime(TIME_AFTER_ANIM_END);
1.163 + is(gCircle.cx.animVal.value, 50,
1.164 + "Checking animated cx after anim ends");
1.165 +
1.166 + gCircle.setAttribute("cx", 20);
1.167 + is(gCircle.cx.animVal.value, 70,
1.168 + "Checking animated cx after anim ends & after changing base val");
1.169 +
1.170 + anim.parentNode.removeChild(anim); // clean up
1.171 +}
1.172 +
1.173 +function testCurrentColorChange()
1.174 +{
1.175 + gCircle.setAttribute("color", "red"); // At first: currentColor=red
1.176 + var anim = createAnimSetTo("fill", "currentColor");
1.177 +
1.178 + gSvg.setCurrentTime(0); // trigger synchronous sample
1.179 + is(SMILUtil.getComputedStyleSimple(gCircle, "fill"), "rgb(255, 0, 0)",
1.180 + "Checking animated fill=currentColor after animating");
1.181 +
1.182 + gCircle.setAttribute("color", "lime"); // Change: currentColor=lime
1.183 + // Bug 545282: We should really detect this change and update immediately but
1.184 + // currently we don't until we get sampled again
1.185 + todo_is(SMILUtil.getComputedStyleSimple(gCircle, "fill"), "rgb(0, 255, 0)",
1.186 + "Checking animated fill=currentColor after updating context but before " +
1.187 + "sampling");
1.188 + gSvg.setCurrentTime(0);
1.189 + is(SMILUtil.getComputedStyleSimple(gCircle, "fill"), "rgb(0, 255, 0)",
1.190 + "Checking animated fill=currentColor after updating context");
1.191 +
1.192 + // Clean up
1.193 + gCircle.removeAttribute("color");
1.194 + gCircle.removeChild(gCircle.firstChild);
1.195 +}
1.196 +
1.197 +function testCurrentColorChangeUsingStyle()
1.198 +{
1.199 + setupTest();
1.200 + gCircle.setAttribute("style", "color: red"); // At first: currentColor=red
1.201 + var anim = createAnimSetTo("fill", "currentColor");
1.202 +
1.203 + gSvg.setCurrentTime(0);
1.204 + is(SMILUtil.getComputedStyleSimple(gCircle, "fill"), "rgb(255, 0, 0)",
1.205 + "Checking animated fill=currentColor after animating (using style attr)");
1.206 +
1.207 + gCircle.setAttribute("style", "color: lime"); // Change: currentColor=lime
1.208 + gSvg.setCurrentTime(0);
1.209 + is(SMILUtil.getComputedStyleSimple(gCircle, "fill"), "rgb(0, 255, 0)",
1.210 + "Checking animated fill=currentColor after updating context "
1.211 + + "(using style attr)");
1.212 +
1.213 + // Clean up
1.214 + gCircle.removeAttribute("style");
1.215 + gCircle.removeChild(gCircle.firstChild);
1.216 +}
1.217 +
1.218 +function getFallbackColor(pServerStr)
1.219 +{
1.220 + return pServerStr.substr(pServerStr.indexOf(" ")+1);
1.221 +}
1.222 +
1.223 +function testCurrentColorChangeOnFallback()
1.224 +{
1.225 + setupTest();
1.226 + gCircle.setAttribute("color", "red"); // At first: currentColor=red
1.227 + var anim = createAnimSetTo("fill", "url(#missingGrad) currentColor");
1.228 +
1.229 + gSvg.setCurrentTime(0);
1.230 + var fallback =
1.231 + getFallbackColor(SMILUtil.getComputedStyleSimple(gCircle, "fill"));
1.232 + is(fallback, "rgb(255, 0, 0)",
1.233 + "Checking animated fallback fill=currentColor after animating");
1.234 +
1.235 + gCircle.setAttribute("color", "lime"); // Change: currentColor=lime
1.236 + gSvg.setCurrentTime(0);
1.237 + fallback = getFallbackColor(SMILUtil.getComputedStyleSimple(gCircle, "fill"));
1.238 + is(fallback, "rgb(0, 255, 0)",
1.239 + "Checking animated fallback fill=currentColor after updating context");
1.240 +
1.241 + gCircle.removeAttribute("style");
1.242 + gCircle.removeChild(gCircle.firstChild);
1.243 +}
1.244 +
1.245 +function testInheritChange()
1.246 +{
1.247 + setupTest();
1.248 + gCircleParent.setAttribute("fill", "red"); // At first: inherit=red
1.249 + var anim = createAnimSetTo("fill", "inherit");
1.250 +
1.251 + gSvg.setCurrentTime(0);
1.252 + is(SMILUtil.getComputedStyleSimple(gCircle, "fill"), "rgb(255, 0, 0)",
1.253 + "Checking animated fill=inherit after animating");
1.254 +
1.255 + gCircleParent.setAttribute("fill", "lime"); // Change: inherit=lime
1.256 + gSvg.setCurrentTime(0);
1.257 + is(SMILUtil.getComputedStyleSimple(gCircle, "fill"), "rgb(0, 255, 0)",
1.258 + "Checking animated fill=inherit after updating context");
1.259 +
1.260 + gCircleParent.removeAttribute("fill");
1.261 + gCircle.removeChild(gCircle.firstChild);
1.262 +}
1.263 +
1.264 +function testInheritChangeUsingStyle()
1.265 +{
1.266 + setupTest();
1.267 + gCircleParent.setAttribute("style", "fill: red"); // At first: inherit=red
1.268 + var anim = createAnimSetTo("fill", "inherit");
1.269 +
1.270 + gSvg.setCurrentTime(0);
1.271 + is(SMILUtil.getComputedStyleSimple(gCircle, "fill"), "rgb(255, 0, 0)",
1.272 + "Checking animated fill=inherit after animating (using style attr)");
1.273 +
1.274 + gCircleParent.setAttribute("style", "fill: lime"); // Change: inherit=lime
1.275 + gSvg.setCurrentTime(0);
1.276 + is(SMILUtil.getComputedStyleSimple(gCircle, "fill"), "rgb(0, 255, 0)",
1.277 + "Checking animated fill=inherit after updating context "
1.278 + + "(using style attr)");
1.279 +
1.280 + gCircleParent.removeAttribute("style");
1.281 + gCircle.removeChild(gCircle.firstChild);
1.282 +}
1.283 +
1.284 +function testEmUnitChangeOnProp()
1.285 +{
1.286 + setupTest();
1.287 + gCircleParent.setAttribute("font-size", "10px"); // At first: font-size: 10px
1.288 + var anim = createAnimSetTo("font-size", "2em");
1.289 +
1.290 + gSvg.setCurrentTime(0);
1.291 + is(SMILUtil.getComputedStyleSimple(gCircle, "font-size"), "20px",
1.292 + "Checking animated font-size=2em after animating ends");
1.293 +
1.294 + gCircleParent.setAttribute("font-size", "20px"); // Change: font-size: 20px
1.295 + gSvg.setCurrentTime(0);
1.296 + is(SMILUtil.getComputedStyleSimple(gCircle, "font-size"), "40px",
1.297 + "Checking animated font-size=2em after updating context");
1.298 +
1.299 + gCircleParent.removeAttribute("font-size");
1.300 + gCircle.removeChild(gCircle.firstChild);
1.301 +}
1.302 +
1.303 +function testEmUnitChangeOnPropBase()
1.304 +{
1.305 + // Test the case where the base value for our animation sandwich is
1.306 + // context-sensitive.
1.307 + // Currently, this is taken care of by the compositor which keeps a cached
1.308 + // base value and compares it with the current base value. This test then just
1.309 + // serves as a regression test in case the compositor's behaviour changes.
1.310 + setupTest();
1.311 + gSvg.setAttribute("font-size", "10px"); // At first: font-size: 10px
1.312 + gCircleParent.setAttribute("font-size", "1em"); // Base: 10px
1.313 + var anim = createAnimBy("font-size", "10px");
1.314 +
1.315 + gSvg.setCurrentTime(TIME_AFTER_ANIM_END);
1.316 + is(SMILUtil.getComputedStyleSimple(gCircle, "font-size"), "20px",
1.317 + "Checking animated font-size=20px after anim ends");
1.318 +
1.319 + gSvg.setAttribute("font-size", "20px"); // Change: font-size: 20px
1.320 + gSvg.setCurrentTime(TIME_AFTER_ANIM_END);
1.321 + is(SMILUtil.getComputedStyleSimple(gCircle, "font-size"), "30px",
1.322 + "Checking animated font-size=30px after updating context");
1.323 +
1.324 + gCircleParent.removeAttribute("font-size");
1.325 + gCircle.removeChild(gCircle.firstChild);
1.326 +}
1.327 +
1.328 +function testEmUnitChangeOnLength()
1.329 +{
1.330 + setupTest();
1.331 + gCircleParent.setAttribute("font-size", "10px"); // At first: font-size: 10px
1.332 + var anim = createAnimSetTo("cx", "2em");
1.333 +
1.334 + gSvg.setCurrentTime(0);
1.335 + is(gCircle.cx.animVal.value, 20,
1.336 + "Checking animated length=2em after animating");
1.337 +
1.338 + gCircleParent.setAttribute("font-size", "20px"); // Change: font-size: 20px
1.339 + // Bug 508206: We should really detect this change and update immediately but
1.340 + // currently we don't until we get sampled again
1.341 + todo_is(gCircle.cx.animVal.value, 40,
1.342 + "Checking animated length=2em after updating context but before sampling");
1.343 +
1.344 + gSvg.setCurrentTime(0);
1.345 + is(gCircle.cx.animVal.value, 40,
1.346 + "Checking animated length=2em after updating context and after " +
1.347 + "resampling");
1.348 +
1.349 + gCircleParent.removeAttribute("font-size");
1.350 + gCircle.removeChild(gCircle.firstChild);
1.351 +}
1.352 +
1.353 +function testPercentUnitChangeOnProp()
1.354 +{
1.355 + setupTest();
1.356 + gCircleParent.setAttribute("font-size", "10px"); // At first: font-size: 10px
1.357 + var anim = createAnimSetTo("font-size", "150%");
1.358 +
1.359 + gSvg.setCurrentTime(0);
1.360 + is(SMILUtil.getComputedStyleSimple(gCircle, "font-size"), "15px",
1.361 + "Checking animated font-size=150% after animating");
1.362 +
1.363 + gCircleParent.setAttribute("font-size", "20px"); // Change: font-size: 20px
1.364 + gSvg.setCurrentTime(0);
1.365 + is(SMILUtil.getComputedStyleSimple(gCircle, "font-size"), "30px",
1.366 + "Checking animated font-size=150% after updating context");
1.367 +
1.368 + gCircleParent.removeAttribute("font-size");
1.369 + gCircle.removeChild(gCircle.firstChild);
1.370 +}
1.371 +
1.372 +function testPercentUnitChangeOnLength()
1.373 +{
1.374 + setupTest();
1.375 + var oldHeight = gSvg.getAttribute("height");
1.376 + gSvg.setAttribute("height", "100px"); // At first: viewport height: 100px
1.377 + var anim = createAnimSetTo("cy", "100%");
1.378 +
1.379 + gSvg.setCurrentTime(0); // Force synchronous sample so animation takes effect
1.380 + // Due to bug 627594 (SVGLength.value for percent value lengths doesn't
1.381 + // reflect updated viewport until reflow) the following will fail.
1.382 + // Check that it does indeed fail so that when that bug is fixed this test
1.383 + // can be updated.
1.384 + todo_is(gCircle.cy.animVal.value, 100,
1.385 + "Checking animated length=100% after animating but before reflow");
1.386 + gSvg.forceRedraw();
1.387 + // Even after doing a reflow though we'll still fail due to bug 508206
1.388 + // (Relative units used in animation don't update immediately)
1.389 + todo_is(gCircle.cy.animVal.value, 100,
1.390 + "Checking animated length=100% after animating but before resampling");
1.391 + gSvg.setCurrentTime(0);
1.392 + // Now we should be up to date
1.393 + is(gCircle.cy.animVal.value, 100,
1.394 + "Checking animated length=100% after animating");
1.395 +
1.396 + gSvg.setAttribute("height", "50px"); // Change: height: 50px
1.397 + gSvg.forceRedraw(); // Bug 627594
1.398 + gSvg.setCurrentTime(0); // Bug 508206
1.399 + is(gCircle.cy.animVal.value, 50,
1.400 + "Checking animated length=100% after updating context");
1.401 +
1.402 + gSvg.setAttribute("height", oldHeight);
1.403 + gCircle.removeChild(gCircle.firstChild);
1.404 +}
1.405 +
1.406 +function testRelativeFontSize()
1.407 +{
1.408 + setupTest();
1.409 + gCircleParent.setAttribute("font-size", "10px"); // At first: font-size: 10px
1.410 + var anim = createAnimSetTo("font-size", "larger");
1.411 +
1.412 + gSvg.setCurrentTime(0);
1.413 + var fsize = parseInt(SMILUtil.getComputedStyleSimple(gCircle, "font-size"));
1.414 + // CSS 2 suggests a scaling factor of 1.2 so we should be looking at something
1.415 + // around about 12 or so
1.416 + ok(fsize > 10 && fsize < 20,
1.417 + "Checking animated font-size > 10px after animating");
1.418 +
1.419 + gCircleParent.setAttribute("font-size", "20px"); // Change: font-size: 20px
1.420 + gSvg.setCurrentTime(0);
1.421 + fsize = parseInt(SMILUtil.getComputedStyleSimple(gCircle, "font-size"));
1.422 + ok(fsize > 20, "Checking animated font-size > 20px after updating context");
1.423 +
1.424 + gCircleParent.removeAttribute("font-size");
1.425 + gCircle.removeChild(gCircle.firstChild);
1.426 +}
1.427 +
1.428 +function testRelativeFontWeight()
1.429 +{
1.430 + setupTest();
1.431 + gCircleParent.setAttribute("font-weight", "100"); // At first: font-weight 100
1.432 + var anim = createAnimSetTo("font-weight", "bolder");
1.433 + // CSS 2: 'bolder': Specifies the next weight that is assigned to a font
1.434 + // that is darker than the inherited one. If there is no such weight, it
1.435 + // simply results in the next darker numerical value (and the font remains
1.436 + // unchanged), unless the inherited value was '900', in which case the
1.437 + // resulting weight is also '900'.
1.438 +
1.439 + gSvg.setCurrentTime(0);
1.440 + var weight =
1.441 + parseInt(SMILUtil.getComputedStyleSimple(gCircle, "font-weight"));
1.442 + ok(weight > 100, "Checking animated font-weight > 100 after animating");
1.443 +
1.444 + gCircleParent.setAttribute("font-weight", "800"); // Change: font-weight 800
1.445 + gSvg.setCurrentTime(0);
1.446 + weight = parseInt(SMILUtil.getComputedStyleSimple(gCircle, "font-weight"));
1.447 + is(weight, 900,
1.448 + "Checking animated font-weight = 900 after updating context");
1.449 +
1.450 + gCircleParent.removeAttribute("font-weight");
1.451 + gCircle.removeChild(gCircle.firstChild);
1.452 +}
1.453 +
1.454 +function testRelativeFont()
1.455 +{
1.456 + // Test a relative font-size as part of a 'font' spec since the code path
1.457 + // is different in this case
1.458 + // It turns out that, due to the way we store shorthand font properties, we
1.459 + // don't need to worry about marking such values as context-sensitive since we
1.460 + // seem to store them in their relative form. If, however, we change the way
1.461 + // we store shorthand font properties in the future, this will serve as
1.462 + // a useful regression test.
1.463 + setupTest();
1.464 + gCircleParent.setAttribute("font-size", "10px"); // At first: font-size: 10px
1.465 + // We must be sure to set every part of the shorthand property to some
1.466 + // non-context sensitive value because we want to test that even if only the
1.467 + // font-size is relative we will update it appropriately.
1.468 + var anim =
1.469 + createAnimSetTo("font", "normal normal bold larger/normal sans-serif");
1.470 +
1.471 + gSvg.setCurrentTime(0);
1.472 + var fsize = parseInt(SMILUtil.getComputedStyleSimple(gCircle, "font-size"));
1.473 + ok(fsize > 10 && fsize < 20,
1.474 + "Checking size of shorthand 'font' > 10px after animating");
1.475 +
1.476 + gCircleParent.setAttribute("font-size", "20px"); // Change: font-size: 20px
1.477 + gSvg.setCurrentTime(0);
1.478 + fsize = parseInt(SMILUtil.getComputedStyleSimple(gCircle, "font-size"));
1.479 + ok(fsize > 20,
1.480 + "Checking size of shorthand 'font' > 20px after updating context");
1.481 +
1.482 + gCircleParent.removeAttribute("font-size");
1.483 + gCircle.removeChild(gCircle.firstChild);
1.484 +}
1.485 +
1.486 +function testCalcFontSize()
1.487 +{
1.488 + setupTest();
1.489 + gCircleParent.setAttribute("font-size", "10px"); // At first: font-size: 10px
1.490 + var anim = createAnimSetTo("font-size", "-moz-calc(110% + 0.1em)");
1.491 +
1.492 + gSvg.setCurrentTime(0);
1.493 + var fsize = parseInt(SMILUtil.getComputedStyleSimple(gCircle, "font-size"));
1.494 + // Font size should be 1.1 * 10px + 0.1 * 10px = 12
1.495 + is(fsize, 12, "Checking animated calc font-size == 12px after animating");
1.496 +
1.497 + gCircleParent.setAttribute("font-size", "20px"); // Change: font-size: 20px
1.498 + gSvg.setCurrentTime(0);
1.499 + fsize = parseInt(SMILUtil.getComputedStyleSimple(gCircle, "font-size"));
1.500 + is(fsize, 24, "Checking animated calc font-size == 24px after updating " +
1.501 + "context");
1.502 +
1.503 + gCircleParent.removeAttribute("font-size");
1.504 + gCircle.removeChild(gCircle.firstChild);
1.505 +}
1.506 +
1.507 +function testDashArray()
1.508 +{
1.509 + // stroke dasharrays don't currently convert units--but if someone ever fixes
1.510 + // that, hopefully this test will fail and remind us not to cache percentage
1.511 + // values in that case
1.512 + setupTest();
1.513 + var oldHeight = gSvg.getAttribute("height");
1.514 + var oldWidth = gSvg.getAttribute("width");
1.515 + gSvg.setAttribute("height", "100px"); // At first: viewport: 100x100px
1.516 + gSvg.setAttribute("width", "100px");
1.517 + var anim = createAnimFromTo("stroke-dasharray", "0 5", "0 50%");
1.518 +
1.519 + gSvg.setCurrentTime(TIME_AFTER_ANIM_END);
1.520 +
1.521 + // Now we should be up to date
1.522 + is(SMILUtil.getComputedStyleSimple(gCircle, "stroke-dasharray"), "0, 50%",
1.523 + "Checking animated stroke-dasharray after animating");
1.524 +
1.525 + gSvg.setAttribute("height", "50px"); // Change viewport: 50x50px
1.526 + gSvg.setAttribute("width", "50px");
1.527 + gSvg.setCurrentTime(TIME_AFTER_ANIM_END);
1.528 + is(SMILUtil.getComputedStyleSimple(gCircle, "stroke-dasharray"), "0, 50%",
1.529 + "Checking animated stroke-dasharray after updating context");
1.530 +
1.531 + gSvg.setAttribute("height", oldHeight);
1.532 + gSvg.setAttribute("width", oldWidth);
1.533 + gCircle.removeChild(gCircle.firstChild);
1.534 +}
1.535 +
1.536 +function testClip()
1.537 +{
1.538 + setupTest();
1.539 + gCircleParent.setAttribute("font-size", "20px"); // At first: font-size: 20px
1.540 +
1.541 + // The clip property only applies to elements that establish a new
1.542 + // viewport so we need to create a nested svg and add animation to that
1.543 + var nestedSVG = document.createElementNS(SVGNS, "svg");
1.544 + nestedSVG.setAttribute("clip", "rect(0px 0px 0px 0px)");
1.545 + gCircleParent.appendChild(nestedSVG);
1.546 +
1.547 + var anim = createAnimSetTo("clip", "rect(1em 1em 1em 1em)");
1.548 + // createAnimSetTo will make the animation a child of gCircle so we need to
1.549 + // move it so it targets nestedSVG instead
1.550 + nestedSVG.appendChild(anim);
1.551 +
1.552 + gSvg.setCurrentTime(TIME_AFTER_ANIM_END);
1.553 + is(SMILUtil.getComputedStyleSimple(nestedSVG, "clip"),
1.554 + "rect(20px, 20px, 20px, 20px)",
1.555 + "Checking animated clip rect after animating");
1.556 +
1.557 + gCircleParent.setAttribute("font-size", "10px"); // Change: font-size: 10px
1.558 + gSvg.setCurrentTime(TIME_AFTER_ANIM_END);
1.559 + is(SMILUtil.getComputedStyleSimple(nestedSVG, "clip"),
1.560 + "rect(10px, 10px, 10px, 10px)",
1.561 + "Checking animated clip rect after updating context");
1.562 +
1.563 + gCircleParent.removeAttribute("font-size");
1.564 + gCircleParent.removeChild(nestedSVG);
1.565 +}
1.566 +
1.567 +window.addEventListener("load", main, false);
1.568 +]]>
1.569 +</script>
1.570 +</pre>
1.571 +</body>
1.572 +</html>
