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