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

LibWeb: Add naive support for {margin,padding}-{block,inline}

Browse source 
Like other logical properties, we just alias these to the LTR TB default
properties for now.
This commit is contained in:
Andreas Kling 2023-06-07 09:13:21 +02:00
parent af1798dd04
commit 2c16e8371f
4 changed files with 86 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1265,6 +1265,12 @@
"unitless-length"
]
},
"margin-block": {
"logical-alias-for": [
"margin"
],
"max-values": 2
},
"margin-block-start": {
"logical-alias-for": [
"margin-top",
@ -1295,6 +1301,12 @@
"unitless-length"
]
},
"margin-inline": {
"logical-alias-for": [
"margin"
],
"max-values": 2
},
"margin-inline-start": {
"logical-alias-for": [
"margin-top",
@ -1535,6 +1547,12 @@
"unitless-length"
]
},
"padding-block": {
"logical-alias-for": [
"padding"
],
"max-values": 2
},
"padding-block-start": {
"logical-alias-for": [
"padding-top",
@ -1562,6 +1580,12 @@
"unitless-length"
]
},
"padding-inline": {
"logical-alias-for": [
"padding"
],
"max-values": 2
},
"padding-inline-start": {
"logical-alias-for": [
"padding-top",

36
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -307,10 +307,42 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
}
};
auto real_property_id = map_logical_property_to_real_property(property_id);
if (real_property_id.has_value())
struct StartAndEndPropertyIDs {
PropertyID start;
PropertyID end;
};
auto map_logical_property_to_real_properties = [](PropertyID property_id) -> Optional<StartAndEndPropertyIDs> {
// FIXME: Honor writing-mode, direction and text-orientation.
switch (property_id) {
case PropertyID::MarginBlock:
return StartAndEndPropertyIDs { PropertyID::MarginTop, PropertyID::MarginBottom };
case PropertyID::MarginInline:
return StartAndEndPropertyIDs { PropertyID::MarginLeft, PropertyID::MarginRight };
case PropertyID::PaddingBlock:
return StartAndEndPropertyIDs { PropertyID::PaddingTop, PropertyID::PaddingBottom };
case PropertyID::PaddingInline:
return StartAndEndPropertyIDs { PropertyID::PaddingLeft, PropertyID::PaddingRight };
default:
return {};
}
};
if (auto real_property_id = map_logical_property_to_real_property(property_id); real_property_id.has_value())
return set_property_expanding_shorthands(style, real_property_id.value(), value, document, declaration);
if (auto real_property_ids = map_logical_property_to_real_properties(property_id); real_property_ids.has_value()) {
if (value.is_value_list() && value.as_value_list().size() == 2) {
auto const& start = value.as_value_list().values()[0];
auto const& end = value.as_value_list().values()[1];
set_property_expanding_shorthands(style, real_property_ids->start, start, document, declaration);
set_property_expanding_shorthands(style, real_property_ids->end, end, document, declaration);
return;
}
set_property_expanding_shorthands(style, real_property_ids->start, value, document, declaration);
set_property_expanding_shorthands(style, real_property_ids->end, value, document, declaration);
return;
}
if (value.is_composite()) {
auto& composite_value = value.as_composite();
auto& properties = composite_value.sub_properties();