LayoutTests/svg/W3C-SVG-1.1/struct-dom-01-b.svg - WebKit - Git at Google

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