| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script src="../dynamic-updates/resources/SVGTestCase.js"></script> |
| <script src="resources/SVGAnimationTestCase.js"></script> |
| </head> |
| <body onload="runSMILTest()"> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| |
| description("Test animation of use element width/height"); |
| createSVGTestCase(); |
| |
| // Set up test document. |
| |
| var symbol = createSVGElement("symbol"); |
| symbol.setAttribute("id", "symbol"); |
| |
| var rect = createSVGElement("rect"); |
| rect.setAttribute("id", "rect"); |
| rect.setAttribute("x", "10"); |
| rect.setAttribute("y", "10"); |
| rect.setAttribute("width", "100%"); |
| rect.setAttribute("height", "100%"); |
| rect.setAttribute("fill", "green"); |
| rect.setAttribute("onclick", "executeTest()"); |
| symbol.appendChild(rect); |
| rootSVGElement.appendChild(symbol); |
| |
| var use = createSVGElement("use"); |
| use.setAttribute("id", "use"); |
| use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#symbol'); |
| use.setAttribute("x", "0"); |
| use.setAttribute("y", "0"); |
| use.setAttribute("width", "100"); |
| use.setAttribute("height", "100"); |
| rootSVGElement.appendChild(use); |
| |
| var animate = createSVGElement("animate"); |
| animate.setAttribute("id", "animate"); |
| animate.setAttribute("attributeName", "width"); |
| animate.setAttribute("attributeType", "XML"); |
| animate.setAttribute("begin", "1s"); |
| animate.setAttribute("dur", "10s"); |
| animate.setAttribute("from", "100"); |
| animate.setAttribute("to", "200"); |
| use.appendChild(animate); |
| |
| var animate2 = createSVGElement("animate"); |
| animate2.setAttribute("id", "animate2"); |
| animate2.setAttribute("attributeName", "height"); |
| animate2.setAttribute("attributeType", "XML"); |
| animate2.setAttribute("begin", "1s"); |
| animate2.setAttribute("dur", "10s"); |
| animate2.setAttribute("from", "100"); |
| animate2.setAttribute("to", "200"); |
| use.appendChild(animate2); |
| |
| function useElementTargetClone() |
| { |
| document.body.offsetWidth; |
| return internals.shadowRoot(use).firstChild; |
| } |
| |
| function sample1() |
| { |
| // Check initial/end conditions |
| shouldBe("use.width.animVal.value", "100"); |
| shouldBe("use.width.baseVal.value", "100"); |
| shouldBe("use.height.animVal.value", "100"); |
| shouldBe("use.height.baseVal.value", "100"); |
| shouldBe("use.getAttribute('width')", "'100'"); |
| shouldBe("use.getAttribute('height')", "'100'"); |
| shouldBe("useElementTargetClone().width.animVal.value", "100"); |
| shouldBe("useElementTargetClone().height.animVal.value", "100"); |
| } |
| |
| function sample2() |
| { |
| shouldBe("use.width.animVal.value", "105"); |
| shouldBe("use.width.baseVal.value", "100"); |
| shouldBe("use.height.animVal.value", "105"); |
| shouldBe("use.height.baseVal.value", "100"); |
| shouldBe("use.getAttribute('width')", "'105'"); |
| shouldBe("use.getAttribute('height')", "'105'"); |
| shouldBe("useElementTargetClone().width.animVal.value", "105"); |
| shouldBe("useElementTargetClone().height.animVal.value", "105"); |
| } |
| |
| function sample3() |
| { |
| shouldBe("use.width.animVal.value", "115"); |
| shouldBe("use.width.baseVal.value", "100"); |
| shouldBe("use.height.animVal.value", "115"); |
| shouldBe("use.height.baseVal.value", "100"); |
| shouldBe("use.getAttribute('width')", "'115'"); |
| shouldBe("use.getAttribute('height')", "'115'"); |
| shouldBe("useElementTargetClone().width.animVal.value", "115"); |
| shouldBe("useElementTargetClone().height.animVal.value", "115"); |
| } |
| |
| function sample4() { |
| shouldBe("use.width.animVal.value", "125"); |
| shouldBe("use.width.baseVal.value", "100"); |
| shouldBe("use.height.animVal.value", "125"); |
| shouldBe("use.height.baseVal.value", "100"); |
| shouldBe("use.getAttribute('width')", "'125'"); |
| shouldBe("use.getAttribute('height')", "'125'"); |
| shouldBe("useElementTargetClone().width.animVal.value", "125"); |
| shouldBe("useElementTargetClone().height.animVal.value", "125"); |
| } |
| |
| function sample5() |
| { |
| shouldBe("use.width.animVal.value", "135"); |
| shouldBe("use.width.baseVal.value", "100"); |
| shouldBe("use.height.animVal.value", "135"); |
| shouldBe("use.height.baseVal.value", "100"); |
| shouldBe("use.getAttribute('width')", "'135'"); |
| shouldBe("use.getAttribute('height')", "'135'"); |
| shouldBe("useElementTargetClone().width.animVal.value", "135"); |
| shouldBe("useElementTargetClone().height.animVal.value", "135"); |
| } |
| |
| function executeTest() |
| { |
| const expectedValues = [ |
| // [animationId, time, sampleCallback] |
| ["animate2", 0.0, sample1], |
| ["animate2", 0.5, sample2], |
| ["animate2", 1.5, sample3], |
| ["animate2", 2.5, sample4], |
| ["animate2", 3.5, sample5] |
| ]; |
| |
| runAnimationTest(expectedValues); |
| } |
| |
| window.clickX = 50; |
| window.clickY = 50; |
| |
| var successfullyParsed = true; |
| </script> |
| </body> |
| </html> |
