| <!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> |
