third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/struct-dom-01-b.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
   3 <!--======================================================================-->
   4 <!--=  Copyright 2000 World Wide Web Consortium, (Massachusetts          =-->
   5 <!--=  Institute of Technology, Institut National de Recherche en        =-->
   6 <!--=  Informatique et en Automatique, Keio University). All Rights      =-->
   7 <!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
   8 <!--======================================================================-->
   9 <!-- ===================================================================== -->
  10 <!-- dom-svg-BE-02.svg                                                     -->
  11 <!-- renamed for 1.1 suite to struct-dom-01-t                              -->
  12 <!-- Author : Vincent Hardy  06-08-2000                                    -->
  13 <!-- Revised for 1.1 : Chris Lilley 15-Mar-2002                            -->
  14 <!--======================================================================-->
  15 <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)">
  16         <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
  17                 <OperatorScript version="$Revision: 1.1 $" testname="struct-dom-01-b.svg">
  18                         <Paragraph>Verify the basic capability to handle the SVG DOM API. The test is composed of a top
  19                         level svg element with an 'onload' event handler and a rect element. Both
  20                         the svg and the rect elements have an identifier. The 'onload' handler
  21                         invokes SVG-specific DOM API methods which use these identifiers.
  22                         </Paragraph>
  23                         <Paragraph>First, the handler gets the SVG element owner of the rect element and checks it has
  24                         the expected identifier. Then, the handler accesses the coordinates of the rect element
  25                         and uses them to build a 'shadow' rectangle under the existing one. Finally, the 'shadow'
  26                         rectangle is created using the SVGSVGElement's createSVGRect method.
  27                         </Paragraph>
  28                         <Paragraph>If an implementation supports the ECMA Script DOM binding for SVG, then the image
  29                         should show the following text: "This document's root identifier is: svg-root" and
  30                         a red rectangle with a black shadow rectangle. Otherwise, only a red rectangle will show.
  31                         </Paragraph>
  32                         <Paragraph>The rendered picture should match the reference image.</Paragraph>
  33                 </OperatorScript>
  34         </SVGTestCase>
  35         <title id="test-title">struct-dom-01-b</title>
  36         <desc id="test-desc">Checks if SVG DOM ECMA Script binding is supported</desc>
  37         <!--======================================================================-->
  38         <!--Content of Test Case follows...                  =====================-->
  39         <!--======================================================================-->
  40         <g id="test-body-content">
  41                 <script type="text/ecmascript"><![CDATA[
  42
  43     function domTest(evt) {
  44
  45                 var svg_ns = "http://www.w3.org/2000/svg";
  46
  47                 // Get Document
  48                 var target = evt.target;
  49                 var doc = target.ownerDocument;
  50
  51                 //
  52                 // Test that our rectangle is an SVGElement instance
  53                 //
  54                 var rect = doc.getElementById("rectId");
  55                 var rootSVG = rect.ownerSVGElement;
  56                 var rootId = rootSVG.getAttribute( "id" );
  57
  58                 // Insert a new text element to the DOM tree using the id
  59                 var newText = doc.createElementNS(svg_ns, 'text');
  60                 newText.setAttribute('x', '50');
  61                 newText.setAttribute('y', '100');
  62                 var message = "This document's root identifier is: " + rootId
  63                 var textContent = doc.createTextNode(message);
  64                 newText.appendChild(textContent);
  65                 rect.parentNode.appendChild(newText);
  66
  67                 //
  68                 // Now, check that our rectangle is an instance of SVGRect by accessing
  69                 // specific methods in order to get its x, y, width and height attributes.
  70                 //
  71                 var x = rect.x.baseVal.value; // SVGRect -> SVGAnimatedLenght -> SVGLength -> long
  72                 var y = rect.y.baseVal.value;
  73                 var width = rect.width.baseVal.value;
  74                 var height = rect.height.baseVal.value;
  75
  76                 //
  77                 // Now, build a new SVGRect through the SVGSVGElement interface.
  78                 //
  79                 var newRect = doc.createElementNS(svg_ns, 'rect');
  80
  81                 //
  82                 // Set the x, y, width and height of this element
  83                 //
  84                 newRect.x.baseVal.value = x + 10;
  85                 newRect.y.baseVal.value = y + 10;
  86                 newRect.setAttribute("width", width);
  87                 newRect.setAttribute("height", height);
  88
  89                 //
  90                 // Insert new element in DOM tree
  91                 //
  92                 rect.parentNode.insertBefore(newRect, rect);
  93     }
  94
  95         ]]></script>
  96                 <!--======================================================================-->
  97                 <!-- Since this test is examining the SVG DOM, it could use any language  -->
  98                 <!-- binding. Here is the equivalent code for the Java binding            -->
  99                 <!--
 100
 101         //
 102         // Test that our rectangle is an SVGElement instance
 103         //
 104         SVGRectElement rect = (SVGRectElement) doc.getElementById("rectId");
 105         SVGElement rootSVG = rect.getOwnerSVGElement();
 106         String rootId = rootSVG.getId();
 107
 108         // Insert a new text element to the DOM tree using the id
 109         Element newText = doc.createElement("text");
 110         newText.setAttribute("x", "50");
 111         newText.setAttribute("y", "100");
 112         String message = "This document's root identifier is=" " + rootId"
 113         Text textContent = doc.createTextNode(message);
 114         newText.appendChild(textContent);
 115         rect.getParentNode().appendChild(newText);
 116
 117         //
 118         // Now, check that our rectangle is an instance of SVGRect by accessing
 119         // specific methods in order to get its x, y, width and height attributes.
 120         //
 121         float x = rect.getX().getBaseVal().getValue();
 122         float y = rect.getY().getBaseVal().getValue();
 123         float width = rect.getWidth().getBaseVal().getValue();
 124         float height = rect.getHeight().getBaseVal().getValue();
 125
 126         //
 127         // Now, build a new SVGRect through the SVGSVGElement interface.
 128         //
 129         SVGRectElement newRect = (SVGRectElement) doc.createElement("rect");
 130
 131         //
 132         // Set the x, y, width and height of this element
 133         //
 134         newRect.getX().getBaseVal().setValue(x + 10);
 135         newRect.getY().getBaseVal().setValue(y + 10);
 136         newRect.getWidth().getBaseVal().setValue(width);
 137         newRect.getHeight().getBaseVal().setValue(height);
 138
 139         //
 140         // Insert new element in DOM tree
 141         //
 142         rect.getParentNode().insertBefore(newRect, rect);
 143
 144 -->
 145                 <!-- ===================================================================== -->
 146                 <!-- The following rectangle's is accessed in the 'domTest' ECMA Script    -->
 147                 <!-- handler.                                                              -->
 148                 <!-- ===================================================================== -->
 149                 <rect id="rectId" x="40" y="150" width="50" height="50" fill="red"/>
 150         </g>
 151         <text id="revision" x="10" y="340" font-size="30" stroke="none" fill="black">$Revision: 1.1 $</text>
 152         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
 153 </svg>
 154