WebPositive: border-radius make border color overwrite background.

[dsjonny]

Using WebPositive/1.2 there are many sites have drawing problem. Many html elements are not updated or drawing with gray color.

For example: Trac, Building Haiku Guide, Facebook...

Some images attached.

[pulkomandy]

What happens is the CSS border color is used for the background as well. This shows mostly on things using border-radius (rounded rectangles).

[pulkomandy]

The situation is better now, ​http://haiku-os.org works as expected, and so does ​http://whatif.xkcd.com. But not all issues are solved. It seems that a border of more than 1 pixel will still trigger the issue. Investigating...

[pulkomandy]

Problem identified, I think. When the border is only 1 pixel big, it is drawn using line drawing primitives. When it is bigger, it is drawn as a BShape made of 2 parts:

• An "outside" polygon that marks the outside limit of the border
• An "inside" polygon that marks the inside limit (where the contents starts)

The idea is that these should "cancel" each other, so the BShape is filled with a hole in the middle, letting the contents shine through. There are two ways to do this:

• Use the even/odd fill rule, or
• Use the "winding"/"non-zero" rule, and make sure the two polygons are in opposite directions (one should be clockwise, and the other counter-clockwise). This way the winding of the intersection part will be 0, not 1. Note that such a polygon would also work with the even/odd rule.

In Haiku, we don't have an API for using the even/odd rule. Unfortunately, WebKit apparently expects us to use the first way.

I'll see if I can change this in WebKit. However, supporting both winding rules in Haiku will be required at some later point, anyway. (they are part of the canvas API).

[pulkomandy]

(In #10624) This is actually a duplicate of #10214, or close enough that the fix for them two is the same.

[pulkomandy]

Implemented in ​https://github.com/haiku/webkit/commit/37620416a74880e4376fbff20bc032a89737a860.