SVGViewTests/w3c/1.2T/svg/interact-order-04-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-04-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 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>
      <p>This test requires that the user agent support scripting.</p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: interact-order-04-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 - a</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">
      <!--
        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 red.
      -->
      <g>
        <handler type="text/ecmascript" xe:event="mouseover">
          bubbleYes(evt, '#F00');
        </handler>
        <handler type="text/ecmascript" xe:event="mouseout">
          bubbleYes(evt, 'inherit');
        </handler>

        <circle cx="70" cy="120" r="50">
          <handler type="text/ecmascript" xe:event="mouseover">
            bubbleYes(evt, '#00F');
          </handler>
          <handler type="text/ecmascript" xe:event="mouseout">
            bubbleYes(evt, 'inherit');
          </handler>
        </circle>

        <circle cx="70" cy="240" r="50">
          <handler type="text/ecmascript" xe:event="mouseover">
            bubbleNo(evt, '#00F');
          </handler>
          <handler type="text/ecmascript" xe:event="mouseout">
            bubbleNo(evt, 'inherit');
          </handler>
        </circle>
      </g>

      <text x="150" y="110"> Pointer in circle, </text>
      <text x="150" y="150"> circle turns red </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 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>