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: Respect margin boxes when center-aligning flex items

Browse source
This commit is contained in:
Lukas Scheller 2025-03-04 17:36:07 +01:00 • committed by Andreas Kling
commit ce93088a81
Notes: github-actions[bot] 2025-03-05 17:08:08 +00:00
3 changed files with 31 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1476,7 +1476,9 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after;
break;
case CSS::AlignItems::Center:
item.cross_offset = -(item.cross_size.value() / 2);
// https://drafts.csswg.org/css-flexbox/#align-items-property
// The flex item’s margin box is centered in the cross axis within the line
item.cross_offset = (-item.cross_size.value() + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after) / 2;
break;
default:
break;

11
Tests/LibWeb/Layout/expected/flex/align-center-margin.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x216 [BFC] children: not-inline
Box <body> at (8,8) content-size 784x200 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (8,58) content-size 100x100 flex-item [BFC] children: not-inline
BlockContainer <span> at (108,108) content-size 100x100 flex-item [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x216]
PaintableBox (Box<BODY>) [8,8 784x200]
PaintableWithLines (BlockContainer<DIV>) [8,58 100x100]
PaintableWithLines (BlockContainer<SPAN>) [108,108 100x100]

17
Tests/LibWeb/Layout/input/flex/align-center-margin.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html><style>
body {
display: flex;
align-items: center;
}
div {
width: 100px;
height: 100px;
background-color: red;
}
span {
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
}
</style><body><div></div><span></span>