RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 09:07:35 +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

10
Tests/LibWeb/Layout/expected/block-and-inline/margin-padding-block-inline.txt Normal file
View file

@ -0,0 +1,10 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x119.46875 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 500x101.46875 children: not-inline
BlockContainer <div.a> at (31,21) content-size 458x79.46875 children: not-inline
BlockContainer <div.b> at (72,52) content-size 376x17.46875 children: inline
line 0 width: 41.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [73,52 39.78125x17.46875]
"Hello"
InlineNode <span>
TextNode <#text>

18
Tests/LibWeb/Layout/input/block-and-inline/margin-padding-block-inline.html Normal file
View file

@ -0,0 +1,18 @@
<!doctype html><style>
* {
border: 1px solid black;
}
body {
width: 500px;
}
.a {
padding: 100px;
padding-block: 10px;
padding-inline: 20px;
}
.b {
margin: 90px;
margin-block: 30px;
margin-inline: 40px;
}
</style><div class="a"><div class="b"><span>Hello</span>

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

@ -1265,6 +1265,12 @@
"unitless-length" "unitless-length"
] ]
}, },
"margin-block": {
"logical-alias-for": [
"margin"
],
"max-values": 2
},
"margin-block-start": { "margin-block-start": {
"logical-alias-for": [ "logical-alias-for": [
"margin-top", "margin-top",
@ -1295,6 +1301,12 @@
"unitless-length" "unitless-length"
] ]
}, },
"margin-inline": {
"logical-alias-for": [
"margin"
],
"max-values": 2
},
"margin-inline-start": { "margin-inline-start": {
"logical-alias-for": [ "logical-alias-for": [
"margin-top", "margin-top",
@ -1535,6 +1547,12 @@
"unitless-length" "unitless-length"
] ]
}, },
"padding-block": {
"logical-alias-for": [
"padding"
],
"max-values": 2
},
"padding-block-start": { "padding-block-start": {
"logical-alias-for": [ "logical-alias-for": [
"padding-top", "padding-top",
@ -1562,6 +1580,12 @@
"unitless-length" "unitless-length"
] ]
}, },
"padding-inline": {
"logical-alias-for": [
"padding"
],
"max-values": 2
},
"padding-inline-start": { "padding-inline-start": {
"logical-alias-for": [ "logical-alias-for": [
"padding-top", "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); struct StartAndEndPropertyIDs {
if (real_property_id.has_value()) 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); 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()) { if (value.is_composite()) {
auto& composite_value = value.as_composite(); auto& composite_value = value.as_composite();
auto& properties = composite_value.sub_properties(); auto& properties = composite_value.sub_properties();