third_party/WebKit/LayoutTests/svg/custom/marker-orient-auto.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script>
   5   function startTest() {
   6     starPath(document.getElementById("marker-path-cw"), true, 110, 110, 56, 8, 36, 80, Math.PI/6);
   7     starPath(document.getElementById("marker-path-ccw"), false, 310, 110, 56, 8, 36, 80, Math.PI/6);
   8   }
   9
  10   // Generate a star path
  11   //   cw - true for clockwise, false for counter-clockwise
  12   //   centered at (cx,cy)
  13   //   radius r
  14   //   s 'spikes' of length l
  15   //   n total vertices
  16   //   t rotation
  17   function starPath(el, cw, cx, cy, r, s, l, n, t) {
  18     var d = "";
  19     for (var i=0; i<=2*Math.PI; i+=2*Math.PI/n) {
  20       var a = cw ? i : -i;
  21       var px = cx + (r+l*Math.cos(a*s))*Math.sin(a+t);
  22       var py = cy + (r+l*Math.cos(a*s))*Math.cos(a+t);
  23       d += (d.length ? "L" : "M") + px + " " + py;
  24     }
  25     el.setAttribute("d", d);
  26   }
  27 </script>
  28 <style>
  29 #marker-path-cw {
  30   stroke: green;
  31 }
  32 #marker-path-ccw {
  33   stroke: blue;
  34 }
  35 .marker-path {
  36   fill: none;
  37   stroke-width: 2px;
  38   marker-mid: url(#marker);
  39 }
  40 </style>
  41 </head>
  42 <body onload="startTest()">
  43 Test for wkbug.com/112054.
  44 This test passes if the green star has orange markers pointing outside only and the blue star has orange markers pointing inside only.<br/>
  45 <svg width="500" height="500">
  46   <marker id="marker" markerWidth="15" markerHeight="15" orient="auto">
  47     <!-- This marker points in the direction of the bisector angle. -->
  48     <path d="M0 0L4 0L2 5L0 0Z" fill="orange" stroke-width='0.5px' stroke='black'/>
  49   </marker>
  50   <path id="marker-path-cw" class="marker-path"/>
  51   <path id="marker-path-ccw" class="marker-path"/>
  52 </svg>
  53 </body>
  54 </html>