RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:17:34 +00:00
Code Issues Activity Actions

LibWeb: Fix flex & abspos alignment issues

Browse source 
Fixes a couple of weirder interactions between justify-content and
flex-direction related to reverse direction packing and how margins
are set.
This commit is contained in:
Sebastian Zaha 2023-07-10 17:52:43 +02:00 • committed by Andreas Kling
parent e1cf868e6e
commit 17d23e76e5
2 changed files with 27 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

40
Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-justify-content.txt
View file

@ -68,33 +68,33 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (38,758) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,758) content-size 724x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.row.reverse.outer.start> at (53,773) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline Box <div.row.reverse.outer.start> at (53,773) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (218,788) content-size 150x50 positioned [BFC] children: inline BlockContainer <div> at (68,788) content-size 150x50 positioned [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [218,788 41.234375x17.46875] frag 0 from TextNode start: 0, length: 5, rect: [68,788 41.234375x17.46875]
"start" "start"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (38,848) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,848) content-size 724x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.row.reverse.outer.flex-start> at (53,863) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline Box <div.row.reverse.outer.flex-start> at (53,863) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (218,878) content-size 150x50 positioned [BFC] children: inline BlockContainer <div> at (188,878) content-size 150x50 positioned [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [218,878 76.8125x17.46875] frag 0 from TextNode start: 0, length: 10, rect: [188,878 76.8125x17.46875]
"flex-start" "flex-start"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (38,938) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,938) content-size 724x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.row.reverse.outer.end> at (53,953) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline Box <div.row.reverse.outer.end> at (53,953) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (38,968) content-size 150x50 positioned [BFC] children: inline BlockContainer <div> at (188,968) content-size 150x50 positioned [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [38,968 26.1875x17.46875] frag 0 from TextNode start: 0, length: 3, rect: [188,968 26.1875x17.46875]
"end" "end"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (38,1028) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,1028) content-size 724x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.row.reverse.outer.flex-end> at (53,1043) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline Box <div.row.reverse.outer.flex-end> at (53,1043) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (38,1058) content-size 150x50 positioned [BFC] children: inline BlockContainer <div> at (68,1058) content-size 150x50 positioned [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [38,1058 61.765625x17.46875] frag 0 from TextNode start: 0, length: 8, rect: [68,1058 61.765625x17.46875]
"flex-end" "flex-end"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (38,1118) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,1118) content-size 724x0 children: inline
@ -116,9 +116,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (38,1298) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,1298) content-size 724x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.row.reverse.outer.space-between> at (53,1313) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline Box <div.row.reverse.outer.space-between> at (53,1313) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,1328) content-size 150x50 positioned [BFC] children: inline BlockContainer <div> at (188,1328) content-size 150x50 positioned [BFC] children: inline
line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [68,1328 115.515625x17.46875] frag 0 from TextNode start: 0, length: 13, rect: [188,1328 115.515625x17.46875]
"space-between" "space-between"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (38,1388) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,1388) content-size 724x0 children: inline
@ -196,33 +196,33 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (38,2198) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,2198) content-size 724x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.column.reverse.outer.start> at (53,2213) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline Box <div.column.reverse.outer.start> at (53,2213) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2238) content-size 150x50 positioned [BFC] children: inline BlockContainer <div> at (68,2228) content-size 150x50 positioned [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [68,2238 41.234375x17.46875] frag 0 from TextNode start: 0, length: 5, rect: [68,2228 41.234375x17.46875]
"start" "start"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (38,2288) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,2288) content-size 724x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.column.reverse.outer.flex-start> at (53,2303) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline Box <div.column.reverse.outer.flex-start> at (53,2303) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2328) content-size 150x50 positioned [BFC] children: inline BlockContainer <div> at (68,2298) content-size 150x50 positioned [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [68,2328 76.8125x17.46875] frag 0 from TextNode start: 0, length: 10, rect: [68,2298 76.8125x17.46875]
"flex-start" "flex-start"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (38,2378) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,2378) content-size 724x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.column.reverse.outer.end> at (53,2393) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline Box <div.column.reverse.outer.end> at (53,2393) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2378) content-size 150x50 positioned [BFC] children: inline BlockContainer <div> at (68,2388) content-size 150x50 positioned [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [68,2378 26.1875x17.46875] frag 0 from TextNode start: 0, length: 3, rect: [68,2388 26.1875x17.46875]
"end" "end"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (38,2468) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,2468) content-size 724x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.column.reverse.outer.flex-end> at (53,2483) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline Box <div.column.reverse.outer.flex-end> at (53,2483) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2468) content-size 150x50 positioned [BFC] children: inline BlockContainer <div> at (68,2498) content-size 150x50 positioned [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [68,2468 61.765625x17.46875] frag 0 from TextNode start: 0, length: 8, rect: [68,2498 61.765625x17.46875]
"flex-end" "flex-end"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (38,2558) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,2558) content-size 724x0 children: inline
@ -244,9 +244,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (38,2738) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,2738) content-size 724x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.column.reverse.outer.space-between> at (53,2753) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline Box <div.column.reverse.outer.space-between> at (53,2753) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2768) content-size 150x50 positioned [BFC] children: inline BlockContainer <div> at (68,2748) content-size 150x50 positioned [BFC] children: inline
line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [68,2768 115.515625x17.46875] frag 0 from TextNode start: 0, length: 13, rect: [68,2748 115.515625x17.46875]
"space-between" "space-between"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (38,2828) content-size 724x0 children: inline BlockContainer <(anonymous)> at (38,2828) content-size 724x0 children: inline

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

@ -2193,18 +2193,17 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
CSSPixels main_offset = 0; CSSPixels main_offset = 0;
switch (flex_container().computed_values().justify_content()) { switch (flex_container().computed_values().justify_content()) {
case CSS::JustifyContent::Start: case CSS::JustifyContent::Start:
pack_from_end = false;
break;
case CSS::JustifyContent::FlexStart: case CSS::JustifyContent::FlexStart:
main_offset = 0; case CSS::JustifyContent::SpaceBetween:
pack_from_end = is_direction_reverse(); pack_from_end = is_direction_reverse();
break; break;
case CSS::JustifyContent::End: case CSS::JustifyContent::End:
case CSS::JustifyContent::FlexEnd: pack_from_end = true;
main_offset = -main_border_before - main_border_after;
pack_from_end = !is_direction_reverse();
break; break;
case CSS::JustifyContent::SpaceBetween: case CSS::JustifyContent::FlexEnd:
pack_from_end = false; pack_from_end = !is_direction_reverse();
main_offset = 0;
break; break;
case CSS::JustifyContent::Center: case CSS::JustifyContent::Center:
case CSS::JustifyContent::SpaceAround: case CSS::JustifyContent::SpaceAround:
@ -2223,7 +2222,7 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
} }
if (pack_from_end) if (pack_from_end)
main_offset += inner_main_size(flex_container()) - inner_main_size(box); main_offset += inner_main_size(flex_container()) - inner_main_size(box) - main_border_before - main_border_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 };