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

1097 commits

Author SHA1 Message Date
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
Andreas Kling
15ed0ebdc6 LibWeb: Implement hit testing a bit closer to spec
We now perform hit testing in reverse paint order as described in CSS2's
section about the z-index property.
2022-03-04 15:52:42 +01:00
Andreas Kling
c2a66b77df LibWeb: Measure intrinsic block width *around* children's border edge
When calculating the intrinsic width of a block-level box, we were
previously measuring the content boxes of children. This meant that
shrink-to-fit sized blocks didn't gain enough width to contain children
with horizontal padding and/or border.
2022-03-04 12:34:26 +01:00
Andreas Kling
ef33a40b99 LibWeb: Remove bogus line box width adjustment
This basically reverts 95715f0c8f, as it
was totally wrong for text-align:center and text-align:right.
2022-03-03 12:57:53 +01:00
Andreas Kling
7dae895704 LibWeb: Align actual baselines, not just bottoms
Until now, we've been treating the bottom of every line box fragment as
its baseline, and just aligning all the bottoms to the bottom of the
line box. That gave decent results in many cases, but was not correct.

This patch starts moving towards actual baseline calculations as
specified by CSS2.

Note that once layout is finished with a line box, we also store the
baseline of the line box in LineBox::m_baseline. This allows us to align
the real baseline of display:inline-block elements with other inline
content on the same line.
2022-03-03 12:57:53 +01:00
Andreas Kling
1d6cf3a43f LibWeb: Consider all children when doing height:auto for normal blocks
Only measuring from the top to the last in-flow block was not giving us
enough height in many cases.
2022-03-03 12:57:53 +01:00
Andreas Kling
65b38f2623 LibWeb: Don't skip position:relative elements in inline-level layout
InlineLevelIterator was wrongly skipping over all positioned elements,
instead of just the absolutely positioned ones.
2022-03-02 17:40:18 +01:00
Andreas Kling
fa43a4118e LibWeb: Handle height:auto separately for BFC root vs other block boxes
I was wrong in 56df05ae44, there are
situations where floating children should not affect the auto height of
their parent.

It turns out we were using the "height:auto for BFC roots" algorithm for
all height:auto blocks. This patch fixes that by splitting it into two
separate functions, and implementing most of the two different variants.

Note that we don't support vertical margin collapsing here yet.

Thanks to Tim for noticing the error! :^)
2022-03-01 23:26:35 +01:00
Andreas Kling
56df05ae44 LibWeb: Always include floats when computing height:auto for blocks
I'm not sure why we had two modes for this, but floats should always be
included in the auto height AFAICT.
2022-03-01 19:01:19 +01:00
Andreas Kling
6478b460fb LibWeb: Fix wrong height:auto computation for block with floating child
If an element with height:auto has any floating descendants whose bottom
margin edge is below the element's bottom content edge, then the height
is increased to include those edges.

Before this patch, we were stopping at the bottom *content* edge of
floating descendants.
2022-03-01 19:01:19 +01:00
Tobias Christiansen
8461791ce2 LibWeb: Add support for 'view-box' attribute to SVGs
This patch begins the support for the 'view-box' attribute that can be
attached to <svg>'s.
The FormattingContext determines the size of the Element according to
the specified 'width' and 'height' or if they are not given by the
'viewbox' or by the bounding box of the path if nothing is specified.
When we try to paint a SVG Path that belongs to a <svg> that has the
'view-box' and a specified 'height'/'width', all the parts of the path
get scaled/moved accordingly.

There probably are many edge cases and bugs still to be found, but this
is a nice start. :^)
2022-02-28 16:49:24 +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
f8aa0c144f LibWeb: Store box's containing line box fragment in FormattingState
Layout should not change any properties of a box until the moment a
FormattingState is committed.
2022-02-28 14:17:44 +01:00
Andreas Kling
aa72ebf7aa LibWeb: Use copy-on-write to make cloning a FormattingState much cheaper
Instead of making a full copy of every NodeState when cloning a
FormattingState, we make NodeState ref-counted and implement a basic
copy-on-write mechanism.

FormattingState::get_mutable() now makes a deep copy of the NodeState
when first accessed *if* it is shared with other FormattingStates.
2022-02-28 14:17:44 +01:00
Andreas Kling
cd5c17d88e LibWeb: Improve Layout::Box has-definite-size? computation
We now consider a layout box as having definite size in these cases:

- The size is a <length>.
- The size is a <percentage> and the containing block has definite size.

This is not complete, but a bit more accurate than what we had before.
2022-02-28 14:17:44 +01:00