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 + +