Commit graph

101 commits

Author SHA1 Message Date
Andreas Kling
8e49b69f42 LibWeb: Never split <svg> for inline continuations
This fixes an issue where we'd make an absolute mess from nested SVG
roots with display:block. Before this fix, the inner SVG root would
trigger the inline continuation logic and try to split the tree.
2025-07-12 14:11:41 +02:00
Aliaksandr Kalenik
910fd426a2 LibWeb: Allow <svg> to establish a stacking context
83b6bc4 went too far by forbidding SVGSVGElement from establishing a
stacking context. This element type does follow the behavior of CSS
boxes, unlike inner SVG elements like `<rect>`, `<circle>`, etc., which
are not supposed to be aware of concepts like stacking contexts,
overflow clipping, scroll offsets, etc.

This change allows us to delete overrides of `before_paint()` and
`after_paint()` in SVGPaintable and SVGSVGPaintable, because display
list recording code has been rearranged to take care of clipping and
scrolling before recursing into SVGSVGPaintable descendants.

`Screenshot/images/css-transform-box-ref.png` expectation is updated and
fixes a bug where a rectangle at the very bottom of the page was not
clipped correctly.
`Screenshot/images/svg-filters-lb-website-ref.png` has a more subtle
difference, but if you look closely, you’ll see it matches other
browsers more closely now.
2025-07-12 11:01:15 +02:00
Tim Ledbetter
438bb56160 LibWeb/SVG: Don't crash when a filter has no valid effects 2025-07-10 00:18:25 +02:00
Lucien Fiorini
635adc8aa7 LibWeb/SVG: Implement resolution for a subset of SVG filters 2025-07-09 18:07:12 +01:00
Andreas Kling
f343a418b2 LibWeb: Never split SVG foreignObject for inline continuations
This would produce a bizarre layout tree and certainly not yield
expected results.
2025-07-09 14:36:08 +02:00
Andreas Kling
0cf9a4543a LibWeb: Make SVG foreignObject establish a new stacking context
This matches the behavior of Blink and Gecko, but not WebKit.
2025-07-09 14:36:08 +02:00
Callum Law
9ab7c5d08d LibWeb: Support relative lengths in calc color values
Gains us ~40 WPT tests.
2025-07-04 13:18:55 +01:00
Callum Law
62d138ebf7 LibWeb: Allow passing a resolution context to CSSStyleValue::to_color
This will be used for resolving any calculated style values within the
various `CSSColorValue` sub-classes.

No functionality changes.
2025-07-04 13:18:55 +01:00
Tim Ledbetter
68035a2b8d LibWeb/CSS: Add the text-rendering property 2025-06-27 16:51:30 +01:00
Tim Ledbetter
48f56cad08 LibWeb: Handle non-numeric font-weight values in keyframes
Previously, using `font-weight` with a keyword or `calc()` value inside
a keyframe rule would cause a crash.
2025-06-25 09:01:56 +02:00
Gingeh
b85a8a23a7 LibWeb: Handle percentage font-size values 2025-06-24 12:42:26 +01:00
Tim Ledbetter
9b6da84fff LibWeb/CSS: Implement the font-kerning property
This sets whether the kerning information stored on the current font is
used.
2025-06-23 13:26:48 +01:00
Tim Ledbetter
e0af205d69 LibWeb/CSS: Implement the empty-cells property
This property sets whether table borders and backgrounds are painted
if a given table cell has no visible content.
2025-06-18 14:55:03 +01:00
Andreas Kling
3e1ee37c6a LibWeb: Don't claim that inline layout nodes can contain abspos elements
Some checks are pending
CI / Linux, x86_64, Sanitizer_CI, Clang (push) Waiting to run
CI / macOS, arm64, Sanitizer_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, GNU (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
We assume elsewhere that any abspos element's containing block must be
some kind of Layout::Box, so let's enforce that when deciding if a box
can be such a container.

This fixes a bad downcast on https://serpapi.com/
2025-06-07 16:51:07 +02:00
Tim Ledbetter
e2d0d8e2b9 LibWeb/CSS: Implement the scrollbar-color property
This allows the user to set the scrollbar thumb and track colors.
2025-06-02 00:17:51 +02:00
Lucien Fiorini
0fcb574041 LibGfx+LibWeb: Turn Gfx::Filter into a SkImageFilter wrapper 2025-06-01 23:22:10 +02:00
Callum Law
94f5a51820 LibWeb: Convert white-space CSS property to shorthand
This exposed a few bugs which caused the following tests to behave
incorrectly:
- `tab-size-text-wrap.html`: This previously relied on a bug where we
  incorrectly treated `white-space: pre` as allowing text wrapping. The
  fix here is to implement the text-wrap CSS shorthand property.

- `execCommand-preserveWhitespace.html`: We don't correctly serialize
  shorthand properties. This is covered by an existing FIXME in
  `CSSStyleProperties::serialized()`

- `white-space-shorthand.html`: The last 5 subtests here fail as we
  don't correctly handle shorthand properties in
  `CSSStyleProperties::remove_property()`. This is covered by an
  existing FIXME in said function.
2025-05-29 12:04:28 +02:00
Callum Law
50bdd2cb85 LibWeb: Parse and propagate text-wrap-mode CSS property 2025-05-29 12:04:28 +02:00
Callum Law
ea30356fba LibWeb: Parse and propagate white-space-collapse CSS property 2025-05-29 12:04:28 +02:00
Aziz Berkay Yesilyurt
6711438e0d LibWeb: Ensure anonymous wrappers inherit inline-block display
When restructuring a block node inside an inline parent, if the
nearest block ancestor is `display: inline-block`, ensure that
the generated anonymous wrappers also have `display: inline-block`.
This fixes layout issues with block elements nested
inside inline-block elements.
2025-05-23 11:16:06 +02:00
Tim Ledbetter
7d7bab7cac LibWeb: Ensure resolved border-width values are non-negative 2025-05-19 09:55:09 +02:00
Psychpsyo
a0be82b2cb LibWeb: Move containment checks to Layout::Node
Some checks are pending
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (arm64, macos-15, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (x86_64, ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
It fits better there and avoids having to reach into the Element
all the time.
2025-05-13 15:30:14 +03:00
Mark Langen
6cbb5d2785 LibWeb: Parse and propagate touch-action CSS property
Co-authored-by: Sam Atkins <sam@ladybird.org>
2025-05-06 12:22:01 +01:00
Sam Atkins
326933cd93 LibWeb/CSS: Use CSS::URL for <url> and <paint> types 2025-04-30 17:38:38 +01:00
Andreas Kling
26c48c16aa LibWeb: Remove broken anonymous table wrapper layout invalidation
The special case for anonymous table wrappers actually ended up hurting
correctness by preventing the full ancestor chain from being marked for
for intrinsic size cache invalidation.

Caused Layout/input/table/propagate-style-update-to-wrapper.html to
flake on CI, and was easy to reproduce locally with sanitizers.

The fix here is simply to remove the special handling of anonymous table
wrapper parents, since *all* parents are invalidated automatically
anyway!

Began flaking in fa9c463ffd.
2025-04-23 19:43:34 -04:00
Andreas Kling
fa9c463ffd LibWeb: Allow anonymous layout boxes to keep their intrinsic size cache
Instead of indiscriminately clearing the cache for all anonymous boxes,
we now only clear it for those that were generated by a non-anonymous
box in need of layout update.

This increases the cache hit rate and allows us to avoid more work.
2025-04-21 00:31:08 +02:00
Andreas Kling
3c15fec303 LibWeb: Move "needs layout update" flag from DOM to layout tree
This is in preparation for allowing anonymous boxes to retain their
intrinsic size cache across layouts.
2025-04-21 00:31:08 +02:00
Andreas Kling
28d564197c LibWeb: Compute containing block boxes once at start of layout
We now cache the containing block (box) once at the start of layout,
which allows Layout::Node::containing_block() to return instantly
instead of doing tree traversal.

Removes a 0.7% profile item on Speedometer 3.
2025-04-19 01:14:02 +02:00
Tim Ledbetter
32812f5db0 LibWeb: Return absolutized computed value for outline width property 2025-04-05 12:54:22 +02:00
Glenn Skrzypczak
9973b01848 LibWeb/CSS: Improved implementation of background-blend-mode
This is a improved version of a73cd88f0c
The old commit was reverted in 552dd18696

The new version only paints an element into a new layer if background
blend modes other than normal are used. The rasterization performance
of most websites should therefore not suffer.

Co-Authored-By: Alexander Kalenik <kalenik.aliaksandr@gmail.com>
2025-04-01 13:38:00 +02:00
Aliaksandr Kalenik
552dd18696 Revert "LibWeb/CSS: Implement 'background-blend-mode'"
This reverts commit a73cd88f0c.

Emitting SaveLayer for each paintable made rasterization a lot slower
on every website because now Skia has to allocate enormous amounts of
temporary surfaces. Let's revert it for now and figure how to implement
it with less aggressive SaveLayer usage.
2025-03-28 16:48:03 +00:00
Glenn Skrzypczak
a73cd88f0c LibWeb/CSS: Implement 'background-blend-mode'
This implements the 'background-blend-mode' CSS property.
2025-03-28 09:41:06 +00:00
Sam Atkins
2c86fd539d LibWeb: Generate an enum for generated pseudo-elements 2025-03-24 09:49:50 +00:00
stasoid
a6935299eb LibWeb: Correctly calculate static position rect when absolutely
positioned element is a descendant of inline-block

Sets inline block offsets in InlineFormattingContext.cpp, but this is
not enough. When static position rect is calculated during layout,
not all ancestors of abspos box may have their offsets calculated yet
(more info here: https://github.com/LadybirdBrowser/ladybird/pull/2583#issuecomment-2507140272).
So now static position rect is calculated relative to static containing
block during layout and calculation relative to actual containing block
is done later in
FormattingContext::layout_absolutely_positioned_element.

Fixes wpt/css/CSS2/abspos/static-inside-inline-block.html
2025-03-17 15:55:06 +01:00
Tim Ledbetter
88d35c547c LibWeb/CSS: Implement the caret-color property 2025-03-09 19:36:29 +01:00
Tommy van der Vorst
056205aa76 LibWeb/CSS: Treat 'mask' as a longhand property
Before this change, an element masked with 'mask-image: url(...)' would
show the mask, but 'mask: url(...)' would not. On e.g. dialogic.nl it
would show white boxes instead of the actual images in the top
navigation bar. We still do not support many of the other mask
properties, but with this change at least the masks show up in both
cases.
2025-03-05 12:10:02 +00:00
InvalidUsernameException
f7276bfab3 LibWeb: Reduced number of recompiled files for CSS property headers
Some checks are pending
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
This reduces the number of `.cpp` files that need to be recompiled when
one of the below header files changes as follows:

CSS/ComputedProperties.h: 1113 -> 49
CSS/ComputedValues.h: 1120 -> 209
2025-02-23 10:14:39 -05:00
Psychpsyo
c0eb072645 LibWeb: Add CSS view-transition-name 2025-02-22 14:52:13 +00:00
Jelle Raaijmakers
5f5d18d719 LibWeb: Do not crash when inserting block elements into inline SVGBoxes
Fixes #3395.
2025-02-19 13:49:24 +01:00
Jelle Raaijmakers
0c58dad7a6 LibWeb: Factor out conditions for creation of inline continuation
Having one big `if` to determine whether or not we should restructure an
inline layout node became a bit unwieldy. This extracts the logic into a
separate method.
2025-02-19 13:49:24 +01:00
InvalidUsernameException
29d74632c7 LibWeb: Move z-index to table wrapper box
When drawing a table, some of the CSS properties must be moved from the
table grid box to an anonamyous table wrapper box. One of these
properties is `position`. `z-index` however is not. This leads to the
following behavior if a table has both `position` and `z-index`:
* The wrapper box has the `position`, but a `z-index` of `auto`.
* The grid box has the `z-index`, but `position: static`.

This effectively means that the `z-index property is ignored since it
has no effect on non-positioned elements. This behavior contradicts what
other browsers do and causes layout issues on websites.

To align Ladybird behavior with other browser this commit also moves the
`z-index` property to the wrapper box.
2025-02-16 21:05:59 +01:00
Sam Atkins
4cb2063577 LibWeb/CSS: Stop returning Optional for enum properties
While keyword_to_foo() does return Optional<Foo>, in practice the
invalid keywords get rejected at parse-time, so we don't have to worry
about them here. This simplifies the user code quite a bit.
2025-02-05 18:12:36 +01:00
Jelle Raaijmakers
d94906fa1a LibWeb: Only apply style for continuation nodes once
This fixes the very, _very_ slow loading of https://yzy-sply.com. The
`apply_style()` method also calls into this method recursively, so we
just need to call it once instead of once per node in the continuation
chain.
2025-02-05 14:34:21 +01:00
Jelle Raaijmakers
cd4aca57c4 LibWeb: Use as_if<> in style propagation for continuation nodes
No functional changes.
2025-02-05 14:34:21 +01:00
Glenn Skrzypczak
0fe30886f5 LibWeb/CSS: Implement mix-blend-mode
This adds support for the `mix-blend-mode` CSS property.
2025-02-05 11:26:58 +00:00
Sam Atkins
385c3d273a LibWeb/CSS: Update CalculatedOr API to use CalculationResolutionContext
To be properly compatible with calc(), the resolved() methods all need:
- A length resolution context
- To return an Optional, as the calculation might not be resolvable

A bonus of this is that we can get rid of the overloads of `resolved()`
as they now all behave the same way.

A downside is a scattering of `value_or()` wherever these are used. It
might be the case that all unresolvable calculations have been rejected
before this point, but I'm not confident, and so I'll leave it like
this for now.
2025-01-30 19:31:54 +01:00
Sam Atkins
1d71662f31 LibWeb/CSS: Wrap calc()-resolution data in a struct
Initially I added this to the existing CalculationContext, but in
reality, we have some data at parse-time and different data at
resolve-time, so it made more sense to keep those separate.

Instead of needing a variety of methods for resolving a Foo, depending
on whether we have a Layout::Node available, or a percentage basis, or
a length resolution context... put those in a
CalculationResolutionContext, and just pass that one thing to these
methods. This also removes the need for separate resolve_*_percentage()
methods, because we can just pass the percentage basis in to the regular
resolve_foo() method.

This also corrects the issue that *any* calculation may need to resolve
lengths, but we previously only passed a length resolution context to
specific types in some situations. Now, they can all have one available,
though it's up to the caller to provide it.
2025-01-30 19:31:54 +01:00
Psychpsyo
67ed676831 LibWeb: Implement CSS 'contain' property 2025-01-28 11:24:40 +00:00
Jelle Raaijmakers
336684bc5c LibWeb: Support inserting non-inline elements into inline elements
Our layout tree requires that all containers either have inline or
non-inline children. In order to support the layout of non-inline
elements inside inline elements, we need to do a bit of tree
restructuring. It effectively simulates temporarily closing all inline
nodes, appending the block element, and resumes appending to the last
open inline node.

The acid1.txt expectation needed to be updated to reflect the fact that
we now hoist its <p> elements out of the inline <form> they were in.
Visually, the before and after situations for acid1.html are identical.
2025-01-23 09:33:10 +01:00
Timothy Flynn
85b424464a AK+Everywhere: Rename verify_cast to as
Follow-up to fc20e61e72.
2025-01-21 11:34:06 -05:00