|
1 <!doctype html> |
|
2 <html> |
|
3 <!-- |
|
4 https://bugzilla.mozilla.org/show_bug.cgi?id=948245 |
|
5 --> |
|
6 <head> |
|
7 <meta charset="utf-8"> |
|
8 <title>Test for repeat duration calculation (Bug 948245)</title> |
|
9 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
|
10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> |
|
11 </head> |
|
12 <body> |
|
13 <a target="_blank" |
|
14 href="https://bugzilla.mozilla.org/show_bug.cgi?id=948245">Mozilla Bug 948245</a> |
|
15 <p id="display"></p> |
|
16 <div id="content" style="display: none"> |
|
17 <svg id="svg" onload="this.pauseAnimations()"> |
|
18 <rect> |
|
19 <animate id="a"/> |
|
20 <animate id="b" begin="a.end"/> |
|
21 </rect> |
|
22 </svg> |
|
23 </div> |
|
24 <pre id="test"> |
|
25 <script class="testbody" type="text/javascript"> |
|
26 // Tests the calculation of the repeat duration which is one of the steps |
|
27 // towards determining the active duration. |
|
28 // |
|
29 // The repeat duration is determined by the following three attributes: |
|
30 // |
|
31 // dur: may be definite (e.g. '2s') or 'indefinite' (the default) |
|
32 // repeatCount: may be definite (e.g. '2.5'), 'indefinite', or not set |
|
33 // repeatDur: may be definite (e.g. '5s'), 'indefinite', or not set |
|
34 // |
|
35 // That leaves 18 combinations to test. |
|
36 var testCases = |
|
37 [ |
|
38 // 1. repeatDur: definite, repeatCount: definite, dur: definite |
|
39 // (Two test cases here to ensure we get the minimum) |
|
40 { repeatDur: 15, repeatCount: 2, dur: 10, result: 15 }, |
|
41 { repeatDur: 25, repeatCount: 2, dur: 10, result: 20 }, |
|
42 // 2. repeatDur: indefinite, repeatCount: definite, dur: definite |
|
43 { repeatDur: 'indefinite', repeatCount: 2, dur: 10, result: 20 }, |
|
44 // 3. repeatDur: not set, repeatCount: definite, dur: definite |
|
45 { repeatCount: 2, dur: 10, result: 20 }, |
|
46 // 4. repeatDur: definite, repeatCount: indefinite, dur: definite |
|
47 { repeatDur: 15, repeatCount: 'indefinite', dur: 10, result: 15 }, |
|
48 // 5. repeatDur: indefinite, repeatCount: indefinite, dur: definite |
|
49 { repeatDur: 'indefinite', repeatCount: 'indefinite', dur: 10, |
|
50 result: 'indefinite' }, |
|
51 // 6. repeatDur: not set, repeatCount: indefinite, dur: definite |
|
52 { repeatCount: 'indefinite', dur: 10, result: 'indefinite' }, |
|
53 // 7. repeatDur: definite, repeatCount: not set, dur: definite |
|
54 { repeatDur: 15, dur: 10, result: 15 }, |
|
55 // 8. repeatDur: indefinite, repeatCount: not set, dur: definite |
|
56 { repeatDur: 'indefinite', dur: 10, result: 'indefinite' }, |
|
57 // 9. repeatDur: not set, repeatCount: not set, dur: definite |
|
58 { dur: 10, result: 10 }, |
|
59 // 10. repeatDur: definite, repeatCount: definite, dur: indefinite |
|
60 { repeatDur: 15, repeatCount: 2, dur: 'indefinite', result: 15 }, |
|
61 // 11. repeatDur: indefinite, repeatCount: definite, dur: indefinite |
|
62 { repeatDur: 'indefinite', repeatCount: 2, dur: 'indefinite', |
|
63 result: 'indefinite' }, |
|
64 // 12. repeatDur: not set, repeatCount: definite, dur: indefinite |
|
65 { repeatCount: 2, dur: 'indefinite', result: 'indefinite' }, |
|
66 // 13. repeatDur: definite, repeatCount: indefinite, dur: indefinite |
|
67 { repeatDur: 15, repeatCount: 'indefinite', dur: 'indefinite', |
|
68 result: 15 }, |
|
69 // 14. repeatDur: indefinite, repeatCount: indefinite, dur: indefinite |
|
70 { repeatDur: 'indefinite', repeatCount: 'indefinite', dur: 'indefinite', |
|
71 result: 'indefinite' }, |
|
72 // 15. repeatDur: not set, repeatCount: indefinite, dur: indefinite |
|
73 { repeatCount: 'indefinite', dur: 'indefinite', result: 'indefinite' }, |
|
74 // 16. repeatDur: definite, repeatCount: not set, dur: indefinite |
|
75 { repeatDur: 15, dur: 'indefinite', result: 15 }, |
|
76 // 17. repeatDur: indefinite, repeatCount: not set, dur: indefinite |
|
77 { repeatDur: 'indefinite', dur: 'indefinite', result: 'indefinite' }, |
|
78 // 18. repeatDur: not set, repeatCount: not set, dur: indefinite |
|
79 { dur: 'indefinite', result: 'indefinite' } |
|
80 ]; |
|
81 |
|
82 // We can test the repeat duration by setting these attributes on animation |
|
83 // 'a' and checking the start time of 'b' which is defined to start when 'a' |
|
84 // finishes. |
|
85 // |
|
86 // Since 'a' has no end/min/max attributes the end of its active interval |
|
87 // should coincide with the end of its repeat duration. |
|
88 // |
|
89 // Sometimes the repeat duration is defined to be 'indefinite'. In this case |
|
90 // calling getStartTime on b will throw an exception so we need to catch that |
|
91 // exception and translate it to 'indefinite' as follows: |
|
92 function getRepeatDuration() { |
|
93 try { |
|
94 return $('b').getStartTime(); |
|
95 } catch(e) { |
|
96 if (e.name == "InvalidStateError" && |
|
97 e.code == DOMException.INVALID_STATE_ERR) { |
|
98 return 'indefinite'; |
|
99 } else { |
|
100 ok(false, "Unexpected exception: " + e); |
|
101 return null; |
|
102 } |
|
103 } |
|
104 } |
|
105 |
|
106 // Animation doesn't start until onload |
|
107 SimpleTest.waitForExplicitFinish(); |
|
108 window.addEventListener("load", runTests, false); |
|
109 |
|
110 // Run through each of the test cases |
|
111 function runTests() { |
|
112 ok($('svg').animationsPaused(), "should be paused by <svg> load handler"); |
|
113 |
|
114 testCases.forEach(function(test) { |
|
115 var a = $('a'); |
|
116 |
|
117 // Set the attributes |
|
118 var msgPieces = []; |
|
119 [ 'repeatDur', 'repeatCount', 'dur' ].forEach(function(attr) { |
|
120 if (typeof test[attr] != "undefined") { |
|
121 a.setAttribute(attr, test[attr].toString()); |
|
122 msgPieces.push(attr + ': ' + test[attr].toString()); |
|
123 } else { |
|
124 a.removeAttribute(attr); |
|
125 msgPieces.push(attr + ': <not set>'); |
|
126 } |
|
127 }); |
|
128 var msg = msgPieces.join(', '); |
|
129 |
|
130 // Check the result |
|
131 ise(getRepeatDuration(), test.result, msg); |
|
132 }); |
|
133 |
|
134 SimpleTest.finish(); |
|
135 } |
|
136 </script> |
|
137 </pre> |
|
138 </body> |
|
139 </html> |