RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 07:37:44 +00:00
Code Issues Activity Actions

LibWeb: Remove casting to double in normalized_border_radii_data

Browse source 
Fixes broken border-radius painting because of lost precision while
converting back and forth between double and CSSPixels.

Fixed example:
```html
<style>
  div {
    border-radius: 9999px;
    background: orange;
    padding: 10px;
  }
</style><div>huh</div>
```
This commit is contained in:
Aliaksandr Kalenik 2023-07-25 17:33:04 +02:00 • committed by Andreas Kling
parent a653b60e49
commit 875a8a3c2a
1 changed files with 17 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

34
Userland/Libraries/LibWeb/Painting/BorderPainting.cpp
View file

@ -33,24 +33,24 @@ BorderRadiiData normalized_border_radii_data(Layout::Node const& node, CSSPixelR
top_right_radius_px.vertical_radius = top_right_radius.vertical_radius.to_px(node, rect.height());
// Scale overlapping curves according to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
CSSPixels f = 1.0f;
auto width_reciprocal = 1.0 / rect.width().to_double();
auto height_reciprocal = 1.0 / rect.height().to_double();
f = max(f, width_reciprocal * (top_left_radius_px.horizontal_radius + top_right_radius_px.horizontal_radius));
f = max(f, height_reciprocal * (top_right_radius_px.vertical_radius + bottom_right_radius_px.vertical_radius));
f = max(f, width_reciprocal * (bottom_left_radius_px.horizontal_radius + bottom_right_radius_px.horizontal_radius));
f = max(f, height_reciprocal * (top_left_radius_px.vertical_radius + bottom_left_radius_px.vertical_radius));
CSSPixels f = 1;
if (rect.width() > 0) {
f = max(f, (top_left_radius_px.horizontal_radius + top_right_radius_px.horizontal_radius) / rect.width());
f = max(f, (bottom_left_radius_px.horizontal_radius + bottom_right_radius_px.horizontal_radius) / rect.width());
}
if (rect.height() > 0) {
f = max(f, (top_right_radius_px.vertical_radius + bottom_right_radius_px.vertical_radius) / rect.height());
f = max(f, (top_left_radius_px.vertical_radius + bottom_left_radius_px.vertical_radius) / rect.height());
}
f = 1.0 / f.to_double();
top_left_radius_px.horizontal_radius *= f;
top_left_radius_px.vertical_radius *= f;
top_right_radius_px.horizontal_radius *= f;
top_right_radius_px.vertical_radius *= f;
bottom_right_radius_px.horizontal_radius *= f;
bottom_right_radius_px.vertical_radius *= f;
bottom_left_radius_px.horizontal_radius *= f;
bottom_left_radius_px.vertical_radius *= f;
top_left_radius_px.horizontal_radius /= f;
top_left_radius_px.vertical_radius /= f;
top_right_radius_px.horizontal_radius /= f;
top_right_radius_px.vertical_radius /= f;
bottom_right_radius_px.horizontal_radius /= f;
bottom_right_radius_px.vertical_radius /= f;
bottom_left_radius_px.horizontal_radius /= f;
bottom_left_radius_px.vertical_radius /= f;
return BorderRadiiData { top_left_radius_px, top_right_radius_px, bottom_right_radius_px, bottom_left_radius_px };
}