Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LibWeb: Size of image in <img> src not respected #24391

Open
shannonbooth opened this issue May 20, 2024 · 1 comment
Open

LibWeb: Size of image in <img> src not respected #24391

shannonbooth opened this issue May 20, 2024 · 1 comment
Labels
bug Something isn't working reduction-of-web-content Issue has a simplified reduction based on real-world web content.

Comments

@shannonbooth
Copy link
Member

shannonbooth commented May 20, 2024

Seen on google products page: https://about.google/intl/ALL_nz/products/

image

Reduced HTML (can most definitely be reduced a bit further):

<style>                                                                                                                                                                                     

:root{--sf-img-19: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAMU0lEQVR42uxdC3BU1Rk+mGzCQ6iotCKIgBRGxgLZu3cTILLZB5C2aMhulqJMediWgpVS206rTNvY5kEkSqXqFJAWAcluVgQKJZhNKBYYyqjUsbWV8VFbSMLuJoFksyEkwJ7+f5h0LEtC7rL37N0955v5hmGGwO79vnv+570QAQEBAQEBAYFkQUPutBEBm8HUaDUsD1gNZX6r7PKb5cN+q/QPn1mu91mloM8qdwHD8PsrAbN80WeWWn0WuaH7z1gNR+DnPH6r4Tn42VV+mzy3yWQcTQS0B+qcnBawGB8MWAxr/GbDfhQxYJWpGgSztAQsUi2YoiRgNX69ccaMoUSAPQJz9SNB6BUoONy9IRQnHoST5FLAIh+Dk+LpRrNhEhFQDy3Z2cPhzlsJgh/FoxsF0BoxfKAZmixZo4hAbAB3+Qy/xbAzYJU68CInAjGvAJMeAMPmUkIGEAFloIXkFr9FKoDE7W28oIlMMMIpv0VeSk2mVCLQN/Bugez7GxDfP2QgDluapX+hEdDcRCASjWajBY7OvzIWhj3N8t/8ZuMcInAV52zSGIjvu/HicEWLvAt7C1zHeRD+yZ4yjlO2YTnLX2ZvypgAMfE4XgRBpKEaexu8lHXL0PlC9IiQEEjq3OB0VtYgaNdu417ovkvGMFyjQqyGki7Rwwyfd4GVJIhnZ08ZQpIBMJGTIdnzcS+qQmITDKeaJJGBEzPI8tt5FzN6Sh8kbAcRsvxHcFomRIyOuKOAN1BiZvpW42IciHAvIo/iQxa7UIjPqfj4wcWxz6n4mO2LhI9T8bHOF6Uep+LXz5MGw6Lke9yLyKP4CPgS2xOwvr4AvzZCs+U/uKgBeUsdzieE+IrFNzymcbEbcTcP++uwtfuwz5I5pSnXOIz0go9yJ6T7rIbxOJSBn/mB3yy9Bmb5TIh/PfFtmV/GWb4md/CshuKzOfrMWA1V0BRgiNU4whbiA6jTmQIX5C8a6pt3BsyGV/02KZtByJsIu33r8ekifsSPnOn/WCux3GcxbIjHHv5509TbYO37GcwduBK/wZxxrxbqfZ9FqmyeY7iHxBmQV3wJ9xx4EL8n8dsTZ/H/jRvERGPAxBGriaQW32eTrfEUH+N8dxavUdRZ5TsgUTyYlOJjRo0Nn7gleRb52wmz7WyR1yWV+Ah8YidetTw+H5h4I3F5VdKIj65uf3XYqUb71CuMH7Ksb7Jl3k8E4ovLh9Kcl2p1tOvAQHp+5SRWz96fwQYMEYg/QPx3gLSbNTraVjyaBmwGFWO+1CzufI2gqzp1Jgp/LTu23E6bHpqmSo8c2rnTiYBGDFCbuhMFvx479wym5xZPjq0BbPJ3iIA2QI+S4Z21uosodq+sTqOtPxkbq9buViKgqbt/BYrcH7ZvGEEbc6Wb6vCJt25pDJDwHUNx+8uLrqG0acGUqAyAXUYioB2EaweN6vTqwkoM0FMqtnxvoiLx8SVQREBb6KpJfRwFjZah0lE0MNvQn7jfgUulREBb6KzRHUAhb4YdW4fTpry+S0XsmxMBbYF6SBpk/+0o4s2ycy+Uikvv77Xm95vku4iA5o7/bBQvZvRCqbjm3uvEfnkTEdBk+bcGhYs121+6kzZ+Tf8/A+CWLhHQHuD434+CqcHOyltp88KvUP+8aWeIgDYB5d9ZFEstdh1Mp61ld5cQAe0hXE2+iCKpzfDhQaOJBmApCdEk58sKR78pZtUN4E15nwCEAdSnuSR0WGkC+F3VDVCje0EYgA1zioP1yk4Ar+5ZtQ2AG0bCAOyY9Xx4UP9PAG+qS20DdNSkjxcGYEfzr1onKZkA/llN8bHDSCkZIAzAjuaiNouSJPCf6p4AKX8nAGEAlolg26NKmkANqp4AXl2VMABzA6xS0gQKqmkAqDK2CQMw5y+UGOCSyiXgi8IAjFkcLFdigLDKBnhOGIAtc0pCLwoDcB0C2jaJEMB1CGjbLJLAPgwgBkIsy8Ba3UFhAOY5wK9FI4jvPkCZdlrBXt0FfN+AMABTrtHWMOhQ+n3CAAxZ3L5CW+Ngr26BMADTELBAwUq4bjmDlbANwgAsk8CgSUEOkJKDIqmdCAoDsKN1bUf/9y/CVWQEi6VQWjNwjDAAAxYFw85CmkYAmukFtFWnd63fN/VJogHkFAUvxpUlwSsqH/910Twatk8t8T+uvp06Xp9LDe7894kAgTbtCZW3gmuiMcDTaohfdWAsfbAyD8R3XGWFI4NwjNwN4XRLSbBD3RIw9Juo3gwW4yVQuu4PGSj6/9Nlf4VwDMzOVS8Bi9uXE6Wg7xId5AGhWIjf4B1Kl71hRsEjWZHfmVHx8N2EU8CYdp36FUAoI24PiJ44OJLO8cxDsfvi8/waIPSJyhXABVMhTVX5DWGR7AL+ft9kanTbbyQ+5gEXM115YwlnsBUFs1VvABWFjpBoET5IRkazHXS+ZjD94e6ZKG6/KbkdbsIZIDt3M2gBP0OUI/rJ4KnqO+j813NRVMXUuxxzuBG/qOU+6AFcZtACnkkioNKDovv+OI5mu+ejmFFR73acNu5YNIyP2j+4ncESSGtE/FcKWkO+gPP7voS/UJtOS/dKEYJGaYLtJMlhLW2XsT3LoA1cEasXRm3vTfw6KPEW77L0KaryUGBfSZIU0iaqg2P5JJs5QLAgNgbwpmZdT/xjVaOorafEiyGxNyB5nNlJ2vYtYjL+LWoLzS4PD4nlO4NPfL7E27TvgZ4STyXaz8Gs4IGk6voVh+bi4IfR3b8txi+NTnOg+M3eIfT7u7NRJNUpVeTXZVQWTCBJABBkMtTkLczm/0VtOSSWwOf5j1eN/PQhz1dRHGbUV+SfTfSTYHZRxzgcybKb/4c+BsEGxD6BcRc4e4RhbIJm2W2flZgZf+tEc0nwNOOngJ4gqgBOAZjevYuisGd+l1TpWJForV449psYbwCd707+1ILkcuSwFD4yL7C/NnVP3m0JMOVbDbV+Vxy2f4uJ2oCW7a44mgCbRWf0bvtcokEYXHn3zPztjjdRDNbEJDN7bctwojaMO/JHQ63ehmLEl/a9xsqCcUQDMG1dMhBOx5/2XJfpW9ZRc2kz27u/uO2XDJ1uX81O6L5HyfBZNuI4OV7CG9wFj+OpdO1nM25fRXPKP2FkgGCDqdB/K2GGwsJb4MIf7U0Y9pWC45K+wu6SXQ4rYfAKOtk1fyKcQGXAxr4NuojO2vCW+nV/aWgJ+3i30z4eLnxQgVCscoRPJbe9HEtHp8eZEivDyxUOA/y9P4NT56TSzzRz4yvUUtqqVtv3eETdzzAUfJOpwMrnCi2SO78W4nMp9jG6Rdz5yJ2kF0z2ONO6cxyXY4a+0rEEfn0WTF6jd+e33uxnydy6hprL6mM97+/ELiOJJ/Su/N/FQCz2IeOqqA24hwD0Qa8hpPa/K+/8Fp21/r0YJn6hn2sjA3bnv4NfULAfdC2g2S+9EYuW7zGnh6YQLSCrsmAU3k3ci6uA07eUUfPa5mjFP2cruzCGaAlwpOqxDuZdWCXMhFLRVP6R0rh/BbL+eUSLwA4dLnTwLqwSyhWPQqn4JyXP+j1FtAyY4xfABO8y78Iq5YyNm7FUZLDowQDQHVsoTKCcWVufglKxrrdW7/6ILV+tnwQiHERTKj5GTetPXpv0vdX9374kGvBhD5EYRlkqvuzpMcCheYV0MElU4DsA4EvVcy9qFJy++YUqBnc+mz4BdN/e5l1QJZRc9s2mwyYGMZ9hxxBfCMG7sDciJs9QTv+IJCtkd8Ei7MPzLnQvw6sAGMBCkh24wAHDlyPcC/55uhxvyh7nXYQbUDIAhkiruK8S4PtDvH8CrwfhEd3zd7fdw6cB7Pslj3MMESAEN3g4Git/KFfk5xKByLAAd4UDksQPkrK0czs+gzb5su5VNYEb5AcuRx7ExuPJIDwaWnbZl0qbluuIgDJAtfDfds4YBWEgiKLp7Sw8RhB1C48REqwsPYAIFh7AI9hLLGIKPUJaD2DlMSzESvG/XEGiUf6DJalCILMzfyYzG0ZFslVF8fZrbWdqIj1QDq8FnnkPzg8a7LOZDKGSUTzaq+rTk95vXqd0phniPOlhDEwH0Zr+7TQONc/wKqNhkfks1MtDmY1VZl5KZB3p8m1wdz/1/AtDKNInC8KTBV07fz51OWcIL6E4vB4WyY75AHmLMwbCvICE2Z1QwuJe68qBFKRouHG8iz7yRtdVKNOJXHo/zqedyBhjjDHmD3gB0+QAtrozodAAAAAASUVORK5CYII=");

</style>

<style>
    .medium-tile--icon-wrapper {
        align-items: center;
        background-color: #f8f9fa;
        border-radius: 50%;
        display: flex;
        height: 200px;
        justify-content: center;
    }

</style>
<div class="medium-tile--icon-wrapper">
<img
     src='data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20width="128"%20height="128"%3E%3Crect%20fill-opacity="0"/%3E%3C/svg%3E'
     style="
        background-image: var(--sf-img-19) !important;
        background-size: 100% 100% !important;
"
>

Ladybird:
image

Chrome:
image

I haven't properly investigated yet, but it seems that the issue is that we're not respecting the size image specified in the src attribute.

@shannonbooth shannonbooth added bug Something isn't working reduction-of-web-content Issue has a simplified reduction based on real-world web content. labels May 20, 2024
@trflynn89
Copy link
Member

trflynn89 commented May 22, 2024

Seems to be caused by this bit of code here:

// AD-HOC: This is not mentioned in the spec, but if the item has an aspect ratio,
// we may need to adjust the main size in these ways:
// - using stretch-fit main size if the flex basis is indefinite.
// - in response to cross size min/max constraints.
if (item.box->has_preferred_aspect_ratio()) {
if (!item.used_flex_basis_is_definite) {
item.flex_base_size = inner_main_size(m_flex_container_state);
}
item.flex_base_size = adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(child_box, item.flex_base_size, computed_cross_min_size(child_box), computed_cross_max_size(child_box));
}

If I comment that out, the flex_base_size remains 128, and we get the following result:
Screenshot 2024-05-22 at 12 39 47 PM

(the height is still wrong, but I was mostly just tracing the width)

CC @awesomekling, that block of code seems to come from commits 0c26717 and a61f09a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working reduction-of-web-content Issue has a simplified reduction based on real-world web content.
Projects
No open projects
Status: No status
Development

No branches or pull requests

2 participants