diff --git a/Libraries/LibWeb/Layout/Node.cpp b/Libraries/LibWeb/Layout/Node.cpp index 2fdf615af4a..6db13a8995d 100644 --- a/Libraries/LibWeb/Layout/Node.cpp +++ b/Libraries/LibWeb/Layout/Node.cpp @@ -1053,6 +1053,12 @@ GC::Ref NodeWithStyle::create_anonymous_wrapper() const wrapper->mutable_computed_values().set_text_decoration_thickness(computed_values().text_decoration_thickness()); wrapper->mutable_computed_values().set_text_decoration_color(computed_values().text_decoration_color()); wrapper->mutable_computed_values().set_text_decoration_style(computed_values().text_decoration_style()); + + // CSS 2.2 9.2.1.1 creates anonymous block boxes, but 9.4.1 states inline-block creates a BFC. + // Set wrapper to inline-block to participate correctly in the IFC within the parent inline-block. + if (display().is_inline_block() && !has_children()) { + wrapper->mutable_computed_values().set_display(CSS::Display::from_short(CSS::Display::Short::InlineBlock)); + } return *wrapper; } diff --git a/Libraries/LibWeb/Layout/TreeBuilder.cpp b/Libraries/LibWeb/Layout/TreeBuilder.cpp index 6f6c5e644bd..659f9bebeaa 100644 --- a/Libraries/LibWeb/Layout/TreeBuilder.cpp +++ b/Libraries/LibWeb/Layout/TreeBuilder.cpp @@ -3,6 +3,7 @@ * Copyright (c) 2022-2023, Sam Atkins * Copyright (c) 2022, MacDue * Copyright (c) 2025, Jelle Raaijmakers + * Copyright (c) 2025, Aziz B. Yesilyurt * * SPDX-License-Identifier: BSD-2-Clause */ @@ -283,10 +284,10 @@ void TreeBuilder::restructure_block_node_in_inline_parent(NodeWithStyleAndBoxMod VERIFY(!parent.children_are_inline()); parent.set_children_are_inline(true); - // Find nearest non-inline, content supporting ancestor that is not an anonymous block. + // Find nearest ancestor that establishes a BFC (block container) and is not display: contents or anonymous. auto& nearest_block_ancestor = [&] -> NodeWithStyle& { for (auto* ancestor = parent.parent(); ancestor; ancestor = ancestor->parent()) { - if (!ancestor->is_inline() && !ancestor->display().is_contents() && !ancestor->is_anonymous()) + if (is(*ancestor) && !ancestor->display().is_contents() && !ancestor->is_anonymous()) return *ancestor; } VERIFY_NOT_REACHED(); @@ -310,6 +311,7 @@ void TreeBuilder::restructure_block_node_in_inline_parent(NodeWithStyleAndBoxMod before_wrapper = last_child; } else { before_wrapper = nearest_block_ancestor.create_anonymous_wrapper(); + before_wrapper->set_children_are_inline(true); nearest_block_ancestor.append_child(*before_wrapper); } diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/block-inside-inline.txt b/Tests/LibWeb/Layout/expected/block-and-inline/block-inside-inline.txt new file mode 100644 index 00000000000..03f739e0603 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/block-inside-inline.txt @@ -0,0 +1,38 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x34 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x18 children: inline + frag 0 from TextNode start: 0, length: 4, rect: [8,8 35.15625x18] baseline: 13.796875 + "foo " + frag 1 from BlockContainer start: 0, length: 0, rect: [43.15625,8 27.640625x18] baseline: 13.796875 + frag 2 from TextNode start: 0, length: 4, rect: [70.796875,8 35.203125x18] baseline: 13.796875 + " baz" + TextNode <#text> + BlockContainer
at (43.15625,8) content-size 27.640625x18 inline-block [BFC] children: not-inline + BlockContainer <(anonymous)> at (43.15625,8) content-size 27.640625x0 children: inline + TextNode <#text> + InlineNode + TextNode <#text> + BlockContainer <(anonymous)> at (43.15625,8) content-size 27.640625x18 children: not-inline continuation + BlockContainer
at (43.15625,8) content-size 27.640625x18 children: inline + frag 0 from TextNode start: 0, length: 3, rect: [43.15625,8 27.640625x18] baseline: 13.796875 + "bar" + TextNode <#text> + BlockContainer <(anonymous)> at (43.15625,26) content-size 27.640625x0 children: inline + InlineNode continuation + TextNode <#text> + TextNode <#text> + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x34] + PaintableWithLines (BlockContainer) [8,8 784x18] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [43.15625,8 27.640625x18] + PaintableWithLines (BlockContainer(anonymous)) [43.15625,8 27.640625x0] + PaintableWithLines (InlineNode) + PaintableWithLines (BlockContainer(anonymous)) [43.15625,8 27.640625x18] + PaintableWithLines (BlockContainer
) [43.15625,8 27.640625x18] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [43.15625,26 27.640625x0] + PaintableWithLines (InlineNode) + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/block-and-inline/block-inside-inline.html b/Tests/LibWeb/Layout/input/block-and-inline/block-inside-inline.html new file mode 100644 index 00000000000..577732fab2e --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/block-inside-inline.html @@ -0,0 +1,7 @@ + +foo +
+ +
bar
+ +
baz