mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 16:17:45 +00:00
LibWeb: Implement and use BorderRadiusStyleValue
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:
parent
e3cbd366c7
commit
168865dbdc
5 changed files with 159 additions and 45 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue