<!DOCTYPE html>
<html>
<head>
<script>
  function startTest() {
    starPath(document.getElementById("marker-path-cw"), true, 110, 110, 56, 8, 36, 80, Math.PI/6);
    starPath(document.getElementById("marker-path-ccw"), false, 310, 110, 56, 8, 36, 80, Math.PI/6);
  }

  // Generate a star path
  //   cw - true for clockwise, false for counter-clockwise
  //   centered at (cx,cy)
  //   radius r
  //   s 'spikes' of length l
  //   n total vertices
  //   t rotation
  function starPath(el, cw, cx, cy, r, s, l, n, t) {
    var d = "";
    for (var i=0; i<=2*Math.PI; i+=2*Math.PI/n) {
      var a = cw ? i : -i;
      var px = cx + (r+l*Math.cos(a*s))*Math.sin(a+t);
      var py = cy + (r+l*Math.cos(a*s))*Math.cos(a+t);
      d += (d.length ? "L" : "M") + px + " " + py;
    }
    el.setAttribute("d", d);
  }
</script>
<style>
#marker-path-cw {
  stroke: green;
}
#marker-path-ccw {
  stroke: blue;
}
.marker-path {
  fill: none;
  stroke-width: 2px;
  marker-mid: url(#marker);
}
</style>
</head>
<body onload="startTest()">
Test for wkbug.com/112054.
This test passes if the green star has orange markers pointing outside only and the blue star has orange markers pointing inside only.<br/>
<svg width="500" height="500">
  <marker id="marker" markerWidth="15" markerHeight="15" orient="auto">
    <!-- This marker points in the direction of the bisector angle. -->
    <path d="M0 0L4 0L2 5L0 0Z" fill="orange" stroke-width='0.5px' stroke='black'/> 
  </marker>
  <path id="marker-path-cw" class="marker-path"/>
  <path id="marker-path-ccw" class="marker-path"/>
</svg>
</body>
</html>