<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" onload="init()">

    <script><![CDATA[
        function init()
        {
            var rect = document.rootElement.createSVGRect();

            // Test initial values
            if (rect.x == 0 && rect.y == 0) {
                document.getElementById("test1").setAttribute("fill", "green");
            }
            if (rect.width == 0 && rect.height == 0) {
                document.getElementById("test2").setAttribute("fill", "green");
            }

            // Assign new values from local function
            rect.x = 100; rect.y = 200;
            rect.width = 300; rect.height = 400;
            if (rect.x == 100 && rect.y == 200) {
                document.getElementById("test3").setAttribute("fill", "green");
            }
            if (rect.width == 300 && rect.height == 400) {
                document.getElementById("test4").setAttribute("fill", "green");
            }

            // Assign new values from external function
            assignValues(rect);
            if (rect.x == 250 && rect.y == 350) {
                document.getElementById("test5").setAttribute("fill", "green");
            }
            if (rect.width == 450 && rect.height == 550) {
                document.getElementById("test6").setAttribute("fill", "green");
            }

            // Create new rect in external function, check values
            var newRect = createNewRect();
            if (newRect.x == 6 && newRect.y == 66) {
                document.getElementById("test7").setAttribute("fill", "green");
            }
            if (newRect.width == 666 && newRect.height == 6666) {
                document.getElementById("test8").setAttribute("fill", "green");
            }

            // Check swapping of rect objects
            var savedRect = rect;
            rect = newRect;
            if (rect.x == 6 && rect.y == 66) {
                document.getElementById("test9").setAttribute("fill", "green");
            }
            if (rect.width == 666 && rect.height == 6666) {
                document.getElementById("test10").setAttribute("fill", "green");
            }

            rect = savedRect;
            if (rect.x == 250 && rect.y == 350) {
                document.getElementById("test11").setAttribute("fill", "green");
            }
            if (rect.width == 450 && rect.height == 550) {
                document.getElementById("test12").setAttribute("fill", "green");
            }

            // Modifying savedRect, should also modify rect
            savedRect.x = 150; savedRect.y = 250;
            savedRect.width = 350; savedRect.height = 450;

            if (rect.x == 150 && rect.y == 250) {
                document.getElementById("test13").setAttribute("fill", "green");
            }
            if (rect.width == 350 && rect.height == 450) {
                document.getElementById("test14").setAttribute("fill", "green");
            }
        }

        function assignValues(r)
        {
            r.x = 250; r.y = 350;
            r.width = 450; r.height = 550;
        }

        function createNewRect()
        {
            var rect = document.rootElement.createSVGRect();
            rect.x = 6; rect.y = 66;
            rect.width = 666; rect.height = 6666;
            return rect;
        }
    ]]></script>
    
    <rect id="test1" transform="translate(0, 0)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test2" transform="translate(0, 30)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test3" transform="translate(0, 60)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test4" transform="translate(0, 90)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test5" transform="translate(0, 120)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test6" transform="translate(0, 150)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test7" transform="translate(0, 180)" x="0" y="0" width="100" height="20" fill="red"/>

    <rect id="test8" transform="translate(110, 0)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test9" transform="translate(110, 30)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test10" transform="translate(110, 60)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test11" transform="translate(110, 90)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test12" transform="translate(110, 120)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test13" transform="translate(110, 150)" x="0" y="0" width="100" height="20" fill="red"/>
    <rect id="test14" transform="translate(110, 180)" x="0" y="0" width="100" height="20" fill="red"/>
</svg>