diff options
| author | Andreas Kling <kling@serenityos.org> | 2023-01-06 21:05:18 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-01-06 21:12:55 +0100 |
| commit | 80ce0419b6085c670171f6394c2ca68f67c25ea2 (patch) | |
| tree | b849b52796fe0bf91f22e288a747695791e22872 /Base | |
| parent | 6d54e5ce9af5223f7b055383b666944856a3f2df (diff) | |
| download | serenity-80ce0419b6085c670171f6394c2ca68f67c25ea2.zip | |
LibWeb: Fix abspos flex container with height:auto getting zero height
When laying out abspos boxes, we compute the height twice: before and
after the inside of the box has been laid out.
The first pass allows percentage vertical values inside the box to be
resolved against the box's height. The second pass resolves the final
used value for the height of the box itself.
In cases where the box height depends on the results of inside layout,
we were incorrectly setting the box to having a definite zero height.
This led to incorrect results when sizing an abspos flex container,
since the FFC sizes containers (in row layouts) based on whether the
container has a definite height.
To avoid this problem, this patch adds an enum so we can differentiate
between the two abspos height computation passes. If the first pass
discovers a dependency on the inside layout, we simply bail out of
computing the height, leaving it as indefinite. This allows the FFC
to size its container correctly, and the correct height gets set by
the second pass.
Diffstat (limited to 'Base')
| -rw-r--r-- | Base/res/html/tests/abspos-flexbox-with-auto-height.html | 12 |
1 files changed, 12 insertions, 0 deletions
diff --git a/Base/res/html/tests/abspos-flexbox-with-auto-height.html b/Base/res/html/tests/abspos-flexbox-with-auto-height.html new file mode 100644 index 0000000000..0eb5ce9ce3 --- /dev/null +++ b/Base/res/html/tests/abspos-flexbox-with-auto-height.html @@ -0,0 +1,12 @@ +<!DOCTYPE html><html><head><style> + * { + border: 1px solid black; + } + nav { + position: absolute; + display: flex; + } + .item { + background: lime; + } +</style></head><body><nav><div class=item>This should have a green background.</div></nav></body></html> |