LibWeb: Compute inset for relative positioned inline-block

This commit is contained in:
Emil Militzer 2023-04-28 11:44:21 +02:00 committed by Andreas Kling
parent 62bc8590ad
commit a8d08357c9
3 changed files with 31 additions and 0 deletions

View file

@ -0,0 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x36 children: not-inline
BlockContainer <body> at (8,8) content-size 784x20 children: inline
line 0 width: 352.34375, height: 20, bottom: 20, baseline: 13.53125
frag 0 from TextNode start: 0, length: 14, rect: [8,8 112.421875x17.46875]
"text text text"
frag 1 from BlockContainer start: 0, length: 0, rect: [120,8 110.375x20]
frag 2 from TextNode start: 0, length: 16, rect: [231,8 129.546875x17.46875]
"more inline text"
TextNode <#text>
BlockContainer <span.displaced_text> at (150,48) content-size 110.375x20 positioned inline-block children: inline
line 0 width: 110.375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 14, rect: [150,48 110.375x17.46875]
"displaced text"
TextNode <#text>
TextNode <#text>

View file

@ -0,0 +1,14 @@
<style>
body {
font-family: 'SerenitySans';
}
.displaced_text {
height: 20px;
top: 40px;
left: 30px;
display: inline-block;
position: relative;
}
</style>text text text<span class="displaced_text">displaced text</span>more inline text

View file

@ -256,6 +256,7 @@ void InlineFormattingContext::generate_line_boxes(LayoutMode layout_mode)
break;
case InlineLevelIterator::Item::Type::Element: {
auto& box = verify_cast<Layout::Box>(*item.node);
compute_inset(box);
line_builder.break_if_needed(item.border_box_width());
line_builder.append_box(box, item.border_start + item.padding_start, item.padding_end + item.border_end, item.margin_start, item.margin_end);
break;