Repository navigation
A percentage border-radius on a block resolves against the parent's width, so 50% draws a pill instead of an ellipse #586
Description
Part of #552 (step 28, values read wrongly).
A percentage border-radius on a block resolves against the parent's inner width, for both the horizontal and the vertical radius. 50% on a box that is not square draws a pill instead of an ellipse. On img the percentage already resolves against the image's own box.
Measured on gravitypdf at 60b82630, PHP 8.5.4, rasterised.
| Rule | Browser | mPDF |
|---|---|---|
div { width: 40mm; height: 12mm; border-radius: 50% } |
an ellipse, radii 20 × 6 mm | a pill: 50% of the 180 mm parent is 90 mm each way, and RoundedBox::fit() scales both radii down to 6 mm |
div { width: 40mm; height: 40mm; border-radius: 50% } |
a circle | a circle, by coincidence |
div { width: 40mm; height: 12mm; border-radius: 10% } |
radii 4 × 1.2 mm | 18 mm each way, scaled down to 6 mm: a pill again |
Cause. setCSS() converts all eight BORDER-*-RADIUS-H and -V values against $this->blk[$prevlevel]['inner_width'] (src/Mpdf.php:19298-19321). CSS resolves a horizontal radius against the width of the element's own border box, and a vertical one against its height. The height is not known until the block closes.
Fix. Keep a percentage radius unresolved in blk[] when the block opens. PaintDivBB() has the border box's width and height in hand ($w, $h, src/Mpdf.php:17925-17926). Resolve the percentage there, before RoundedBox::fit() (:17901). A block split across pages is painted once per page, so decide which height a fragment uses. With box-decoration-break: slice, CSS uses the height of the whole box. With clone, it uses each fragment's height.
Tests. 50% and 10% on a block that is not square, a square block, the / form with two percentages, a single corner longhand with two values, and a block that breaks across a page. Read the radii from the painted path.
Activity