Source code
Revision control
Copy as Markdown
Other Tools
SVG Preview (Scaled)
<svg version="1.1" baseProfile="basic" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
<!--======================================================================-->
<!--= 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. =-->
<!--======================================================================-->
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>
<p>This test requires user interaction. Firstly, move the pointer
over the top circle. Then, move it over the bottom circle.</p>
</d:operatorScript>
<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>