Commit graph

40 commits

Author SHA1 Message Date
Sam Atkins
ebc91686b5 LibWeb/Layout: Add FIXMEs where we're using the wrong font
It's not clear how to address these right now, so add a FIXME to make
them easier to find and address later.
2024-12-06 02:57:34 +01:00
Kostya Farber
81f8866606 LibWeb: Lay out the fieldset's rendered legend 2024-11-29 12:36:52 +00:00
Jeremia Dominguez
eafa70331d LibWeb/Layout: Simplified margin collapsing
Rather than accumulating margins into a vector, and then looping through
them when resolving the margin, it's much simpler to just update two
fields, and sum them when resolving.
2024-11-24 14:45:28 +01:00
Andreas Kling
fbe9395928 LibWeb: Stop treating intrinsic size keywords as auto in CSS heights
This commit introduces proper handling of three intrinsic size keywords
when used for CSS heights:

- min-content
- max-content
- fit-content

This necessitated a few plumbing changes, since we can't resolve these
values without having access to containing block widths.

This fixes some visual glitches on https://www.supabase.com/ as well
as a number of WPT tests. It also improves the appearance of dialogs.
2024-11-21 19:21:51 +01:00
Aliaksandr Kalenik
a8c1d12e84 LibWeb: Fix percentage insets resolution for grid items
compute_inset() was incorrectly retrieving the containing block size
because containing_block() is unaware of grid areas that form a
containing block for grid items but do not exist in the layout tree.
With this change, we explicitly pass the containing block into
compute_inset(), allowing it to correctly provide the containing block
sizes for grid items.
2024-11-11 20:20:39 +01:00
Aliaksandr Kalenik
07d8ddb5fa LibWeb: Reduce usage of Node::containing_block() in BFC
Explicitly pass containing block width in
resolve_vertical_box_model_metrics() instead of doing containing block
box lookup.

This is a part of refactoring towards removing containing_block() usage
that will allow us introduce partial layout.
2024-11-11 20:20:39 +01:00
Timothy Flynn
93712b24bf Everywhere: Hoist the Libraries folder to the top-level 2024-11-10 12:50:45 +01:00
Andreas Kling
13d7c09125 Libraries: Move to Userland/Libraries/ 2021-01-12 12:17:46 +01:00
Andreas Kling
0ecefbff57 LibWeb: Move absolute positioning up to FormattingContext
It seems like both BFC and IFC can have absolutely positioned children.
It's a bit strange, but consider the following HTML:

<html><body>foobar<img style="position: absolute"></body></html>

In such a document, the <img> element is an absolutely positioned child
of a block-level element (<body>) with no block-level children.
An IFC is established for <body>, and needs to handle layout for <img>.
2021-01-06 19:20:49 +01:00
Andreas Kling
5721b2a3da LibWeb: Rename LayoutStyle => CSS::ComputedValues
This object represents the CSS "computed values" so let's call it that.
2021-01-06 14:58:48 +01:00
Andreas Kling
bf3772362a LibWeb: When collapsing margins, consider border box heights
Empty boxes should be fully collapsed, but a box with border and/or
padding is not empty.

This fixes an issue where <hr> elements were getting weirdly collapsed
since they have zero content height (but some border height.)
2021-01-02 03:48:35 +01:00
Andreas Kling
07dd73c351 LibWeb: Remove hand-rolled is_foo() helpers in Layout::Node classes 2021-01-01 18:56:49 +01:00
Andreas Kling
b322452ef4 LibWeb: Silence BFC spam about not knowing how to place boxes
This gets way too noisy on some pages, and isn't even interesting.
2020-12-18 10:25:50 +01:00
Andreas Kling
2a5877b02c LibWeb: Fix shrink-to-fit layout for position:absolute
We were following the spec incorrectly. The comment was right, but the
code was wrong.
2020-12-17 01:47:42 +01:00
Andreas Kling
a5422a210f LibWeb: Use the correct containing block for position:absolute width 2020-12-17 01:46:51 +01:00
Andreas Kling
f35f605a24 LibWeb: Make sure the ICB is at least as tall as the viewport
This is a hack until we implement a proper overflow mechanism. For now,
this allows us to right-click below the lowest content on the page.
2020-12-17 00:58:23 +01:00
Andreas Kling
17c529e6c5 LibWeb: Generate the CSS::ValueID enum and its helper functions 2020-12-15 20:40:10 +01:00
Andreas Kling
b861de0a13 LibWeb: Use final box model metrics for absolute 'right' and 'bottom'
We've already converted these to floats, so no need to do it again.
2020-12-14 12:49:35 +01:00
Andreas Kling
d1479aef56 LibWeb: Layout absolutely positioned children *after* computing height
This is required for CSS "bottom" to work correctly on absolutely
positioned elements.
2020-12-14 11:33:11 +01:00
Andreas Kling
9d442ba606 LibWeb: Store layout box model metrics as floats
Instead of storing them as CSS::Lengths, we now store the resolved
values for margin/padding/border/offset top/right/bottom/left with
each Layout::NodeWithStyleAndBoxModelMetrics.

This simplifies a lot of code since it's no longer necessary to
resolve values before using them.
2020-12-12 21:28:29 +01:00
Andreas Kling
66e9dde86f LibWeb: Don't place floating boxes before everything else
Instead, just handle them as we go about laying out block-level boxes.
2020-12-12 19:31:46 +01:00
Andreas Kling
552ba1b0a3 LibWeb: Remove some unnecessary is_replaced() checks in BFC
BFC::compute_width() has a short-circuit path for replaced elements.
2020-12-11 22:59:46 +01:00
Andreas Kling
67732df034 LibWeb: Move replaced element layout out of Layout::ReplacedBox
Replaced elements are now laid out by the current formatting context.
Since the logic is almost identical in BFC and IFC, it's implemented
by static helpers in FormattingContext.
2020-12-11 22:59:46 +01:00
Andreas Kling
e8d6691470 LibWeb: Fix inline-block width computation with no specified width
Undefined width should be treated the same as width:auto;
2020-12-11 22:59:46 +01:00
Andreas Kling
be18ac36b2 LibWeb: Use CSS::Length::resolved_or_zero() in a few places 2020-12-07 20:46:01 +01:00
Andreas Kling
cb04a5c52c LibWeb: Forget floating boxes once we've gone past them
Once we've generated enough lines to make it past all the floating
boxes on either side, just forget those boxes. This simplifies the
available space computation since we don't have to consider boxes
that can't vertically intersect the current line anyway.
2020-12-06 21:11:28 +01:00
Andreas Kling
9470169317 LibWeb: Floating elements should not stack horizontally after clear
After we've cleared past some floating elements, we should not keep
stacking new floats horizontally.

Instead, new floats after the clear should once again start at the
left or right edge of their containing block.
2020-12-06 21:00:04 +01:00
Andreas Kling
59de4adb60 LibWeb: Pass current target box to BFC::run()
The BFC "context box" is now the outer box of the block formatting
context. Previously the context box was always the current target box,
which made it hard to reason about who was really the containing block
of whom in various places.

Note that IFC still has the containing block as its context box, this
change only affects BFC. However, to clarify the situation in IFC,
I've added a containing_block() getter than returns the context_box().
2020-12-06 20:05:04 +01:00
Andreas Kling
b638e74b68 LibWeb: Move box floatation out of normal flow layout
Layout of floating children now places the child in the normal flow and
then floats it left or right afterwards.
2020-12-06 20:05:04 +01:00
Andreas Kling
d582828040 LibWeb: Layout floating children per block instead of whole BFC at once
Instead of plowing through all the floating boxes within a BFC and
doing all the layout up front, do the children of each block as we go.
This will allow us to know the vertical position of the containing
block when placing floats.
2020-12-06 20:05:04 +01:00
Andreas Kling
6b4281c3aa LibWeb: Do floating box placement together with other boxes
I realized that we're supposed to float the boxes sideways, but not
always to y=0, so that makes it logical to share the placement logic
with other normal non-replaced blocks.

This is still pretty buggy but we're getting closer. :^)
2020-12-06 01:59:35 +01:00
Andreas Kling
af757a1659 LibWeb: Naively implement the CSS clear property
This is definitely not fully-featured, but basically we now handle
the clear property by forcing the cleared box below the bottom-most
floated box on the relevant side.
2020-12-06 01:45:51 +01:00
Andreas Kling
26a9ab7cd5 LibWeb: Floating boxes with width:auto should be shrink-to-fit 2020-12-06 01:16:45 +01:00
Andreas Kling
615a4d4f71 LibWeb: First slightly naive implementation of CSS floats :^)
Boxes can now be floated left or right, which makes text within the
same block formatting context flow around them.

We were creating way too many block formatting contexts. As it turns
out, we don't need one for every new block, but rather there's a set
of rules that determines whether a given block creates a new block
formatting context.

Each BFC keeps track of the floating boxes within it, and IFC's can
then query it to find the available space for line boxes.

There's a huge hack in here where we assume all lines are the exact
line-height. Making this work with vertically non-uniform lines will
require some architectural changes.
2020-12-05 22:51:03 +01:00
Andreas Kling
157896cc0b LibWeb: Block layout should account for vertical border space
We were not accounting for space occupied by borders when computing
the vertical (y) position of blocks. This meant that blocks with wide
top/bottom borders could bleed into each other incorrectly.

Fix this by using the combined padding+border geometry instead of just
the padding when placing blocks on the y axis.
2020-12-04 21:24:35 +01:00
Andreas Kling
c39e29d186 LibWeb: Block layout should resolve relative lengths against each box
We were incorrectly resolving relative length units (ex, em, etc.)
against the containing block in many cases. Fix this to resolve them
against the descendant box we're currently processing.
2020-12-04 21:22:49 +01:00
Andreas Kling
169a9150cb LibWeb: Rename LayoutNode::is_root() => is_initial_containing_block()
Let's use spec language for this. :^)
2020-12-04 16:27:07 +01:00
Andreas Kling
b1e75437c9 LibWeb: Keep track of the parent of each formatting context
This will allow us to find the containing block formatting context
when needed later on.
2020-11-25 21:26:58 +01:00
Andreas Kling
5aeab9878e LibWeb: Rename LayoutNode classes and move them into Layout namespace
Bring the names of various boxes closer to spec language. This should
hopefully make things easier to understand and hack on. :^)

Some notable changes:

- LayoutNode -> Layout::Node
- LayoutBox -> Layout::Box
- LayoutBlock -> Layout::BlockBox
- LayoutReplaced -> Layout::ReplacedBox
- LayoutDocument -> Layout::InitialContainingBlockBox
- LayoutText -> Layout::TextNode
- LayoutInline -> Layout::InlineNode

Note that this is not strictly a "box tree" as we also hang inline/text
nodes in the same tree, and they don't generate boxes. (Instead, they
contribute line box fragments to their containing block!)
2020-11-22 15:56:27 +01:00
Andreas Kling
e1a24edfa9 LibWeb: Reorganize layout system in terms of formatting contexts
This is a first (huge) step towards modernizing the layout architecture
and bringing it closer to spec language.

Layout is now performed by a stack of formatting contexts, operating on
the box tree (or layout tree, if you will.)

There are currently three types of formatting context:

- BlockFormattingContext (BFC)
- InlineFormattingContext (IFC)
- TableFormattingContext (TFC)

Document::layout() creates the initial BlockFormattingContext (BFC)
which lays out the initial containing block (ICB), and then we recurse
through the tree, creating BFC, IFC or TFC as appropriate and handing
over control at the context boundaries.

The majority of this patch is just refactoring the old logic spread out
in LayoutBlock and LayoutTableRowGroup, and turning into these context
classes instead. A lot more cleanup will be needed.

There are many architectural wins here, the main one being that layout
is no longer performed by boxes themselves, which gives us much greater
flexibility in the outer/inner layout of a given box.
2020-11-22 14:36:56 +01:00