wpt / svg / painting / negative-dashoffset-odd-dasharray.html

Status: PASS | Duration: 8ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/svg/painting/negative-dashoffset-odd-dasharray.html

<!DOCTYPE html>
<html>
<head>
<title>Negative stroke-dashoffset with odd-length stroke-dasharray</title>
<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/painting.html#StrokeDashing">
<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>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
    <!-- 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>

/svg/painting/negative-dashoffset-odd-dasharray-ref.html

<!DOCTYPE html>
<html>
<head>
<title>Negative stroke-dashoffset with odd-length stroke-dasharray (reference)</title>
</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>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
    <path d="M20,30 L280,30" stroke="black" stroke-width="8" fill="none"
          stroke-dasharray="60 60" stroke-dashoffset="-30"/>
    <path d="M320,30 L580,30" stroke="black" stroke-width="8" fill="none"
          stroke-dasharray="60 60" stroke-dashoffset="-30"/>

    <path d="M20,70 L280,70" stroke="black" stroke-width="8" fill="none"
          stroke-dasharray="40 20 10 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"/>

    <path d="M20,110 L280,110" stroke="black" stroke-width="8" fill="none"
          stroke-dasharray="30 30" stroke-dashoffset="-45"/>
    <path d="M320,110 L580,110" stroke="black" stroke-width="8" fill="none"
          stroke-dasharray="30 30" stroke-dashoffset="-45"/>

    <path d="M20,150 L280,150" stroke="black" stroke-width="8" fill="none"
          stroke-dasharray="50 30 20 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>