RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 08:37:46 +00:00
Code Issues Activity Actions

LibWeb: Fix box alignment when it has min-width or max-width in GFC

Browse source 
Changing `try_compute_width()` to return width and margins, instead of
mutating them in the box's state makes it works in cases when box has
min-width or max-width and this function needs to be called multiple
times.

Fixes https://github.com/SerenityOS/serenity/issues/21598
This commit is contained in:
Aliaksandr Kalenik 2023-10-26 21:58:36 +02:00 • committed by Andreas Kling
parent 895ec6ad09
commit d1a01c4c65
3 changed files with 75 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/grid/item-with-min-width-and-place-self-start.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 800x216 [BFC] children: not-inline
Box <body> at (8,8) content-size 784x200 [GFC] children: not-inline
Box <section> at (8,8) content-size 784x200 flex-container(row) [FFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x216]
PaintableBox (Box<BODY>) [8,8 784x200]
PaintableBox (Box<SECTION>) [8,8 784x200]

20
Tests/LibWeb/Layout/input/grid/item-with-min-width-and-place-self-start.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html><style>
* {
outline: 1px solid black !important;
}
html {
background: white;
}
body {
display: grid;
background: wheat;
}
section {
display: flex;
width: 100%;
min-width: 500px;
place-self: start;
background: pink;
height: 200px;
}
</style><body><section>