Revision control
Copy as Markdown
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" xml:id="svg-root" width="100%" height="100%"
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, European Research Consortium for =-->
<!--= Informatics and Mathematics (ERCIM), Keio University). =-->
<!--= All Rights Reserved. =-->
<!--======================================================================-->
reviewer="AE" owner="ED" desc="Test SVGElementInstance and events" status="accepted"
approved="yes"
version="$Revision: 1.5 $" testname="$RCSfile: struct-use-205-t.svg,v $">
<d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
<p>
This test checks some aspects of the SVGElementInstance with regards to events.
</p>
<p>
Four blue rects should be visible at first. To run the test each rect must be clicked a minimum of two times. Once
to run the basic test, and once to verify that the event handler was removed properly. The test has passed if after
clicking all the rects two times or more there are four green rects with the word "Passed" on them. If anything red
is visible or the text on any of the rects say "Failed" then the test has failed.
</p>
<p>
The top-left rect checks that correspondingUseElement and correspondingElement are returning the correct values, and
also that the currentTarget isn't the same as target here.
</p>
<p>
The top-right rect checks that events bubble the correct way when SVGElementInstance is involved. It's almost the same
as the first subtest, but uses another 'use' element.
</p>
<p>
The bottom-left rect doesn't use 'use' elements at all, it's to illustrate event bubbling in normal trees as compared
to SVGElementInstance trees.
</p>
<p>
The bottom-right rect uses nested 'use' elements. The event handler 'nestedhandler' should be executed first, and will
check some aspects of nested use elements. It will modify what it references, and that is checked in the 'h4' event
handler.
</p>
</d:OperatorScript>
</SVGTestCase>
<title xml:id="test-title">$RCSfile: struct-use-205-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">
<text x="240" y="50" text-anchor="middle">Test SVGElementInstance and events</text>
<defs>
<g xml:id="g">
<rect xml:id="r" width="100" height="100" rx="10"/>
<text xml:id="t" font-size="9" x="50" y="50" text-anchor="middle" pointer-events="none" fill="white">Click here</text>
</g>
<use xml:id="nesteduse" xlink:href="#g">
<handler xml:id="nestedhandler" xe:event="click">
var link = "#fail";
// The correspondingUseElement is always the outermost use element if use elements are nested
if(event.target.correspondingUseElement == document.getElementById("u3"))
{
// The currentTarget is the 'nesteduse' use element when this event is received,
// and the target is the element where the event originated
if(event.currentTarget.correspondingElement == document.getElementById("nesteduse"))
{
link = "#pass";
}
}
// Remove the handler, so that clicking again does nothing
document.getElementById("nesteduse").removeChild(document.getElementById("nestedhandler"));
</handler>
</use>
<g xml:id="fail">
<rect xml:id="rf" width="100" height="100" fill="red" rx="10"/>
<text xml:id="tf" font-size="9" x="50" y="50" text-anchor="middle" pointer-events="none" fill="white">Failed</text>
</g>
<g xml:id="pass">
<rect xml:id="rp" width="100" height="100" fill="green" rx="10"/>
<text xml:id="tp" font-size="9" x="50" y="50" text-anchor="middle" pointer-events="none" fill="white">Passed</text>
</g>
</defs>
<g transform="translate(40,-20)" fill="blue">
<use xml:id="u1" xlink:href="#g" x="100" y="100">
<handler xml:id="h1" xe:event="click">
var link = "#fail";
// The currentTarget is this use element, and the target should be the rect element where
// the event originated. Checks these conditions.
// if(event.target != event.currentTarget)
{
if(event.target.correspondingUseElement == event.currentTarget)
{
if(event.target.correspondingElement == document.getElementById("r"))
{
link = "#pass";
}
}
}
// Remove the handler, so that clicking again does nothing
document.getElementById("u1").removeChild(document.getElementById("h1"));
</handler>
</use>
<use xml:id="u2" xlink:href="#g" x="204" y="100">
<handler xml:id="h2" xe:event="click">
var link = "#fail";
// The target element should have a correspondingUseElement that is the element using it.
// In this case it should be 'u2', and the correspondingElement should be the rect with id 'r'.
if(event.target.correspondingUseElement == document.getElementById("u2"))
{
if(event.target.correspondingElement == document.getElementById("r"))
{
link = "#pass";
}
}
// Remove the handler, so that clicking again does nothing
document.getElementById("u2").removeChild(document.getElementById("h2"));
</handler>
</use>
<g xml:id="g3" transform="translate(100,204)">
<rect xml:id="r3" width="100" height="100" rx="10"/>
<text xml:id="t3" font-size="9" x="50" y="50" text-anchor="middle" pointer-events="none" fill="white">Click here</text>
<handler xml:id="h3" xe:event="click">
var status = "Failed";
// This subtest is included to show the how target and currentTarget works on normal elements.
if(event.target != event.currentTarget)
{
if(event.target == document.getElementById("r3"))
{
if(event.currentTarget == document.getElementById("g3"))
{
status = "Passed";
}
}
}
document.getElementById("r3").setAttributeNS(null, "fill", status == "Passed" ? "green" : "red");
document.getElementById("t3").textContent = status;
// Remove the handler, so that clicking again does nothing
document.getElementById("g3").removeChild(document.getElementById("h3"));
</handler>
</g>
<use xml:id="u3" xlink:href="#nesteduse" x="204" y="204">
<handler xml:id="h4" xe:event="click">
var link = "#fail";
// If the nested use handler was executed then the rect element where the event originated has no
// corresponding use element anymore, correspondingUseElement will be null.
if(!event.target.correspondingUseElement)
{
if(event.target.correspondingElement == document.getElementById("r"))
{
link = "#pass";
}
}
// Remove the handler, so that clicking again does nothing
document.getElementById("u3").removeChild(document.getElementById("h4"));
</handler>
</use>
</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.5 $</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>