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

LibWeb: Parse and resolve flex: shorthand

Browse source
This commit is contained in:
Tobias Christiansen 2021-06-01 15:50:17 +02:00 • committed by Ali Mohammad Pur
parent ae61e9ded2
commit ce7c8e215f
2 changed files with 55 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

7
Userland/Libraries/LibWeb/CSS/Properties.json
View file

@ -203,6 +203,13 @@
"inherited": false,
"initial": "inline"
},
"flex": {
"longhands": [
"flex-grow",
"flex-shrink",
"flex-basis"
]
},
"flex-basis": {
"inherited": false,
"initial": "content"

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

@ -318,6 +318,54 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
return;
}
if (property_id == CSS::PropertyID::Flex) {
if (value.is_length() || (value.is_identifier() && value.to_identifier() == CSS::ValueID::Content)) {
style.set_property(CSS::PropertyID::FlexBasis, value);
return;
}
if (!value.is_string())
return;
auto parts = split_on_whitespace(value.to_string());
if (parts.size() == 1) {
// FIXME: Parse float value here.
// FIXME: Maybe add NumericStyleValue or sth for that.
// Also extend parse_css_value.
style.set_property(CSS::PropertyID::FlexGrow, ""sv);
return;
}
if (parts.size() == 2) {
// FIXME: Parse float value from parts[0] here.
style.set_property(CSS::PropertyID::FlexGrow, ""sv);
auto second_value = parse_css_value(context, parts[1]);
if (second_value->is_length() || (second_value->is_identifier() && second_value->to_identifier() == CSS::ValueID::Content)) {
style.set_property(CSS::PropertyID::FlexBasis, *second_value);
} else {
// FIXME: Parse float value from parts[1] here.
style.set_property(CSS::PropertyID::FlexShrink, ""sv);
}
return;
}
if (parts.size() == 3) {
// FIXME: Parse float value from parts[0] here.
style.set_property(CSS::PropertyID::FlexGrow, ""sv);
// FIXME: Parse float value from parts[1] here.
style.set_property(CSS::PropertyID::FlexShrink, ""sv);
auto third_value = parse_css_value(context, parts[2]);
if (third_value->is_length() || (third_value->is_identifier() && third_value->to_identifier() == CSS::ValueID::Content))
style.set_property(CSS::PropertyID::FlexBasis, *third_value);
return;
}
dbgln("Unsure what to do with CSS flex value '{}'", value.to_string());
return;
}
if (property_id == CSS::PropertyID::BorderTop
|| property_id == CSS::PropertyID::BorderRight
|| property_id == CSS::PropertyID::BorderBottom