<!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <svg xmlns="http://www.w3.org/2000/svg"> <title>Test 'stroke-linecap: square' with zero length path segments</title> <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=589648 for paths and https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for lines --> <style> path, line { stroke-width: 20px; stroke-linecap: square; } rect { fill: red; } /* expect lime squares to cover red rects */ path.squares-expected, line.squares-expected { stroke: lime; } path.squares-not-expected { stroke: red; } /* thicker stroke to cover squares-not-expected paths */ path.coverer { stroke: lime; stroke-width: 24px; } /* to show edges of shapes to help in debugging: g > rect { stroke: red; stroke-width: 5px; } path.coverer { stroke: lime; stroke-width: 18px; } */ </style> <rect width="100%" height="100%" style="fill:lime"/> <!-- Column 1: test single segment zero-length subpaths: --> <g transform="translate(25,25)"> <rect x="-9" y="-9" width="18" height="18"/> <rect x="41" y="41" width="18" height="18"/> <rect x="91" y="91" width="18" height="18"/> <path class="squares-expected" d="M0,0 L0,0 M20,20 L30,30 M50,50 L50,50 M70,70 L80,80 M100,100 L100,100"/> </g> <g transform="translate(25,75)"> <rect x="-9" y="-9" width="18" height="18"/> <rect x="41" y="41" width="18" height="18"/> <rect x="91" y="91" width="18" height="18"/> <path class="squares-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"/> </g> <g transform="translate(25,125)"> <rect x="-9" y="-9" width="18" height="18"/> <rect x="41" y="41" width="18" height="18"/> <rect x="91" y="91" width="18" height="18"/> <path class="squares-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"/> </g> <g transform="translate(25,175)"> <rect x="-9" y="-9" width="18" height="18"/> <rect x="41" y="41" width="18" height="18"/> <rect x="91" y="91" width="18" height="18"/> <path class="squares-expected" d="M0,0 Z M20,20 L30,30 M50,50 Z M70,70 L80,80 M100,100 Z"/> </g> <!-- Column 2: test multi-segment zero-length subpaths: --> <g transform="translate(175,25)"> <rect x="-9" y="-9" width="18" height="18"/> <rect x="41" y="41" width="18" height="18"/> <rect x="91" y="91" width="18" height="18"/> <path class="squares-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"/> </g> <g transform="translate(177,75)"> <rect x="-9" y="-9" width="18" height="18"/> <rect x="41" y="41" width="18" height="18"/> <rect x="91" y="91" width="18" height="18"/> <path class="squares-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"/> </g> <g transform="translate(175,125)"> <rect x="-9" y="-9" width="18" height="18"/> <rect x="41" y="41" width="18" height="18"/> <rect x="91" y="91" width="18" height="18"/> <path class="squares-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"/> </g> <g transform="translate(175,175)"> <rect x="-9" y="-9" width="18" height="18"/> <rect x="41" y="41" width="18" height="18"/> <rect x="91" y="91" width="18" height="18"/> <path class="squares-expected" d="M0,0 Z Z M20,20 L30,30 M50,50 Z Z M70,70 L80,80 M100,100 Z Z"/> </g> <!-- Column 3: test non-zero-length subpaths that begin, end and contain zero length segments: --> <g transform="translate(325,25)"> <path class="squares-not-expected" d="M20,20 L20,20 L30,30 L30,30 L40,40 L40,40"/> <path class="coverer" d="M20,20 L40,40"/> </g> <g transform="translate(325,75)"> <path class="squares-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"/> <path class="coverer" d="M20,20 L40,40"/> </g> <g transform="translate(325,125)"> <path class="squares-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"/> <path class="coverer" d="M20,20 L40,40"/> </g> <!-- this one is shorter because the Z's mean we only have path end points at 20,20 --> <g transform="translate(325,175)"> <rect x="11" y="11" width="18" height="18"/> <path class="squares-expected" d="M20,20 Z L30,30 Z L40,40 Z"/> </g> <!-- Column 4: test lone movetos --> <g transform="translate(425,25)"> <path class="squares-not-expected" d="M0,0 M0,0 M20,20 L30,30 M50,50 M50,50 M70,70 L80,80 M100,100 M100,100"/> <path class="coverer" d="M20,20 L30,30 M70,70 L80,80"/> </g> <!-- Column 5: test zero-length line --> <g transform="translate(525, 25)"> <rect x="-9" y="-9" width="18" height="18"/> <line class="squares-expected" x1="0" y1="0" x2="0" y2="0" /> </g> </svg>