blob: dc167477f7dee094a189ecf13c80615a0a688bbb [file] [log] [blame]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--======================================================================-->
<!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, Institut National de Recherche en =-->
<!--= Informatique et en Automatique, Keio University). All Rights =-->
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<!-- ===================================================================== -->
<!-- -->
<!-- paint-markers-BE-03.svg -->
<!-- renamed for 1.1 suite to painting-marker-01-f.svg -->
<!-- -->
<!-- Tests Marker support -->
<!-- -->
<!-- Author : Dean Jackson 06-08-2000 -->
<!-- 1.1 revision by Rick Graham -->
<!-- -->
<!-- History: -->
<!-- 06 08 2000, DJ, created -->
<!-- -->
<!-- ===================================================================== -->
<!--======================================================================-->
<!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
<!--= log messages, and therefore is no longer in the preceding preamble.=-->
<!--======================================================================-->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
<OperatorScript version="$Revision: 1.8 $" testname="painting-marker-01-f.svg">
<Paragraph>Tests the basic support for markers. For the three tests, there
should be two identical paths with markers drawn. The path on the left is
rendered using the marker elements. The path on the right is rendered using
the equivalent SVG, showing what the marked path should look like.
</Paragraph>
<Paragraph>
The top test examines the basic support for the marker element and style. The markers are red rectangles.
</Paragraph>
<Paragraph>
The middle test examines the support for the different styles of marker properties. The
"marker-start" property defines the marker to use at the first vertex of the marked path,
in this case a red rectangle. The "marker-end" property defines the marker to use at the
last vertex of the marked path, in this case a blue triangle. The "marker-mid" property
defines the marker to use at all vertices, other than the first and last, of the marked path,
in this case a green circle.
</Paragraph>
<Paragraph>The bottom test examines the support for marker orientation along the
path direction. The second vertex, the top right corner of the path, has a marker that
is rotated 45 degrees, since that is the average of the horizontal and vertical segments
each side. The last vertex, the bottom right corner of the path, has a marker rotated 90
degrees since that is the direction of the last path segment.
</Paragraph>
<Paragraph>
The rendered picture should match the reference image, except for possible
variations in the labelling text (per CSS2 rules).
</Paragraph>
</OperatorScript>
</SVGTestCase>
<title id="test-title">painting-marker-01-f.svg</title>
<desc id="test-desc">Checks if viewer can handle marker elements on paths</desc>
<!--======================================================================-->
<!--Content of Test Case follows... =====================-->
<!--======================================================================-->
<g id="test-body-content">
<!-- ===================================================================== -->
<!-- Define a few simple marker elements -->
<!-- ===================================================================== -->
<marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
<rect width="10" height="10" fill="red" stroke="none"/>
</marker>
<marker id="marker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth" orient="auto">
<path d="M 5 0 L 10 10 L 0 10 Z" fill="blue" stroke="none"/>
</marker>
<marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
<rect width="10" height="10" fill="red" stroke="none"/>
</marker>
<marker id="markerMiddle" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
<circle cx="5" cy="5" r="5" fill="green" stroke="none"/>
</marker>
<marker id="markerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
<path d="M 5 0 L 10 10 L 0 10 Z" fill="blue" stroke="none"/>
</marker>
<!-- ===================================================================== -->
<!-- Basic Marker Test -->
<!-- ===================================================================== -->
<text x="170" y="30" font-family="Arial" font-size="14">Basic Markers</text>
<path fill="none" stroke="black" stroke-width="8" marker-start="url(#marker1)" marker-mid="url(#marker1)" marker-end="url(#marker1)" d="M 130 40 L 180 40 L 180 90"/>
<!-- ===================================================================== -->
<!-- Generate the equivalent SVG -->
<!-- ===================================================================== -->
<g transform="translate(120,0)">
<path fill="none" stroke="black" stroke-width="8" d="M 130 40 L 180 40 L 180 90"/>
<g transform="translate(130,40) scale(8) scale(0.2, 0.2) translate(-5, -5)" fill="none" stroke="black" stroke-width="8">
<rect width="10" height="10" fill="red" stroke="none"/>
</g>
<g transform="translate(180,40) scale(8) scale(0.2, 0.2) translate(-5, -5)" fill="none" stroke="black" stroke-width="8">
<rect width="10" height="10" fill="red" stroke="none"/>
</g>
<g transform="translate(180,90) scale(8) scale(0.2, 0.2) translate(-5, -5)" fill="none" stroke="black" stroke-width="8">
<rect width="10" height="10" fill="red" stroke="none"/>
</g>
</g>
<!-- ===================================================================== -->
<!-- Start, Middle and End Marker Test -->
<!-- ===================================================================== -->
<text x="145" y="125" font-family="Arial" font-size="14">Start, Middle and End</text>
<path fill="none" stroke="black" stroke-width="8" marker-start="url(#markerStart)" marker-mid="url(#markerMiddle)" marker-end="url(#markerEnd)" d="M 130 135 L 180 135 L 180 185"/>
<!-- ===================================================================== -->
<!-- Generate the equivalent SVG -->
<!-- ===================================================================== -->
<g transform="translate(120,0)">
<path fill="none" stroke="black" stroke-width="8" d="M 130 135 L 180 135 L 180 185"/>
<g transform="translate(130,135) scale(8) scale(0.2, 0.2) translate(-5, -5)" fill="none" stroke="black" stroke-width="8">
<rect width="10" height="10" fill="red" stroke="none"/>
</g>
<g transform="translate(180,135) scale(8) scale(0.2, 0.2) translate(-5, -5)" fill="none" stroke="black" stroke-width="8">
<circle cx="5" cy="5" r="5" fill="green" stroke="none"/>
</g>
<g transform="translate(180,185) scale(8) scale(0.2, 0.2) translate(-5, -5)" fill="none" stroke="black" stroke-width="8">
<path d="M 5 0 L 10 10 L 0 10 Z" fill="blue" stroke="none"/>
</g>
</g>
<!-- ===================================================================== -->
<!-- Auto Orientation Marker Test -->
<!-- ===================================================================== -->
<text x="145" y="220" font-family="Arial" font-size="14">Automatic Orientation</text>
<path fill="none" stroke="black" stroke-width="8" marker-start="url(#marker2)" marker-mid="url(#marker2)" marker-end="url(#marker2)" d="M 130 230 L 180 230 L 180 280"/>
<!-- ===================================================================== -->
<!-- Generate the equivalent SVG -->
<!-- ===================================================================== -->
<g transform="translate(120,0)">
<path fill="none" stroke="black" stroke-width="8" d="M 130 230 L 180 230 L 180 280"/>
<g transform="translate(130,230) rotate(0) scale(8) scale(0.2, 0.2) translate(-5, -5)" fill="none" stroke="black" stroke-width="8">
<path d="M 5 0 L 10 10 L 0 10 Z" fill="blue" stroke="none"/>
</g>
<g transform="translate(180,230) rotate(45) scale(8) scale(0.2, 0.2) translate(-5, -5)" fill="none" stroke="black" stroke-width="8">
<path d="M 5 0 L 10 10 L 0 10 Z" fill="blue" stroke="none"/>
</g>
<g transform="translate(180,280) rotate(90) scale(8) scale(0.2, 0.2) translate(-5, -5)" fill="none" stroke="black" stroke-width="8">
<path d="M 5 0 L 10 10 L 0 10 Z" fill="blue" stroke="none"/>
</g>
</g>
</g>
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.8 $</text>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
</svg>