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-005.svg - WPT Dashboard Interop Dashboard
SVG Preview (Scaled)
<svg width="500" height="500"
<!--
Test all the 'overflow' property values except 'inherit' on the 'marker' element.
Each column tests a value of the 'overflow' property.
The first row uses the 'marker' property to set the same marker on start-, mid- and end-points on the path.
The second row uses 'marker-start', 'marker-mid' and 'marker-end' to give each point its own marker.
The third row uses the 'marker' property like the first row, but here the marker has orient="auto" set.
-->
<html:link rel="match" href="marker-005-ref.svg"/>
<html:meta name="assert" content="Test all the 'overflow' property values except 'inherit' on the 'marker' element."/>
<defs>
<marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth">
<rect width="15" height="15" fill="purple" stroke="none"/>
</marker>
<marker id="marker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto">
<path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
</marker>
<marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth">
<rect width="15" height="15" fill="purple" stroke="none"/>
</marker>
<marker id="markerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth">
<circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
</marker>
<marker id="markerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth">
<path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
</marker>
<marker id="vmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
<rect width="15" height="15" fill="purple" stroke="none"/>
</marker>
<marker id="vmarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="visible">
<path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
</marker>
<marker id="vmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
<rect width="15" height="15" fill="purple" stroke="none"/>
</marker>
<marker id="vmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
<circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
</marker>
<marker id="vmarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="visible">
<path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
</marker>
<marker id="amarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="auto">
<rect width="15" height="15" fill="purple" stroke="none"/>
</marker>
<marker id="amarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="auto">
<path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
</marker>
<marker id="amarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="auto">
<rect width="15" height="15" fill="purple" stroke="none"/>
</marker>
<marker id="amarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="auto">
<circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
</marker>
<marker id="amarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="auto">
<path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
</marker>
<marker id="smarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="scroll">
<rect width="15" height="15" fill="purple" stroke="none"/>
</marker>
<marker id="smarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="scroll">
<path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
</marker>
<marker id="smarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="scroll">
<rect width="15" height="15" fill="purple" stroke="none"/>
</marker>
<marker id="smarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="scroll">
<circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
</marker>
<marker id="smarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="scroll">
<path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
</marker>
<marker id="hmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="hidden">
<rect width="15" height="15" fill="purple" stroke="none"/>
</marker>
<marker id="hmarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="hidden">
<path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
</marker>
<marker id="hmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="hidden">
<rect width="15" height="15" fill="purple" stroke="none"/>
</marker>
<marker id="hmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="hidden">
<circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
</marker>
<marker id="hmarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="hidden">
<path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
</marker>
</defs>
<style type="text/css">
.testpaths {
fill:none;
stroke:black;
stroke-width:8px;
}
/* no overflow specified */
#p1 { marker: url(#marker1); }
#p2 {
marker-start: url(#markerStart);
marker-mid:url(#markerMiddle);
marker-end: url(#markerEnd);
}
#p3 { marker: url(#marker2); }
/* overflow = visible */
#p4 { marker: url(#vmarker1); }
#p5 {
marker-start: url(#vmarkerStart);
marker-mid:url(#vmarkerMiddle);
marker-end: url(#vmarkerEnd);
}
#p6 { marker: url(#vmarker2); }
/* overflow = auto */
#p7 { marker: url(#amarker1); }
#p8 {
marker-start: url(#amarkerStart);
marker-mid:url(#amarkerMiddle);
marker-end: url(#amarkerEnd);
}
#p9 { marker: url(#amarker2); }
/* overflow = scroll */
#p10 { marker: url(#smarker1); }
#p11 {
marker-start: url(#smarkerStart);
marker-mid:url(#smarkerMiddle);
marker-end: url(#smarkerEnd);
}
#p12 { marker: url(#smarker2); }
/* overflow = hidden */
#p13 { marker: url(#hmarker1); }
#p14 {
marker-start: url(#hmarkerStart);
marker-mid:url(#hmarkerMiddle);
marker-end: url(#hmarkerEnd);
}
#p15 { marker: url(#hmarker2); }
</style>
<text x="50%" y="3em" style="font: 18px; text-anchor:middle;">Test marker overflow</text>
<g style="font: 14px; text-anchor:middle" transform="translate(0,280)">
<text x="60">default</text>
<text x="155">'visible'</text>
<text x="245">'auto'</text>
<text x="340">'scroll'</text>
<text x="430">'hidden'</text>
</g>
<g transform="translate(-30,75)">
<g id="subtest1" transform="scale(0.6)">
<path id="p1" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
<path id="p2" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
<path id="p3" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
</g>
<g id="subtest2" transform="scale(0.6) translate(150,0)">
<path id="p4" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
<path id="p5" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
<path id="p6" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
</g>
<g id="subtest3" transform="scale(0.6) translate(300,0)">
<path id="p7" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
<path id="p8" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
<path id="p9" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
</g>
<g id="subtest4" transform="scale(0.6) translate(450,0)">
<path id="p10" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
<path id="p11" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
<path id="p12" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
</g>
<g id="subtest5" transform="scale(0.6) translate(600,0)">
<path id="p13" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
<path id="p14" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
<path id="p15" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
</g>
</g>
</svg>