<
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">script-uiEvents-BE-02</
title>
<
desc id="test-desc">
This test validates basic support for the mouse events defined in SVG.
</
desc>
<
g id="test-body-content">
<
text x="150"
y="20"
style="
fill:black;">
Mouse event handlers test.
</
text>
<
g id="targetGroup"
transform="translate(35, 80)">
<
text x="-20"
y="-20">Target</
text>
<
text x="60"
y="-10">Use the target to trigger the various events.</
text>
<
text x="60"
y="5">For example, click on the target to create a 'onclick' event.</
text>
<
g id="target"
onfocusin="onEvent(evt, 'onfocusin')"
onfocusout="onEvent(evt, 'onfocusout')"
onactivate="onEvent(evt, 'onactivate')"
onmousedown="onEvent(evt, 'onmousedown')"
onmouseup="onEvent(evt, 'onmouseup')"
onclick="onEvent(evt, 'onclick')"
onmouseover="onEvent(evt, 'onmouseover')"
onmousemove="onEvent(evt, 'onmousemove')"
onmouseout="onEvent(evt, 'onmouseout')">
<
circle cx="0"
cy="0"
r="10"
style="
fill:#cccccc;
stroke:black;"/>
<
line x1="-10"
y1="0"
x2="10"
y2="0"/>
<
line x1="0"
y1="-10"
x2="0"
y2="10"/>
</
g>
</
g>
<
g id="labels">
<
g id="mouseEvents"
transform="translate(30, 150)">
<
g id="mouseEventsLabels">
<
text x="0"
y="10">onfocusin</
text>
<
text x="0"
y="30">onfocusout</
text>
<
text x="0"
y="50">onactivate</
text>
<
text x="0"
y="70">onmousedown</
text>
<
text x="0"
y="90">onmouseup</
text>
<
text x="0"
y="110">onclick</
text>
<
text x="0"
y="130">onmouseover</
text>
<
text x="0"
y="150">onmousemove</
text>
<
text x="0"
y="170">onmouseout</
text>
</
g>
<
g id="mouseEventsTestIndicators">
<
rect x="-15"
y="2"
width="10"
height="10"
style="
fill:green;"/>
<
rect id="onfocusin"
x="-15"
y="2"
width="10"
height="10"
style="
fill:red;"/>
<
rect x="-15"
y="22"
width="10"
height="10"
style="
fill:green;"/>
<
rect id="onfocusout"
x="-15"
y="22"
width="10"
height="10"
style="
fill:red;"/>
<
rect x="-15"
y="42"
width="10"
height="10"
style="
fill:green;"/>
<
rect id="onactivate"
x="-15"
y="42"
width="10"
height="10"
style="
fill:red;"/>
<
rect x="-15"
y="62"
width="10"
height="10"
style="
fill:green;"/>
<
rect id="onmousedown"
x="-15"
y="62"
width="10"
height="10"
style="
fill:red;"/>
<
rect x="-15"
y="82"
width="10"
height="10"
style="
fill:green;"/>
<
rect id="onmouseup"
x="-15"
y="82"
width="10"
height="10"
style="
fill:red;"/>
<
rect x="-15"
y="102"
width="10"
height="10"
style="
fill:green;"/>
<
rect id="onclick"
x="-15"
y="102"
width="10"
height="10"
style="
fill:red;"/>
<
rect x="-15"
y="122"
width="10"
height="10"
style="
fill:green;"/>
<
rect id="onmouseover"
x="-15"
y="122"
width="10"
height="10"
style="
fill:red;"/>
<
rect x="-15"
y="142"
width="10"
height="10"
style="
fill:green;"/>
<
rect id="onmousemove"
x="-15"
y="142"
width="10"
height="10"
style="
fill:red;"/>
<
rect x="-15"
y="162"
width="10"
height="10"
style="
fill:green;"/>
<
rect id="onmouseout"
x="-15"
y="162"
width="10"
height="10"
style="
fill:red;"/>
</
g>
</
g>
</
g>
<
script type="text/ecmascript">
function onEvent(evt, indicatorId){
// Get Document
var target = evt.getTarget();
var doc = target.getOwnerDocument();
// Mark test as passed
var testPassed = doc.getElementById(indicatorId);
testPassed.setAttribute('style', 'visibility:hidden');
}
</
script>
</
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">script-uiEvents-BE-02</
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>
