148 lines
4.6 KiB
HTML
148 lines
4.6 KiB
HTML
<!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>
|