Source code

Revision control

Copy as Markdown

Other Tools

<!DOCTYPE html>
<html lang='en'>
<meta charset='utf-8'>
<h1>Source SVG: interact-dom-01-b-manual.svg</h1>
<svg version="1.1" baseProfile="basic" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360" onload="initTest(evt)"
<!--= 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. =-->
<title id="test-title">$RCSfile: interact-dom-01-b.svg,v $</title>
<font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
<font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<script type="text/ecmascript">
var doc;
var content;
var startButton;
var buttonRect;
var yLocation = 280;
// onload handler for top level svg element. Sets a UI event listener for
// the test start button.
function initTest(evt){
// Get Document
var target =;
doc = target.ownerDocument;
content = doc.getElementById("test-body-content");
// Get start rect and add a UI listener
startButton = doc.getElementById("startButton");
buttonRect = doc.getElementById("buttonRect");
startButton.addEventListener("click", uiEventDetected, false);
// click handler for 'startButton' rect element.
function uiEventDetected(evt) {
// Add an element to show that UI event was detected
var newText = doc.createElementNS(svg_ns, 'text');
newText.setAttribute('x', '5');
newText.setAttribute('y', yLocation);
newText.setAttribute('font-size', '40');
var message = "Event Listeners supported";
var textContent = doc.createTextNode(message);
startButton.removeEventListener("click", uiEventDetected, false);
// Make start button green
buttonRect.setAttribute("fill", "#88ff88");
buttonRect.setAttribute("stroke", "black");
// If test does not successfully remove the event listener, then
// a second click will cause a subsequent text string to appear 50 units
// below the first new text string.
yLocation = yLocation + 50;
<!-- ===================================================================== -->
<!-- Start button -->
<!-- ===================================================================== -->
<g id="startButton">
<rect id="buttonRect" x="65" y="20" width="350" height="200" fill="#dddddd" stroke="black"/>
<text font-size="54" x="120" y="130">Start Test</text>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.8 $</text>
<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>