mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-17 07:50:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Ensure anonymous wrappers inherit inline-block display

Browse source 
When restructuring a block node inside an inline parent, if the
nearest block ancestor is `display: inline-block`, ensure that
the generated anonymous wrappers also have `display: inline-block`.
This fixes layout issues with block elements nested
inside inline-block elements.
This commit is contained in:
Aziz Berkay Yesilyurt 2025-04-08 10:46:22 +02:00 • committed by Jelle Raaijmakers
commit 6711438e0d
Notes: github-actions[bot] 2025-05-23 09:17:05 +00:00
4 changed files with 55 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Libraries/LibWeb/Layout/Node.cpp
View file

@ -1053,6 +1053,12 @@ GC::Ref<NodeWithStyle> 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;
}

6
Libraries/LibWeb/Layout/TreeBuilder.cpp
View file

@ -3,6 +3,7 @@
* Copyright (c) 2022-2023, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2022, MacDue <macdue@dueutil.tech>
* Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
* Copyright (c) 2025, Aziz B. Yesilyurt <abyesilyurt@gmail.com>
*
* 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<BlockContainer>(*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);
}

38
Tests/LibWeb/Layout/expected/block-and-inline/block-inside-inline.txt Normal file
View file

@ -0,0 +1,38 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x34 [BFC] children: not-inline
BlockContainer <body> 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 <div> 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 <span>
TextNode <#text>
BlockContainer <(anonymous)> at (43.15625,8) content-size 27.640625x18 children: not-inline continuation
BlockContainer <div> 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 <span> continuation
TextNode <#text>
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x34]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x18]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [43.15625,8 27.640625x18]
PaintableWithLines (BlockContainer(anonymous)) [43.15625,8 27.640625x0]
PaintableWithLines (InlineNode<SPAN>)
PaintableWithLines (BlockContainer(anonymous)) [43.15625,8 27.640625x18]
PaintableWithLines (BlockContainer<DIV>) [43.15625,8 27.640625x18]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [43.15625,26 27.640625x0]
PaintableWithLines (InlineNode<SPAN>)
TextPaintable (TextNode<#text>)

7
Tests/LibWeb/Layout/input/block-and-inline/block-inside-inline.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
foo
<div style="display: inline-block;">
<span>
<div style="display: block;">bar</div>
</span>
</div> baz