Commit graph

71 commits

Author SHA1 Message Date
Andreas Kling
83bb16ede3 LibWeb: Avoid some unnecessary inside layouts during intrinsic sizing
When calculating intrinsic sizes, we don't need to recurse into *every*
box and layout its insides. IIUC, we can skip any unconstrained box with
definite sizes in both axes. So this patch does exactly that.
2022-07-26 01:53:41 +02:00
Andreas Kling
ed8930fff5 LibWeb: Add accessors for UsedValues::computed_{width,height}
This is preparation for doing some more work when assigning to these
values.
2022-07-19 15:40:41 +02:00
Andreas Kling
52862c72d0 LibWeb: Rename FormattingState to LayoutState
This seems a bit more descriptive (and also a bit shorter).
2022-07-17 14:11:36 +02:00
Andreas Kling
e78282aebb LibWeb: Make sure we always apply size constraints in IFC
Pre-compute the effective containing block width in the IFC constructor
and use that throughout.
2022-07-11 18:57:45 +02:00
Andreas Kling
7713198e9c LibWeb: Cache a pointer to the containing block state in IFC 2022-07-11 18:57:45 +02:00
Andreas Kling
64959a8504 LibWeb: Express intrinsic size layout via size constraints
Previously, we had three layout modes:

- Normal:
    - Everything uses the computed values from CSS.

- MinContent:
    - Containing blocks act as if they have 0 width.
    - All line breaking opportunities are taken.

- MaxContent:
    - Containing blocks act as if they have infinite width.
    - Only forced line breaks are accepted.

The above was based on a set of misunderstandings of CSS sizing.
A major problem with the above was that *all* containing blocks
behaved differently during intrinsic size layout, not just the
relevant one.

With this patch there are only two layout modes:

- Normal:
    - Everything uses the computed values from CSS.

- IntrinsicSizeDetermination:
    - One or more boxes have size constraints applied.

There are two size constraints per layout box, set here:

- FormattingState::NodeState::width_constraint
- FormattingState::NodeState::height_constraint

They are of type SizeConstraint and can be one of None, MinContent,
or MaxContent. The default is None.

When performing an IntrinsicSizeDetermination layout, we now assign
a size constraint to the box we're trying to determine the intrinsic
size of, which is then honored by using two new helpers to query
the dimensions of containing blocks:

- FormattingContext::containing_block_width_for(Box)
- FormattingContext::containing_block_height_for(Box)

If there's a relevant constraint in effect on the Box, the size of
its containing block is adjusted accordingly.

This is essentially an implementation of the "available space"
constraints from CSS-SIZING-3. I'm sure some things will break from
this, and we'll have to deal with that separately.

Spec: https://drafts.csswg.org/css-sizing-3/#available
2022-07-11 18:57:45 +02:00
Andreas Kling
66d08d2417 LibWeb: Move IFC result measurement from IFC to BFC
Before this change, IFC would first generate all of its line boxes
and then measure them. It would then write some of the values into
the state of the IFC's containing block.

We now move that up to BFC::layout_inline_children() instead, which
is a much more natural place to decide metrics for the block.
2022-07-11 18:57:45 +02:00
Andreas Kling
cefc931347 LibWeb: Make sure CSS::ComputedValues has initial size values
Instead of using Optional<LengthPercentage>, we now use LengthPercentage
for these values. The initial values are all `auto`.

This avoids having to check `has_value()` in a ton of places.
2022-07-09 22:16:35 +02:00
Enver Balalic
7381474835 LibWeb: Don't break text lines if white-space: nowrap
If white-space is nowrap then we don't want to break a text_node
into multiple line boxes. This fixes the width calculation in the
min-content case for white-space: nowrap elements. Before this
the min-width would be the width of the biggest line box.
2022-04-03 21:51:15 +02:00
Andreas Kling
6a4247bee9 LibWeb: Use more precise font metrics when doing inline layout
We now position inline-level boxes based on ascent and descent metrics
from the font in use. This makes our basic text layouts look a lot more
like those produced by other browsers. :^)

I've tried to match the terminology used by the CSS Inline Layout spec.

This will regress Acid2 a little bit, and probably various other sites,
but on the whole it's the direction we should be heading, so let's go.
2022-03-30 01:12:44 +02:00
Andreas Kling
f4ed4b2806 LibWeb: Swallow whitespace when it causes us to break the line
This fixes an issue seen on Acid3 where the instruction text would shift
around when moving from "white-space:pre-wrap" to "white-space:normal".
2022-03-29 13:37:54 +02:00
Andreas Kling
5def3b0150 LibWeb: Use LineBox::height() when determining IFC auto heights
We don't need to loop through all the fragments on the line to work out
how tall it is. Just ask for the height. :^)
2022-03-29 12:25:34 +02:00
Andreas Kling
f9e8f02451 LibWeb: Don't crash in IFC if very first chunk is collapsible whitespace 2022-03-27 21:06:02 +02:00
Andreas Kling
aefe1727fc LibWeb: Make text newlines in "pre" mode emit a ForcedBreak item
Instead of emitting a Text item with the "should_force_break" flag set
to true, newlines in newline-preserving text content now timply turn
into ForcedBreak items. This makes the <pre> element work again.
2022-03-26 20:04:56 +01:00
Andreas Kling
d32630e17b LibWeb: Don't append collapsible whitespace to start of new line
After performing a required line break, and the next text chunk is
all collapsible whitespace, simply discard the whitespace.
2022-03-26 20:04:56 +01:00
Andreas Kling
de6f7f0029 LibWeb: Support CSS floats in inline flow
CSS floats are now emitted by the InlineLevelIterator. When this
happens, IFC coordinates with the parent BFC to float the box to the
side, using the current LineBuilder state for vertical placement.

This makes the "instructions" text on Acid3 render as a single
contiguous flow of inline content.
2022-03-22 19:26:51 +01:00
Andreas Kling
159d4d772a LibWeb: Assign the used top/bottom border widths to inline-block boxes
We were forgetting to update these values, which led to missing top and
bottom borders for elements with display:inline-block.
2022-03-20 13:36:45 +01:00
Andreas Kling
c1f0d21bbe LibWeb: Rename the LayoutMode enum values and explain them
The old mode names, while mechanically accurate, didn't really reflect
their relationship to the CSS specifications.

This patch renames them as follows:

    Default => Normal
    AllPossibleLineBreaks => MinContent
    OnlyRequiredLineBreaks => MaxContent

There's also now an explainer comment with the LayoutMode enum about the
specific implications of layout in each mode.
2022-03-19 15:46:15 +01:00
Andreas Kling
83afc1154c LibWeb: Fix IFC over-shrinking the available space for line boxes
After accounting for left-side floats, we have to subtract the offset of
the IFC's containing block again, to get the real starting X offset
for the current line.

This was done correctly in leftmost_x_offset_at() but incorrectly in
available_space_for_line(), causing IFC to break lines too early in
cases where the containing block had a non-zero X offset from the BFC
root block.
2022-03-19 12:42:10 +01:00
Andreas Kling
28b771560a LibWeb: Make SVG <svg> elements behave as CSS replaced elements
This makes SVG-in-HTML behave quite a bit better by following general
replaced layout rules. It also turns <svg> elements into inline-level
boxes instead of block-level boxes.
2022-03-19 12:42:10 +01:00
Andreas Kling
39b7fbfeb9 LibWeb: Rewrite CSS float implementation to use offset-from-edge
The previous implementation used relative X offsets for both left and
right-side floats. This made right-side floats super awkward, since we
could only determine their X position once the width of the BFC root was
known, and for BFC roots with automatic width, this was not even working
at all most of the time.

This patch changes the way we deal with floats so that BFC keeps track
of the offset-from-edge for each float. The offset is the distance from
the BFC root edge (left or right, depending on float direction) to the
"innermost" margin edge of the floating box.

Floating box are now laid out in two passes: while going through the
normal flow layout, we put floats in their *static* position (i.e the
position they would have occupied if they weren't floating) and then
update the Y position value to the final one.

The second pass occurs later on, when the BFC root has had its width
assigned by the parent context. Once we know the root width, we can
set the X position value of floating boxes. (Because the X position of
right-side floats is relative to the right edge of the BFC root.)
2022-03-18 15:18:48 +01:00
Andreas Kling
28642de6ed LibWeb: Make LineBuilder aware of the current LayoutMode
This will allow us to override the available space correctly when doing
intrinsic sizing.
2022-03-18 15:18:48 +01:00
Andreas Kling
ef8a72ff3f LibWeb: Move available_space_for_line() from IFC to BFC
This is preparation for allowing blocks with their own internal BFC to
flow around floating boxes in the parent BFC.

Note that IFC still has the available_space_for_line() API, which
returns space available within the IFC's own containing block, while the
BFC available_space_for_line() returns space available within its root.
2022-03-18 15:18:48 +01:00
Lenny Maiorani
c37820b898 Libraries: Use default constructors/destructors in LibWeb
https://isocpp.github.io/CppCoreGuidelines/CppCoreGuidelines#cother-other-default-operation-rules

"The compiler is more likely to get the default semantics right and
you cannot implement these functions better than the compiler."
2022-03-17 17:23:49 +00:00
sin-ack
b801ddf73d LibWeb: Apply the current text-justify value when justifying
This implements at least some of the specification. inter-character is
not yet handled. However as our current algorithm only considers
whitespace as word breaks, inter-word could technically be considered to
be handled. :^)
2022-03-12 21:51:38 +01:00
sin-ack
7fe3f2d970 LibWeb: Refactor text justification code + only justify below threshold
All the justification-related code is now in
InlineFormattingContext::apply_justification_to_fragments and is
performed after all the line boxes have been added.

Text justification now only happens on the last line if the excess space
including whitespace is below a certain threshold. 10% seemed reasonable
since it prevents the "over-justification" of text. Note that fragments
in line boxes before the last one are always justified.
2022-03-12 21:51:38 +01:00
Andreas Kling
45f717cfad LibWeb: Respect inline-axis margins between line box fragments :^)
This makes the buckets on ACID3 space out nicely.
2022-03-09 18:47:32 +01:00
Andreas Kling
2dfb617c5b LibWeb: Make InlineLevelIterator emit absolutely positioned items
Note that we don't put absolutely positioned items on a line! This is
just so that IFC can discover boxes and pass them along to BFC.

This fixes an issue where only direct children of the IFC containing
block were considered for absolute positioning. Now we pick up
absolutely positioned children of nested inline nodes as well.
2022-03-08 00:19:49 +01:00
Vrins
a8cfb34551 LibWeb: Allow <input type="button/submit/reset"> to be styled
Previously we used a native ui button to draw the buttons.
These buttons can however not be styled with css.
To allow these to be styled with css, we create a button with
the UA stylesheet that resembles the system ui button.
2022-02-28 15:46:06 +00:00
Andreas Kling
797f51e122 LibWeb: Add border box top/bottom metrics to line box fragments
This will allow us to support more kinds of vertical alignment.
2022-02-26 09:24:40 +01:00
Andreas Kling
c9f4759329 LibWeb: Use CSS font-size when computing text fragment content height 2022-02-26 01:10:43 +01:00
Andreas Kling
7ed6549c8b LibWeb: Fix off-by-one in calculation of available space for line boxes
The rightmost edge of the available space ends exactly at the leftmost
right-side floating box, not one pixel away from it.
2022-02-25 19:38:31 +01:00
Andreas Kling
bb1f26c149 LibWeb: Use correct coordinate space when measuring space between floats
When calculating how much space is available for inline content between
left and right floated elements, we have to use coordinates in the
containing block's coordinate space, since that's what floats use.

This fixes an issue where text would sometimes overlap floats.
2022-02-21 20:42:34 +01:00
Andreas Kling
db5bf6e64c LibWeb: Rename FormattingState::ensure() -> get_mutable()
This makes it much more obvious what the difference between get() and
get_mutable() is.
2022-02-21 18:35:12 +01:00
Andreas Kling
c9700e100e LibWeb: Start making our layout system "transactional"
This patch adds a map of Layout::Node to FormattingState::NodeState.
Instead of updating layout nodes incrementally as layout progresses
through the formatting contexts, all updates are now written to the
corresponding NodeState instead.

At the end of layout, FormattingState::commit() is called, which
transfers all the values from the NodeState objects to the Node.

This will soon allow us to perform completely non-destructive layouts
which don't affect the tree.

Note that there are many imperfections here, and still many places
where we assign to the NodeState, but later read directly from the Node
instead. I'm just committing at this stage to make subsequent diffs
easier to understand.
2022-02-21 18:35:12 +01:00
Andreas Kling
561612f219 LibWeb: Add Layout::FormattingState
The purpose of this new object will be to keep track of various states
during an ongoing layout.

Until now, we've been updating layout tree nodes as we go during layout,
which adds an invisible layer of implicit serialization to the whole
layout system.

My idea with FormattingState is that running layout will produce a
result entirely contained within the FormattingState object. At the end
of layout, it can then be applied to the layout tree, or simply queried
for some metrics we were trying to determine.

When doing subtree layouts to determine intrinsic sizes, we will
eventually be able to clone the current FormattingState, and run the
subtree layout in isolation, opening up opportunities for parallelism.

This first patch doesn't go very far though, it merely adds the object
as a skeleton class, and makes sure the root BFC has one. :^)
2022-02-21 18:35:12 +01:00
Sam Atkins
356d8bcfe8 LibWeb: Remove Length::Type::Undefined! :^) 2022-02-18 19:04:37 +01:00
Sam Atkins
b715943035 LibWeb: Remove redundant Length::resolved() calls
Now that calc() is also resolved in to_px(), code in the form
`foo.resolved(bar).to_px(bar)` can be simplified to `foo.to_px(bar)`.
2022-02-18 19:04:37 +01:00
Sam Atkins
67066c5140 LibWeb: Remove fallback value from Length::resolved()
Nobody makes undefined Lengths now, (although actually removing
Undefined will come in a later commit) so we can remove this parameter,
and `resolved_or_auto()`/`resolved_or_zero()`.
2022-02-18 19:04:37 +01:00
Sam Atkins
5b2482a939 LibWeb: Use Optional instead of undefined-lengths for widths/heights 2022-02-18 19:04:37 +01:00
Andreas Kling
dcc2568439 LibWeb: Make IFC register absolutely positioned descendants with BFC
This allows BFC to position all absolutely positioned descendants in the
same pass.
2022-02-15 02:05:53 +01:00
Andreas Kling
f2a917229a LibWeb: Support inline-level padding and border properly
Here's roughly how this works:

- InlineLevelIterator keeps a nesting stack of inline-level nodes with
  box model metrics.
- When entering a node with box model metrics, we add them to the
  current "leading metrics".
- When exiting a node with box model metrics, we add them to the
  current "trailing metrics".
- Pending leading metrics are consumed by the first fragment added
  to the line.
- Pending trailing metrics are consumed by the last fragment added
  to the line.

Like before, the position of a line box fragment is the top left of its
content box. However, fragments are placed horizontally along the line
with space inserted for padding and border.

InlineNode::paint() now expands the content rect as appropriate when
painting background and borders.

Note that margins and margin collapsing is not yet implemented.

This makes the eyes on ACID2 horizontally centered. :^)
2022-02-14 18:00:21 +01:00
Andreas Kling
7d2a49eeb8 LibWeb: Always assign box model metrics in IFC::dimension_box_on_line()
Replaced elements have box model metrics, too. We shouldn't only assign
them to inline-block elements.
2022-02-14 18:00:21 +01:00
Andreas Kling
0532d7d255 LibWeb: Stop sizing the context root box in formatting contexts
Until now, some formatting contexts (BFC in particular) have been
assigning size to the root box. This is really the responsibility of the
parent formatting context, so let's stop doing it.

To keep position:absolute working, parent formatting contexts now notify
child contexts when the child's root box has been sized. (Note that the
important thing here is for the child root to have its final used height
before it's able to place bottom-relative boxes.)

This breaks flexbox layout in some ways, but we'll have to address those
by improving the spec compliance of FFC.)
2022-02-12 22:30:50 +01:00
Andreas Kling
0608de8c12 LibWeb: Rename Layout::Box::size() to content_size()
This property represents the CSS content size, so let's reduce ambiguity
by using the spec terminology.

We also bring a bunch of related functions along for the ride.
2022-02-06 01:07:47 +01:00
Sam Atkins
ce0de4b2b4 LibWeb: Allow LengthPercentage to hold a calculated value
Most of the time, we cannot resolve a `calc()` expression until we go to
use it. Since any `<length-percentage>` can legally be a `calc
()`, let's store it in `LengthPercentage` rather than make every single
user care about this distinction.
2022-02-04 13:52:02 +01:00
Andreas Kling
9201f626c1 LibWeb: Use BFC root relative coordinates when flowing around floats
While IFC flows text into a block container, floating objects are
anchored at the BFC root, not necessarily the local block container.

Because of this, we have to use root-relative coordinates when checking
how much space is available in between left and right floated objects.
2022-01-24 02:16:13 +01:00
Andreas Kling
00bd17034d LibWeb: Make IFC aware that its parent is always a BFC
This simplifies some code and allows us to use tighter types for the
parent context everywhere.
2022-01-24 02:09:17 +01:00
Andreas Kling
29589378ff LibWeb: Remove unused InlineFormattingContext::available_width_at_line() 2022-01-24 02:09:17 +01:00
Andreas Kling
0ea438e45b LibWeb: Put BFC floating object state into a struct
This patch adds a BFC::FloatSideData struct so we can contain left and
right floating object layout state in a struct. This is preparation for
adding more per-side state.
2022-01-23 01:22:41 +01:00