<svg version="1.1" baseProfile="basic" 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.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
    version="$Revision: 1.7 $" testname="$RCSfile: interact-order-01-b.svg,v $">
    <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/interact.html#UIEventProcessing">
      <p>
        Test event bubbling of event attributes, part a.
      </p>
      <p>
        The two circles test whether event bubbling is occurring
        to parents of the target object, and whether the target object
        is able to prevent bubbling. The supplemental text next to
        the circles describes what should occur.
      </p>
    </d:testDescription>
    <d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
      <p>This test requires user interaction. Firstly, move the pointer
  over the top circle. Then, move it over the bottom circle.</p>
    </d:operatorScript>
    <d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
      <p>
        The test is passed if two black circles are displayed. The top circle
must turn pink when the pointer is over the circle, and go back to black once
the pointer leaves. The second circle  must turn blue when the pointer is over
the circle, and go back to black once the pointer leaves.
      </p>
    </d:passCriteria>
  </d:SVGTestCase>
  <title id="test-title">$RCSfile: interact-order-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">
    <defs>
      <script type="text/ecmascript">

        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-family="Arial" font-size="40" x="60" y="45">Event bubbling - a</text>
    <g 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-family="Arial" font-size="40">
      <!-- Event bubbling (i.e., propagation) is not turned off, so
              event if first processed by 'circle', but then processed by 'g',
              with result that circle turns blue, but then instantaneously
              turns pink. -->
      <g onmouseover="bubbleYes(evt, '#F08')" onmouseout="bubbleYes(evt, 'inherit')">
        <circle onmouseover="bubbleYes(evt, '#00F')" onmouseout="bubbleYes(evt, 'inherit')" cx="70" cy="120" r="50"/>
        <circle onmouseover="bubbleNo(evt, '#00F')" onmouseout="bubbleNo(evt, 'inherit')" cx="70" cy="240" r="50"/>
      </g>
      <text x="150" y="110">
        Pointer in circle,
      </text>
      <text x="150" y="150">
        circle turns pink
      </text>
      <text x="150" y="230">
        Pointer in circle,
      </text>
      <text x="150" y="270">
        circle turns blue
      </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.7 $</text>
  </g>
  <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  <!-- 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>