RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-10-31 15:12:45 +00:00
Code Issues Activity Actions

LibWeb: Account for margin and padding of justified abspos flex items

Browse source
This commit is contained in:
implicitfield 2024-03-03 14:03:58 +04:00 • committed by Andreas Kling
parent 3888a91c5b
commit 54d8e58a68
3 changed files with 49 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

16
Tests/LibWeb/Layout/expected/abspos-flex-margin-limits-2.txt Normal file
View file

@ -0,0 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x0 children: inline
Box <div.container> at (8,8) content-size 100x100 positioned flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.top-right> at (48,18) content-size 50x50 positioned [BFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x16]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
PaintableBox (Box<DIV>.container) [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>.top-right) [38,8 70x70]

23
Tests/LibWeb/Layout/input/abspos-flex-margin-limits-2.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<style>
.container {
position: absolute;
width: 100px;
height: 100px;
background: red;
display: flex;
justify-content: end;
}
.top-right {
position: absolute;
width: 50px;
height: 50px;
margin-left: 500px;
background: green;
border: 5px solid black;
padding: 5px;
}
</style>
<div class="container">
<div class="top-right"></div>
</div>

12
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -2110,6 +2110,10 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
return length_percentage.to_px(box, m_flex_container_state.content_width()); return length_percentage.to_px(box, m_flex_container_state.content_width());
}; };
auto main_to_px = [&](CSS::LengthPercentage const& length_percentage) -> CSSPixels {
return length_percentage.to_px(box, m_flex_container_state.content_width());
};
auto const& box_state = m_state.get(box); auto const& box_state = m_state.get(box);
CSSPixels cross_margin_before = is_row_layout() ? cross_to_px(box.computed_values().margin().top()) : cross_to_px(box.computed_values().margin().left()); CSSPixels cross_margin_before = is_row_layout() ? cross_to_px(box.computed_values().margin().top()) : cross_to_px(box.computed_values().margin().left());
CSSPixels cross_margin_after = is_row_layout() ? cross_to_px(box.computed_values().margin().bottom()) : cross_to_px(box.computed_values().margin().right()); CSSPixels cross_margin_after = is_row_layout() ? cross_to_px(box.computed_values().margin().bottom()) : cross_to_px(box.computed_values().margin().right());
@ -2117,8 +2121,12 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
CSSPixels cross_border_after = is_row_layout() ? box.computed_values().border_bottom().width : box.computed_values().border_right().width; CSSPixels cross_border_after = is_row_layout() ? box.computed_values().border_bottom().width : box.computed_values().border_right().width;
CSSPixels cross_padding_before = is_row_layout() ? cross_to_px(box.computed_values().padding().top()) : cross_to_px(box.computed_values().padding().left()); CSSPixels cross_padding_before = is_row_layout() ? cross_to_px(box.computed_values().padding().top()) : cross_to_px(box.computed_values().padding().left());
CSSPixels cross_padding_after = is_row_layout() ? cross_to_px(box.computed_values().padding().bottom()) : cross_to_px(box.computed_values().padding().right()); CSSPixels cross_padding_after = is_row_layout() ? cross_to_px(box.computed_values().padding().bottom()) : cross_to_px(box.computed_values().padding().right());
CSSPixels main_margin_before = is_row_layout() ? main_to_px(box.computed_values().margin().left()) : main_to_px(box.computed_values().margin().top());
CSSPixels main_margin_after = is_row_layout() ? main_to_px(box.computed_values().margin().right()) : main_to_px(box.computed_values().margin().bottom());
CSSPixels main_border_before = is_row_layout() ? box.computed_values().border_left().width : box.computed_values().border_top().width; CSSPixels main_border_before = is_row_layout() ? box.computed_values().border_left().width : box.computed_values().border_top().width;
CSSPixels main_border_after = is_row_layout() ? box.computed_values().border_right().width : box.computed_values().border_bottom().width; CSSPixels main_border_after = is_row_layout() ? box.computed_values().border_right().width : box.computed_values().border_bottom().width;
CSSPixels main_padding_before = is_row_layout() ? main_to_px(box.computed_values().padding().left()) : main_to_px(box.computed_values().padding().top());
CSSPixels main_padding_after = is_row_layout() ? main_to_px(box.computed_values().padding().right()) : main_to_px(box.computed_values().padding().bottom());
switch (alignment_for_item(box)) { switch (alignment_for_item(box)) {
case CSS::AlignItems::Baseline: case CSS::AlignItems::Baseline:
@ -2172,12 +2180,12 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
case CSS::JustifyContent::SpaceAround: case CSS::JustifyContent::SpaceAround:
case CSS::JustifyContent::SpaceEvenly: case CSS::JustifyContent::SpaceEvenly:
pack_from_end = false; pack_from_end = false;
main_offset = (inner_main_size(m_flex_container_state) - inner_main_size(box_state) - main_border_before - main_border_after) / 2; main_offset = (inner_main_size(m_flex_container_state) - inner_main_size(box_state) - main_margin_before - main_margin_after - main_border_before - main_border_after - main_padding_before - main_padding_after) / 2;
break; break;
} }
if (pack_from_end) if (pack_from_end)
main_offset += inner_main_size(m_flex_container_state) - inner_main_size(box_state) - main_border_before - main_border_after; main_offset += inner_main_size(m_flex_container_state) - inner_main_size(box_state) - main_margin_before - main_margin_after - main_border_before - main_border_after - main_padding_before - main_padding_after;
auto static_position_offset = is_row_layout() ? CSSPixelPoint { main_offset, cross_offset } : CSSPixelPoint { cross_offset, main_offset }; auto static_position_offset = is_row_layout() ? CSSPixelPoint { main_offset, cross_offset } : CSSPixelPoint { cross_offset, main_offset };