layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-01.svg

   1 <!--
   2      Any copyright is dedicated to the Public Domain.
   3      http://creativecommons.org/publicdomain/zero/1.0/
   4 -->
   5 <svg xmlns="http://www.w3.org/2000/svg">
   6
   7   <title>Test 'stroke-linecap: round' with zero length path segments</title>
   8
   9   <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1075399 for paths and
  10        https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for lines -->
  11
  12   <style>
  13
  14 path, line {
  15   stroke-width: 20px;
  16   stroke-linecap: round;
  17 }
  18
  19 circle {
  20   fill: red;
  21 }
  22
  23 /* expect lime circles to cover red circles */
  24 path.circles-expected, line.circles-expected {
  25   stroke: lime;
  26 }
  27
  28 path.circles-not-expected {
  29   stroke: red;
  30 }
  31
  32 /* thicker stroke to cover circles-not-expected paths */
  33 path.coverer {
  34   stroke: lime;
  35   stroke-width: 24px;
  36 }
  37
  38 /* to show edges of shapes to help in debugging:
  39 g > circle {
  40   stroke: red;
  41   stroke-width: 5px;
  42 }
  43 path.coverer {
  44   stroke: lime;
  45   stroke-width: 18px;
  46 }
  47 */
  48
  49   </style>
  50
  51   <rect width="100%" height="100%" style="fill:lime"/>
  52
  53   <!-- Column 1: test single segment zero-length subpaths: -->
  54
  55   <g transform="translate(25,25)">
  56     <circle cx="0" cy="0" r="8"/>
  57     <circle cx="50" cy="50" r="8"/>
  58     <circle cx="100" cy="100" r="8"/>
  59     <path class="circles-expected" d="M0,0 L0,0  M20,20 L30,30  M50,50 L50,50  M70,70 L80,80  M100,100 L100,100"/>
  60   </g>
  61
  62   <g transform="translate(25,75)">
  63     <circle cx="0" cy="0" r="8"/>
  64     <circle cx="50" cy="50" r="8"/>
  65     <circle cx="100" cy="100" r="8"/>
  66     <path class="circles-expected" d="M0,0 C0,0 0,0 0,0  M20,20 L30,30  M50,50 C50,50 50,50 50,50  M70,70 L80,80  M100,100 C100,100 100,100 100,100"/>
  67   </g>
  68
  69   <g transform="translate(25,125)">
  70     <circle cx="0" cy="0" r="8"/>
  71     <circle cx="50" cy="50" r="8"/>
  72     <circle cx="100" cy="100" r="8"/>
  73     <path class="circles-expected" d="M0,0 A0,10 0 0 0 0,0  M20,20 L30,30  M50,50 A0,10 0 0 0 50,50  M70,70 L80,80  M100,100 A0,10 0 0 0 100,100"/>
  74   </g>
  75
  76   <g transform="translate(25,175)">
  77     <circle cx="0" cy="0" r="8"/>
  78     <circle cx="50" cy="50" r="8"/>
  79     <circle cx="100" cy="100" r="8"/>
  80     <path class="circles-expected" d="M0,0 Z  M20,20 L30,30  M50,50 Z  M70,70 L80,80  M100,100 Z"/>
  81   </g>
  82
  83
  84   <!-- Column 2: test multi-segment zero-length subpaths: -->
  85
  86   <g transform="translate(175,25)">
  87     <circle cx="0" cy="0" r="8"/>
  88     <circle cx="50" cy="50" r="8"/>
  89     <circle cx="100" cy="100" r="8"/>
  90     <path class="circles-expected" d="M0,0 L0,0 M0,0 L0,0  M20,20 L30,30  M50,50 L50,50 L50,50  M70,70 L80,80  M100,100 L100,100 L100,100"/>
  91   </g>
  92
  93   <g transform="translate(177,75)">
  94     <circle cx="0" cy="0" r="8"/>
  95     <circle cx="50" cy="50" r="8"/>
  96     <circle cx="100" cy="100" r="8"/>
  97     <path class="circles-expected" d="M0,0 C0,0 0,0 0,0 C0,0 0,0 0,0  M20,20 L30,30  M50,50 C50,50 50,50 50,50 C50,50 50,50 50,50  M70,70 L80,80  M100,100 C100,100 100,100 100,100 C100,100 100,100 100,100"/>
  98   </g>
  99
 100   <g transform="translate(175,125)">
 101     <circle cx="0" cy="0" r="8"/>
 102     <circle cx="50" cy="50" r="8"/>
 103     <circle cx="100" cy="100" r="8"/>
 104     <path class="circles-expected" d="M0,0 A0,10 0 0 0 0,0 A0,10 0 0 0 0,0  M20,20 L30,30  M50,50 A0,10 0 0 0 50,50 A0,10 0 0 0 50,50  M70,70 L80,80  M100,100 A0,10 0 0 0 100,100 A0,10 0 0 0 100,100"/>
 105   </g>
 106
 107   <g transform="translate(175,175)">
 108     <circle cx="0" cy="0" r="8"/>
 109     <circle cx="50" cy="50" r="8"/>
 110     <circle cx="100" cy="100" r="8"/>
 111     <path class="circles-expected" d="M0,0 Z Z  M20,20 L30,30  M50,50 Z Z  M70,70 L80,80  M100,100 Z Z"/>
 112   </g>
 113
 114
 115   <!-- Column 3: test non-zero-length subpaths that begin, end and contain
 116        zero length segments: -->
 117
 118   <g transform="translate(325,25)">
 119     <path class="circles-not-expected" d="M20,20 L20,20 L30,30 L30,30 L40,40 L40,40"/>
 120     <path class="coverer" d="M20,20 L40,40"/>
 121   </g>
 122
 123   <g transform="translate(325,75)">
 124     <path class="circles-not-expected" d="M20,20 C20,20 20,20 20,20 C20,20 30,30 30,30 C30,30 30,30 30,30 C30,30 40,40 40,40 C40,40 40,40 40,40"/>
 125     <path class="coverer" d="M20,20 L40,40"/>
 126   </g>
 127
 128   <g transform="translate(325,125)">
 129     <path class="circles-not-expected" d="M20,20 A0,10 0 0 0 20,20 A0,10 0 0 0 30,30 A0,10 0 0 0 30,30 A0,10 0 0 0 40,40 A0,10 0 0 0 40,40"/>
 130     <path class="coverer" d="M20,20 L40,40"/>
 131   </g>
 132
 133   <!-- this one is shorter because the Z's mean we only have path end points
 134        at 20,20 -->
 135   <g transform="translate(325,175)">
 136     <circle cx="20" cy="20" r="8"/>
 137     <path class="circles-expected" d="M20,20 Z L30,30 Z L40,40 Z"/>
 138   </g>
 139
 140
 141   <!-- Column 4: test lone movetos -->
 142
 143   <g transform="translate(425,25)">
 144     <path class="circles-not-expected" d="M0,0 M0,0  M20,20 L30,30  M50,50 M50,50  M70,70 L80,80  M100,100 M100,100"/>
 145     <path class="coverer" d="M20,20 L30,30 M70,70 L80,80"/>
 146   </g>
 147
 148   <!-- Column 5: test stroke-dasharray -->
 149
 150   <g transform="translate(525,25)">
 151     <circle cy="0" r="8"/>
 152     <circle cy="40" r="8"/>
 153     <circle cy="80" r="8"/>
 154     <path class="circles-expected" d="M0,0v81" stroke-dasharray="0 40" />
 155   </g>
 156   <g transform="translate(575,25)">
 157     <circle cy="0" r="8"/>
 158     <circle cy="40" r="8"/>
 159     <circle cy="80" r="8"/>
 160     <path class="circles-expected" d="M0,0v81" stroke-dasharray="0" />
 161   </g>
 162
 163   <!-- Column 6: test zero-length line -->
 164   <g transform="translate(625, 25)">
 165     <circle cy="0" r="8" />
 166     <line class="circles-expected" x1="0" y1="0" x2="0" y2="0" />
 167   </g>
 168
 169 </svg>