Skip to content

Commit abd6380

Browse files
awesomeklingawesomekling
committed
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.
1 parent 941092e commit abd6380

File tree

4 files changed

+131
-0
lines changed

4 files changed

+131
-0
lines changed

‎Tests/LibWeb/Layout/expected/block-and-inline/margin-padding-block-inline-start.txt

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
2+
BlockContainer <html> at (1,1) content-size 798x99.46875 [BFC] children: not-inline
3+
BlockContainer <body> at (10,10) content-size 500x81.46875 children: not-inline
4+
BlockContainer <div.a> at (51,21) content-size 413x49.46875 children: not-inline
5+
BlockContainer <div.b> at (92,32) content-size 326x17.46875 children: inline
6+
line 0 width: 41.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
7+
frag 0 from TextNode start: 0, length: 5, rect: [93,32 39.78125x17.46875]
8+
"Hello"
9+
InlineNode <span>
10+
TextNode <#text>

‎Tests/LibWeb/Layout/input/block-and-inline/margin-padding-block-inline-start.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html><style>
2+
* {
3+
border: 1px solid black;
4+
}
5+
body {
6+
width: 500px;
7+
}
8+
.a {
9+
padding-top: 100px;
10+
padding-block-start: 10px;
11+
padding-bottom: 50px;
12+
padding-block-end: 20px;
13+
padding-left: 80px;
14+
padding-inline-start: 40px;
15+
padding-right: 90px;
16+
padding-inline-end: 45px;
17+
}
18+
.b {
19+
margin-top: 100px;
20+
margin-block-start: 10px;
21+
margin-bottom: 50px;
22+
margin-block-end: 20px;
23+
margin-left: 80px;
24+
margin-inline-start: 40px;
25+
margin-right: 90px;
26+
margin-inline-end: 45px;
27+
28+
}
29+
</style><div class="a"><div class="b"><span>Hello</span>

‎Userland/Libraries/LibWeb/CSS/Properties.json

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1265,6 +1265,22 @@
12651265
"unitless-length"
12661266
]
12671267
},
1268+
"margin-block-start": {
1269+
"logical-alias-for": [
1270+
"margin-top",
1271+
"margin-right",
1272+
"margin-bottom",
1273+
"margin-left"
1274+
]
1275+
},
1276+
"margin-block-end": {
1277+
"logical-alias-for": [
1278+
"margin-top",
1279+
"margin-right",
1280+
"margin-bottom",
1281+
"margin-left"
1282+
]
1283+
},
12681284
"margin-bottom": {
12691285
"inherited": false,
12701286
"initial": "0",
@@ -1279,6 +1295,22 @@
12791295
"unitless-length"
12801296
]
12811297
},
1298+
"margin-inline-start": {
1299+
"logical-alias-for": [
1300+
"margin-top",
1301+
"margin-right",
1302+
"margin-bottom",
1303+
"margin-left"
1304+
]
1305+
},
1306+
"margin-inline-end": {
1307+
"logical-alias-for": [
1308+
"margin-top",
1309+
"margin-right",
1310+
"margin-bottom",
1311+
"margin-left"
1312+
]
1313+
},
12821314
"margin-left": {
12831315
"inherited": false,
12841316
"initial": "0",
@@ -1503,6 +1535,22 @@
15031535
"unitless-length"
15041536
]
15051537
},
1538+
"padding-block-start": {
1539+
"logical-alias-for": [
1540+
"padding-top",
1541+
"padding-right",
1542+
"padding-bottom",
1543+
"padding-left"
1544+
]
1545+
},
1546+
"padding-block-end": {
1547+
"logical-alias-for": [
1548+
"padding-top",
1549+
"padding-right",
1550+
"padding-bottom",
1551+
"padding-left"
1552+
]
1553+
},
15061554
"padding-bottom": {
15071555
"inherited": false,
15081556
"initial": "0",
@@ -1514,6 +1562,22 @@
15141562
"unitless-length"
15151563
]
15161564
},
1565+
"padding-inline-start": {
1566+
"logical-alias-for": [
1567+
"padding-top",
1568+
"padding-right",
1569+
"padding-bottom",
1570+
"padding-left"
1571+
]
1572+
},
1573+
"padding-inline-end": {
1574+
"logical-alias-for": [
1575+
"padding-top",
1576+
"padding-right",
1577+
"padding-bottom",
1578+
"padding-left"
1579+
]
1580+
},
15171581
"padding-left": {
15181582
"inherited": false,
15191583
"initial": "0",

‎Userland/Libraries/LibWeb/CSS/StyleComputer.cpp

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,34 @@ static bool contains(Edge a, Edge b)
283283

284284
static void set_property_expanding_shorthands(StyleProperties& style, CSS::PropertyID property_id, StyleValue const& value, DOM::Document& document, CSS::CSSStyleDeclaration const* declaration)
285285
{
286+
auto map_logical_property_to_real_property = [](PropertyID property_id) -> Optional<PropertyID> {
287+
// FIXME: Honor writing-mode, direction and text-orientation.
288+
switch (property_id) {
289+
case PropertyID::MarginBlockStart:
290+
return PropertyID::MarginTop;
291+
case PropertyID::MarginBlockEnd:
292+
return PropertyID::MarginBottom;
293+
case PropertyID::MarginInlineStart:
294+
return PropertyID::MarginLeft;
295+
case PropertyID::MarginInlineEnd:
296+
return PropertyID::MarginRight;
297+
case PropertyID::PaddingBlockStart:
298+
return PropertyID::PaddingTop;
299+
case PropertyID::PaddingBlockEnd:
300+
return PropertyID::PaddingBottom;
301+
case PropertyID::PaddingInlineStart:
302+
return PropertyID::PaddingLeft;
303+
case PropertyID::PaddingInlineEnd:
304+
return PropertyID::PaddingRight;
305+
default:
306+
return {};
307+
}
308+
};
309+
310+
auto real_property_id = map_logical_property_to_real_property(property_id);
311+
if (real_property_id.has_value())
312+
return set_property_expanding_shorthands(style, real_property_id.value(), value, document, declaration);
313+
286314
if (value.is_composite()) {
287315
auto& composite_value = value.as_composite();
288316
auto& properties = composite_value.sub_properties();

0 commit comments

Comments
 (0)