| <?xml version="1.0" standalone="no"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" |
| "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
| |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <!-- ========================================================================= --> |
| <!-- This test validates handling of the title and desc elements on graphical --> |
| <!-- elements. By default, the JSVGCanvas shows a tooltip with the title and --> |
| <!-- description if present. --> |
| <!-- This test validates that tooltips are shown on the various graphical --> |
| <!-- elements and that overlapping elements are treated properly (i.e., that --> |
| <!-- tooltips do not 'show through' elements. --> |
| <!-- --> |
| <!-- @author vhardy@apache.org --> |
| <!-- @version $Id$ --> |
| <!-- ========================================================================= --> |
| <?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?> |
| |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body" width="450" height="500" viewBox="0 0 450 500"> |
| <title>Marker Test</title> |
| |
| <style type="text/css"><![CDATA[ |
| .label { text-anchor: middle; } |
| ]]></style> |
| |
| <g id="content"> |
| |
| <text class="title" x="50%" y="35"><title>and <desc></text> |
| <text class="title" x="50%" y="50">tool tips on Graphical Elements</text> |
| |
| <defs> |
| <rect id="useElem" fill="crimson" stroke="black" |
| x="0" y="0" width="20" height="14"/> |
| </defs> |
| |
| <g id="graphicsElementsTable" transform="translate(75, 60)"> |
| |
| <g id="additionalInfoHeader" transform="translate(60, 0)"> |
| <rect x="0" y="0" width="60" height="20" fill="#eeeeee" stroke="black" /> |
| <rect x="60" y="0" width="60" height="20" fill="#eeeeee" stroke="black" /> |
| <rect x="120" y="0" width="60" height="20" fill="#eeeeee" stroke="black" /> |
| <rect x="180" y="0" width="60" height="20" fill="#eeeeee" stroke="black" /> |
| |
| <g id="additionalInfoHeaderLabels" transform="translate(0, 15)" class="label"> |
| <text x="30" y="0">No info</text> |
| <text x="90" y="0"><title></text> |
| <text x="150" y="0"><desc></text> |
| <text x="210" y="0">both</text> |
| </g> |
| </g> |
| |
| <g id="rectRow" transform="translate(0, 20)"> |
| <g fill="white" stroke="black"> |
| <rect x="0" y="0" width="60" height="20" /> |
| <rect x="60" y="0" width="60" height="20" /> |
| <rect x="120" y="0" width="60" height="20" /> |
| <rect x="180" y="0" width="60" height="20" /> |
| <rect x="240" y="0" width="60" height="20" /> |
| </g> |
| |
| <text x="30" y="15" class="label"><rect></text> |
| |
| <g id="rectSamples" fill="gold" stroke="black"> |
| <!-- No info --> |
| <rect transform="translate(60, 0)" x="20" y="3" width="20" height="14" /> |
| |
| <!-- title --> |
| <rect transform="translate(120, 0)" x="20" y="3" width="20" height="14" > |
| <title><rect> with title only</title> |
| </rect> |
| |
| <!-- desc --> |
| <rect transform="translate(180, 0)" x="20" y="3" width="20" height="14"> |
| <desc><rect> with <desc> only</desc> |
| </rect> |
| |
| <!-- title and desc --> |
| <rect transform="translate(240, 0)" x="20" y="3" width="20" height="14"> |
| <title>Title: <rect> with title and <desc></title> |
| <desc>Description: <rect> with title and <desc></desc> |
| </rect> |
| </g> |
| </g> <!-- "rectRow" --> |
| |
| <g id="circleRow" transform="translate(0, 40)"> |
| <g fill="white" stroke="black"> |
| <rect x="0" y="0" width="60" height="20" /> |
| <rect x="60" y="0" width="60" height="20" /> |
| <rect x="120" y="0" width="60" height="20" /> |
| <rect x="180" y="0" width="60" height="20" /> |
| <rect x="240" y="0" width="60" height="20" /> |
| </g> |
| |
| <text x="30" y="15" class="label"><circle></text> |
| |
| <g id="circleSamples" fill="gold" stroke="black"> |
| <!-- No info --> |
| <circle transform="translate(60, 0)" cx="30" cy="10" r="8" /> |
| |
| <!-- title --> |
| <circle transform="translate(120, 0)" cx="30" cy="10" r="8" > |
| <title><circle> with <title> only</title> |
| </circle> |
| |
| <!-- desc --> |
| <circle transform="translate(180, 0)" cx="30" cy="10" r="8" > |
| <desc><circle> with <desc> only</desc> |
| </circle> |
| |
| <!-- title and desc --> |
| <circle transform="translate(240, 0)" cx="30" cy="10" r="8" > |
| <title>Title: <circle> with <title> and <desc></title> |
| <desc>Description: <circle> with <desc> and <desc></desc> |
| </circle> |
| </g> |
| </g> <!-- "circleRow" --> |
| |
| |
| <g id="ellipseRow" transform="translate(0, 60)"> |
| <g fill="white" stroke="black"> |
| <rect x="0" y="0" width="60" height="20" /> |
| <rect x="60" y="0" width="60" height="20" /> |
| <rect x="120" y="0" width="60" height="20" /> |
| <rect x="180" y="0" width="60" height="20" /> |
| <rect x="240" y="0" width="60" height="20" /> |
| </g> |
| |
| <text x="30" y="15" class="label"><ellipse></text> |
| |
| <g id="ellipseSamples" fill="gold" stroke="black"> |
| <!-- No info --> |
| <ellipse transform="translate(60, 0)" cx="30" cy="10" rx="20" ry="5" /> |
| |
| <!-- title --> |
| <ellipse transform="translate(120, 0)" cx="30" cy="10" rx="20" ry="5" > |
| <title><ellipse> with <title> only</title> |
| </ellipse> |
| |
| <!-- desc --> |
| <ellipse transform="translate(180, 0)" cx="30" cy="10" rx="20" ry="5" > |
| <desc><ellipse> with <desc> only</desc> |
| </ellipse> |
| |
| <!-- title and desc --> |
| <ellipse transform="translate(240, 0)" cx="30" cy="10" rx="20" ry="5" > |
| <title>Title: <ellipse> with <title> and <desc></title> |
| <desc>Description: <ellipse> with <desc> and <desc></desc> |
| </ellipse> |
| </g> |
| </g> <!-- "ellipseRow" --> |
| |
| <g id="lineRow" transform="translate(0, 80)"> |
| <g fill="white" stroke="black"> |
| <rect x="0" y="0" width="60" height="20" /> |
| <rect x="60" y="0" width="60" height="20" /> |
| <rect x="120" y="0" width="60" height="20" /> |
| <rect x="180" y="0" width="60" height="20" /> |
| <rect x="240" y="0" width="60" height="20" /> |
| </g> |
| |
| <text x="30" y="15" class="label"><line></text> |
| |
| <g id="lineSamples" stroke="black" stroke-width="4"> |
| <!-- No info --> |
| <line transform="translate(60, 0)" x1="5" y1="10" x2="55" y2="10" /> |
| |
| <!-- title --> |
| <line transform="translate(120, 0)" x1="5" y1="10" x2="55" y2="10" > |
| <title><line> with <title> only</title> |
| </line> |
| |
| <!-- desc --> |
| <line transform="translate(180, 0)" x1="5" y1="10" x2="55" y2="10" > |
| <desc><line> with <desc> only</desc> |
| </line> |
| |
| <!-- title and desc --> |
| <line transform="translate(240, 0)" x1="5" y1="10" x2="55" y2="10" > |
| <title>Title: <line> with <title> and <desc></title> |
| <desc>Description: <line> with <desc> and <desc></desc> |
| </line> |
| </g> |
| </g> <!-- "lineRow" --> |
| |
| <g id="polylineRow" transform="translate(0, 100)"> |
| <g fill="white" stroke="black"> |
| <rect x="0" y="0" width="60" height="20" /> |
| <rect x="60" y="0" width="60" height="20" /> |
| <rect x="120" y="0" width="60" height="20" /> |
| <rect x="180" y="0" width="60" height="20" /> |
| <rect x="240" y="0" width="60" height="20" /> |
| </g> |
| |
| <text x="30" y="15" class="label"><polyline></text> |
| |
| <g id="polylineSamples" stroke="black" fill="orange"> |
| <!-- No info --> |
| <polyline transform="translate(60, 0)" points="5,10 5,15 30,15 30,5 55,5 55,10"/> |
| |
| <!-- title --> |
| <polyline transform="translate(120, 0)" points="5,10 5,15 30,15 30,5 55,5 55,10"> |
| <title><polyline> with <title> only</title> |
| </polyline> |
| |
| <!-- desc --> |
| <polyline transform="translate(180, 0)" points="5,10 5,15 30,15 30,5 55,5 55,10"> |
| <desc><polyline> with <desc> only</desc> |
| </polyline> |
| |
| <!-- title and desc --> |
| <polyline transform="translate(240, 0)" points="5,10 5,15 30,15 30,5 55,5 55,10"> |
| <title>Title: <polyline> with <title> and <desc></title> |
| <desc>Description: <polyline> with <desc> and <desc></desc> |
| </polyline> |
| </g> |
| </g> <!-- "polylineRow" --> |
| |
| <g id="polygonRow" transform="translate(0, 120)"> |
| <g fill="white" stroke="black"> |
| <rect x="0" y="0" width="60" height="20" /> |
| <rect x="60" y="0" width="60" height="20" /> |
| <rect x="120" y="0" width="60" height="20" /> |
| <rect x="180" y="0" width="60" height="20" /> |
| <rect x="240" y="0" width="60" height="20" /> |
| </g> |
| |
| <text x="30" y="15" class="label"><polygon></text> |
| |
| <g id="polygonSamples" stroke="black" fill="orange"> |
| <!-- No info --> |
| <polygon transform="translate(60, 0)" points="5,10 5,15 30,15 30,5 55,5 55,10"/> |
| |
| <!-- title --> |
| <polygon transform="translate(120, 0)" points="5,10 5,15 30,15 30,5 55,5 55,10"> |
| <title><polygon> with <title> only</title> |
| </polygon> |
| |
| <!-- desc --> |
| <polygon transform="translate(180, 0)" points="5,10 5,15 30,15 30,5 55,5 55,10"> |
| <desc><polygon> with <desc> only</desc> |
| </polygon> |
| |
| <!-- title and desc --> |
| <polygon transform="translate(240, 0)" points="5,10 5,15 30,15 30,5 55,5 55,10"> |
| <title>Title: <polygon> with <title> and <desc></title> |
| <desc>Description: <polygon> with <desc> and <desc></desc> |
| </polygon> |
| </g> |
| </g> <!-- "polygonRow" --> |
| |
| |
| <g id="pathRow" transform="translate(0, 140)"> |
| <g fill="white" stroke="black"> |
| <rect x="0" y="0" width="60" height="20" /> |
| <rect x="60" y="0" width="60" height="20" /> |
| <rect x="120" y="0" width="60" height="20" /> |
| <rect x="180" y="0" width="60" height="20" /> |
| <rect x="240" y="0" width="60" height="20" /> |
| </g> |
| |
| <text x="30" y="15" class="label"><path></text> |
| |
| <g id="pathSamples" stroke="black" fill="orange"> |
| <!-- No info --> |
| <path transform="translate(60, 0)" d="M5,10l0,5l25,0l0,-10l25,0l0,5Z"/> |
| |
| <!-- title --> |
| <path transform="translate(120, 0)" d="M5,10l0,5l25,0l0,-10l25,0l0,5Z"> |
| <title><path> with <title> only</title> |
| </path> |
| |
| <!-- desc --> |
| <path transform="translate(180, 0)" d="M5,10l0,5l25,0l0,-10l25,0l0,5Z"> |
| <desc><path> with <desc> only</desc> |
| </path> |
| |
| <!-- title and desc --> |
| <path transform="translate(240, 0)" d="M5,10l0,5l25,0l0,-10l25,0l0,5Z"> |
| <title>Title: <path> with <title> and <desc></title> |
| <desc>Description: <path> with <desc> and <desc></desc> |
| </path> |
| </g> |
| </g> <!-- "pathRow" --> |
| |
| <g id="imageRow" transform="translate(0, 160)"> |
| <g fill="white" stroke="black"> |
| <rect x="0" y="0" width="60" height="20" /> |
| <rect x="60" y="0" width="60" height="20" /> |
| <rect x="120" y="0" width="60" height="20" /> |
| <rect x="180" y="0" width="60" height="20" /> |
| <rect x="240" y="0" width="60" height="20" /> |
| </g> |
| |
| <text x="30" y="15" class="label"><image></text> |
| |
| <g id="imageSamples" stroke="black" fill="orange"> |
| <!-- No info --> |
| <image transform="translate(60, 0)" x="8" y="2" width="43" height="18" xlink:href="../../resources/images/tde.jpg"/> |
| |
| <!-- title --> |
| <image transform="translate(120, 0)" x="8" y="2" width="43" height="18" xlink:href="../../resources/images/tde.jpg"> |
| <title><image> with <title> only</title> |
| </image> |
| |
| <!-- desc --> |
| <image transform="translate(180, 0)" x="8" y="2" width="43" height="18" xlink:href="../../resources/images/tde.jpg"> |
| <desc><image> with <desc> only</desc> |
| </image> |
| |
| <!-- title and desc --> |
| <image transform="translate(240, 0)" x="8" y="2" width="43" height="18" xlink:href="../../resources/images/tde.jpg"> |
| <title>Title: <image> with <title> and <desc></title> |
| <desc>Description: <image> with <desc> and <desc></desc> |
| </image> |
| </g> |
| </g> <!-- "imageRow" --> |
| |
| <g id="textRow" transform="translate(0, 180)"> |
| <g fill="white" stroke="black"> |
| <rect x="0" y="0" width="60" height="20" /> |
| <rect x="60" y="0" width="60" height="20" /> |
| <rect x="120" y="0" width="60" height="20" /> |
| <rect x="180" y="0" width="60" height="20" /> |
| <rect x="240" y="0" width="60" height="20" /> |
| </g> |
| |
| <text x="30" y="15" class="label"><text></text> |
| |
| <g id="textSamples" stroke="none" fill="crimson" text-anchor="middle"> |
| <!-- No info --> |
| <text transform="translate(60, 0)" x="30" y="15">Ho, la, la!</text> |
| |
| <!-- title --> |
| <text transform="translate(120, 0)" x="30" y="15">Ho, la, la! |
| <title><text> with <title> only</title> |
| </text> |
| |
| <!-- desc --> |
| <text transform="translate(180, 0)" x="30" y="15">Ho, la, la! |
| <desc><text> with <desc> only</desc> |
| </text> |
| |
| <!-- title and desc --> |
| <text transform="translate(240, 0)" x="30" y="15">Ho, la, la! |
| <title>Title: <text> with <title> and <desc></title> |
| <desc>Description: <text> with <desc> and <desc></desc> |
| </text> |
| </g> |
| </g> <!-- "textRow" --> |
| |
| <g id="useRow" transform="translate(0, 200)"> |
| <g fill="white" stroke="black"> |
| <rect x="0" y="0" width="60" height="20" /> |
| <rect x="60" y="0" width="60" height="20" /> |
| <rect x="120" y="0" width="60" height="20" /> |
| <rect x="180" y="0" width="60" height="20" /> |
| <rect x="240" y="0" width="60" height="20" /> |
| </g> |
| |
| <text x="30" y="15" class="label"><use></text> |
| |
| <g id="useSamples" stroke="none" fill="none"> |
| <!-- No info --> |
| <use transform="translate(60, 0)" x="20" y="3" |
| xlink:href="#useElem"/> |
| |
| <!-- title --> |
| <use transform="translate(120, 0)" x="20" y="3" |
| xlink:href="#useElem"> |
| <title><use> with <title> only</title> |
| </use> |
| |
| <!-- desc --> |
| <use transform="translate(180, 0)" x="20" y="3" |
| xlink:href="#useElem"> |
| <desc><use> with <desc> only</desc> |
| </use> |
| |
| <!-- title and desc --> |
| <use transform="translate(240, 0)" x="20" y="3" |
| xlink:href="#useElem"> |
| <title>Title: <use> with <title> and <desc></title> |
| <desc>Description: <use> with <desc> and <desc></desc> |
| </use> |
| </g> |
| </g> <!-- "textRow" --> |
| </g> <!-- id="graphicsElementsTable" --> |
| |
| <g id="toolTipOverlaps" transform="translate(75, 300)"> |
| |
| <g fill="#eeeeee" stroke="black"> |
| <rect x="60" width="120" height="20" /> |
| <rect x="180" width="120" height="20" /> |
| <rect x="40" y="20" width="20" height="80" /> |
| <rect x="40" y="100" width="20" height="80" /> |
| |
| <rect y="20" x="60" width="120" height="80" fill="white" /> |
| <rect y="100" x="60" width="120" height="80" fill="white" /> |
| <rect y="20" x="180" width="120" height="80" fill="white" /> |
| <rect y="100" x="180" width="120" height="80" fill="white" /> |
| |
| <g class="label" stroke="none" fill="black"> |
| <text x="120" y="15">Orange w/ Tip</text> |
| <text x="240" y="15">Orange wo/ Tip</text> |
| <text transform="rotate(-90, 55, 60)" x="55" y="60">Red w/Tip</text> |
| <text transform="rotate(-90, 55, 140)" x="55" y="140">Red wo/Tip</text> |
| </g> |
| |
| <!-- ============================== --> |
| <!-- Top Left --> |
| <!-- red w tip, --> |
| <!-- orange w tip. --> |
| <!-- Tip on red and orange. Orange --> |
| <!-- tip on intersection. --> |
| <!-- ============================== --> |
| <g transform="translate(60, 20)"> |
| <rect x="10" y="10" width="50" height="50" fill="crimson"> |
| <title>Red <rect> with tip</title> |
| </rect> |
| <rect x="30" y="30" width="80" height="40" fill="orange"> |
| <title>Orange <rect> with tip</title> |
| </rect> |
| </g> |
| |
| <!-- ============================== --> |
| <!-- Top Right. --> |
| <!-- red w tip, --> |
| <!-- orange wo tip. --> |
| <!-- Tip on red. No tip on orange. --> |
| <!-- No tip on intersection. --> |
| <!-- ============================== --> |
| <g transform="translate(180, 20)"> |
| <rect x="10" y="10" width="50" height="50" fill="crimson"> |
| <title>Red <rect> with tip</title> |
| </rect> |
| <rect x="30" y="30" width="80" height="40" fill="orange" /> |
| </g> |
| |
| <!-- ============================== --> |
| <!-- Bottom Left --> |
| <!-- red wo tip, --> |
| <!-- orange w tip. --> |
| <!-- No tip on red. Tip on orange. --> |
| <!-- Orange tip on intersection. --> |
| <!-- ============================== --> |
| <g transform="translate(60, 100)"> |
| <rect x="10" y="10" width="50" height="50" fill="crimson"/> |
| <rect x="30" y="30" width="80" height="40" fill="orange"> |
| <title>Orange <rect> with tip</title> |
| </rect> |
| </g> |
| |
| <!-- ============================== --> |
| <!-- Bottom Right. --> |
| <!-- red wo tip, --> |
| <!-- orange wo tip. --> |
| <!-- There should be no tooltips --> |
| <!-- shown. --> |
| <!-- ============================== --> |
| <g transform="translate(180, 100)"> |
| <rect x="10" y="10" width="50" height="50" fill="crimson"/> |
| <rect x="30" y="30" width="80" height="40" fill="orange"/> |
| </g> |
| |
| </g> |
| </g> |
| </g><!-- "content" --> |
| |
| <!-- ============================================================= --> |
| <!-- Batik sample mark --> |
| <!-- ============================================================= --> |
| <use xlink:href="../../../batikLogo.svg#Batik_Tag_Box" /> |
| |
| </svg> |
