RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 12:47:45 +00:00
Code Issues Activity Actions

LibWeb: Add flag to normalize border radii to width only

Browse source 
This is needed to avoid issues (such as overlapping curves) for outline
border radii, which do not currently support elliptical corners.
This commit is contained in:
MacDue 2022-06-12 15:21:32 +01:00 • committed by Linus Groh
parent 28c78b45ca
commit 0e7aa1e98c
5 changed files with 44 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,30 +11,41 @@
namespace Web::Painting {
BorderRadiiData normalized_border_radii_data(Layout::Node const& node, Gfx::FloatRect const& rect, CSS::BorderRadiusData top_left_radius, CSS::BorderRadiusData top_right_radius, CSS::BorderRadiusData bottom_right_radius, CSS::BorderRadiusData bottom_left_radius)
BorderRadiiData normalized_border_radii_data(Layout::Node const& node, Gfx::FloatRect const& rect, CSS::BorderRadiusData top_left_radius, CSS::BorderRadiusData top_right_radius, CSS::BorderRadiusData bottom_right_radius, CSS::BorderRadiusData bottom_left_radius, RelativeToWidthOnly relative_to_width_only)
{
BorderRadiusData bottom_left_radius_px {};
BorderRadiusData bottom_right_radius_px {};
BorderRadiusData top_left_radius_px {};
BorderRadiusData top_right_radius_px {};
auto width_length = CSS::Length::make_px(rect.width());
auto height_length = CSS::Length::make_px(rect.height());
bottom_left_radius_px.horizontal_radius = bottom_left_radius.horizontal_radius.resolved(node, width_length).to_px(node);
bottom_right_radius_px.horizontal_radius = bottom_right_radius.horizontal_radius.resolved(node, width_length).to_px(node);
top_left_radius_px.horizontal_radius = top_left_radius.horizontal_radius.resolved(node, width_length).to_px(node);
top_right_radius_px.horizontal_radius = top_right_radius.horizontal_radius.resolved(node, width_length).to_px(node);
BorderRadiusData bottom_left_radius_px {
bottom_left_radius.horizontal_radius.resolved(node, width_length).to_px(node),
bottom_left_radius.vertical_radius.resolved(node, height_length).to_px(node)
};
BorderRadiusData bottom_right_radius_px {
bottom_right_radius.horizontal_radius.resolved(node, width_length).to_px(node),
bottom_right_radius.vertical_radius.resolved(node, height_length).to_px(node)
};
BorderRadiusData top_left_radius_px {
top_left_radius.horizontal_radius.resolved(node, width_length).to_px(node),
top_left_radius.vertical_radius.resolved(node, height_length).to_px(node)
};
BorderRadiusData top_right_radius_px {
top_right_radius.horizontal_radius.resolved(node, width_length).to_px(node),
top_right_radius.vertical_radius.resolved(node, height_length).to_px(node)
};
// FIXME: Remove `relative_to_width_only = Yes' flag, this only exists to
// avoid overlapping curves for (outline) borders, which do not yet
// support elliptical corners.
switch (relative_to_width_only) {
case RelativeToWidthOnly::No: {
// Normal correct rendering:
auto height_length = CSS::Length::make_px(rect.height());
bottom_left_radius_px.vertical_radius = bottom_left_radius.vertical_radius.resolved(node, height_length).to_px(node);
bottom_right_radius_px.vertical_radius = bottom_right_radius.vertical_radius.resolved(node, height_length).to_px(node);
top_left_radius_px.vertical_radius = top_left_radius.vertical_radius.resolved(node, height_length).to_px(node);
top_right_radius_px.vertical_radius = top_right_radius.vertical_radius.resolved(node, height_length).to_px(node);
break;
}
case RelativeToWidthOnly::Yes:
bottom_left_radius_px.vertical_radius = bottom_left_radius_px.horizontal_radius;
bottom_right_radius_px.vertical_radius = bottom_right_radius_px.horizontal_radius;
top_left_radius_px.vertical_radius = top_left_radius_px.horizontal_radius;
top_right_radius_px.vertical_radius = top_right_radius_px.horizontal_radius;
break;
default:
VERIFY_NOT_REACHED();
}
// Scale overlapping curves according to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
auto f = 1.0f;