1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-25 16:25:08 +00:00
Commit graph

461 commits

Author SHA1 Message Date
Andreas Kling
ad8d65fd6e LibWeb: Fix calculation of hypothetical cross size in column flex layout
Simplify automatic cross sizing of items in flex-direction:column by
using the fit-content width directly.

There's obviously a lot more nuance to this, but for now this makes
flex items with both width:auto and height:auto actually get some height
in column flex layouts.
2022-03-13 00:04:51 +01:00
Andreas Kling
2f3d7a7c36 LibWeb: Swap min-content and max-content intrinsic sizes if needed
I'm a little confused about intrinsic heights *really* work, and I'm
struggling to extract that information from the spec. In the meantime,
let's ensure that min-content is always smaller than (or equal to)
max-content so that other math works as expected.
2022-03-13 00:04:51 +01:00
Andreas Kling
515db5fc1b LibWeb: Make Layout::FormattingState copies shallow
Previously, each NodeState in a FormattingState was shared with the
parent FormattingState, but the HashMap of NodeState had to be copied
when making FormattingState copies.

This patch makes copying instant by keeping a pointer to the parent
FormattingState instead. When fetching immutable state via get(), we may
now return a reference to a NodeState owned by a parent FormattingState.

get_mutable() will copy any NodeState found in the ancestor chain before
making a brand new one.
2022-03-13 00:04:51 +01:00
Andreas Kling
8c91e8016c LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout
The flexbox specification barely even handwaves about automatically
sized items, but there's actually a lot of work to do in order for them
to get the correct size.

This patch is messy, but does make significant progress on supporting
flex items with indefinite width and/or height.

There's a fair amount of nested layout going on here, but do note that
we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-13 00:04:51 +01:00
Andreas Kling
3f2b17f602 LibWeb: Add functions for calculating intrinsic sizes of a Layout::Box
FormattingContext can now calculate the intrinsic sizes (min-content and
max-content in both axes) for a given Layout::Box.

This is a rather expensive operation, as it necessitates performing two
throwaway layouts of the subtree rooted at the box. Fortunately, we can
cache the results of these calculations, as intrinsic sizes don't change
based on other context around the box. They are intrinsic after all. :^)
2022-03-13 00:04:51 +01:00
Andreas Kling
aa969cc591 LibWeb: Make Layout::SVGBox a BlockContainer again
This wasn't worth the headache of trying to make SVG boxes work together
with BFC right now. Let's just make it a block container once again, and
have its corresponding SVGPaintable inherit from PaintableWithLines.

We'll have to revisit this as SVG support improves.
2022-03-13 00:04:51 +01:00
Andreas Kling
e4eb6d4f1f LibWeb: Add FFC helpers for resolving definite main/cross sizes
Although something has a definite size, we may still have to "resolve"
it, since FFC is quite liberal in what it considers to be definite.

Let's put that logic in a set of helper functions.
2022-03-13 00:04:51 +01:00
Andreas Kling
5c8e7217f7 LibWeb: Remove ad-hoc setup step from FFC layout algorithm
This step will not be necessary when we implement indefinite size
calculations more correctly.
2022-03-13 00:04:51 +01:00
Andreas Kling
12ac6861e3 LibWeb: Improve how layout nodes decide whether they have definite sizes
1. Make this decision *after* we've inserted the layout node into the
   layout tree. Otherwise, we can't reach its containing block!
2. Per css-sizing-3, consider auto-sized blocks whose sizes resolve
   solely against other definite sizes as definite themselves.

In particular, (2) makes us consider width:auto block children of a
definite-size containing block as having definite size. This becomes
very important in flex layout.
2022-03-13 00:04:51 +01:00
Andreas Kling
6de10858b9 LibWeb: Only collapse vertical margin between BlockContainer siblings
If there's some non-block-level box (like an SVG element of some kind)
between to blocks, just skip over the non-block for purposes of margin
collapsing. This is basically a hack, and something we'll need to
improve as part of our general SVG support.
2022-03-13 00:04:51 +01:00
Andreas Kling
43b8f65d82 LibWeb: Support indefinite flex container cross sizes
Instead of assuming that any indefinite cross size must be "auto", check
what is actually is, and resolve it accordingly.
2022-03-13 00:04:51 +01:00
Andreas Kling
a3a10b2379 LibWeb: Fix flex line alignment in single-line flex containers
For single-line flex containers, center the only flex line along the
cross axis. Alignment of multi-line flex containers are left as a FIXME.

This patch also moves out the assignment of final metrics to the
FormattingState from align_all_flex_lines() to a separate function.
2022-03-13 00:04:51 +01:00
Andreas Kling
1dfb3d555c LibWeb: Remove FFC::cross_size_is_absolute_or_resolved_nicely()
This is now answered authoritatively by Layout::Box itself.
2022-03-13 00:04:51 +01:00
Andreas Kling
1ce1af5d8b LibWeb: Improve FFC step 7 (hypothetical cross size)
- Avoid performing inside layout on definite-size flex items (since
  their computed size can be used as-is.)

- Use FormattingState::clone() to generate a throwaway layout instead of
  mutating the tree in-place.

- Update spec link & comments based on current CSSWG draft. The latest
  version is quite a bit clearer on how this should work.
2022-03-13 00:04:51 +01:00
Andreas Kling
b904bff838 LibWeb: Put available space information in an FFC member
This makes it easier for each step of the flex layout algorithm to
access this information.
2022-03-13 00:04:51 +01:00
Andreas Kling
88302b0dca LibWeb: Layout inside of flex items at the end of FFC layout
Instead of doing internal child layout incrementally as we go, save it
for the end of flex layout. The code will become simpler if we can focus
on simply computing the dimensions of each flex item while we're doing
the main FFC algorithm.
2022-03-13 00:04:51 +01:00
Andreas Kling
7c5b578df9 LibWeb: Move unrelated things out of FFC step 1
Setting some initial width and height on the flex container is totally
unrelated to the "generate anonymous flex items" step.
2022-03-13 00:04:51 +01:00
Andreas Kling
3506a91349 LibWeb: Avoid unnecessary layout_inside() in FFC step 1
We don't need to perform inside layout here. The only information we
need in this step is whether an anonymous block container has nothing
but empty-or-whitespace text children.

This information is already accurate after the initial layout tree
construction. Performing a layout does not change the answer. It does
however have many other side effects, so let's defer those.
2022-03-13 00:04:51 +01: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
0679eadd62 LibWeb: Add support for the text-justify property
This commit adds the text-justify property as defined in:
https://drafts.csswg.org/css-text/#propdef-text-justify
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
e099960e4d LibWeb: Remove a bunch of no-longer needed #includes 2022-03-11 00:21:49 +01:00
Andreas Kling
5779a910e5 LibWeb: Move hit testing to the painting tree 2022-03-11 00:21:49 +01:00
Andreas Kling
ba606d9057 LibWeb: Move PaintingBox to its own .cpp and .h files 2022-03-11 00:21:49 +01:00
Andreas Kling
f017c1c064 LibWeb: Make hit testing return a { paintable, offset }
Everything related to hit testing is better off using the painting tree.
The thing being mousemoved over is a paintable, so let's hand that out
directly instead of the corresponding layout node.
2022-03-11 00:21:49 +01:00
Andreas Kling
cb0c5390ff LibWeb: Move mouse event and label logic from layout to painting tree
Input events have nothing to do with layout, so let's not send them to
layout nodes.

The job of Paintable starts to become clear. It represents a paintable
item that can be rendered into the viewport, which means it can also
be targeted by the mouse cursor.
2022-03-11 00:21:49 +01:00
Andreas Kling
ed84fbce47 LibWeb: Make Paintable ref-counted
This will allow us to use a protective NonnullRefPtr to keep paintables
alive while running arbitrary JavaScript in response to events.
2022-03-11 00:21:49 +01:00
Andreas Kling
702cee3d7c LibWeb: Make Layout::SVGBox inherit from Layout::Box
This doesn't need anything from Layout::BlockContainer, so let's not
inherit from that.
2022-03-11 00:21:49 +01:00
Andreas Kling
4d98851aea LibWeb: Generate a TextPaintable for every Layout::TextNode
This is prep work for moving event handling over to the painting tree.
2022-03-11 00:21:49 +01:00
Andreas Kling
aae356baf1 LibWeb: Port inline elements to the new Paintable system
This patch adds InlinePaintable which corresponds to Layout::InlineNode.
2022-03-11 00:21:49 +01:00
Andreas Kling
053766d79c LibWeb: Split Paintable into Paintable and PaintableBox
To prepare for paintable inline content, we take the basic painting
functionality and hoist it into a base class.
2022-03-11 00:21:49 +01:00
Andreas Kling
9461e44afa LibWeb: Use Layout::Box::paint_box() accessor in more places 2022-03-11 00:21:49 +01:00
Andreas Kling
02b316fd5c LibWeb: Let Paintable perform the painting
This patch adds a bunch of Paintable subclasses, each corresponding to
the Layout::Node subclasses that had a paint() override. All painting
logic is moved from layout nodes into their corresponding paintables.

Paintables are now created by asking a Layout::Box to produce one:

    static NonnullOwnPtr<Paintable> Layout::Box::create_paintable()

Note that inline nodes still have their painting logic. Since they
are not boxes, and all paintables have a corresponding box, we'll need
to come up with some other solution for them.
2022-03-11 00:21:49 +01:00
Andreas Kling
f6497b64ac LibWeb: Rename Painting::Box => Paintable
Calling this "Box" made it very confusing to look at code that used both
Layout::Box and Painting::Box. Let's try calling it Paintable instead.
2022-03-11 00:21:49 +01:00
Andreas Kling
7af03df4c3 LibWeb: Make Painting::Box virtual and add Painting::BoxWithLines
BlockContainer paint boxes are the only ones that have line boxes
associated, so let's not waste memory on line boxes in all the other
types of boxes.

This also adds Layout::Box::paint_box() and the more tightly typed
Layout::BlockContainer::paint_box() to get at the paint box from the
corresponding layout box.
2022-03-11 00:21:49 +01:00
Andreas Kling
9f5cbcaad3 LibWeb: Hang StackingContext off of the paint boxes
Stacking contexts have nothing to do with layout and everything with
painting, so let's keep them in Painting::Box.
2022-03-11 00:21:49 +01:00
Andreas Kling
f0d833a3d7 LibWeb: Move StackingContext and PaintPhase into the Painting namespace 2022-03-11 00:21:49 +01:00
Andreas Kling
a4d51b3dc2 LibWeb: Add Painting::Box and move things from Layout::Box into it
The "paintable" state in Layout::Box was actually not safe to access
until after layout had been performed.

As a first step towards making this harder to mess up accidentally,
this patch moves painting information from Layout::Box to a new class:
Painting::Box. Every layout can have a corresponding paint box, and
it holds the final used metrics determined by layout.

The paint box is created and populated by FormattingState::commit().

I've also added DOM::Node::paint_box() as a convenient way to access
the paint box (if available) of a given DOM node.

Going forward, I believe this will allow us to better separate data
that belongs to layout vs painting, and also open up opportunities
for naturally invalidating caches in the paint box (since it's
reconstituted by every layout.)
2022-03-11 00:21:49 +01:00
Sam Atkins
6de2b62906 LibWeb: Display pseudo-elements in the DOM inspector
This patch only makes them appear in the tree - they are not yet
inspectable themselves.
2022-03-10 17:30:09 +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
Maciej
86c0961240 LibWeb: Make TextNode::ChunkIterator::try_commit_chunk() const 2022-03-07 21:49:36 +01:00
Andreas Kling
6d1a9672a4 LibWeb: Support more CSS image-rendering values
This patch adds support for "crisp-edges", "high-quality" and "smooth"
for the CSS image-rendering property.

"crisp-edges" maps to nearest-neighbor scaling for <canvas> and <img>
elements, while "high-quality" and "smooth" both use bilinear blending.
2022-03-07 00:08:22 +01:00
Karol Kosek
7e599aa1e5 LibWeb: Implement missing text-decoration styles
This commit will draw appropriate line styles for the Double, Dashed
and Dotted values.
2022-03-06 22:04:41 +01:00
Karol Kosek
b6b116d5f2 LibWeb: Compute text-decoration-thickness values 2022-03-06 22:04:41 +01:00
Karol Kosek
727e69fe11 LibWeb: Paint text decoration in front of the text
Previously, the decoration was painted behind the text. This probably
wasn't noticed before, as we didn't compute `text-decoration-color`
values yet and the decoration had the same color anyway.
2022-03-06 22:04:41 +01:00
Karol Kosek
f9d66bef5d LibWeb: Compute text-decoration-color values
Previosly, we used only the text color as a line decoration color.

The FIXME comment has been directly copy-pasted from the border color
note a few lines below.
2022-03-06 22:04:41 +01:00
Andreas Kling
7d5d5b387e LibWeb: Respect CSS image-rendering mode when painting canvas elements
If the content wants to be pixelated, we should honor that and paint
with nearest-neighbor scaling. The fact that it's faster is a nice bonus
as well. :^)
2022-03-06 01:51:18 +01:00
Andreas Kling
bc82b3eaec LibWeb: Improve height:auto for position:absolute blocks
Previously we were not giving automatic height to position:absolute
blocks that had both top:auto and bottom:auto.
2022-03-05 21:26:19 +01:00
Andreas Kling
e61bf997db LibWeb: Don't break on *every character* in AllPossibleLineBreaks mode
This mode is used to find the min-content inline size, so we should
break between words, not characters.
2022-03-05 21:26:19 +01:00