There was a discussion today about implementing CSS3 border rendering in
its full generality in cairo. I think there are two main issues:
1) Handling sitautions where one edge of the border is adjacent to the
edge of the background, especially when the edge is curved due to
border-radius:
1a) With 'background-clip:padding', the edge of the background is
adjacent to the inner edge of the border.
1b) With 'background-clip:border', the edge of the background is
adjacent to the outer edge of the border.
In both of these cases a naive implementation can have seam artifacts
due to coverage-based antialiasing. Case 1a can be solved pretty easily
by putting the background and border into a group and using operator ADD
to combine them (since they don't overlap). Case 1b is much harder but
we think we can solve it using a combination of groups and operators.
2) Rendering complex border cases, for example, an elliptically rounded
border corner where the adjacent sides have different widths, different
colors, and different styles (e.g. one dotted and one dashed).
I think the way to proceed with this is to create our own path
representing the "shape" of the border (e.g. with explicit path commands
to create dots and dashes) and fill it with the border color (if all
sides have the same color) or a pattern (if sides have different
colors). For a simple abrupt color transition through the corner we
could build the pattern out of polygons combined with operator ADD, but
later we could add conical gradients to cairo and draw gradient color
transitions in the corners.
To support "groove" and "ridge" styles we could combine two or three
border-shapes with operator ADD.
Rob
_______________________________________________
dev-tech-layout mailing list
[email protected]
https://lists.mozilla.org/listinfo/dev-tech-layout
