Bug 118624
| Summary: | Fix border radius glitch | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Ryosuke Niwa <rniwa> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, dino, karlcow, priyajeet.hora, simon.fraser, thorton, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BlinkMergeCandidate, BrowserCompat, InRadar |
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=244638 | ||
Ryosuke Niwa
Consider merging https://chromium.googlesource.com/chromium/blink/+/927872e324ae7520ab32567d07fb988b1733bec8
This fixes the bug that the border radius partially disappeared or had wrong color when it was too steep or too shallow.
Fix 1: Use the correct clipping quad, generated by intersecting border mitre lines to diagonal lines of the corner ellipse arc.
RenderBoxModelObject::clipBorderSidePolygon was generating wrong clipping quad.
It was based on a wrong assumption that rounded border would not cross {horizontal,vertical} line through the box center.
Fix 2: Correctly split a quad into two quads.
A clipping quad is split into "AND" of two quads to set anti-aliasing on both edges individually.
Generate these quads properly by extending a vertex parallel to the opposite edge.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Ahmad Saleem
I haven't looked into Code to see whether it is easy to merge but Safari Technology Preview 154 still has issue in following test cases and show patches of other colours (e.g. red in blue):
Test Case - borderRadiusMultiColors02.html - https://jsfiddle.net/zt3s52yh/show
Test Case - borderRadiusMultiColors01.html - https://jsfiddle.net/7y24h61x/show
Just wanted to highlight. Thanks!
Radar WebKit Bug Importer
<rdar://problem/100420688>
Ahmad Saleem
PR Attempt - https://github.com/WebKit/WebKit/pull/31326