mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 06:27:45 +00:00
LibWeb: Add CSS logical property aliases for margin and padding sides
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
parent
941092e3ad
commit
abd6380cce
4 changed files with 131 additions and 0 deletions
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -1265,6 +1265,22 @@
|
||||||
"unitless-length"
|
"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": {
|
"margin-bottom": {
|
||||||
"inherited": false,
|
"inherited": false,
|
||||||
"initial": "0",
|
"initial": "0",
|
||||||
|
|
@ -1279,6 +1295,22 @@
|
||||||
"unitless-length"
|
"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": {
|
"margin-left": {
|
||||||
"inherited": false,
|
"inherited": false,
|
||||||
"initial": "0",
|
"initial": "0",
|
||||||
|
|
@ -1503,6 +1535,22 @@
|
||||||
"unitless-length"
|
"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": {
|
"padding-bottom": {
|
||||||
"inherited": false,
|
"inherited": false,
|
||||||
"initial": "0",
|
"initial": "0",
|
||||||
|
|
@ -1514,6 +1562,22 @@
|
||||||
"unitless-length"
|
"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": {
|
"padding-left": {
|
||||||
"inherited": false,
|
"inherited": false,
|
||||||
"initial": "0",
|
"initial": "0",
|
||||||
|
|
|
||||||
|
|
@ -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)
|
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()) {
|
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();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue