Rounded corners / border-radius

[SimonSapin]

Chapter 5 of css3-background

This is a big-ish item, so start in a feature branch. The steps are roughly:

• Parsing of the longhand and shorthand properties, in weasyprint/css/validation.py and weasyprint/css/computed_values.py (Section 5.1 of the spec)
• Make sure none of this applies to table and table-internal boxes. (Section 5.6)
• Determined the used radius of each corner of the border edge, padding edge and content edge of each CSS box, somewhere in weasyprint/layout/ (Section 5.2 and 5.5)
• Implement a cairo path for the rounded border, padding or content edge in weasyprint/layout/draw.py
• Use that path for overflow, clip, and background-clip properties, still in draw.py (Section 5.3)
• Figure out exactly how we want to paint border transitions (Section 5.2 and 5.4. This is the most fuzzy part to me.)
• Actual implement painting of rounded borders, still in draw.py.

[SimonSapin]

So, I’ve been thinking about rounded border transitions.

Although doing a smooth gradient is allowed by the spec, every browser just does a sharp transition, so let’s do that. Test case: data:text/html,foo<style>body{padding:20px;border-radius:20px;border:10px solid;border-color:blue green

We already have code to clip on a trapezoid shape at the right angle, and with recent changes every border style is painted with a stroke() operation. So we could paint the rounded border by just changing the stroked path to include two arcs. So it’s doable with small-ish changes, and overall much less annoying than I thought it would be.

[liZe]

It's finally fixed and merged in master! But it needs to be tested with unit tests and real-life tests.

Some notes about that:

• Some cases are not perfect,
• WeasyPrint's rendering is definitely better than Firefox and Chrome 😉,
• Normal cases are handled with special simple code to avoid glitches in PDFs (it was like that before too),
• Even in crazy cases, everything is OK (but not really beautiful),
• Dots are now squares,
• Code can probably be simplified (but I've already spent a lot of time on that).

There's a test file here: http://pastebin.com/RAPYqhQL. You can try it with WeasyPrint and with your favorite browser, I bet that you'll prefer WP!

Tests are welcome, and if everything is OK for everybody I'll close the bug.

[SimonSapin]

I only had a quick look at the test file, but it looks great. Nice work ;)

[SimonSapin]

Do overflow and background-clip also use the rounded-corner path? What about non-initial values of background-clip?

[liZe]

overflow was already handled. background-clip was quite easy to add, at least for border-box and padding-box. I don't know how to get the content box with border radius, I can't find anything in the specification about it (the rules seem to be defined for the outer border box and the inner border box aka padding box).

[SimonSapin]

http://www.w3.org/TR/css3-background/#corner-shaping

The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness. In the case where this results in a negative value, the inner radius is zero. (In such cases its center might not coincide with that of the outer border curve.) Likewise the content edge radius is the padding edge radius minus the corresponding padding, or if that is negative, zero.

e768778#diff-0 looks wrong.

[SimonSapin]

I’m also confused by if tlrx + trrx or blrx + brrx: using numbers as booleans. Is it a clever way to avoid division by zero?

[liZe]

http://www.w3.org/TR/css3-background/#corner-shaping

I'm blind. Yes, so content rounded box is wrong.

I’m also confused by if tlrx + trrx or blrx + brrx: using numbers as booleans. Is it a clever way to avoid division by zero?

Hmmmm, yes. You'd prefer any((tlrx, trrx, blrx, brrx)), right?

[SimonSapin]

any((tlrx, trrx, blrx, brrx)) is still nubmers-as-booleans, but I guess it’s clearer. Are these numbers always non-negative?

[liZe]

Are these numbers always non-negative?

Yes, the values are checked in the validator.

[liZe]

Fixed and released, at least tested in weasysuite.

[seven7seven]

Hello, this does not work for me for some reason.

This is what I'm doing in the CSS:

img { border-radius: 200px; border: 6px solid gray; }

In HTML, it renders just fine. Is there anything else I should be checking?

Thanks!

[SimonSapin]

@seven7seven So with the above code, you see no radius at all? What if you apply this to a block (e.g. a <div>) rater than an image? We might need to add a specific code path for images.

[SimonSapin]

@seven7seven, also, this issue is closed, so it’s not being tracked anymore. Please open a new issue.

[seven7seven]

Thanks @SimonSapin, will try a background-imaged div, and open a new issue with a more detailed description.