Commit graph

304 commits

Author SHA1 Message Date
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
63e72feee1 LibWeb: Add additional term to the table cell min contribution
Align with specification.
2023-07-22 07:06:50 +02:00
Andi Gallo
6dfa1c2548 LibWeb: Distribute excess width to columns as in specification 2023-07-22 07:06:50 +02:00
Andi Gallo
eb20eeb54c LibWeb: Use column and row size for cell outer sizes
Better aligns our implementation with the specification, which requires
that we check columns and column groups too.
2023-07-22 07:06:50 +02:00
Andi Gallo
28509e3edd LibWeb: Check column or row size attributes for constrainedness
Better aligns our implementation with the specification, which requires
that columns and groups of columns are checked too.
2023-07-22 07:06:50 +02:00
Andi Gallo
19a26533a9 LibWeb: Make the type of column whether it's percent or not
Change how we store type of columns. It was used where the specification
only distinguishes between percent and everything else, so it makes more
sense to store and use it as a boolean.
2023-07-22 07:06:50 +02:00
Andi Gallo
030b1a197b LibWeb: Don't use the preferred increment as reference for distribution
The specification says we should distribute excess width proportionally
to the width of the cell, not to the preferred increment. Doing the
latter leads to distributing all excess width to just the cells which
demand some increment, even if it's very modest. Moreover, there's code
which partially implements the correct criteria just below the one we
remove here.
2023-07-22 07:06:50 +02:00
Aliaksandr Kalenik
fd9b3bdc94 LibWeb: Support auto vertical margins for grid items 2023-07-21 21:09:45 +02:00
Andreas Kling
ac124fbaae LibWeb: Resolve flex item percentages against used flex container sizes
Once we've resolved the used flex item width & height, we should allow
percentage flex item sizes to resolve against them instead of forcing
flex items to always treat percentages as auto while doing intrinsic
sizing layout.

Regressed in 8dd489da61.
2023-07-18 06:04:55 +02:00
Sebastian Zaha
92b56ded02 LibWeb: Fix whitespace getting trimmed incorrectly
Whitespace at the end of line should only be trimmed when
'white-space' is set to 'normal', 'nowrap', or 'pre-line'.
2023-07-17 21:47:34 +02:00
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
MacDue
1bc7b0320e LibGfx: Approximate elliptical arcs with cubic beziers
Unlike all other primitives elliptical arcs are non-trivial to
manipulate, it's tricky to correctly apply a Gfx::AffineTransform to
them. Prior to this change, Path::copy_transformed() was still
incorrectly applying transforms such as flips and skews to arcs.

This patch very closely approximates arcs with cubic beziers (I can not
visually spot any differences), which can then be easily and correctly
transformed in all cases.

Most of the maths here was taken from:
https://mortoray.com/rendering-an-svg-elliptical-arc-as-bezier-curves/
(which came from https://www.joecridge.me/content/pdf/bezier-arcs.pdf,
now a dead link).
2023-07-16 06:22:55 +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
Sebastian Zaha
17d23e76e5 LibWeb: Fix flex & abspos alignment issues
Fixes a couple of weirder interactions between justify-content and
flex-direction related to reverse direction packing and how margins
are set.
2023-07-10 20:57:49 +02:00
Andi Gallo
4c81d39483 LibWeb: Adjust border widths for tables using collapsing borders
When using the collapsing border model, cells on either side of the edge
get half the specified width of the border for their box model.
2023-07-09 06:29:43 +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
MacDue
40fa07a6e1 LibWeb: Force paintable to exist for SVG <g> elements
This (along with the previous commit) fixes the missing tears on the
sad Duolingo owl.
2023-07-02 01:31:18 +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
Haikal Zain
bf16618fba LibWeb: Add vertical border heights to tr
tr y offset is not being computed correctly.
This is causing errors in hit testing since
td and tr are misaligned.
2023-07-01 08:07: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