chromium/third_party/blink/web_tests/svg/markers/marker-orientation-02.svg

<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
  <!--
    Marker positioning accumulates floating point error, resulting in some rects
    being drawn with matrices that are barely not pure rotations. This can lead
    to tiny differences in antialiased pixels along edges.
  -->
  <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-10" />

  <title>Test that marker orientation is correct at the end of arcs when
    orient="auto-start-reverse" is used</title>
  <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=769115 -->

  <marker id="m1" markerWidth="40" markerHeight="40" refX="20" refY="20"
          markerUnits="userSpaceOnUse" orient="auto-start-reverse" fill="blue">
    <rect x="5" y="15" width="22" height="10"/>
    <rect x="25" y="10" height="20" width="10"/>
    <rect x="35" y="18" height="4" width="5"/>
  </marker>

  <marker id="m2" markerWidth="40" markerHeight="40" refX="20" refY="20"
          markerUnits="userSpaceOnUse" orient="auto-start-reverse" fill="red">
    <rect x="5" y="15" width="22" height="10"/>
    <rect x="25" y="10" height="20" width="10"/>
    <rect x="35" y="18" height="4" width="5"/>
  </marker>

  <g fill="none">
    <!-- arcs that go from the left of the circle to... -->
    <g marker-end="url(#m2)">
      <!-- ...90 degrees anti-clockwise -->
      <path d="M100,100 A 50,50 0 1 0 150,50" marker-start="url(#m1)"/>
      <!-- ...180 degrees anti-clockwise -->
      <path d="M100,100 A 50,50 0 0 0 200,100"/>
      <!-- ...270 degrees anti-clockwise -->
      <path d="M100,100 A 50,50 0 0 0 150,150"/>
    </g>

    <!-- arcs that go from the left of the circle to... -->
    <g marker-end="url(#m2)" transform="translate(250,0)">
      <!-- ...90 degrees clockwise -->
      <path d="M100,100 A 50,50 0 0 1 150,50" marker-start="url(#m1)"/>
      <!-- ...180 degrees clockwise -->
      <path d="M100,100 A 50,50 0 1 1 200,100"/>
      <!-- ...270 degrees clockwise -->
      <path d="M100,100 A 50,50 0 1 1 150,150"/>
    </g>

    <!-- arcs that go from the right of the circle to... -->
    <g marker-end="url(#m2)" transform="translate(0,250)">
      <!-- ...90 degrees anti-clockwise -->
      <path d="M200,100 A 50,50 0 0 1 150,150" marker-start="url(#m1)"/>
      <!-- ...180 degrees anti-clockwise -->
      <path d="M200,100 A 50,50 0 0 1 100,100"/>
      <!-- ...270 degrees anti-clockwise -->
      <path d="M200,100 A 50,50 0 1 1 150,50"/>
    </g>

    <!-- arcs that go from the right of the circle to... -->
    <g marker-end="url(#m2)" transform="translate(250,250)">
      <!-- ...90 degrees anti-clockwise -->
      <path d="M200,100 A 50,50 0 0 0 150,50" marker-start="url(#m1)"/>
      <!-- ...180 degrees anti-clockwise -->
      <path d="M200,100 A 50,50 0 1 0 100,100"/>
      <!-- ...270 degrees anti-clockwise -->
      <path d="M200,100 A 50,50 0 1 0 150,150"/>
    </g>
  </g>

</svg>