<!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>