mirror of
https://github.com/RGBCube/serenity
synced 2025-06-01 03:18:11 +00:00
5af02a914c
Until now, we had implemented flex container sizing by awkwardly doing exactly what the spec said (basically having FFC size the container) despite that not really making sense in the big picture. (Parent formatting contexts should be responsible for sizing and placing their children) This patch moves us away from the Flexbox spec text a little bit, by removing the logic for sizing the flex container in FFC, and instead making sure that all formatting contexts can set both width and height of flex container children. This required changes in BFC and IFC, but it's actually quite simple! Width was already not a problem, and it turns out height isn't either, since the automatic height of a flex container is max-content. With this in mind, we can simply determine the height of flex containers before transferring control to FFC, and everything flows nicely. With this change, we can remove all the virtuals and FFC logic for negotiating container size with the parent formatting context. We also don't need the "available space for flex container" stuff anymore either, so that's gone as well. There are some minor diffs in layout test results from this, but the new results actually match other browsers more closely, so that's fine. This should make flex layout, and indeed layout in general, easier to understand, since this was the main weird special case outside of BFC/IFC where a formatting context delegates work to its parent instead of the other way around. :^)
11 lines
671 B
Text
11 lines
671 B
Text
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|
BlockContainer <html> at (1,1) content-size 798x69.984375 [BFC] children: not-inline
|
|
Box <body> at (10,10) content-size 780x51.984375 flex-container(row) [FFC] children: not-inline
|
|
ImageBox <img> at (11,11) content-size 64x49.984375 flex-item children: not-inline
|
|
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
|
TextNode <#text>
|
|
|
|
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
|
PaintableWithLines (BlockContainer<HTML>) [0,0 800x71.984375]
|
|
PaintableBox (Box<BODY>) [9,9 782x53.984375]
|
|
ImagePaintable (ImageBox<IMG>) [10,10 66x51.984375]
|