Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /svg/painting/marker-002.svg - WPT Dashboard Interop Dashboard
SVG Preview (Scaled)
<svg width="500" height="500"
<!--
Tests the rendering of markers, specifically property inheritance. For the four
tests, there should be two identical paths with markers drawn.
The top two tests examine the rendering of markers when the marker and the path
referencing it share the same parent and all painting properties are specfied
on that parent. The first test show inheritance of the 'fill' property and the
second the inheritance of the 'paint' property. In both tests, the marker is
painting using the same properties as the referencing object. Because of
scaling transformations on the marker, the stroke on the second test is thinner
than on the referencing object.
The third and fourth tests examine the rendering of markers in a situation
where the marker and referencing path do NOT share the same parent and painting
properties are specified both on the parent of the marked path and on the
contents of the marker itself. In both cases, the marker's parent specifies
fill="green" stroke="blue" stroke-width="8". For the third test, the marker
contents override with stroke="black". For the fourth test, the marker contents
override with fill="black". In neither case should you see fill="orange" or
stroke="blue" or "stroke="purple" on the markers as these properties are
specified on the ancestor of the referencing object or the referencing object
itself and thus shouldn't affect the marker.
-->
<html:link rel="match" href="marker-002-ref.svg"/>
<html:meta name="assert" content="Tests property inheritance when rendering markers."/>
<g fill="green">
<text x="125" y="30" font-size="14" fill="black">Marker Rendering Properties</text>
<!-- Fill property -->
<g fill="black" stroke="none" stroke-width="8">
<marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
<rect width="10" height="10"/>
</marker>
<text x="100" y="140" font-size="10" fill="black" stroke="none">Fill Property</text>
<path marker-start="url(#marker1)" marker-mid="url(#marker1)" marker-end="url(#marker1)" d="M 30 60 L 80 60 L 80 110 Z"/>
</g>
<!-- Stroke property -->
<g fill="none" stroke="black" stroke-width="4">
<marker id="marker2" viewBox="0 0 20 20" markerWidth="4" markerHeight="4" refX="10" refY="10" markerUnits="strokeWidth">
<rect width="20" height="20"/>
</marker>
<text x="340" y="140" font-size="10" fill="black" stroke="none">Stroke Property</text>
<path marker-start="url(#marker2)" marker-mid="url(#marker2)" marker-end="url(#marker2)" d="M 270 60 L 320 60 L 320 110 Z"/>
</g>
<!-- Define marker element with parents setting painting properties -->
<g fill="green" stroke="blue" stroke-width="8">
<marker id="marker3" viewBox="0 0 20 20" markerWidth="4" markerHeight="4" refX="10" refY="10" markerUnits="strokeWidth">
<rect width="20" height="20" stroke="black"/>
</marker>
<marker id="marker4" viewBox="0 0 10 10" markerWidth="4" markerHeight="4" refX="5" refY="5" markerUnits="strokeWidth">
<rect width="10" height="10" fill="black" stroke-width="4"/>
</marker>
</g>
<!-- Parent and specified properties -->
<g fill="orange" stroke="blue">
<text x="90" y="270" font-size="10" fill="black" stroke="none">Mixed Properties</text>
<path stroke="purple" stroke-width="4" marker-start="url(#marker3)" marker-mid="url(#marker3)" marker-end="url(#marker3)" d="M 30 190 L 80 190 L 80 240 Z"/>
</g>
<g fill="orange" stroke="green">
<text x="340" y="270" font-size="10" fill="black" stroke="none">Mixed Properties</text>
<path stroke="purple" stroke-width="4" marker-start="url(#marker4)" marker-mid="url(#marker4)" marker-end="url(#marker4)" d="M 270 190 L 320 190 L 320 240 Z"/>
</g>
</g>
</svg>