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

LibWeb: Add CSS logical property aliases for margin and padding sides

Browse source 
These just map to the LTR+TB defaults for now, as we don't yet resolve
any of the inputs to the logical property selection algorithm.
This commit is contained in:
Andreas Kling 2023-06-06 12:24:08 +02:00
parent 941092e3ad
commit abd6380cce
4 changed files with 131 additions and 0 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-start.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 798x99.46875 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 500x81.46875 children: not-inline
BlockContainer <div.a> at (51,21) content-size 413x49.46875 children: not-inline
BlockContainer <div.b> at (92,32) content-size 326x17.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: [93,32 39.78125x17.46875]
"Hello"
InlineNode <span>
TextNode <#text>

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

@ -0,0 +1,29 @@
<!doctype html><style>
* {
border: 1px solid black;
}
body {
width: 500px;
}
.a {
padding-top: 100px;
padding-block-start: 10px;
padding-bottom: 50px;
padding-block-end: 20px;
padding-left: 80px;
padding-inline-start: 40px;
padding-right: 90px;
padding-inline-end: 45px;
}
.b {
margin-top: 100px;
margin-block-start: 10px;
margin-bottom: 50px;
margin-block-end: 20px;
margin-left: 80px;
margin-inline-start: 40px;
margin-right: 90px;
margin-inline-end: 45px;
}
</style><div class="a"><div class="b"><span>Hello</span>

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

@ -1265,6 +1265,22 @@
"unitless-length"
]
},
"margin-block-start": {
"logical-alias-for": [
"margin-top",
"margin-right",
"margin-bottom",
"margin-left"
]
},
"margin-block-end": {
"logical-alias-for": [
"margin-top",
"margin-right",
"margin-bottom",
"margin-left"
]
},
"margin-bottom": {
"inherited": false,
"initial": "0",
@ -1279,6 +1295,22 @@
"unitless-length"
]
},
"margin-inline-start": {
"logical-alias-for": [
"margin-top",
"margin-right",
"margin-bottom",
"margin-left"
]
},
"margin-inline-end": {
"logical-alias-for": [
"margin-top",
"margin-right",
"margin-bottom",
"margin-left"
]
},
"margin-left": {
"inherited": false,
"initial": "0",
@ -1503,6 +1535,22 @@
"unitless-length"
]
},
"padding-block-start": {
"logical-alias-for": [
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
]
},
"padding-block-end": {
"logical-alias-for": [
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
]
},
"padding-bottom": {
"inherited": false,
"initial": "0",
@ -1514,6 +1562,22 @@
"unitless-length"
]
},
"padding-inline-start": {
"logical-alias-for": [
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
]
},
"padding-inline-end": {
"logical-alias-for": [
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
]
},
"padding-left": {
"inherited": false,
"initial": "0",

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

@ -283,6 +283,34 @@ static bool contains(Edge a, Edge b)
static void set_property_expanding_shorthands(StyleProperties& style, CSS::PropertyID property_id, StyleValue const& value, DOM::Document& document, CSS::CSSStyleDeclaration const* declaration)
{
auto map_logical_property_to_real_property = [](PropertyID property_id) -> Optional<PropertyID> {
// FIXME: Honor writing-mode, direction and text-orientation.
switch (property_id) {
case PropertyID::MarginBlockStart:
return PropertyID::MarginTop;
case PropertyID::MarginBlockEnd:
return PropertyID::MarginBottom;
case PropertyID::MarginInlineStart:
return PropertyID::MarginLeft;
case PropertyID::MarginInlineEnd:
return PropertyID::MarginRight;
case PropertyID::PaddingBlockStart:
return PropertyID::PaddingTop;
case PropertyID::PaddingBlockEnd:
return PropertyID::PaddingBottom;
case PropertyID::PaddingInlineStart:
return PropertyID::PaddingLeft;
case PropertyID::PaddingInlineEnd:
return PropertyID::PaddingRight;
default:
return {};
}
};
auto real_property_id = map_logical_property_to_real_property(property_id);
if (real_property_id.has_value())
return set_property_expanding_shorthands(style, real_property_id.value(), value, document, declaration);
if (value.is_composite()) {
auto& composite_value = value.as_composite();
auto& properties = composite_value.sub_properties();