| <?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. |
| |
| --> |
| <!-- ========================================================================= --> |
| <!-- Tests support for the cursor property. --> |
| <!-- This test shows that JPEG, PNG and TIF formats are supported. It also --> |
| <!-- shows that SVG images are not supported for cursors and that BMP images --> |
| <!-- are not either. Unsupported image formats result in the same bahavior as --> |
| <!-- 'broken images'. The cursor falls back to the built in cursor specified --> |
| <!-- at the end of the cursor list values. --> |
| <!-- --> |
| <!-- @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" > |
| |
| <text class="title" x="50%" y="50">Custom Cursor Image Test (cntd)</text> |
| |
| <script type="text/ecmascript"><![CDATA[ |
| |
| var hitCount = document.getElementById("hitCount"); |
| var hitCountText = hitCount.firstChild; |
| var curHitCount = 0; |
| |
| function targetHit() { |
| curHitCount++; |
| hitCountText.data = "" + curHitCount; |
| } |
| |
| var hitTargetArea = document.getElementById("hitTargetArea"); |
| |
| function hotTarget() { |
| hitTargetArea.setAttribute("fill", "gold"); |
| } |
| |
| function coldTarget() { |
| hitTargetArea.setAttribute("fill", "#eeeeee"); |
| } |
| |
| var cursorRef = document.getElementById("refbrokenImage"); |
| |
| function changeCursor(evt) { |
| var target = evt.target; |
| var id = target.getAttribute("id"); |
| var cursorId = "cursor" + id; |
| hitTargetArea.setAttribute("cursor", "url(#" + cursorId + "),crosshair"); |
| |
| |
| cursorRef.setAttribute("visibility", "hidden"); |
| cursorRef = document.getElementById("ref" + id); |
| if (cursorRef == null) { |
| alert("Cannot find " + "ref" + id); |
| return; |
| } |
| |
| cursorRef.setAttribute("visibility", "visible"); |
| } |
| ]]></script> |
| |
| <text class="label" x="50%" y="125" text-anchor="middle">Try and hit the small black dot |
| <tspan x="50%" dy="+1.4em">after selecting your cursor</tspan></text> |
| |
| <g id="hitTargetArea" fill="#eeeeee" transform="translate(175, 150)" shape-rendering="crispEdges" cursor="url(#cursorbrokenImage),crosshair" > |
| <rect x="0" y="0" width="100" height="100" stroke="black"/> |
| <rect x="44" y="44" width="12" height="12" fill="black"/> |
| <rect x="45" y="45" width="10" height="10" fill="#eeeeee" /> |
| <rect x="49" y="30" width="2" height="40" fill="black" /> |
| <rect y="49" x="30" height="2" width="40" fill="black" /> |
| <!-- <line x1="40" y1="50" x2="60" y2="50" stroke="black" /> |
| <line y1="40" x1="50" y2="60" x2="50" stroke="black" /> --> |
| <rect x="49" y="49" width="2" height="2" fill="black" |
| onclick="targetHit()" |
| onmouseover="hotTarget()" |
| onmouseout="coldTarget()"/> |
| </g> |
| |
| <text class="label" text-anchor="middle" x="50%" y="270" fill="crimson">Hit Count : <tspan id="hitCount">0</tspan></text> |
| |
| <text class="label" text-anchor="middle" x="25%" y="340" >Cursor Selection</text> |
| |
| <g onclick="changeCursor(evt)" transform="translate(80, 390)" cursor="pointer"> |
| <use xlink:href="#brokenImage" /> |
| <use xlink:href="#tiffImage" x="34"/> |
| <use xlink:href="#pngImage" x="68"/> |
| <use xlink:href="#jpegImage" x="0" y="34"/> |
| <use xlink:href="#unsupportedImage" x="34" y="34"/> |
| <use xlink:href="#svgImage" x="68" y="34"/> |
| <use xlink:href="#svgImage2" x="0" y="68"/> |
| <use xlink:href="#svgImage3" x="34" y="68"/> |
| <use xlink:href="#svgImage4" x="68" y="68"/> |
| </g> |
| |
| <text class="label" text-anchor="middle" x="75%" y="340" >Current Target Area Cursor</text> |
| |
| <g transform="translate(337.5, 394)" visibility="hidden" > |
| <g id="refbrokenImage" visibility="visible"> |
| <text class="label" text-anchor="middle" y="40">Broken Image<tspan dy="1.5em" x="0">defaults to crosshair</tspan></text> |
| <use xlink:href="#brokenImage" /> |
| </g> |
| <g id="reftiffImage"> |
| <text class="label" text-anchor="middle" y="40">Tiff Image</text> |
| <use xlink:href="#tiffImage" /> |
| </g> |
| <g id="refpngImage"> |
| <text class="label" text-anchor="middle" y="40">PNG Image</text> |
| <use xlink:href="#pngImage" /> |
| </g> |
| <g id="refjpegImage"> |
| <text class="label" text-anchor="middle" y="40">JPEG Image</text> |
| <use xlink:href="#jpegImage" /> |
| </g> |
| <g id="refunsupportedImage"> |
| <text class="label" text-anchor="middle" y="40">Unsupported Image (BMP)<tspan dy="1.5em" x="0">defaults to crosshair</tspan></text> |
| <use xlink:href="#unsupportedImage" /> |
| </g> |
| <g id="refsvgImage"> |
| <text class="label" text-anchor="middle" y="40">SVG Image<tspan dy="1.5em" x="0">defaults to crosshair</tspan></text> |
| <use xlink:href="#svgImage" /> |
| </g> |
| <g id="refsvgImage2"> |
| <text class="label" text-anchor="middle" y="40">SVG Image<tspan dy="1.5em" x="0">No viewBox/width/height</tspan></text> |
| <use xlink:href="#svgImage2" /> |
| </g> |
| <g id="refsvgImage3"> |
| <text class="label" text-anchor="middle" y="40">SVG Image<tspan dy="1.5em" x="0">ViewBox, no width/height</tspan></text> |
| <use xlink:href="#svgImage3" /> |
| </g> |
| y <g id="refsvgImage4"> |
| <text class="label" text-anchor="middle" y="40">SVG Image<tspan dy="1.5em" x="0">ViewBox, different aspect ratio</tspan></text> |
| <use xlink:href="#svgImage4" /> |
| </g> |
| |
| </g> |
| |
| <defs> |
| <image id="brokenImage" xlink:href="../../resources/images/iDontExist.png" width="32" height="32" x="-16" y="-16"/> |
| <image id="tiffImage" xlink:href="../../resources/images/tiffCursor.tif" width="32" height="32" x="-16" y="-16"/> |
| <image id="pngImage" xlink:href="../../resources/images/pngCursor.png" width="32" height="32" x="-16" y="-16"/> |
| <image id="jpegImage" xlink:href="../../resources/images/jpegCursor.jpg" width="32" height="32" x="-16" y="-16"/> |
| <image id="unsupportedImage" xlink:href="../../resources/images/bmpCursor.bmp" width="32" height="32" x="-16" y="-16"/> |
| <image id="svgImage" xlink:href="../../resources/images/svgCursor.svg" width="32" height="32" x="-16" y="-16"/> |
| <image id="svgImage2" xlink:href="../../resources/images/svgCursor2.svg" width="32" height="32" x="-16" y="-16"/> |
| <image id="svgImage3" xlink:href="../../resources/images/svgCursor3.svg" width="32" height="32" x="-16" y="-16"/> |
| <image id="svgImage4" xlink:href="../../resources/images/svgCursor4.svg" width="32" height="32" x="-16" y="-16"/> |
| |
| <cursor id="cursorbrokenImage" xlink:href="../../resources/images/iDontExist.png" x="16" y="16"/> |
| <cursor id="cursortiffImage" xlink:href="../../resources/images/tiffCursor.tif" x="16" y="16"/> |
| <cursor id="cursorpngImage" xlink:href="../../resources/images/pngCursor.png" x="16" y="16"/> |
| <cursor id="cursorjpegImage" xlink:href="../../resources/images/jpegCursor.jpg" x="16" y="16"/> |
| <cursor id="cursorunsupportedImage" xlink:href="../../resources/images/bmpCursor.bmp" x="16" y="16"/> |
| <cursor id="cursorsvgImage" xlink:href="../../resources/images/svgCursor.svg" x="16" y="16"/> |
| <cursor id="cursorsvgImage2" xlink:href="../../resources/images/svgCursor2.svg" x="16" y="16"/> |
| <cursor id="cursorsvgImage3" xlink:href="../../resources/images/svgCursor3.svg" x="16" y="16"/> |
| <cursor id="cursorsvgImage4" xlink:href="../../resources/images/svgCursor4.svg" x="16" y="8"/> |
| </defs> |
| |
| </svg> |