SVGViewTests/w3c/1.2T/svg/struct-use-210-t.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" xml: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" xmlns:xe="http://www.w3.org/2001/xml-events">
  <!--======================================================================-->
  <!--=  Copyright 2008 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/.                          =-->
  <!--======================================================================-->
  <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/"
    reviewer="AE" owner="ED" desc="Test SVGElementInstance and events" status="accepted"
    approved="no"
    version="$Revision: 1.1 $" testname="$RCSfile: struct-use-210-t.svg,v $">
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>
        This test checks some aspects of the SVGElementInstance with regards to events.
      </p>
      <p>
        One blue rect should be visible at first. To run the test the rect must be clicked a minimum of two times. Once
        to run the basic test, and once to verify that the event handler was removed properly. The test has passed if after
        clicking the rect two times or more it turns green and the word "Passed" is shown on top. If anything red
        is visible or if the text on the rect says "Failed" then the test has failed.
      </p>
      <p>
        The test uses nested 'use' elements. The event handler 'nestedhandler' should be executed first, and will
        check some aspects of nested use elements. It will modify what it references, and that is checked in the 'h4' event
        handler.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: struct-use-210-t.svg,v $</title>
  <defs>
    <font-face
      font-family="SVGFreeSansASCII"
      unicode-range="U+0-7F">
      <font-face-src>
        <font-face-uri xlink:href="../images/SVGFreeSans.svg#ascii"/>
      </font-face-src>
    </font-face>
  </defs>

  <g xml:id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
    <text x="240" y="50" text-anchor="middle">Test SVGElementInstance and events</text>

    <defs>
      <g xml:id="g">
        <rect xml:id="r" width="200" height="200" rx="10"/>
        <text xml:id="t" font-size="9" x="100" y="100" text-anchor="middle" pointer-events="none" fill="white">Click here</text>
      </g>
      <use xml:id="nesteduse" xlink:href="#g">
        <handler xml:id="nestedhandler" xe:event="click">
          var link = "#fail";
          // The correspondingUseElement is always the outermost use element if use elements are nested
          if(event.target.correspondingUseElement == document.getElementById("u3"))
          {
          // The currentTarget is the 'nesteduse' use element when this event is received,
          // and the target is the element where the event originated
          if(event.currentTarget.correspondingElement == document.getElementById("nesteduse"))
          {
          link = "#pass";
          }
          }
          document.getElementById("nesteduse").setAttributeNS("http://www.w3.org/1999/xlink", "href", link);

          // Remove the handler, so that clicking again does nothing
          document.getElementById("nesteduse").removeChild(document.getElementById("nestedhandler"));
        </handler>
      </use>
      <g xml:id="fail">
        <rect xml:id="rf" width="200" height="200" fill="red" rx="10"/>
        <text xml:id="tf" font-size="9" x="100" y="100" text-anchor="middle" pointer-events="none" fill="white">Failed</text>
      </g>
      <g xml:id="pass">
        <rect xml:id="rp" width="200" height="200" fill="green" rx="10"/>
        <text xml:id="tp" font-size="9" x="100" y="100" text-anchor="middle" pointer-events="none" fill="white">Passed</text>
      </g>
    </defs>

    <g transform="translate(-65,-120)" fill="blue">
      <use xml:id="u3" xlink:href="#nesteduse" x="204" y="204">
        <handler xml:id="h4" xe:event="click">
          var link = "#fail";
          // If the nested use handler was executed then the rect element where the event originated has no
          // corresponding use element anymore, correspondingUseElement will be null.
          if(!event.target.correspondingUseElement)
          {
          if(event.target.correspondingElement == document.getElementById("r"))
          {
          link = "#pass";
          }
          }
          document.getElementById("u3").setAttributeNS("http://www.w3.org/1999/xlink", "href", link);

          // Remove the handler, so that clicking again does nothing
          document.getElementById("u3").removeChild(document.getElementById("h4"));
        </handler>
      </use>
    </g>
  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text xml:id="revision" x="10" y="340" stroke="none"
      fill="black">$Revision: 1.1 $</text>
  </g>
  <rect xml: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 xml: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>