2014-10-03 12:50:43 +04:00
|
|
|
<!--
|
|
|
|
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: round' with zero length path segments</title>
|
|
|
|
|
2015-08-01 11:09:00 +03:00
|
|
|
<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1075399 for paths and
|
|
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for lines -->
|
2014-10-03 12:50:43 +04:00
|
|
|
|
|
|
|
<style>
|
|
|
|
|
2015-08-01 11:09:00 +03:00
|
|
|
path, line {
|
2014-10-03 12:50:43 +04:00
|
|
|
stroke-width: 20px;
|
|
|
|
stroke-linecap: round;
|
|
|
|
}
|
|
|
|
|
|
|
|
circle {
|
|
|
|
fill: red;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* expect lime circles to cover red circles */
|
2015-08-01 11:09:00 +03:00
|
|
|
path.circles-expected, line.circles-expected {
|
2014-10-03 12:50:43 +04:00
|
|
|
stroke: lime;
|
|
|
|
}
|
|
|
|
|
|
|
|
path.circles-not-expected {
|
|
|
|
stroke: red;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* thicker stroke to cover circles-not-expected paths */
|
|
|
|
path.coverer {
|
|
|
|
stroke: lime;
|
|
|
|
stroke-width: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* to show edges of shapes to help in debugging:
|
|
|
|
g > circle {
|
|
|
|
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)">
|
|
|
|
<circle cx="0" cy="0" r="8"/>
|
|
|
|
<circle cx="50" cy="50" r="8"/>
|
|
|
|
<circle cx="100" cy="100" r="8"/>
|
|
|
|
<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"/>
|
|
|
|
</g>
|
|
|
|
|
|
|
|
<g transform="translate(25,75)">
|
|
|
|
<circle cx="0" cy="0" r="8"/>
|
|
|
|
<circle cx="50" cy="50" r="8"/>
|
|
|
|
<circle cx="100" cy="100" r="8"/>
|
|
|
|
<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"/>
|
|
|
|
</g>
|
|
|
|
|
|
|
|
<g transform="translate(25,125)">
|
2014-10-03 12:50:43 +04:00
|
|
|
<circle cx="0" cy="0" r="8"/>
|
|
|
|
<circle cx="50" cy="50" r="8"/>
|
|
|
|
<circle cx="100" cy="100" r="8"/>
|
|
|
|
<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"/>
|
2014-10-03 12:50:43 +04:00
|
|
|
</g>
|
|
|
|
|
|
|
|
<g transform="translate(25,175)">
|
|
|
|
<circle cx="0" cy="0" r="8"/>
|
|
|
|
<circle cx="50" cy="50" r="8"/>
|
|
|
|
<circle cx="100" cy="100" r="8"/>
|
|
|
|
<path class="circles-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)">
|
|
|
|
<circle cx="0" cy="0" r="8"/>
|
|
|
|
<circle cx="50" cy="50" r="8"/>
|
|
|
|
<circle cx="100" cy="100" r="8"/>
|
|
|
|
<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"/>
|
|
|
|
</g>
|
|
|
|
|
|
|
|
<g transform="translate(177,75)">
|
|
|
|
<circle cx="0" cy="0" r="8"/>
|
|
|
|
<circle cx="50" cy="50" r="8"/>
|
|
|
|
<circle cx="100" cy="100" r="8"/>
|
|
|
|
<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"/>
|
|
|
|
</g>
|
|
|
|
|
|
|
|
<g transform="translate(175,125)">
|
2014-10-03 12:50:43 +04:00
|
|
|
<circle cx="0" cy="0" r="8"/>
|
|
|
|
<circle cx="50" cy="50" r="8"/>
|
|
|
|
<circle cx="100" cy="100" r="8"/>
|
|
|
|
<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"/>
|
2014-10-03 12:50:43 +04:00
|
|
|
</g>
|
|
|
|
|
|
|
|
<g transform="translate(175,175)">
|
|
|
|
<circle cx="0" cy="0" r="8"/>
|
|
|
|
<circle cx="50" cy="50" r="8"/>
|
|
|
|
<circle cx="100" cy="100" r="8"/>
|
|
|
|
<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"/>
|
|
|
|
</g>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Column 3: test non-zero-length subpaths that begin, end and contain
|
|
|
|
zero length segments: -->
|
|
|
|
|
|
|
|
<g transform="translate(325,25)">
|
|
|
|
<path class="circles-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="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"/>
|
|
|
|
<path class="coverer" d="M20,20 L40,40"/>
|
|
|
|
</g>
|
|
|
|
|
|
|
|
<g transform="translate(325,125)">
|
|
|
|
<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"/>
|
|
|
|
<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)">
|
|
|
|
<circle cx="20" cy="20" r="8"/>
|
|
|
|
<path class="circles-expected" d="M20,20 Z L30,30 Z L40,40 Z"/>
|
|
|
|
</g>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Column 4: test lone movetos -->
|
|
|
|
|
|
|
|
<g transform="translate(425,25)">
|
|
|
|
<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"/>
|
|
|
|
<path class="coverer" d="M20,20 L30,30 M70,70 L80,80"/>
|
|
|
|
</g>
|
|
|
|
|
2015-01-11 01:17:57 +03:00
|
|
|
<!-- Column 5: test stroke-dasharray -->
|
|
|
|
|
|
|
|
<g transform="translate(525,25)">
|
|
|
|
<circle cy="0" r="8"/>
|
|
|
|
<circle cy="40" r="8"/>
|
|
|
|
<circle cy="80" r="8"/>
|
|
|
|
<path class="circles-expected" d="M0,0v81" stroke-dasharray="0 40" />
|
|
|
|
</g>
|
2015-04-03 20:58:05 +03:00
|
|
|
<g transform="translate(575,25)">
|
|
|
|
<circle cy="0" r="8"/>
|
|
|
|
<circle cy="40" r="8"/>
|
|
|
|
<circle cy="80" r="8"/>
|
|
|
|
<path class="circles-expected" d="M0,0v81" stroke-dasharray="0" />
|
|
|
|
</g>
|
2015-08-01 11:09:00 +03:00
|
|
|
|
|
|
|
<!-- Column 6: test zero-length line -->
|
|
|
|
<g transform="translate(625, 25)">
|
|
|
|
<circle cy="0" r="8" />
|
|
|
|
<line class="circles-expected" x1="0" y1="0" x2="0" y2="0" />
|
|
|
|
</g>
|
|
|
|
|
2014-10-03 12:50:43 +04:00
|
|
|
</svg>
|