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

    <script>
        function init()
        {
            var point = document.rootElement.createSVGPoint();

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

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

            // Assign new values from external function
            assignValues(point);
            if (point.x == 300) {
                document.getElementById("test5").setAttribute("fill", "green");
            }
            if (point.y == 400) {
                document.getElementById("test6").setAttribute("fill", "green");
            }

            // Create new point in external function, check values
            var newPoint = createNewPoint();
            if (newPoint.x == 66) {
                document.getElementById("test7").setAttribute("fill", "green");
            }
            if (newPoint.y == 666) {
                document.getElementById("test8").setAttribute("fill", "green");
            }

            // Check swapping of point objects
            var savedPoint = point;
            point = newPoint;
            if (point.x == 66) {
                document.getElementById("test9").setAttribute("fill", "green");
            }
            if (point.y == 666) {
                document.getElementById("test10").setAttribute("fill", "green");
            }

            point = savedPoint;
            if (point.x == 300) {
                document.getElementById("test11").setAttribute("fill", "green");
            }
            if (point.y == 400) {
                document.getElementById("test12").setAttribute("fill", "green");
            }

            // Modifying savedPoint, should also modify point
            savedPoint.x = 150;
            savedPoint.y = 250;

            if (point.x == 150) {
                document.getElementById("test13").setAttribute("fill", "green");
            }
            if (point.y == 250) {
                document.getElementById("test14").setAttribute("fill", "green");
            }
        }

        function assignValues(p)
        {
            p.x = 300;
            p.y = 400;
        }

        function createNewPoint()
        {
            var point = document.rootElement.createSVGPoint();
            point.x = 66;
            point.y = 666;
            return point;
        }
    </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>