diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/margin-padding-block-inline.txt b/Tests/LibWeb/Layout/expected/block-and-inline/margin-padding-block-inline.txt new file mode 100644 index 0000000000..0d09210462 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/margin-padding-block-inline.txt @@ -0,0 +1,10 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x119.46875 [BFC] children: not-inline + BlockContainer at (10,10) content-size 500x101.46875 children: not-inline + BlockContainer at (31,21) content-size 458x79.46875 children: not-inline + BlockContainer 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 + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/block-and-inline/margin-padding-block-inline.html b/Tests/LibWeb/Layout/input/block-and-inline/margin-padding-block-inline.html new file mode 100644 index 0000000000..fadffeab82 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/margin-padding-block-inline.html @@ -0,0 +1,18 @@ +
Hello \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index 42a12bd1ab..e650d898f4 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -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", diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp index f7573a668a..0610d87bcc 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -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 { + // 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();