Bug 58711 – Dashed/Dotted borders should stroke around the inside of a rounded rect to avoid rendering issues

• Status: NEW
• Component: Layout and Rendering

[Simon Fraser (smfr)]

Created attachment 89881 [details]
Screenshot

Some thick dashed/dotted borders with border-radius look wrong because we stroke the outer rect, which can cause the corners to show artefacts. The screenshot shows this.

[Ben Wells]

Created attachment 104656 [details]
Test case

This file shows problems with dotted borders. I think there are two causes - 
1. when the border is wider than the border radius, the polygons that end up being drawn in the stroked path seem to cause bow ties.
2. the boundary between sides can introduce artifacts as well.

I haven't been able to reproduce a case that looks like the previous attachment, the dot size seems to grow with the border radius. Is the source for this test case available?

[Ben Wells]

Another cause of problems with dotted and dashed borders is that dashes / dots from other edges can end up getting drawn. The dashes are painted around the whole outer path with the clip area ensuring only the current edge is painted, however dashes and dots from other edges can still end up getting drawn in the region, creating weird effects. 

This can be seen in the top two cases in the last attachment, particularly on the right border.

[Simon Fraser (smfr)]

IIRC the first screenshot was made while I had some code changes in my tree. I don't think you can reproduce it, but it's illustrative.

[Ahmad Saleem]

All browsers (Safari 17, Chrome Canary 119 and Firefox Nightly 120) render attached test case differently in various cases.