search

LadybirdBrowser / ladybird

Truly independent web browser
https://ladybird.org
BSD 2-Clause "Simplified" License
22.4k stars 998 forks source link

Images stretch to full height of center aligned flexbox #1862

Open joekohlsdorf opened 1 month ago

joekohlsdorf commented 1 month ago

This doesn't happen when explicitly specifying the height of the image element. Width doesn't seem to be affected.

Minimal HTML to reproduce:

<div style="
display:flex;
align-items:center;
height:200px;
border:1px solid black;">
<img src="https://ladybird.org/assets/img/ladybird_favicon.png">

Screenshot (top Ladybird, bottom Chromium): Screenshot_20241018_231752

samu698 commented 1 month ago

This bug seems to happen during step 7 of the flex layout algorithm

  1. Determine the hypothetical cross size of each item by performing layout with the used main size and the available space, treating auto as fit-content.

This is the code responsible for the bug the if statement fixes the problem but breaks other tests. https://github.com/LadybirdBrowser/ladybird/blob/00c45243bd62f45f402aa5e6d0d12d53591904c1/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp#L1100-L1107