<svg version="1.1" baseProfile="tiny" onload="testSVGLocatable()" id="svg-root"
  width="100%" height="100%" viewBox="0 0 480 360"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!--======================================================================-->
  <!--=  SVG 1.1 2nd Edition Test Case                                     =-->
  <!--======================================================================-->
  <!--=  Copyright 2009 World Wide Web Consortium, (Massachusetts          =-->
  <!--=  Institute of Technology, European Research Consortium for         =-->
  <!--=  Informatics and Mathematics (ERCIM), Keio University).            =-->
  <!--=  All Rights Reserved.                                              =-->
  <!--=  See http://www.w3.org/Consortium/Legal/.                          =-->
  <!--======================================================================-->
  <d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
    template-version="1.3" reviewer="AE,ED" author="AN" status="accepted"
    version="$Revision: 1.6 $" testname="$RCSfile: types-dom-01-b.svg,v $">
    <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/types.html#BasicDOMInterfaces">
      <p>
        This test checks all the methods and properties of the SVGLocatable interface.
        Note the use of nested svg elements and testing against different elements in the hierarchy.
        Note that the values of .getScreenCTM() and .getCTM() can only be tested correctly if they are
        in the html-based test or the width and height of the root element is explicitly set to 480x360.
        The methods .getScreenCTM() and .getCTM() are tested from the rotated text element, the method .getBBox(),
        .getTransformToElement() is tested between the rotated text and its parent group, the method .getBBox() and
        the properties .farthestViewportElement and .nearestViewportElement are tested on the blue circle.
      </p>
    </d:testDescription>
    <d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
      <p>
        Run the test. No interaction required. Make sure scripting is enabled.
      </p>
    </d:operatorScript>
    <d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
      <p>
        For the test to pass, the values generated by script must match the values provided in the png image. The correct values are:
      </p>
      <p>
        .getScreenCTM() for id "rotText": 0.42,0.42,-0.42,0.42,70.00,-60.00
      </p>
      <p>
        .getCTM() for id "rotText": 0.42,0.42,-0.42,0.42,70.00,-60.00
      </p>
      <p>
        .getTransformToElement() between id "rotText" and id "parentGroup": 0.42,0.42,-0.42,0.42,0.00,0.00
      </p>
      <p>
        .getBBox() for 'blueCircle': .x=-50,.y=-50,.width=100,.height=100
      </p>
      <p>
        .farthestViewportElement of blueCircle=svg-root
      </p>
      <p>
        .nearestViewportElement of blueCircle=nestedSVG
      </p>
    </d:passCriteria>
  </d:SVGTestCase>
  <title id="test-title">$RCSfile: types-dom-01-b.svg,v $</title>
  <defs>
    <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
      <font-face-src>
        <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
      </font-face-src>
    </font-face>
  </defs>
  <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
    <script type="text/ecmascript">
      function testSVGLocatable() {
      var rotText = document.getElementById("rotatedText");
      var blueCircle = document.getElementById("blueCircle")
      var matr = rotText.getScreenCTM();
      document.getElementById("result1").firstChild.nodeValue = ".getScreenCTM(): " + matr.a.toFixed(2) + "," + matr.b.toFixed(2) + "," + matr.c.toFixed(2) + "," + matr.d.toFixed(2) + "," + matr.e.toFixed(2) + "," + matr.f.toFixed(2);
      var matr = rotText.getCTM();
      document.getElementById("result2").firstChild.nodeValue = ".getCTM(): " + matr.a.toFixed(2) + "," + matr.b.toFixed(2) + "," + matr.c.toFixed(2) + "," + matr.d.toFixed(2) + "," + matr.e.toFixed(2) + "," + matr.f.toFixed(2);
      var matr = rotText.getTransformToElement(document.getElementById("parentGroup"));
      document.getElementById("result3").firstChild.nodeValue = ".getTransformToElement(): " + matr.a.toFixed(2) + "," + matr.b.toFixed(2) + "," + matr.c.toFixed(2) + "," + matr.d.toFixed(2) + "," + matr.e.toFixed(2) + "," + matr.f.toFixed(2);
      var bbox = blueCircle.getBBox();
      document.getElementById("result4").firstChild.nodeValue = ".getBBox() for 'blueCircle': .x="+bbox.x+",.y="+bbox.y+",.width="+bbox.width+",.height="+bbox.height;
      document.getElementById("result5").firstChild.nodeValue = ".farthestViewportElement of blueCircle="+blueCircle.farthestViewportElement.getAttributeNS(null,"id");
      document.getElementById("result6").firstChild.nodeValue = ".nearestViewportElement of blueCircle="+blueCircle.nearestViewportElement.getAttributeNS(null,"id");
      }
    </script>
    <g font-size="12">
      <g id="parentGroup" transform="translate(70,-60)">
        <text id="rotatedText" transform="scale(0.6),rotate(45)" font-size="20" x="30" y="150">Rotated Text for testing SVGLocatable</text>
        <text id="otherText" transform="scale(0.7)" font-size="20" x="100" y="130">Some other text with id 'otherText'</text>
        <svg id="nestedSVG" x="200" y="100" width="110" height="110" viewBox="-55 -55 110 110">
          <circle id="blueCircle" cx="0" cy="0" r="50" fill="blue"/>
        </svg>
      </g>
      <text id="result1" x="10" y="200"> </text>
      <text id="result2" x="10" y="220"> </text>
      <text id="result3" x="10" y="240"> </text>
      <text id="result4" x="10" y="260"> </text>
      <text id="result5" x="10" y="280"> </text>
      <text id="result6" x="10" y="300"> </text>
    </g>
  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.6 $</text>
  </g>
  <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
  <!-- comment out this watermark once the test is approved -->
  <!--<g id="draft-watermark">
    <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
    <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
      text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
  </g>-->
</svg>