Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /svg/painting/negative-dashoffset-odd-dasharray.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>Negative stroke-dashoffset with odd-length stroke-dasharray</title>
<link rel="match" href="negative-dashoffset-odd-dasharray-ref.html">
<meta name="assert" content="Odd-length stroke-dasharray with negative stroke-dashoffset should render identically to the equivalent even-length dasharray.">
</head>
<body>
<p>Each pair of lines should be identical. The odd-length dasharray (left value)
should render the same as the equivalent even-length dasharray (right value).</p>
<!-- dasharray="60" is equivalent to dasharray="60 60" per spec -->
<path d="M20,30 L280,30" stroke="black" stroke-width="8" fill="none"
stroke-dasharray="60" stroke-dashoffset="-30"/>
<path d="M320,30 L580,30" stroke="black" stroke-width="8" fill="none"
stroke-dasharray="60 60" stroke-dashoffset="-30"/>
<!-- dasharray="40 20 10" is equivalent to dasharray="40 20 10 40 20 10" -->
<path d="M20,70 L280,70" stroke="black" stroke-width="8" fill="none"
stroke-dasharray="40 20 10" stroke-dashoffset="-15"/>
<path d="M320,70 L580,70" stroke="black" stroke-width="8" fill="none"
stroke-dasharray="40 20 10 40 20 10" stroke-dashoffset="-15"/>
<!-- dasharray="30" with large negative offset -->
<path d="M20,110 L280,110" stroke="black" stroke-width="8" fill="none"
stroke-dasharray="30" stroke-dashoffset="-45"/>
<path d="M320,110 L580,110" stroke="black" stroke-width="8" fill="none"
stroke-dasharray="30 30" stroke-dashoffset="-45"/>
<!-- dasharray="50 30 20" with offset equal to negative total length -->
<path d="M20,150 L280,150" stroke="black" stroke-width="8" fill="none"
stroke-dasharray="50 30 20" stroke-dashoffset="-200"/>
<path d="M320,150 L580,150" stroke="black" stroke-width="8" fill="none"
stroke-dasharray="50 30 20 50 30 20" stroke-dashoffset="-200"/>
</svg>
</body>
</html>