Bug 58711 - Dashed/Dotted borders should stroke around the inside of a rounded rect to avoid rendering issues
Summary: Dashed/Dotted borders should stroke around the inside of a rounded rect to av...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC OS X 10.5
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-04-15 16:59 PDT by Simon Fraser (smfr)
Modified: 2023-09-26 16:29 PDT (History)
6 users (show)

See Also:


Attachments
Screenshot (15.79 KB, image/png)
2011-04-15 16:59 PDT, Simon Fraser (smfr)
no flags Details
Test case (1.19 KB, text/html)
2011-08-22 03:07 PDT, Ben Wells
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Simon Fraser (smfr) 2011-04-15 16:59:19 PDT
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.
Comment 1 Ben Wells 2011-08-22 03:07:04 PDT
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?
Comment 2 Ben Wells 2011-08-22 05:53:00 PDT
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.
Comment 3 Simon Fraser (smfr) 2011-08-22 09:13:16 PDT
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.
Comment 4 Ahmad Saleem 2023-09-26 16:29:02 PDT
All browsers (Safari 17, Chrome Canary 119 and Firefox Nightly 120) render attached test case differently in various cases.