SVGViewTests/w3c/1.2T/svg/interact-order-05-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="DOH" owner="JF" desc="Test event bubbling of event attributes." status="accepted"
    approved="yes"
    version="$Revision: 1.10 $" testname="$RCSfile: interact-order-05-t.svg,v $"> 
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>Test event bubbling of event attributes, part b.</p>
      <p>
        The two circles test whether events are handled in the proper order.
        Events listeners and event attributes are processed before hyperlink
        processing, which is processed before text selection. The supplemental
        text next to the circles describes what should occur.
      </p>
      <p>This test requires that the user agent support scripting.</p>
    </d:OperatorScript> 
  </SVGTestCase> 
  <title xml:id="test-title">$RCSfile: interact-order-05-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">
    <defs> 
      <script type="text/ecmascript">
        <![CDATA[
           function bubbleYes(evt, color)
           {
             // Get Document
             var target = evt.target;
             target.setAttribute('fill', '' +color);
           }

           function bubbleNo(evt, color)
           {
             // Get Document
             var target = evt.target;
             target.setAttribute('fill', '' +color); 
             evt.stopPropagation();
             evt.preventDefault();
           }
        ]]>
      </script> 
    </defs>
    <text font-size="40" x="60" y="45">Event bubbling - b</text>
    <g xml:id="background"> 
      <rect fill="#EEE" stroke="#000" x="10" y="60" width="460" height="120" /> 
      <rect fill="#FFF" stroke="#000" x="10" y="180" width="460" height="120" /> 
    </g>
    <g fill="#000" font-size="40"> 
      <!-- Test the order of events --> 
      <!-- Ensure that events get the event before the hyperlink. --> 
      <a xlink:href="../images/interact-order-02-t-targ.svg">
        <circle cx="70" cy="120" r="50">
          <handler type="text/ecmascript" xe:event="click">
            bubbleNo(evt, 'red');
          </handler>
          <handler type="text/ecmasript" xe:event="mouseout">
            bubbleNo(evt, 'inherit');
          </handler>
        </circle>

        <circle cx="70" cy="240" r="50">
          <handler type="text/ecmascript" xe:event="click">
            bubbleYes(evt, 'blue');
          </handler>
          <handler type="text/ecmascript" xe:event="mouseout">
            bubbleNo(evt, 'inherit');
          </handler>
        </circle>
      </a> 
      <text x="135" y="110"> Click on circle, </text> 
      <text x="135" y="150"> circle turns red </text> 
      <text x="135" y="230"> Click on circle, </text> 
      <text x="135" y="270"> hyperlink </text> 
    </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.10 $</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>