From efd4f63454effae3ebea8041b5752ce80dc0a1ca Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sun, 17 Aug 2025 10:27:39 +0200 Subject: [PATCH] LibWeb: Allow blockification across `display: contents` boundary Flex/grid items are always blockified (have their CSS display forced into "block") by style computation. We were doing this by looking at the CSS display of the parent. However, if the parent has `display: contents`, we must look at the *grandparent* instead. This corrects the layout of buttons underneath Reddit article cards. --- Libraries/LibWeb/CSS/StyleComputer.cpp | 4 ++ ...-contents-blockification-of-flex-items.txt | 37 +++++++++++++++++++ ...contents-blockification-of-flex-items.html | 28 ++++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 Tests/LibWeb/Layout/expected/display-contents-blockification-of-flex-items.txt create mode 100644 Tests/LibWeb/Layout/input/display-contents-blockification-of-flex-items.html diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp index f2fc87698fe..4cb9ab97e4d 100644 --- a/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -2337,6 +2337,10 @@ static BoxTypeTransformation required_box_type_transformation(ComputedProperties // NOTE: If we're computing style for a pseudo-element, the effective parent will be the originating element itself, not its parent. auto parent = element.element_to_inherit_style_from(pseudo_element); + // Climb out of `display: contents` context. + while (parent && parent->computed_properties() && parent->computed_properties()->display().is_contents()) + parent = parent->element_to_inherit_style_from({}); + // A parent with a grid or flex display value blockifies the box’s display type. [CSS-GRID-1] [CSS-FLEXBOX-1] if (parent && parent->computed_properties()) { auto const& parent_display = parent->computed_properties()->display(); diff --git a/Tests/LibWeb/Layout/expected/display-contents-blockification-of-flex-items.txt b/Tests/LibWeb/Layout/expected/display-contents-blockification-of-flex-items.txt new file mode 100644 index 00000000000..0f998308dc3 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/display-contents-blockification-of-flex-items.txt @@ -0,0 +1,37 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x44 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x28 children: not-inline + Box at (8,8) content-size 784x28 flex-container(row) [FFC] children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 24.171875x28 flex-item [BFC] children: inline + frag 0 from TextNode start: 1, length: 3, rect: [8,8 24.171875x18] baseline: 13.796875 + "163" + TextNode <#text> + TextNode <#text> + BlockContainer at (32.171875,8) content-size 58.15625x28 flex-item [BFC] children: not-inline + Box at (37.171875,13) content-size 48.15625x18 flex-container(row) [FFC] children: not-inline + BlockContainer <(anonymous)> at (37.171875,13) content-size 48.15625x18 flex-item [BFC] children: inline + frag 0 from TextNode start: 1, length: 5, rect: [37.171875,13 48.15625x18] baseline: 13.796875 + "Share" + TextNode <#text> + TextNode <#text> + TextNode <#text> + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,36) content-size 784x0 children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x44] + PaintableWithLines (BlockContainer) [8,8 784x28] + PaintableBox (Box
.flex) [8,8 784x28] + PaintableWithLines (BlockContainer(anonymous)) [8,8 24.171875x28] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer) [32.171875,8 58.15625x28] + PaintableBox (Box) [32.171875,8 58.15625x28] + PaintableWithLines (BlockContainer(anonymous)) [37.171875,13 48.15625x18] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,36 784x0] + +SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto) + SC for BlockContainer [0,0 800x44] [children: 0] (z-index: auto) diff --git a/Tests/LibWeb/Layout/input/display-contents-blockification-of-flex-items.html b/Tests/LibWeb/Layout/input/display-contents-blockification-of-flex-items.html new file mode 100644 index 00000000000..163ec67a2a5 --- /dev/null +++ b/Tests/LibWeb/Layout/input/display-contents-blockification-of-flex-items.html @@ -0,0 +1,28 @@ + + +
+ 163 + + + Share + +