LayoutTests/svg/W3C-SVG-1.1/interact-order-01-b.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<!--======================================================================-->
<!--=  Copyright 2000, 2002 World Wide Web Consortium, (Massachusetts    =-->
<!--=  Institute of Technology, Institut National de Recherche en        =-->
<!--=  Informatique et en Automatique, Keio University). All Rights      =-->
<!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
<!--======================================================================-->
<!-- =====================================================================-->
<!-- interact-bubble-BE-04.svg                                            -->
<!-- renamed for 1.1 suite to interact-order-01-b.svg		              -->
<!-- Author : Jon Ferraiolo 06-Aug-2000                                   -->
<!--          1.1 revision by Thomas DeWeese 5-Feb-2002                   -->
<!--======================================================================-->
<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">
	<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
		<OperatorScript version="$Revision: 1.2 $" testname="interact-order-01-b.svg">
			<Paragraph>
 Test event bubbling of event attributes, part a.
         </Paragraph>
			<Paragraph>
 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.
         </Paragraph>
		</OperatorScript>
	</SVGTestCase>
	<title id="test-title">interact-order-01-b</title>
	<desc id="test-desc">Test event bubbling of event attributes.</desc>
	<!--===============================================================-->
	<!--Content of Test Case follows...                  ==============-->
	<!--===============================================================-->
	<g id="test-body-content">
		<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-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 red. -->
			<g onmouseover="bubbleYes(evt, '#F00')" 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 red 
            </text>
			<text x="150" y="230">
             Pointer in circle, 
            </text>
			<text x="150" y="270">
             circle turns blue 
            </text>
		</g>
	</g>
	<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.2 $</text>
	<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
</svg>