OLD | NEW |
1 description("Tests that XML and CSS attributeTypes can be switched between."); | 1 description("Tests that XML and CSS attributeTypes can be switched between."); |
2 createSVGTestCase(); | 2 createSVGTestCase(); |
3 | 3 |
4 // Setup test document | 4 // Setup test document |
5 var rect = createSVGElement("rect"); | 5 var polygon = createSVGElement("polygon"); |
6 rect.setAttribute("id", "rect"); | 6 polygon.setAttribute("id", "polygon"); |
7 rect.setAttribute("x", "100"); | 7 polygon.setAttribute("points", "100 0 200 0 200 100 100 100"); |
8 rect.setAttribute("width", "100"); | 8 polygon.setAttribute("fill", "green"); |
9 rect.setAttribute("height", "100"); | 9 polygon.setAttribute("onclick", "executeTest()"); |
10 rect.setAttribute("fill", "green"); | |
11 rect.setAttribute("onclick", "executeTest()"); | |
12 | 10 |
13 var set = createSVGElement("set"); | 11 var set = createSVGElement("set"); |
14 set.setAttribute("id", "set"); | 12 set.setAttribute("id", "set"); |
15 set.setAttribute("attributeName", "x"); | 13 set.setAttribute("attributeName", "points"); |
16 set.setAttribute("attributeType", "XML"); | 14 set.setAttribute("attributeType", "XML"); |
17 set.setAttribute("to", "300"); | 15 set.setAttribute("to", "300 0 400 0 400 100 300 100"); |
18 set.setAttribute("begin", "click"); | 16 set.setAttribute("begin", "click"); |
19 rect.appendChild(set); | 17 polygon.appendChild(set); |
20 rootSVGElement.appendChild(rect); | 18 rootSVGElement.appendChild(polygon); |
21 | 19 |
22 // Setup animation test | 20 // Setup animation test |
23 function sample1() { | 21 function sample1() { |
24 shouldBeCloseEnough("rect.x.animVal.value", "100"); | 22 shouldBeCloseEnough("polygon.animatedPoints.getItem(0).x", "100"); |
25 shouldBe("rect.x.baseVal.value", "100"); | 23 shouldBe("polygon.points.getItem(0).x", "100"); |
26 } | 24 } |
27 | 25 |
28 function sample2() { | 26 function sample2() { |
29 shouldBeCloseEnough("rect.x.animVal.value", "300"); | 27 shouldBeCloseEnough("polygon.animatedPoints.getItem(0).x", "300"); |
30 // change the animationType to CSS which is invalid. | 28 // change the animationType to CSS which is invalid. |
31 set.setAttribute("attributeType", "CSS"); | 29 set.setAttribute("attributeType", "CSS"); |
32 } | 30 } |
33 | 31 |
34 function sample3() { | 32 function sample3() { |
35 // verify that the animation resets. | 33 // verify that the animation resets. |
36 shouldBeCloseEnough("rect.x.animVal.value", "100"); | 34 shouldBeCloseEnough("polygon.animatedPoints.getItem(0).x", "100"); |
37 // change the animation to a CSS animatable value. | 35 // change the animation to a CSS animatable value. |
38 set.setAttribute("attributeName", "opacity"); | 36 set.setAttribute("attributeName", "opacity"); |
39 set.setAttribute("to", "0.8"); | 37 set.setAttribute("to", "0.8"); |
40 } | 38 } |
41 | 39 |
42 function sample4() { | 40 function sample4() { |
43 shouldBeCloseEnough("parseFloat(getComputedStyle(rect).opacity)", "0.8"); | 41 shouldBeCloseEnough("parseFloat(getComputedStyle(polygon).opacity)", "0.8"); |
44 // change the animation to a non-CSS animatable value. | 42 // change the animation to a non-CSS animatable value. |
45 set.setAttribute("attributeName", "x"); | 43 set.setAttribute("attributeName", "points"); |
46 set.setAttribute("to", "200"); | 44 set.setAttribute("to", "200 0 300 0 300 100 200 100"); |
47 } | 45 } |
48 | 46 |
49 function sample5() { | 47 function sample5() { |
50 // verify that the animation does not run. | 48 // verify that the animation does not run. |
51 shouldBeCloseEnough("rect.x.animVal.value", "100"); | 49 shouldBeCloseEnough("polygon.animatedPoints.getItem(0).x", "100"); |
52 shouldBeCloseEnough("parseFloat(getComputedStyle(rect).opacity)", "1.0"); | 50 shouldBeCloseEnough("parseFloat(getComputedStyle(polygon).opacity)", "1.0"); |
53 // change the animationType to XML which is valid. | 51 // change the animationType to XML which is valid. |
54 set.setAttribute("attributeType", "XML"); | 52 set.setAttribute("attributeType", "XML"); |
55 } | 53 } |
56 | 54 |
57 function sample6() { | 55 function sample6() { |
58 shouldBeCloseEnough("rect.x.animVal.value", "200"); | 56 shouldBeCloseEnough("polygon.animatedPoints.getItem(0).x", "200"); |
59 shouldBe("rect.x.baseVal.value", "100"); | 57 shouldBe("polygon.points.getItem(0).x", "100"); |
60 } | 58 } |
61 | 59 |
62 function executeTest() { | 60 function executeTest() { |
63 const expectedValues = [ | 61 const expectedValues = [ |
64 // [animationId, time, sampleCallback] | 62 // [animationId, time, sampleCallback] |
65 ["set", 0.0, sample1], | 63 ["set", 0.0, sample1], |
66 ["set", 0.5, sample2], | 64 ["set", 0.5, sample2], |
67 ["set", 1.0, sample3], | 65 ["set", 1.0, sample3], |
68 ["set", 1.5, sample4], | 66 ["set", 1.5, sample4], |
69 ["set", 2.0, sample5], | 67 ["set", 2.0, sample5], |
70 ["set", 2.5, sample6] | 68 ["set", 2.5, sample6] |
71 ]; | 69 ]; |
72 | 70 |
73 runAnimationTest(expectedValues); | 71 runAnimationTest(expectedValues); |
74 } | 72 } |
75 | 73 |
76 window.clickX = 150; | 74 window.clickX = 150; |
77 var successfullyParsed = true; | 75 var successfullyParsed = true; |
OLD | NEW |