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

1450 commits

Author SHA1 Message Date
Aliaksandr Kalenik
fee5b4deb6 LibWeb: Move set_scroll_offset() from Layout::Box to PaintableBox
Nodes in layout tree should not be aware of scroll state.
2023-08-07 05:23:31 +02:00
Aliaksandr Kalenik
5b7926fa53 LibWeb: Move scroll_offset() from Layout::Box to PaintableBox
Nodes in layout tree should not be aware of scroll state.
2023-08-07 05:23:31 +02:00
Aliaksandr Kalenik
55b5c61a79 LibWeb: Move scroll offset state from layout tree to dom tree
Scroll offset state should not be reset by layout tree rebuilt.
2023-08-07 05:23:31 +02:00
Aliaksandr Kalenik
b6ea4b002b LibWeb: Add info about pseudo element type in Layout::Node 2023-08-07 05:23:31 +02:00
Andreas Kling
41e7c5766e LibWeb: Support more kinds of indefinite widths on flex column items
This stuff is pretty hairy since the specifications don't give any
guidance on which widths to use when calculating the intrinsic height of
flex items in a column layout.

However, our old behavior of "treat anything indefinite as fit-content"
was definitely not good enough, so this patch improves the situation by
considering values like `min-content`, `max-content` and `fit-content`
separately from `auto`, and making the whole flex layout pipeline aware
of them (in the cross axis context).
2023-08-05 10:58:12 +02:00
Andi Gallo
7b0b501418 LibWeb: Improve adjustment of automatic table width with percentages
Use the max-width of percentage cells instead of min-width as the
reference to be used to compute the total table width. The specification
only suggests that the UA should try to satisfy percentage constraints
and this behavior is more consistent with other browsers.
2023-08-05 10:32:48 +02:00
Aliaksandr Kalenik
d32bf4cd41 LibWeb: Set min-width for inline child boxes after inside layout
min-width for boxes with inline children can only be applied after
inside layout is done and width of box content is known.
2023-08-05 09:25:24 +02:00
Aliaksandr Kalenik
79cbbfc67f LibWeb: Fix infinite spinning while distributing extra space in GFC
Fixes infinite spinning in the cases when CSSPixels does not have
enough precision to represent increase per track which happens when
very small extra_space got divided by affected tracks number.
2023-08-04 19:00:02 +02:00
Andi Gallo
3e70c1b6a3 LibWeb: Improve precision when computing size of replaced elements
Change associativity in computing of replaced element size to improve
precision of division.

Fixes vertically squashed image from Mozilla splash page MDN example.
2023-08-04 13:36:29 +02:00
Aliaksandr Kalenik
0019b901a0 LibWeb: Remove hardcoded span = 2 while sizing spanning items in GFC 2023-08-04 12:41:11 +02:00
Aliaksandr Kalenik
1e953f2acc LibWeb: Reset planned_increase while distributing space to "fr" tracks
Fixes bug when planned_increase is not reset after adding it to
base_size.
2023-08-03 17:05:57 +02:00
Sam Atkins
73fa58da34 LibWeb: Implement the CSS outline-offset property
This allows you to push the outline a certain distance away from the
border (or inside it, if the offset is negative).
2023-08-03 05:25:48 +02:00
Sam Atkins
fe7e797483 LibWeb: Implement the CSS outline property :^)
...along with `outline-color`, `outline-style`, and `outline-width`.

This re-uses the existing border-painting code, which seems to work well
enough!

This replaces the previous code for drawing focus-outlines, with generic
outline painting for any elements that want it. Focus outlines are now
instead supported by this code in Default.css:

```css
:focus-visible {
    outline: auto;
}
```
2023-08-03 05:25:48 +02:00
Karol Kosek
5b1aa2d55e LibWeb: Don't collapse boxes with CSS clear property set
I'm not sure if this is exactly correct, the link to CSS2 spec above
says something that clearance cannot separate boxes, but I'm not sure if
I understood it correctly or if I've done it in the right place.

However, this change fixes our block-and-inline/clearfix.html test again
(was regressed in previous commit).
2023-08-02 17:35:54 +02:00
Karol Kosek
142d498f14 LibWeb: Include anonymous boxes with no lines into computing BFC height
Pseudo-elements like ::before and ::after were discarded when their
content property was an empty string (ignoring whitespace), because they
are anonymous containers with no lines.

Our previous way around it was to add an empty line box (see b062a0fb7c)
however it didn't actually work for cases described in the previous
commit.

This makes avatars and cover arts square on last.fm and "fixes" the test
css-pseudo-element-should-not-be-affected-by-presentational-hints.html.
Unfortunately, this also regresses on block-and-inline/clearfix.html,
but that hopefully will be handled in subsequent commit.
2023-08-02 17:35:54 +02:00
Karol Kosek
d4b5205482 Revert "LibWeb: Make TextNode::ChunkIterator emit an empty chunk for content:"""
This reverts commit b062a0fb7c.

This made a calculation of pseudo-elements' height incorrect when they
had `height` set to `auto` and used other techniques (like setting
`padding-top`) to set height, as it was now also adding an empty line.

Additionally, the case didn't work for content containing whitespace
characters, so a pseudo-element with `content: " "` didn't have *this*
particular problem.
2023-08-02 17:35:54 +02:00
Aliaksandr Kalenik
1f28fdacf0 LibWeb: Set max-width for inline child boxes after inside layout
max-width for boxes with inline children can only be applied after
inside layout is done and width of box content is known.

Fixes https://github.com/SerenityOS/serenity/issues/20235
2023-08-02 05:27:56 +02:00
MacDue
24c848607c LibWeb: Don't lay out light DOM children of elements with a shadow root
This fixes the "last changed" time for files on GitHub. Note that this
appears to be in accordance with the shadow DOM specification, but I
can't find a line that neatly says it. Though on Google's post about
shadow DOM v1 it says:

> "the element's shadow DOM is rendered in place of its children."
https://web.dev/shadowdom-v1/#creating-shadow-dom-for-a-custom-element
2023-08-02 05:25:53 +02:00
Andreas Kling
15440b156f LibWeb: Ignore flex container size constraints during intrinsic sizing
Properties like min-width, max-width, etc, should be ignored while we're
trying to determine the intrinsic size of a flex container.

This fixes an infinite recursion when using an intrinsic size keyword as
the max-width of a flex column container.

Note that this behavior is marked as AD-HOC in code comments because
specs don't tell us how to achieve intrinsic sizing.

We can now load product pages on the Twinings site, such as
https://twinings.co.uk/products/earl-grey-100-tea-bags :^)
2023-08-01 20:15:20 +02:00
Timothy Flynn
c31e8cad1e LibWeb: Remove unused VideoBox preferred width/height methods
These were copied from some other paintable, but were never used for
video.
2023-08-01 11:14:26 -04:00
Aliaksandr Kalenik
338fa8261e LibWeb: Use item minimum contribution while sizing "fr" track in GFC
Fixes the issue that before "automatic minimum size" were used to size
flexible tracks even though specification says is should be "minimum
contribution"
2023-08-01 16:25:10 +02:00
Tom
e61fdd1dc6 LibWeb: Use viewbox attribute in SVG symbol element
Previously when a viewBox was passed to a SVG symbol element it would
not be taken into account when drawing the SVG.
2023-08-01 14:40:51 +02:00
Andreas Kling
28fdc7af05 LibWeb: Detach stale layout nodes from DOM during layout tree build
When toggling `display: none` on an element, it can go from having a
layout subtree to not having one. In the `none` case, we were previously
leaving stale layout nodes hanging off DOM nodes in the subtree.

These layout nodes could be queried for outdated information and
probably other things that we shouldn't allow.

Fix this by having TreeBuilder prune any old layout nodes hanging off
nodes in a subtree after its subtree root doesn't produce a layout node.
2023-08-01 09:19:41 +02:00
Andi Gallo
62f15f94d2 LibWeb: Better handling of floating boxes from inline formatting context
Handle the clear property for floating boxes and add tracking for
vertical clearence within an inline formatting context.
2023-08-01 07:38:19 +02:00
Andi Gallo
4cde5f6d76 LibWeb: Fix border for cells spanning entire table width or height
When a cell spans the entire width or height of a table, create its
border from the table box.
2023-07-31 10:40:31 +02:00
Sam Atkins
6038e36250 LibWeb: Add and use the "snap a length as a border width" algorithm
Previously, we always rounded border-widths up when converting them to
device pixels. However, the spec asks us to follow a specific algorithm
to "snap" these values, so that the computed value is snapped.

The difference from before, is that widths of between 0 and 1 device
pixels are rounded up to 1, and and values larger than 1 are rounded
down.
2023-07-30 22:18:26 +01:00
Sam Atkins
5ee1b7db7c LibWeb: Convert BorderData::width to CSSPixels
The `clip_shrink` optimization in `paint_background()` now also
correctly uses DevicePixels, instead of reducing a DevicePixel rect by
a CSSPixels amount.
2023-07-30 22:18:26 +01:00
Aliaksandr Kalenik
e5dcfe3905 LibWeb: Verify that value is not saturated in set_content_width/height
Checking if CSSPixels contains a finite value is no longer makes sense
after converting to fixed-point arithmetics. Instead there should
assertion that used value is not saturated.
2023-07-29 17:23:27 +02:00
Christophe Naud-Dulude
4f9f21e8fe LibWeb: Only derive baseline from children with a non-empty line box
If none of the box children have a baseline set, the bottom margin
edge of the box is used as the baseline.
2023-07-28 17:02:33 +02:00
Aliaksandr Kalenik
38edab09a0 LibWeb: Allow <svg> to act as a containing block
This change makes overflow clipping work correctly for children of svg
element.

Fixes following example:
```html
<!doctype html><style>
    body {
        width: 300px;
        height: 300px;
        position: relative;
        overflow: hidden;
        border: 1px solid black;
    }
    svg {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
    }
</style>
<body>
<svg viewBox="0 0 100 100">
   <g>
     <rect x="0" y="0" width="100" height="100" fill="green"></rect>
   </g>
</svg>
```
2023-07-28 15:15:07 +02:00
Andi Gallo
6a17a30e2e LibWeb: Handle overlapping floating box and left margin
Allow the left margin of a box which creates a block formatting context
to overlap with left floating boxes which are siblings in the document
tree.

Fixes #20233 and the comment layout on https://lobste.rs.
2023-07-28 12:44:09 +02:00
Aliaksandr Kalenik
0e8a0a8191 LibWeb: Add support for "display: contents"
This change makes tree builder omit elements with "display: contents"
from the layout tree during construction. Their child elements are
instead directly appended to the parent element in layout tree.
2023-07-28 05:29:43 +02:00
Christophe Naud-Dulude
11b844ce20 LibWeb: Add support for align-items and align-self in CSS grid 2023-07-27 19:54:17 +02:00
Andi Gallo
3b75b9ef1c LibWeb: Avoid division by zero when computing table measures
For malformed tables which only have cells with span greater than 1, the
content sizes for row and column aren't initialized to non-zero values.
Avoid undefined behavior in such cases, which sometimes show up on
Wikipedia.
2023-07-27 08:01:36 +02:00
Andi Gallo
8f7b269bf1 LibWeb: Convert divisor to double in TableFormattingContext
Improves precision of height and width distribution.
2023-07-26 08:38:03 +02:00
Andi Gallo
b12820c967 LibWeb: Handle float clearing specified on line break elements 2023-07-26 08:37:16 +02:00
PaddiM8
6de701b5c3 LibWeb: Handle auto margins with flex and justify-content
Auto margins used together with justify-content would previously
result in children being positioned outside their parent. This was
solved by letting auto margins take precedence when they are used,
which was already implemented to some extent before, but not
fully.
2023-07-26 08:35:23 +02:00
PaddiM8
a26f2f0aab LibWeb: Handle flex reverse togther with justify-content
Containers with both flex reverse and justify content would
sometimes place children outside the container. This happened
because it assumed any reversed container would have items
aligned to the right, which isn't true when using eg. `flex-end`.

Both `justify-content: start` and `justify-content: end` are now
also independent of the reverseness.
2023-07-26 08:35:23 +02:00
Aliaksandr Kalenik
152ce88984 LibWeb: Avoid leaking infinite remaining_free_space in FFC calculation
After switching to fixed-point arithmetic in CSSPixels, it no longer
supports representing infinite values, which was previously the case
for remaining_free_space in FFC. Using Optional that is not empty only
when value is finite to store remaining_free_space ensures that
infinity is avoided in layout calculations.
2023-07-26 05:17:56 +02:00
Aliaksandr Kalenik
de95a2fe33 LibWeb: Use empty Optional to represent infinte growth limit in GFC
In c66dbc99ee GFC was updated to use -1
as special value for the infinite growth limit. However, using Optional
instead reduces the risk of accidentally using -1 special value in
layout calculations.
2023-07-26 05:17:10 +02:00
Andi Gallo
26c20e3da1 LibWeb: Split BorderConflictFinder::conflicting_edges method
Make it clearer which edges and elements are considered at each step.
2023-07-25 15:21:04 +02:00
Andi Gallo
a7166eb103 LibWeb: Complete table border conflict resolution
Add the element type and grid position to the algorithm and change the
table borders painting to apply the new criteria to corners as well.
2023-07-25 15:21:04 +02:00
Aliaksandr Kalenik
849cf894d8 LibWeb: Fix division by zero in distribute_any_remaining_free_space
This change fixes division by zero in case flex container has
"justify-content: space-between" and only single item.
2023-07-25 14:51:50 +02:00
Andreas Kling
ccf35a973f LibWeb: Derive box baseline from last child *with line boxes*
Before this change, we always derived a box's baseline from its last
child, even if the last child didn't have any line boxes inside.

This caused baselines to slip further down vertically than expected.

There are more baseline alignment issues to fix, but this one was
responsible for a fair chunk of trouble. :^)
2023-07-25 13:42:32 +02:00
Aliaksandr Kalenik
bec07d4af7 LibWeb: Use fixed-point saturated arithmetics for CSSPixels
Using fixed-point saturated arithmetics for CSSPixels allows to avoid
accumulating floating-point errors.

This implementation is not complete yet: currently saturated
arithmetics implemented only for addition. But it is enough to not
regress any of layout tests we have :)

See https://github.com/SerenityOS/serenity/issues/18566
2023-07-25 11:52:02 +02:00
Aliaksandr Kalenik
5cdd03fc53 LibWeb: Fix divisions by zero in FFC and GFC
This is the preparation to use fixed-point to represent CSSPixels.
Previously, it was acceptable to divide CSSPixels by zero, resulting
in inf, but after migrating to fixed-point stored as an integer, it
would lead to undefined behavior.
2023-07-25 11:52:02 +02:00
Aliaksandr Kalenik
c66dbc99ee LibWeb: Use a special value to represent an infinite growth limit in GFC
This is preparation for introducing fixed-point CSSPixels in upcoming
commits.

Infinity is a valid state for the growth limit value of a grid track.
It was possible to use INFINITY when CSSPixels were represented using
floating point, but it won't work after the transition to fixed point,
which is represented using integers. This change addresses this by
using -1 as a special value to represent the infinite state of the
growth limit.
2023-07-25 11:52:02 +02:00
Andi Gallo
66c92ebe3d LibWeb: Fix vertical position of top table caption
Setting the top of the table coordinate should not consider the top
padding and margin of the caption, just the bottom and content height.
2023-07-25 11:21:07 +02:00
Andi Gallo
268355c759 LibWeb: Implement iterative percentage size for spanning table cells
Follow the computing column measures section of the specification, which
gives an algorithm for setting intrinsic percentage widths when spanning
columns are involved.
2023-07-23 16:11:20 +02:00
Andi Gallo
1f3fca996c LibWeb: Use intrinsic_percentage instead of percentage_{width, height}
Follow the terminology from specification.
2023-07-23 16:11:20 +02:00