stroke-linecap-round-w-zero-length-segs-01.svg 5.3 KB

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