Commit graph

249 commits

Author SHA1 Message Date
Aliaksandr Kalenik
a8587fe54e LibWeb: Add support for "place-items" CSS property
Adds support for place-items property which allows to specify both
align-items and justify-items in a single declaration.
2023-07-17 18:58:05 +02:00
Andreas Kling
8dd489da61 LibWeb: Fully resolve min- and max-sizes for flex items
We do this by piggybacking on FormattingContext helpers instead of
reinventing the wheel in FlexFormattingContext.

This fixes an issue where `min-width: fit-content` (and other
layout-dependent values) were treated as 0 on flex items.

This makes the cookie banners look okay on https://microsoft.com/ :^)
2023-07-17 08:40:15 +02:00
Aliaksandr Kalenik
07f451044b LibWeb: Fix inline-block percentage height calculation
If an inline-block has a percentage height that relies on the auto
height of the containing block, it should always resolve to the
automatic height of the box, regardless of the percentage value. This
change may seem confusing, but it aligns with the behavior of other
engines.
2023-07-16 15:00:30 +02:00
Andreas Kling
2887976ce9 LibWeb: Fully resolve max-width values on inline-block elements
This fixes an issue where `max-width: fit-content` (and other
layout-dependent values) were treated as 0 on inline-blocks.
2023-07-15 12:30:07 +02:00
Andreas Kling
3ec9fd0aae LibWeb: Resolve calc() values in CSS transform
There are two parts to this fix:

- First, StyleProperties::transformations() would previously omit calc()
  values entirely when returning the list of transformations. This was
  very confusing to StackingContext which then tried to index into the
  list based on faulty assumptions. Fix this by emitting calc values.

- Second, StackingContext::get_transformation_matrix() now always calls
  resolve() on length-percentages. This takes care of actually resolving
  calc() values. If no reference value for percentages is provided, we
  default to 0px.

This stops LibWeb from asserting on websites with calc() in transform
values, such as https://qt.io/ :^)
2023-07-15 11:35:16 +02:00
Aliaksandr Kalenik
2138c164c9 LibWeb: Respect justify-items property of grid container 2023-07-15 05:50:51 +02:00
Aliaksandr Kalenik
e4e1208050 LibWeb: Respect justify-self property of grid items 2023-07-14 15:48:58 +02:00
Andreas Kling
1470e60800 LibWeb: Add logical CSS properties for insets
This patch adds the following properties:

- inset-inline
- inset-inline-start
- inset-inline-end
- inset-block
- inset-block-start
- inset-block-end
2023-07-14 05:55:32 +02:00
Aliaksandr Kalenik
ca50da63e4 LibWeb: Do not crash if "fill: none" is specified for svg text 2023-07-13 18:43:21 +02:00
Aliaksandr Kalenik
e2c5e31292 LibWeb: Adjust grid columns size to fit spanning items
This change implements following paragraph from placement algorithm in
the spec:
"If the largest column span among all the items without a definite
column position is larger than the width of the implicit grid, add
columns to the end of the implicit grid to accommodate that column
span."

There were places in the grid implementation code with copies of this
text, but those were completely unrelated to the code where they were
being pasted so I removed them.
2023-07-13 16:54:53 +02:00
Andi Gallo
3476cf0fcb LibWeb: Add border conflict resolution with rowgroup 2023-07-12 20:42:51 +02:00
Andi Gallo
cf40b95be8 LibWeb: Resolve table border conflicts with rows 2023-07-12 20:42:51 +02:00
Andi Gallo
e30662a8a0 LibWeb: Resolve table border conflicts with cells
Build a mapping from coordinates to cells and use it to resolve
border conflicts between adjacent cells.
2023-07-12 20:42:51 +02:00
Emil Militzer
bf3144fcff LibWeb: Prevent max-width expanding the width 2023-07-12 11:44:57 +02:00
Andreas Kling
9174ffd7e6 LibWeb: Create Layout::Box for display: inline-grid
This makes us actually run a GridFormattingContext instead of rendering
inline-grid elements as nothing. :^)
2023-07-11 19:15:17 +02:00
Andi Gallo
a27c9d8b05 LibWeb: Use max width from content for cells unless length is specified
Max width shouldn't be tied to min width, commit d33b99d went too far
and made them the same when the table-root had a specified percentage
width.

Fixes #19940.
2023-07-11 14:37:30 +02:00
Andreas Kling
db5bde01dc LibWeb: Resolve % top and bottom insets against containing block height
This makes cookie banner buttons show up on Linktree again. :^)

Regressed in fd37ad3a84
2023-07-08 10:51:12 +02:00
Sebastian Zaha
fd37ad3a84 LibWeb: Fix absolute positioning issues
Make sure the insets and margins calculated according to the spec are
not later ignored and ad-hoc recomputed in
layout_absolutely_positioned_element.

Use the static position calculation in a couple of places where the
spec (and comment) was indicating it should be used.

Fixes #19362
2023-07-08 06:13:56 +02:00
Sebastian Zaha
6a66a05809 LibWeb: Adjust 4 abspos tests to highlight errors
The tests still pass, but opening the files in Ladybird and Safari or
Firefox shows clearly where the layouting in Ladybird is incorrect
for some absolute positioned elements. The previous 1px border was
subtly hiding some issues.
2023-07-08 06:13:56 +02:00
Andreas Kling
42675971e2 LibWeb: Resolve inline-block percentage padding against 0, not infinity
When the containing block has an indefinite width, any descendants with
a percentage size should resolve that against 0, not infinity.

Fixes an assertion failure when loading https://www.gnu.org/
2023-07-06 14:25:40 +01:00
Andreas Kling
3372a691da LibWeb: Don't let items flex to infinite size in column layout
When sizing under a max-content constraint, we allow flex lines to have
an infinite amount of "remaining space", but we shouldn't let infinity
leak into the geometry of items. So treat it as zero in arithmetic.

This fixes an issue where inline SVGs with natural aspect ratio (from
viewBox) but no natural width or height could get an infinite size as
flex items.
2023-07-06 09:25:48 +02:00
Andreas Kling
1177308afb LibWeb: Support justify-content: space-evenly in flex layouts
Aligns the cookie banner correctly on https://twitter.com/ :^)
2023-07-05 19:03:20 +02:00
Andreas Kling
4474aa0ae5 LibWeb: Resolve flex item auto cross sizes through aspect ratio
Makes the bird logo show up on https://twitter.com/ :^)
2023-07-05 19:03:20 +02:00
Andreas Kling
6b3b056476 LibWeb: Support CSS font shorthand with up to 4 consecutive normal
All of the following properties in the font shorthand can be `normal`:

- font-style
- font-variant
- font-weight
- font-stretch

This means that we must allow up to four consecutive `normal` at the
start of a font shorthand value.
2023-07-04 16:25:23 +02:00
Andreas Kling
793c2ff65a LibWeb: Improve align-items in abspos static position of flex child
Basically, just support more values. And add a test. :^)
2023-07-04 16:25:23 +02:00
Andreas Kling
80a734d42e LibWeb: Improve justify-content in abspos static position of flex child
Also, add a test so we know these actually work correctly now. :^)
2023-07-04 16:25:23 +02:00
Andreas Kling
477a96820d LibWeb: Support valign attribute on td elements
This presentational hint maps to the CSS `vertical-align` property.

Fixes #19786.
2023-07-04 13:26:49 +02:00
Andreas Kling
e7e454f1d6 LibWeb: Resolve used insets for grid items 2023-07-04 06:43:53 +02:00
Andreas Kling
03ec17fd37 LibWeb: Resolve used insets for flex items 2023-07-04 06:43:53 +02:00
Andreas Kling
c83ae729d2 LibWeb: Resolve used insets for floating elements
This makes the game carousel work on https://null.com/ :^)
2023-07-04 06:43:53 +02:00
Andreas Kling
510dfbb7e6 LibWeb: Update anonymous wrappers when applying style changes
Anonymous wrapper boxes inherit style from their layout tree parent,
and since style data is per-layout-node, we have to manually sync them
from parent to anonymous children when something changes.

This is not very elegant or efficient, so I've left a FIXME about
solving it in a nicer way.

This fixes horizontal dog alignment on https://waffles.dog/ :^)
2023-07-03 13:37:14 +02:00
Andreas Kling
b918ce4022 LibWeb: Make Layout::TextNode::text_for_rendering() lazily computed
As it turns out, Layout::TreeBuilder never managed to wrap text within
table boxes in anonymous wrapper boxes, since it relied on checking
text_for_rendering(), and that was never initialized during that early
stage of tree building.

This patch fixes the issue by making text_for_rendering() compute the
(potentially collapsed) text lazily when called.

Note that the test included with this patch is still totally wrong,
but that is now a TFC problem rather than a TreeBuilder problem. :^)
2023-07-03 11:50:58 +02:00
Sebastian Zaha
553694679e LibWeb: Fix alternating-sides float positioning
The "y" check for when to reset float side positioning was comparing an
offset that included the border, while the offset of the other side does
not.
2023-07-02 18:43:20 +02:00
Andreas Kling
3f022f4040 LibWeb: Treat non-finite containing block width as zero for percentages
Fixes an assertion when loading https://bun.sh/
2023-07-01 09:06:49 +02:00
Andi Gallo
d33b99dd24 LibWeb: Check whether table box width is auto when resolving cell width
Computing the table width algorithm bifurcates based on whether
table-root width is auto. We only adjust the used table width based on
cell percentage widths on the auto branch, thus the same check is needed
when we initialize cell widths.
2023-06-29 05:37:34 +02:00
Andi Gallo
4596d41291 LibWeb: Make cell percentage widths relative to table
Cell percentage widths are relative to table width, not containing
block width. If the table width is auto, there isn't a normative
specification, only a brief mention that the user agent should try to
meet it.

As a starting point, we increase the width of the table such that it's
sufficient to cover min-width of cells with a percentage width. This
matches the behavior of other browsers, at least for simple cases.
2023-06-28 16:14:42 +02:00
Andi Gallo
9cb4fe6a6f LibWeb: Don't distribute excess width to constrained columns
Bring our implementation closer to the specification, which distributes
excess width to unconstrained columns first.
2023-06-28 12:17:55 +02:00
Andi Gallo
8afe5ce718 LibWeb: Fix min-content initialization for row measures
This ensures that min-content contributions from cells with no content
are computed using their calculated values, which are never considered
for min-content before then. The specification diverges from column
measures algorithm, which doesn't use specified width of cells anywhere.
2023-06-26 19:25:34 +02:00
Andi Gallo
8b34af816e LibWeb: Report border box width for tables in a block
For the containing block, table borders are opaque and have to be
accounted when computing the table width since they use available space.
2023-06-25 08:13:04 +02:00
Andi Gallo
2c4908094c LibWeb: Don't subtract border from used table width
The used width is already a content width, which doesn't include
borders. Border widths should be subtracted from the specified width
instead, since that initially specifies the total width including
borders, for consistent comparison. Also handle table box padding as an
additional fix.
2023-06-25 08:13:04 +02:00
Andi Gallo
fc45831fb3 LibWeb/Tests: Better trigger for table style update test 2023-06-23 20:23:00 +02:00
Andi Gallo
55f1a70577 LibWeb: Fix style updates for table box nodes
On style update, we have to preserve the invariant established when we
built the layout tree - some properties are applied to the table wrapper
and the table box values are reset to their initial values.

This also ensures that the containing block of a table box is always a
table wrapper, which isn't the case if we set absolute position on the
box instead of the wrapper.

Fixes #19452.
2023-06-23 16:40:19 +02:00
Andi Gallo
8e52d1125d LibWeb: Take specified height into account for automatic table height
Track table grid height stretched to the specified height and use it to
set the final box height in TFC.

Fixes #19563.
2023-06-23 06:24:08 +02:00
Aliaksandr Kalenik
473848be0e LibWeb: Do not treat size of abspos items as definite
This fixes the issue when size of abspos items is considered to be
resolvable without performing layout which is not correct in the
scenarious when top/right/bottom/left properties are not auto.
2023-06-22 18:18:04 +02:00
Aliaksandr Kalenik
20edbb70f8 LibWeb: Implement distributing space to tracks beyond limits in GFC
Implements "Distribute space beyond limits" step from:
https://www.w3.org/TR/css-grid-2/#distribute-extra-space
2023-06-22 06:48:12 +02:00
Andi Gallo
caa24d0805 LibWeb: Implement top and bottom vertical-align for table cells 2023-06-22 06:45:58 +02:00
Aliaksandr Kalenik
8c980cf75b LibWeb: Do not crash inside SVGDecodedImageData on invalid SVG input
Return error when input svg is not valid and SVGSVGElement is not
present in the tree instead of doing svg_root nullptr dereference.

Fixes crash on https://apps.kde.org/en-gb/
2023-06-21 19:10:37 +02:00
Andi Gallo
5bd9f4c31c LibWeb: Add undistributable space to GRID{MIN, MAX} instead of content
Adding undistributable space right before setting the content width is
incorrect when it's a percentage. Follow the specification and add it to
GRIDMIN and GRIDMAX instead.
2023-06-21 06:15:04 +02:00
Aliaksandr Kalenik
a8211abc1e LibWeb: Support CSS functions other than calc() for grid sizes
Makes grid size parser to handle not only calc() but min(), max() and
other CSS functions we support.
2023-06-21 06:14:51 +02:00
Luke Wilde
f4446cdf8c LibWeb: Resolve padding against 0 and not inf for indefinite width more
In particular, in BFC:
- Non-floating, non-replaced elements
- Floating, non-replaced elements
- Floating, replaced elements

The first two regressed in 1d76126abe

The third one seems to have been introduced by this regression, as it
was seemingly copied from compute_width_for_floating_box in
7f9ede07bc
2023-06-21 06:13:05 +02:00