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

LibWeb: Implement and use BorderRadiusStyleValue

Browse source 
This parses the elliptical border-radius values, though currently we
only support circular ones. So, to_length() is overloaded to return the
horizontal-radius. This means the code in Layout/Node.cpp does not need
to change for now.
This commit is contained in:
Sam Atkins 2021-08-06 16:55:08 +01:00 • committed by Andreas Kling
parent e3cbd366c7
commit 168865dbdc
5 changed files with 159 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

51
Userland/Libraries/LibWeb/CSS/StyleResolver.cpp
View file

@ -235,57 +235,18 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
}
if (property_id == CSS::PropertyID::BorderRadius) {
// FIXME: Allow for two values per corner to support elliptical radii.
// FIXME: Add support the '/' to specify elliptical radii.
if (value.is_length()) {
if (value.is_value_list()) {
auto& values_list = static_cast<StyleValueList const&>(value);
assign_edge_values(PropertyID::BorderTopLeftRadius, PropertyID::BorderTopRightRadius, PropertyID::BorderBottomRightRadius, PropertyID::BorderBottomLeftRadius, values_list.values());
return;
}
if (value.is_builtin()) {
style.set_property(CSS::PropertyID::BorderTopLeftRadius, value);
style.set_property(CSS::PropertyID::BorderTopRightRadius, value);
style.set_property(CSS::PropertyID::BorderBottomRightRadius, value);
style.set_property(CSS::PropertyID::BorderBottomLeftRadius, value);
return;
}
if (value.is_component_value_list()) {
auto& parts = static_cast<CSS::ValueListStyleValue const&>(value).values();
if (parts.size() == 2) {
auto diagonal1 = Parser::parse_css_value(context, property_id, parts[0]);
auto diagonal2 = Parser::parse_css_value(context, property_id, parts[1]);
if (diagonal1 && diagonal2) {
style.set_property(CSS::PropertyID::BorderTopLeftRadius, *diagonal1);
style.set_property(CSS::PropertyID::BorderBottomRightRadius, *diagonal1);
style.set_property(CSS::PropertyID::BorderTopRightRadius, *diagonal2);
style.set_property(CSS::PropertyID::BorderBottomLeftRadius, *diagonal2);
}
return;
}
if (parts.size() == 3) {
auto top_left = Parser::parse_css_value(context, property_id, parts[0]);
auto diagonal = Parser::parse_css_value(context, property_id, parts[1]);
auto bottom_right = Parser::parse_css_value(context, property_id, parts[2]);
if (top_left && diagonal && bottom_right) {
style.set_property(CSS::PropertyID::BorderTopLeftRadius, *top_left);
style.set_property(CSS::PropertyID::BorderBottomRightRadius, *bottom_right);
style.set_property(CSS::PropertyID::BorderTopRightRadius, *diagonal);
style.set_property(CSS::PropertyID::BorderBottomLeftRadius, *diagonal);
}
return;
}
if (parts.size() == 4) {
auto top_left = Parser::parse_css_value(context, property_id, parts[0]);
auto top_right = Parser::parse_css_value(context, property_id, parts[1]);
auto bottom_right = Parser::parse_css_value(context, property_id, parts[2]);
auto bottom_left = Parser::parse_css_value(context, property_id, parts[3]);
if (top_left && top_right && bottom_right && bottom_left) {
style.set_property(CSS::PropertyID::BorderTopLeftRadius, *top_left);
style.set_property(CSS::PropertyID::BorderBottomRightRadius, *bottom_right);
style.set_property(CSS::PropertyID::BorderTopRightRadius, *top_right);
style.set_property(CSS::PropertyID::BorderBottomLeftRadius, *bottom_left);
}
return;
}
dbgln("Unsure what to do with CSS border-radius value '{}'", value.to_string());
return;
}
return;
}