<?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">&lt;title&gt;and &lt;desc&gt;</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">&lt;title&gt;</text>
                    <text x="150"  y="0">&lt;desc&gt;</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">&lt;rect&gt;</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>&lt;rect&gt; with title only</title>
                    </rect>

                    <!-- desc -->
                    <rect transform="translate(180, 0)" x="20" y="3" width="20" height="14"> 
                        <desc>&lt;rect&gt; with &lt;desc&gt; only</desc>
                    </rect>

                    <!-- title and desc -->
                    <rect transform="translate(240, 0)" x="20" y="3" width="20" height="14"> 
                        <title>Title: &lt;rect&gt; with title and &lt;desc&gt;</title>
                        <desc>Description: &lt;rect&gt; with title and &lt;desc&gt;</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">&lt;circle&gt;</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>&lt;circle&gt; with &lt;title&gt; only</title>
                    </circle>

                    <!-- desc -->
                    <circle transform="translate(180, 0)" cx="30" cy="10" r="8" > 
                        <desc>&lt;circle&gt; with &lt;desc&gt; only</desc>
                    </circle>

                    <!-- title and desc -->
                    <circle transform="translate(240, 0)" cx="30" cy="10" r="8" > 
                        <title>Title: &lt;circle&gt; with &lt;title&gt; and &lt;desc&gt;</title>
                        <desc>Description: &lt;circle&gt; with &lt;desc&gt; and &lt;desc&gt;</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">&lt;ellipse&gt;</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>&lt;ellipse&gt; with &lt;title&gt; only</title>
                    </ellipse>

                    <!-- desc -->
                    <ellipse transform="translate(180, 0)" cx="30" cy="10" rx="20" ry="5" > 
                        <desc>&lt;ellipse&gt; with &lt;desc&gt; only</desc>
                    </ellipse>

                    <!-- title and desc -->
                    <ellipse transform="translate(240, 0)" cx="30" cy="10" rx="20" ry="5" > 
                        <title>Title: &lt;ellipse&gt; with &lt;title&gt; and &lt;desc&gt;</title>
                        <desc>Description: &lt;ellipse&gt; with &lt;desc&gt; and &lt;desc&gt;</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">&lt;line&gt;</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>&lt;line&gt; with &lt;title&gt; only</title>
                    </line>

                    <!-- desc -->
                    <line transform="translate(180, 0)" x1="5" y1="10" x2="55" y2="10" > 
                        <desc>&lt;line&gt; with &lt;desc&gt; only</desc>
                    </line>

                    <!-- title and desc -->
                    <line transform="translate(240, 0)" x1="5" y1="10" x2="55" y2="10" > 
                        <title>Title: &lt;line&gt; with &lt;title&gt; and &lt;desc&gt;</title>
                        <desc>Description: &lt;line&gt; with &lt;desc&gt; and &lt;desc&gt;</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">&lt;polyline&gt;</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>&lt;polyline&gt; with &lt;title&gt; only</title>
                    </polyline>

                    <!-- desc -->
                    <polyline transform="translate(180, 0)" points="5,10 5,15 30,15 30,5 55,5 55,10"> 
                        <desc>&lt;polyline&gt; with &lt;desc&gt; 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: &lt;polyline&gt; with &lt;title&gt; and &lt;desc&gt;</title>
                        <desc>Description: &lt;polyline&gt; with &lt;desc&gt; and &lt;desc&gt;</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">&lt;polygon&gt;</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>&lt;polygon&gt; with &lt;title&gt; only</title>
                    </polygon>

                    <!-- desc -->
                    <polygon transform="translate(180, 0)" points="5,10 5,15 30,15 30,5 55,5 55,10"> 
                        <desc>&lt;polygon&gt; with &lt;desc&gt; 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: &lt;polygon&gt; with &lt;title&gt; and &lt;desc&gt;</title>
                        <desc>Description: &lt;polygon&gt; with &lt;desc&gt; and &lt;desc&gt;</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">&lt;path&gt;</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>&lt;path&gt; with &lt;title&gt; only</title>
                    </path>

                    <!-- desc -->
                    <path transform="translate(180, 0)" d="M5,10l0,5l25,0l0,-10l25,0l0,5Z"> 
                        <desc>&lt;path&gt; with &lt;desc&gt; only</desc>
                    </path>

                    <!-- title and desc -->
                    <path transform="translate(240, 0)" d="M5,10l0,5l25,0l0,-10l25,0l0,5Z"> 
                        <title>Title: &lt;path&gt; with &lt;title&gt; and &lt;desc&gt;</title>
                        <desc>Description: &lt;path&gt; with &lt;desc&gt; and &lt;desc&gt;</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">&lt;image&gt;</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>&lt;image&gt; with &lt;title&gt; only</title>
                    </image>

                    <!-- desc -->
                    <image transform="translate(180, 0)" x="8" y="2" width="43" height="18" xlink:href="../../resources/images/tde.jpg"> 
                        <desc>&lt;image&gt; with &lt;desc&gt; 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: &lt;image&gt; with &lt;title&gt; and &lt;desc&gt;</title>
                        <desc>Description: &lt;image&gt; with &lt;desc&gt; and &lt;desc&gt;</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">&lt;text&gt;</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>&lt;text&gt; with &lt;title&gt; only</title>
                    </text>

                    <!-- desc -->
                    <text transform="translate(180, 0)" x="30" y="15">Ho, la, la!
                        <desc>&lt;text&gt; with &lt;desc&gt; only</desc>
                    </text>

                    <!-- title and desc -->
                    <text transform="translate(240, 0)" x="30" y="15">Ho, la, la!
                        <title>Title: &lt;text&gt; with &lt;title&gt; and &lt;desc&gt;</title>
                        <desc>Description: &lt;text&gt; with &lt;desc&gt; and &lt;desc&gt;</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">&lt;use&gt;</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>&lt;use&gt; with &lt;title&gt; only</title>
                    </use>

                    <!-- desc -->
                    <use transform="translate(180, 0)" x="20" y="3"
                         xlink:href="#useElem">
                        <desc>&lt;use&gt; with &lt;desc&gt; only</desc>
                    </use>

                    <!-- title and desc -->
                    <use transform="translate(240, 0)" x="20" y="3"
                         xlink:href="#useElem">
                        <title>Title: &lt;use&gt; with &lt;title&gt; and &lt;desc&gt;</title>
                        <desc>Description: &lt;use&gt; with &lt;desc&gt; and &lt;desc&gt;</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 &lt;rect&gt; with tip</title>
                    </rect>
                    <rect x="30" y="30" width="80" height="40" fill="orange">
                        <title>Orange &lt;rect&gt; 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 &lt;rect&gt; 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 &lt;rect&gt; 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>
