0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Make align-items: normal behave like stretch on flex items

Browse source 
CSS-ALIGN-3 tells us that `normal` behavior inside flex containers is
simply to behave as `stretch` so this patch makes them behave the same
inside FFC.

Furthermore, we change the `align-items` initial value to `normal`,
matching other engines.
This commit is contained in:
Andreas Kling 2023-08-20 16:39:49 +02:00
parent d05be0d504
commit 90e95d38d7
Notes: sideshowbarker 2024-07-17 00:16:31 +09:00
4 changed files with 26 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/flex/align-items-normal.txt Normal file
View file

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

12
Tests/LibWeb/Layout/input/flex/align-items-normal.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html><style>
body {
display: flex;
flex-direction: column;
align-items: normal;
}
div {
width: 100px;
height: 100px;
background: orange;
}
</style><body><div></div>

2
Userland/Libraries/LibWeb/CSS/Properties.json
View file

@ -18,7 +18,7 @@
},
"align-items": {
"inherited": false,
"initial": "stretch",
"initial": "normal",
"valid-types": [
"align-items"
]

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

@ -1246,7 +1246,8 @@ void FlexFormattingContext::determine_used_cross_size_of_each_flex_item()
// If a flex item has align-self: stretch, its computed cross size property is auto,
// and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line,
// clamped according to the item’s used min and max cross sizes.
if (alignment_for_item(item.box) == CSS::AlignItems::Stretch
auto flex_item_alignment = alignment_for_item(item.box);
if ((flex_item_alignment == CSS::AlignItems::Stretch || flex_item_alignment == CSS::AlignItems::Normal)
&& is_cross_auto(item.box)
&& !item.margins.cross_before_is_auto
&& !item.margins.cross_after_is_auto) {
@ -1503,6 +1504,7 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
case CSS::AlignItems::Start:
case CSS::AlignItems::FlexStart:
case CSS::AlignItems::Stretch:
case CSS::AlignItems::Normal:
item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before;
break;
case CSS::AlignItems::End:
@ -2069,7 +2071,7 @@ CSSPixels FlexFormattingContext::calculate_max_content_cross_size(FlexItem const
bool FlexFormattingContext::flex_item_is_stretched(FlexItem const& item) const
{
auto alignment = alignment_for_item(item.box);
if (alignment != CSS::AlignItems::Stretch)
if (alignment != CSS::AlignItems::Stretch && alignment != CSS::AlignItems::Normal)
return false;
// If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched.
auto const& computed_cross_size = is_row_layout() ? item.box->computed_values().height() : item.box->computed_values().width();