<
svg id="svg-root"
width="450"
height="450" xmlns:xlink="
http://www.w3.org/1999/xlink" xmlns="
http://www.w3.org/2000/svg" >
<
title id="test-title">interact-bubble-BE-04</
title>
<
desc id="test-desc">
Test event bubbling of event attributes.
</
desc>
<
g id="test-body-content">
<
defs>
<
script type="text/ecmascript">
function bubbleYes(evt, color){
// Get Document
var target = evt.target;
target.setAttribute('style', 'fill:'+color);
}
function bubbleNo(evt, color){
// Get Document
var target = evt.target;
target.setAttribute('style', 'fill:'+color);
evt.stopPropagation();
evt.preventDefault();
}
</
script>
</
defs>
<
text style="
font-family:Helvetica;
font-size:16;
text-anchor:middle;"
x="225"
y="20">
Test event bubbling of event attributes.
</
text>
<
g style="
fill:black;
text-anchor:middle;">
<
g onmouseover="bubbleYes(evt, 'red')"
onmouseout="bubbleYes(evt, 'inherit')">
<
circle onmouseover="bubbleYes(evt, 'blue')"
onmouseout="bubbleYes(evt, 'inherit')"
cx="150"
cy="70"
r="30"/>
<
circle onmouseover="bubbleNo(evt, 'blue')"
onmouseout="bubbleNo(evt, 'inherit')"
cx="300"
cy="70"
r="30"/>
</
g>
<
text style="
font-family:Helvetica;
font-size:12;
text-anchor:middle;"
x="225"
y="315">
<
tspan x="225"
y="115">
When the pointer is over the left circle, the circle should turn red
</
tspan>
<
tspan x="225"
y="130">
because the event bubbles up to the handler on the containing 'g'.
</
tspan>
<
tspan x="225"
y="145">
When the pointer is over the right circle, the circle should turn blue
</
tspan>
<
tspan x="225"
y="160">
because the event does not bubble up to the handler on the containing 'g'.
</
tspan>
</
text>
<
a xlink:href="interact-bubble-BE-04-targ.svg">
<
circle onclick="bubbleNo(evt, 'red')"
onmouseout="bubbleNo(evt, 'inherit')"
cx="150"
cy="220"
r="30"/>
<
circle onclick="bubbleYes(evt, 'blue')"
onmouseout="bubbleNo(evt, 'inherit')"
cx="300"
cy="220"
r="30"/>
</
a>
<
text style="
font-family:Helvetica;
font-size:12;
text-anchor:middle;"
x="225"
y="315">
<
tspan x="225"
y="265">
When a mouse click or other activation happens on the left circle,
</
tspan>
<
tspan x="225"
y="280">
the circle should turn red and no hyperlink action should occur.
</
tspan>
<
tspan x="225"
y="295">
When a mouse click or other activation happens on the right circle,
</
tspan>
<
tspan x="225"
y="310">
a hyperlink to file interact-bubble-BE-04-targ.svg should occur.
</
tspan>
</
text>
<
a xlink:href="interact-bubble-BE-04-targ.svg"
style="
font-size:12;">
<
text x="225"
y="340"
onclick="bubbleNo(evt, 'red')"
onmouseout="bubbleNo(evt, 'inherit')">
This string should turn red on click
</
text>
<
text x="225"
y="355"
onclick="bubbleYes(evt, 'blue')"
onmouseout="bubbleYes(evt, 'inherit')">
This string should hyperlink to interact-bubble-BE-04-targ.svg.
</
text>
<
text x="225"
y="370"
onclick="bubbleNo(evt, 'inherit')">
All three of these strings should be selectable.
</
text>
</
a>
</
g>
</
g>
<
g id="test-legend"
style="
fill:black;
font-family:Helvetica;
font-size:10;">
<
rect x="10"
y="390"
width="275"
height="50"
style="
fill:none;
stroke:#000000;"/>
<
path style="
fill:none;
stroke:#000000;"
d="M10 405 h275 M205 405 v35 M10 426 h195 M205 422 h80"/>
<
text x="25"
y="401">Scalable Vector Graphics (SVG) Conformance Suite</
text>
<
a xlink:href="copyright-documents-19990405.html">
<
text x="12"
y="437"
style="
fill:blue;">
Copyright 2000 W3C. All Rights Reserved.
</
text>
</
a>
<
text style="
font-size:12;"
x="35"
y="420">interact-bubble-BE-04</
text>
<
text style="
font-size:10;"
x="210"
y="417">$Revision: 1.1 $</
text>
<
text style="
font-size:10;"
x="210"
y="435">Release 2.0</
text>
<
rect id="test-frame"
x="1"
y="1"
width="448"
height="448"
style="
fill:none;
stroke:#000000;"/>
</
g>
</
svg>
