<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<!--======================================================================-->
<!--=  Copyright 2000 World Wide Web Consortium, (Massachusetts          =-->
<!--=  Institute of Technology, Institut National de Recherche en        =-->
<!--=  Informatique et en Automatique, Keio University). All Rights      =-->
<!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
<!--======================================================================-->
<!-- ===================================================================== -->
<!-- dom-svg-BE-02.svg                                                     -->
<!-- renamed for 1.1 suite to struct-dom-01-t                              -->
<!-- Author : Vincent Hardy  06-08-2000                                    -->
<!-- Revised for 1.1 : Chris Lilley 15-Mar-2002                            -->
<!--======================================================================-->
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" onload="domTest(evt)">
	<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
		<OperatorScript version="$Revision: 1.1 $" testname="struct-dom-01-b.svg">
			<Paragraph>Verify the basic capability to handle the SVG DOM API. The test is composed of a top
			level svg element with an 'onload' event handler and a rect element. Both
			the svg and the rect elements have an identifier. The 'onload' handler
			invokes SVG-specific DOM API methods which use these identifiers.
			</Paragraph>
			<Paragraph>First, the handler gets the SVG element owner of the rect element and checks it has
			the expected identifier. Then, the handler accesses the coordinates of the rect element
			and uses them to build a 'shadow' rectangle under the existing one. Finally, the 'shadow'
			rectangle is created using the SVGSVGElement's createSVGRect method.
			</Paragraph>
			<Paragraph>If an implementation supports the ECMA Script DOM binding for SVG, then the image
			should show the following text: "This document's root identifier is: svg-root" and
			a red rectangle with a black shadow rectangle. Otherwise, only a red rectangle will show.
			</Paragraph>
			<Paragraph>The rendered picture should match the reference image.</Paragraph>
		</OperatorScript>
	</SVGTestCase>
	<title id="test-title">struct-dom-01-b</title>
	<desc id="test-desc">Checks if SVG DOM ECMA Script binding is supported</desc>
	<!--======================================================================-->
	<!--Content of Test Case follows...                  =====================-->
	<!--======================================================================-->
	<g id="test-body-content">
		<script type="text/ecmascript"><![CDATA[
		
    function domTest(evt) {

                var svg_ns = "http://www.w3.org/2000/svg";

		// Get Document
    		var target = evt.target;
		var doc = target.ownerDocument;

		//
		// Test that our rectangle is an SVGElement instance
		// 
		var rect = doc.getElementById("rectId");
		var rootSVG = rect.ownerSVGElement;
		var rootId = rootSVG.getAttribute( "id" );

		// Insert a new text element to the DOM tree using the id
		var newText = doc.createElementNS(svg_ns, 'text');
		newText.setAttribute('x', '50');
		newText.setAttribute('y', '100');
		var message = "This document's root identifier is: " + rootId
		var textContent = doc.createTextNode(message);
		newText.appendChild(textContent);
		rect.parentNode.appendChild(newText);

		//
		// Now, check that our rectangle is an instance of SVGRect by accessing
		// specific methods in order to get its x, y, width and height attributes.
		//
		var x = rect.x.baseVal.value; // SVGRect -> SVGAnimatedLenght -> SVGLength -> long
		var y = rect.y.baseVal.value; 
		var width = rect.width.baseVal.value; 
		var height = rect.height.baseVal.value;

		//
		// Now, build a new SVGRect through the SVGSVGElement interface.
		//
		var newRect = doc.createElementNS(svg_ns, 'rect');

		//
		// Set the x, y, width and height of this element
		//
		newRect.x.baseVal.value = x + 10;
                newRect.y.baseVal.value = y + 10;
                newRect.setAttribute("width", width);
                newRect.setAttribute("height", height);

		//
		// Insert new element in DOM tree
		//
		rect.parentNode.insertBefore(newRect, rect);
    }
		
	]]></script>
		<!--======================================================================-->
		<!-- Since this test is examining the SVG DOM, it could use any language  -->
		<!-- binding. Here is the equivalent code for the Java binding            -->
		<!--

        //
        // Test that our rectangle is an SVGElement instance
        //
        SVGRectElement rect = (SVGRectElement) doc.getElementById("rectId");
        SVGElement rootSVG = rect.getOwnerSVGElement();
        String rootId = rootSVG.getId();

        // Insert a new text element to the DOM tree using the id
        Element newText = doc.createElement("text");
        newText.setAttribute("x", "50");
        newText.setAttribute("y", "100");
        String message = "This document's root identifier is=" " + rootId" 
        Text textContent = doc.createTextNode(message);
        newText.appendChild(textContent);
        rect.getParentNode().appendChild(newText);

        //
        // Now, check that our rectangle is an instance of SVGRect by accessing
        // specific methods in order to get its x, y, width and height attributes.
        //
        float x = rect.getX().getBaseVal().getValue();
        float y = rect.getY().getBaseVal().getValue();
        float width = rect.getWidth().getBaseVal().getValue();
        float height = rect.getHeight().getBaseVal().getValue();

        //
        // Now, build a new SVGRect through the SVGSVGElement interface.
        //
        SVGRectElement newRect = (SVGRectElement) doc.createElement("rect");

        //
        // Set the x, y, width and height of this element
        //
        newRect.getX().getBaseVal().setValue(x + 10);
        newRect.getY().getBaseVal().setValue(y + 10);
        newRect.getWidth().getBaseVal().setValue(width);
        newRect.getHeight().getBaseVal().setValue(height);

        //
        // Insert new element in DOM tree
        //
        rect.getParentNode().insertBefore(newRect, rect);

-->
		<!-- ===================================================================== -->
		<!-- The following rectangle's is accessed in the 'domTest' ECMA Script    -->
		<!-- handler.                                                              -->
		<!-- ===================================================================== -->
		<rect id="rectId" x="40" y="150" width="50" height="50" fill="red"/>
	</g>
	<text id="revision" x="10" y="340" font-size="30" stroke="none" fill="black">$Revision: 1.1 $</text>
	<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
</svg>