struct-dom-20-f-isvalid.html (6641B)
1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <title>struct-dom-20-f-manual.svg</title> 5 <meta charset='utf-8'> 6 </head> 7 <body> 8 <h1>Source SVG: struct-dom-20-f-manual.svg</h1> 9 <svg id="svg-root" width="100%" height="100%" 10 viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" 11 xmlns:xlink="http://www.w3.org/1999/xlink" onload="runTest()"> 12 <!--======================================================================--> 13 <!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =--> 14 <!--= Institute of Technology, European Research Consortium for =--> 15 <!--= Informatics and Mathematics (ERCIM), Keio University). =--> 16 <!--= All Rights Reserved. =--> 17 <!--= See http://www.w3.org/Consortium/Legal/. =--> 18 <!--======================================================================--> 19 20 <title id="test-title">$RCSfile: struct-dom-20-f.svg,v $</title> 21 <defs> 22 <font-face 23 font-family="SVGFreeSansASCII" 24 unicode-range="U+0-7F"> 25 <font-face-src> 26 <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/> 27 </font-face-src> 28 </font-face> 29 </defs> 30 <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18"> 31 32 <defs> 33 <g id="defsg1" onclick="verifyDefs3(evt)"> 34 <circle id="defscircle3" cx="80" cy="180" r="25" fill="red"/> 35 <use id="defsuse1" xlink:href="#defscircle4" transform="translate(-600, 0)" onclick="verifyDefs4(evt)"/> 36 </g> 37 <circle id="defscircle4" cx="1000" cy="180" r="25" fill="red"/> 38 39 <script><![CDATA[ 40 function verifyDefs3(e) 41 { 42 var instance = document.getElementById("use3").instanceRoot; 43 var dc3instance = instance.firstChild.nextSibling; 44 if (e.target != e.currentTarget && // Assertion: the target and currentTarget are different since the event bubbled 45 e.target === dc3instance && // Assertion: the event was dispatched to the correct EventTarget 46 e.currentTarget === instance) // Assertion: the event bubbled up to the SVGElementInstance corresponding to the element with id="defsg1" 47 { 48 dc3instance.correspondingElement.setAttribute("fill", "lime"); 49 } 50 } 51 52 function verifyDefs4(e) 53 { 54 var useElement = document.getElementById("use3"); 55 var nestedUseInstance = useElement.instanceRoot.childNodes.item(3); 56 var instanceNestedCircle = nestedUseInstance.childNodes.item(0); 57 if (e.target != e.currentTarget && // Assertion: the target and currentTarget are different since the event bubbled 58 e.target === instanceNestedCircle && // Assertion: the event was dispatched to the correct EventTarget 59 e.currentTarget === nestedUseInstance && // Assertion: the event bubbled up to the SVGElementInstance corresponding to the element with id="defsuse1" 60 instanceNestedCircle.parentNode === nestedUseInstance && // Assertion: the parentNode is the SVGElementInstance of the 'use' that referenced the circle 61 instanceNestedCircle.correspondingUseElement === useElement) // Assertion: When 'use' elements are nested then the correspondingUseElement is the outermost 'use' 62 { 63 document.getElementById("defscircle4").setAttribute("fill", "lime"); 64 } 65 } 66 67 function verify(e) 68 { 69 var c = document.getElementById("circle"); 70 if (e.target === e.currentTarget && // Assertion: the target and currentTarget are the same 71 e.target === c) // Assertion: the target is the 'circle' element since we dispatched the event directly to it 72 { 73 c.setAttribute("fill", "lime"); 74 } 75 } 76 77 function dispatchMouseClick(target) 78 { 79 var mouseevent = document.createEvent("MouseEvents"); 80 mouseevent.initMouseEvent("click", 81 true, // canbubble 82 true, // cancellable 83 document.defaultView, // the AbstractView 84 1, // mouseclick count 85 0, // screen x coordinate 86 0, // screen y coordinate 87 0, // client x coordinate 88 0, // client y coordinate 89 false, // ctrlKey 90 false, // altKey 91 false, // shiftKey 92 false, // metaKey 93 0, // mousebutton 94 null); // related target 95 target.dispatchEvent(mouseevent); 96 } 97 98 function runTest() 99 { 100 // test bubbling click 101 try { 102 var instanceCircle = document.getElementById("use3").instanceRoot.firstChild.nextSibling; 103 dispatchMouseClick(instanceCircle); 104 } catch(e) {} 105 106 // test nested use with bubbling click 107 try { 108 var nestedUseInstance = document.getElementById("use3").instanceRoot.childNodes.item(3); 109 var instanceNestedCircle = nestedUseInstance.childNodes.item(0); 110 dispatchMouseClick(instanceNestedCircle); 111 } catch(e) {} 112 } 113 ]]></script> 114 </defs> 115 116 <use id="use3" xlink:href="#defsg1"/> 117 </g> 118 <g font-family="SVGFreeSansASCII,sans-serif" font-size="32"> 119 <text id="revision" x="10" y="340" stroke="none" 120 fill="black">$Revision: 1.2 $</text> 121 </g> 122 <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/> 123 <!-- comment out this watermark once the test is approved --> 124 <g id="draft-watermark"> 125 <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/> 126 <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240" 127 text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text> 128 </g> 129 </svg> 130 </body> 131 </html>