beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 15:40:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Account for float intrusions in list marker x offset

Browse source
This commit is contained in:
Aliaksandr Kalenik 2023-08-26 18:11:00 +02:00 committed by Andreas Kling
parent 240ec9aeed
commit 0060fe3095
Notes: sideshowbarker 2024-07-16 21:51:02 +09:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/SerenityOS/serenity/commit/0060fe3095
Pull-request: https://github.com/SerenityOS/serenity/pull/20790
3 changed files with 81 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,65 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x128.8125 [BFC] children: not-inline
BlockContainer <body> at (8,16) content-size 784x104.8125 children: not-inline
BlockContainer <div.box> at (18,26) content-size 200x100 floating [BFC] children: not-inline
BlockContainer <ul> at (48,16) content-size 744x104.8125 children: not-inline
ListItemBox <li> at (48,16) content-size 744x17.46875 children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [328,16 9.34375x17.46875]
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,16.234375) content-size 12x17 children: not-inline
ListItemBox <li> at (48,33.46875) content-size 744x17.46875 children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [328,33.46875 9.34375x17.46875]
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,33.703125) content-size 12x17 children: not-inline
ListItemBox <li> at (48,50.9375) content-size 744x17.46875 children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [328,50.9375 9.34375x17.46875]
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,51.171875) content-size 12x17 children: not-inline
ListItemBox <li> at (48,68.40625) content-size 744x17.46875 children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [328,68.40625 9.34375x17.46875]
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,68.640625) content-size 12x17 children: not-inline
ListItemBox <li> at (48,85.875) content-size 744x17.46875 children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [328,85.875 9.34375x17.46875]
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,86.109375) content-size 12x17 children: not-inline
ListItemBox <li> at (48,103.34375) content-size 744x17.46875 children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [328,103.34375 9.34375x17.46875]
"a"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (304,103.578125) content-size 12x17 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x128.8125] overflow: [0,0 800x136]
PaintableWithLines (BlockContainer<BODY>) [8,16 784x104.8125] overflow: [8,16 784x120]
PaintableWithLines (BlockContainer<DIV>.box) [8,16 220x120]
PaintableWithLines (BlockContainer<UL>) [8,16 784x104.8125]
PaintableWithLines (ListItemBox<LI>) [48,16 744x17.46875]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,16.234375 12x17]
PaintableWithLines (ListItemBox<LI>) [48,33.46875 744x17.46875]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,33.703125 12x17]
PaintableWithLines (ListItemBox<LI>) [48,50.9375 744x17.46875]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,51.171875 12x17]
PaintableWithLines (ListItemBox<LI>) [48,68.40625 744x17.46875]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,68.640625 12x17]
PaintableWithLines (ListItemBox<LI>) [48,85.875 744x17.46875]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,86.109375 12x17]
PaintableWithLines (ListItemBox<LI>) [48,103.34375 744x17.46875]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [304,103.578125 12x17]

13
Tests/LibWeb/Layout/input/block-and-inline/list-markers-intruded-by-float.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html><style>
.box {
border: 10px solid black;
width: 200px;
height: 100px;
float: left;
margin-right: 100px;
}
li {
background-color: chartreuse;
}
</style><div class="box"></div><ul><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>

4
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

@ -1084,7 +1084,9 @@ void BlockFormattingContext::layout_list_item_marker(ListItemBox const& list_ite
list_item_state.set_content_width(list_item_state.content_width() - final_marker_width);
}
marker_state.set_content_offset({ -final_marker_width, max(CSSPixels(0), (CSSPixels(marker.line_height()) - marker_state.content_height()) / 2) });
auto offset_y = max(CSSPixels(0), (CSSPixels(marker.line_height()) - marker_state.content_height()) / 2);
auto space_and_containing_margin = intrusion_by_floats_into_box(list_item_box, offset_y);
marker_state.set_content_offset({ space_and_containing_margin.left - final_marker_width, offset_y });
if (marker_state.content_height() > list_item_state.content_height())
list_item_state.set_content_height(marker_state.content_height());