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

LibWeb: Fix ::marker placement in tree

Browse source 
Fixes ::marker (pseudo-element) placement in the tree for list-items.

Previously:
- ::before
- content
- ::marker
- ::after

Now (matches Firefox, afaik per-spec):
- ::marker
- ::before
- content
- ::after
This commit is contained in:
Oliver Medhurst 2025-03-27 22:26:16 +00:00 • committed by Andreas Kling
commit b272bb3373
Notes: github-actions[bot] 2025-03-27 23:11:17 +00:00
8 changed files with 83 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -222,7 +222,7 @@ void TreeBuilder::create_pseudo_element_if_needed(DOM::Element& element, CSS::Ps
marker_style);
static_cast<ListItemBox&>(*pseudo_element_node).set_marker(list_item_marker);
element.set_pseudo_element_node({}, CSS::PseudoElement::Marker, list_item_marker);
pseudo_element_node->append_child(*list_item_marker);
pseudo_element_node->prepend_child(*list_item_marker);
}
auto generated_for = CSS::to_generated_pseudo_element(pseudo_element).release_value();
@ -702,7 +702,7 @@ void TreeBuilder::update_layout_tree_after_children(DOM::Node& dom_node, GC::Ref
auto list_item_marker = document.heap().allocate<ListItemMarkerBox>(document, layout_node->computed_values().list_style_type(), layout_node->computed_values().list_style_position(), element, marker_style);
static_cast<ListItemBox&>(*layout_node).set_marker(list_item_marker);
element.set_pseudo_element_node({}, CSS::PseudoElement::Marker, list_item_marker);
layout_node->append_child(*list_item_marker);
layout_node->prepend_child(*list_item_marker);
}
if (is<SVG::SVGGraphicsElement>(dom_node)) {

24
Tests/LibWeb/Layout/expected/block-and-inline/list-markers-intruded-by-float.txt
View file

@ -6,33 +6,33 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ListItemBox <li> at (48,16) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 1, rect: [328,16 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,16) content-size 12x17 children: not-inline
TextNode <#text>
ListItemBox <li> at (48,33) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 1, rect: [328,33 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,33) content-size 12x17 children: not-inline
TextNode <#text>
ListItemBox <li> at (48,50) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 1, rect: [328,50 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,50) content-size 12x17 children: not-inline
TextNode <#text>
ListItemBox <li> at (48,67) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 1, rect: [328,67 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,67) content-size 12x17 children: not-inline
TextNode <#text>
ListItemBox <li> at (48,84) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 1, rect: [328,84 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,84) content-size 12x17 children: not-inline
TextNode <#text>
ListItemBox <li> at (48,101) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 1, rect: [328,101 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,101) content-size 12x17 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x136]
@ -40,20 +40,20 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<DIV>.box) [8,16 220x120]
PaintableWithLines (BlockContainer<UL>) [8,16 784x102]
PaintableWithLines (ListItemBox<LI>) [48,16 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,16 12x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (ListItemBox<LI>) [48,33 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,33 12x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (ListItemBox<LI>) [48,50 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,50 12x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (ListItemBox<LI>) [48,67 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,67 12x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (ListItemBox<LI>) [48,84 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,84 12x17]
PaintableWithLines (ListItemBox<LI>) [48,101 744x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (ListItemBox<LI>) [48,101 744x17]
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,101 12x17]
TextPaintable (TextNode<#text>)

4
Tests/LibWeb/Layout/expected/details-closed.txt
View file

@ -5,8 +5,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ListItemBox <summary> at (32,8) content-size 760x17 children: inline
frag 0 from TextNode start: 0, length: 13, rect: [32,8 114.625x17] baseline: 13.296875
"I'm a summary"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (8,8) content-size 12x17 children: not-inline
TextNode <#text>
BlockContainer <slot> at (8,25) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,25) content-size 784x0 children: inline
TextNode <#text>
@ -16,7 +16,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
PaintableWithLines (BlockContainer<DETAILS>) [8,8 784x17]
PaintableWithLines (ListItemBox<SUMMARY>) [32,8 760x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<SLOT>) [8,25 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0]

4
Tests/LibWeb/Layout/expected/details-open.txt
View file

@ -5,8 +5,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ListItemBox <summary> at (32,8) content-size 760x17 children: inline
frag 0 from TextNode start: 0, length: 13, rect: [32,8 114.625x17] baseline: 13.296875
"I'm a summary"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (8,8) content-size 12x17 children: not-inline
TextNode <#text>
BlockContainer <slot> at (8,25) content-size 784x17 children: inline
TextNode <#text>
TextNode <#text>
@ -23,8 +23,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x34]
PaintableWithLines (BlockContainer<DETAILS>) [8,8 784x34]
PaintableWithLines (ListItemBox<SUMMARY>) [32,8 760x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<SLOT>) [8,25 784x17]
PaintableWithLines (InlineNode<SPAN>)
TextPaintable (TextNode<#text>)

4
Tests/LibWeb/Layout/expected/details-summary-default-ua-style.txt
View file

@ -5,8 +5,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ListItemBox <summary> at (92,68) content-size 640x17 children: inline
frag 0 from TextNode start: 0, length: 5, rect: [92,68 36.84375x17] baseline: 13.296875
"hello"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (68,68) content-size 12x17 children: not-inline
TextNode <#text>
BlockContainer <slot> at (68,85) content-size 664x0 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
@ -14,6 +14,6 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x137]
PaintableWithLines (BlockContainer<DETAILS>) [8,8 784x137]
PaintableWithLines (ListItemBox<SUMMARY>) [92,68 640x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [68,68 12x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<SLOT>) [68,85 664x0]

32
Tests/LibWeb/Layout/expected/list-item-marker-pseudo-placement.txt Normal file
View file

@ -0,0 +1,32 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x50 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x34 children: not-inline
ListItemBox <span> at (8,8) content-size 784x34 children: not-inline
ListItemMarkerBox <(anonymous)> at (-16,8) content-size 12x17 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x17 children: inline
InlineNode <(anonymous)>
frag 0 from TextNode start: 0, length: 6, rect: [8,8 52.53125x17] baseline: 13.296875
"before"
TextNode <#text>
BlockContainer <div> at (8,25) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,25) content-size 784x17 children: inline
InlineNode <(anonymous)>
frag 0 from TextNode start: 0, length: 5, rect: [8,25 40.1875x17] baseline: 13.296875
"after"
TextNode <#text>
BlockContainer <(anonymous)> at (8,42) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x50]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x34]
PaintableWithLines (ListItemBox<SPAN>) [8,8 784x34]
MarkerPaintable (ListItemMarkerBox(anonymous)) [-16,8 12x17]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x17]
PaintableWithLines (InlineNode(anonymous))
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [8,25 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,25 784x17]
PaintableWithLines (InlineNode(anonymous))
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,42 784x0]

28
Tests/LibWeb/Layout/expected/ordered-list.txt
View file

@ -7,22 +7,22 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ListItemBox <li> at (48,16) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 7, rect: [48,16 58.78125x17] baseline: 13.296875
"Item 20"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (13.25,16) content-size 22.75x17 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (48,33) content-size 744x0 children: inline
TextNode <#text>
ListItemBox <li> at (48,33) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 7, rect: [48,33 55.53125x17] baseline: 13.296875
"Item 21"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (16.5,33) content-size 19.5x17 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (48,50) content-size 744x0 children: inline
TextNode <#text>
ListItemBox <li> at (48,50) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 7, rect: [48,50 58x17] baseline: 13.296875
"Item 22"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (14.03125,50) content-size 21.96875x17 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (48,67) content-size 744x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,83) content-size 784x0 children: inline
@ -33,29 +33,29 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ListItemBox <li> at (48,83) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 6, rect: [48,83 46.71875x17] baseline: 13.296875
"Item 1"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (25.3125,83) content-size 10.6875x17 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (48,100) content-size 744x0 children: inline
TextNode <#text>
ListItemBox <li> at (48,100) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 6, rect: [48,100 48.828125x17] baseline: 13.296875
"Item 5"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (23.203125,100) content-size 12.796875x17 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (48,117) content-size 744x0 children: inline
TextNode <#text>
ListItemBox <li> at (48,117) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 6, rect: [48,117 49.109375x17] baseline: 13.296875
"Item 6"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (22.921875,117) content-size 13.078125x17 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (48,134) content-size 744x0 children: inline
TextNode <#text>
ListItemBox <li> at (48,134) content-size 744x17 children: inline
frag 0 from TextNode start: 0, length: 6, rect: [48,134 49.09375x17] baseline: 13.296875
"Item 7"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (22.9375,134) content-size 13.0625x17 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (48,151) content-size 744x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,167) content-size 784x0 children: inline
@ -67,34 +67,34 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<OL>) [8,16 784x51]
PaintableWithLines (BlockContainer(anonymous)) [48,16 744x0]
PaintableWithLines (ListItemBox<LI>) [48,16 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [13.25,16 22.75x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [48,33 744x0]
PaintableWithLines (ListItemBox<LI>) [48,33 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [16.5,33 19.5x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [48,50 744x0]
PaintableWithLines (ListItemBox<LI>) [48,50 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [14.03125,50 21.96875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [48,67 744x0]
PaintableWithLines (BlockContainer(anonymous)) [8,83 784x0]
PaintableWithLines (BlockContainer<OL>) [8,83 784x68]
PaintableWithLines (BlockContainer(anonymous)) [48,83 744x0]
PaintableWithLines (ListItemBox<LI>) [48,83 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [25.3125,83 10.6875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [48,100 744x0]
PaintableWithLines (ListItemBox<LI>) [48,100 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [23.203125,100 12.796875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [48,117 744x0]
PaintableWithLines (ListItemBox<LI>) [48,117 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [22.921875,117 13.078125x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [48,134 744x0]
PaintableWithLines (ListItemBox<LI>) [48,134 744x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [22.9375,134 13.0625x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [48,151 744x0]
PaintableWithLines (BlockContainer(anonymous)) [8,167 784x0]

17
Tests/LibWeb/Layout/input/list-item-marker-pseudo-placement.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<style>
span {
display: list-item;
}
div {}
span::before {
content: "before";
}
span::after {
content: "after";
}
</style>
<span><div></div></span>