1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/smil/test/test_smilValues.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,170 @@
1.4 +<html xmlns="http://www.w3.org/1999/xhtml">
1.5 +<head>
1.6 + <title>Test for SMIL values</title>
1.7 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.8 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.9 +</head>
1.10 +<body>
1.11 +<a target="_blank"
1.12 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=557885">Mozilla Bug
1.13 + 474742</a>
1.14 +<p id="display"></p>
1.15 +<div id="content" style="display: none">
1.16 +<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px">
1.17 + <circle cx="-100" cy="20" r="15" fill="blue" id="circle"/>
1.18 +</svg>
1.19 +</div>
1.20 +<pre id="test">
1.21 +<script class="testbody" type="text/javascript">
1.22 +<![CDATA[
1.23 +/** Test for SMIL values **/
1.24 +
1.25 +var gSvg = document.getElementById("svg");
1.26 +SimpleTest.waitForExplicitFinish();
1.27 +
1.28 +function main()
1.29 +{
1.30 + gSvg.pauseAnimations();
1.31 +
1.32 + var testCases = Array();
1.33 +
1.34 + // Single value
1.35 + testCases.push({
1.36 + 'attr' : { 'values': 'a' },
1.37 + 'times': [ [ 0, 'a' ] ]
1.38 + });
1.39 +
1.40 + // The parsing below is based on the following discussion:
1.41 + //
1.42 + // http://lists.w3.org/Archives/Public/www-svg/2011Nov/0136.html
1.43 + //
1.44 + // In summary:
1.45 + // * Values lists are semi-colon delimited and semi-colon terminated.
1.46 + // * However, if there are extra non-whitespace characters after the final
1.47 + // semi-colon then there's an implied semi-colon at the end.
1.48 + //
1.49 + // This differs to what is specified in SVG 1.1 but is consistent with the
1.50 + // majority of browsers and with existing content (particularly that generated
1.51 + // by Ikivo Animator).
1.52 +
1.53 + // Trailing semi-colon
1.54 + testCases.push({
1.55 + 'attr' : { 'values': 'a;' },
1.56 + 'times': [ [ 0, 'a' ], [ 10, 'a' ] ]
1.57 + });
1.58 +
1.59 + // Trailing semi-colon + whitespace
1.60 + testCases.push({
1.61 + 'attr' : { 'values': 'a; ' },
1.62 + 'times': [ [ 0, 'a' ], [ 10, 'a' ] ]
1.63 + });
1.64 +
1.65 + // Whitespace + trailing semi-colon
1.66 + testCases.push({
1.67 + 'attr' : { 'values': 'a ;' },
1.68 + 'times': [ [ 0, 'a' ], [ 10, 'a' ] ]
1.69 + });
1.70 +
1.71 + // Empty at end
1.72 + testCases.push({
1.73 + 'attr' : { 'values': 'a;;' },
1.74 + 'times': [ [ 0, 'a' ], [ 5, '' ], [ 10, '' ] ]
1.75 + });
1.76 +
1.77 + // Empty at end + whitespace
1.78 + testCases.push({
1.79 + 'attr' : { 'values': 'a;; ' },
1.80 + 'times': [ [ 0, 'a' ], [ 4, 'a' ], [ 5, '' ], [ 10, '' ] ]
1.81 + });
1.82 +
1.83 + // Empty in middle
1.84 + testCases.push({
1.85 + 'attr' : { 'values': 'a;;b' },
1.86 + 'times': [ [ 0, 'a' ], [ 5, '' ], [ 10, 'b' ] ]
1.87 + });
1.88 +
1.89 + // Empty in middle + trailing semi-colon
1.90 + testCases.push({
1.91 + 'attr' : { 'values': 'a;;b;' },
1.92 + 'times': [ [ 0, 'a' ], [ 5, '' ], [ 10, 'b' ] ]
1.93 + });
1.94 +
1.95 + // Whitespace in middle
1.96 + testCases.push({
1.97 + 'attr' : { 'values': 'a; ;b' },
1.98 + 'times': [ [ 0, 'a' ], [ 5, '' ], [ 10, 'b' ] ]
1.99 + });
1.100 +
1.101 + // Empty at start
1.102 + testCases.push({
1.103 + 'attr' : { 'values': ';a' },
1.104 + 'times': [ [ 0, '' ], [ 5, 'a' ], [ 10, 'a' ] ]
1.105 + });
1.106 +
1.107 + // Whitespace at start
1.108 + testCases.push({
1.109 + 'attr' : { 'values': ' ;a' },
1.110 + 'times': [ [ 0, '' ], [ 5, 'a' ], [ 10, 'a' ] ]
1.111 + });
1.112 +
1.113 + // Embedded whitespace
1.114 + testCases.push({
1.115 + 'attr' : { 'values': ' a b ; c d ' },
1.116 + 'times': [ [ 0, 'a b' ], [ 5, 'c d' ], [ 10, 'c d' ] ]
1.117 + });
1.118 +
1.119 + // Whitespace only
1.120 + testCases.push({
1.121 + 'attr' : { 'values': ' ' },
1.122 + 'times': [ [ 0, '' ], [ 10, '' ] ]
1.123 + });
1.124 +
1.125 + for (var i = 0; i < testCases.length; i++) {
1.126 + gSvg.setCurrentTime(0);
1.127 + var test = testCases[i];
1.128 +
1.129 + // Create animation elements
1.130 + var anim = createAnim(test.attr);
1.131 +
1.132 + // Run samples
1.133 + for (var j = 0; j < test.times.length; j++) {
1.134 + var curSample = test.times[j];
1.135 + gSvg.setCurrentTime(curSample[0]);
1.136 + checkSample(anim, curSample[1], curSample[0], i);
1.137 + }
1.138 +
1.139 + anim.parentNode.removeChild(anim);
1.140 + }
1.141 +
1.142 + SimpleTest.finish();
1.143 +}
1.144 +
1.145 +function createAnim(attr)
1.146 +{
1.147 + const svgns = "http://www.w3.org/2000/svg";
1.148 + var anim = document.createElementNS(svgns, 'animate');
1.149 + anim.setAttribute('attributeName','class');
1.150 + anim.setAttribute('dur','10s');
1.151 + anim.setAttribute('begin','0s');
1.152 + anim.setAttribute('fill','freeze');
1.153 + for (name in attr) {
1.154 + anim.setAttribute(name, attr[name]);
1.155 + }
1.156 + return document.getElementById('circle').appendChild(anim);
1.157 +}
1.158 +
1.159 +function checkSample(anim, expectedValue, sampleTime, caseNum)
1.160 +{
1.161 + var msg = "Test case " + caseNum +
1.162 + " (values: '" + anim.getAttribute('values') + "')," +
1.163 + "t=" + sampleTime +
1.164 + ": Unexpected sample value:";
1.165 + is(anim.targetElement.className.animVal, expectedValue, msg);
1.166 +}
1.167 +
1.168 +window.addEventListener("load", main, false);
1.169 +]]>
1.170 +</script>
1.171 +</pre>
1.172 +</body>
1.173 +</html>
