mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-28 05:07:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb: Allow blockification across display: contents boundary

Browse source 
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.
This commit is contained in:
Andreas Kling 2025-08-17 10:27:39 +02:00 • committed by Andreas Kling
commit efd4f63454
Notes: github-actions[bot] 2025-08-17 17:11:06 +00:00
3 changed files with 69 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -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();

37
Tests/LibWeb/Layout/expected/display-contents-blockification-of-flex-items.txt Normal file
View file

@ -0,0 +1,37 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x44 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x28 children: not-inline
Box <div.flex> 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 <foo-a> at (32.171875,8) content-size 58.15625x28 flex-item [BFC] children: not-inline
Box <foo-b> 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<HTML>) [0,0 800x44]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x28]
PaintableBox (Box<DIV>.flex) [8,8 784x28]
PaintableWithLines (BlockContainer(anonymous)) [8,8 24.171875x28]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<FOO-A>) [32.171875,8 58.15625x28]
PaintableBox (Box<FOO-B>) [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<HTML> [0,0 800x44] [children: 0] (z-index: auto)

28
Tests/LibWeb/Layout/input/display-contents-blockification-of-flex-items.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<style type="text/css">
* {
outline: 1px solid black;
}
.flex {
display: flex;
}
</style>
<div class="flex">
163
<slot>
<foo-a
><foo-b
><template shadowrootmode="open">
<style>
:host {
display: flex;
border: 5px solid orange;
}
</style>
<slot></slot>
</template>
Share
</foo-b></foo-a
></slot
>
</div>