Commit graph

69 commits

Author SHA1 Message Date
Erik Kurzinger
42339be999 LibWeb: Use intrinsic size for current_image_bitmap
Currently, ImageProvider::current_image_bitmap takes a Gfx::IntSize
argument which determines the size of the returned bitmap. The default
value of this argument is 0x0 which causes the function to return
nullptr. This behavior is evidently unintuitive enough that it has lead
to incorrect usage in multiple places. For example, the 2D canvas
drawImage method will never actually draw anything because it calls
current_image_bitmap with no arguments. And the naturalWidth and
naturalHeight of an image will always return 0 (even after the image has
loaded) for the same reason.

To correct this and hopefully avoid similar issues in the future,
ImageProvider::current_image_bitmap will be renamed to
current_image_bitmap_sized, and the default value for the size argument
will be removed. For consistency, a similar change will be made to
SVGImageElement::default_image_bitmap.

The existing current_image_bitmap function will no longer take a size
argument. Instead it will always return a bitmap of the image's
intrinsic size. This seems to be what most existing callers had already
assumed was the function's behavior.
2025-08-30 15:49:11 +02:00
Andreas Kling
3d97251da3 LibWeb: Wrap out-of-flow table children in anonymous table cells
This fixes an issue where floating children of a table box would not get
laid out at all if they were surrounded by nothing but whitespace.
2025-08-25 14:55:19 +02:00
Jelle Raaijmakers
9e29d0c040 LibWeb: Make button layout wrappers inherit styles correctly
There are some nuances to creating these wrappers, such as manually
propagating certain text styles that are not inherited by default. We
already have the logic for this in
`NodeWithStyle::create_anonymous_wrapper()`, so reuse that method in our
implementation of the button layout.

Fixes applying certain text styles (such as `text-decoration`) to the
text of a `<button>`.
2025-08-19 11:12:23 +02:00
Jelle Raaijmakers
087601832a LibWeb: Set fit-content width for buttons in used values, not computed
For button layouts, we were overriding the computed `width` value with
`fit-content` in `TreeBuilder::wrap_in_button_layout_if_needed()`. But
the spec asks us to set the _used value_ instead, so we now actually
calculate the fit-content width and set the box' content width to it.

Fixes #2516.
2025-08-18 11:04:34 +01:00
Jelle Raaijmakers
ff5f80a196 LibWeb: Add HTMLElement::uses_button_layout()
This suits the spec a bit better, and exposes the fact that we were
allowing `::ImageButton` to use the button layout although it is never
specified that it should do so. Tests were rebaselined for this.
2025-08-18 11:04:34 +01:00
Andreas Kling
81d4079c12 LibWeb: Support CSS content property images (and lists, too!)
This patch expands our generated content support beyond single strings
to lists of strings and/or images.

Pseudo-elements like ::before and ::after can now use content:url(...)
to insert anonymous image boxes into the layout tree.

This is heavily used in Google Docs for UI elements.
2025-07-28 22:46:27 +02:00
Timothy Flynn
97548f48de LibWeb: Port rendered text to UTF-16
This migrates TextNode::text_for_rendering() to Utf16String and deals
with the fallout. As a consequence, this effectively reverts commit
3df83dade8.

The layout test expecation file updates are because we now express text
lengths and offsets in UTF-16 code units.

The selection-over-multiple-code-units expectation file update actually
represents a correctness fix. Our result now matches Firefox.
2025-07-25 18:16:22 +02:00
Timothy Flynn
8b6e3cb735 LibWeb+LibUnicode+WebContent: Port DOM:CharacterData to UTF-16
This replaces the underlying storage of CharacterData with Utf16String
and deals with the fallout.
2025-07-24 19:00:20 +02:00
Aliaksandr Kalenik
2fc405f1b2 LibWeb: Allow to pass pseudo-element type in computed properties getter
...and setter. We had lots of places where we check if pseudo-element
type is specified and then use `pseudo_element_computed_properties()` or
`computed_properties()`. This change moves these checks from caller side
to the getter and setter.
2025-07-18 21:19:37 +02:00
Jelle Raaijmakers
edca2ab666 LibWeb: Do not create an anonymous container for table cells by default
We were always creating an anonymous container for the inline contents
of table cells, but the layout node we spawn for the table cells
themselves already is capable of dealing with inline nodes. Regular
logic should kick in for dealing with the block/inline node invariant.
2025-07-15 10:06:36 +02:00
Andreas Kling
ddcb87fb40 LibWeb: Make TreeBuilder nicer to SVG foreignObject
This patch does two things:

1. Makes TreeBuilder never cross the foreignObject boundary when looking
   for an appropriate insertion parent. Before this change, we would
   sometimes make things inside the foreignObject DOM subtree have
   layout nodes outside the foreignObject.

2. Makes foreignObject boxes participate in the anonymous wrapping of
   inline-level boxes. This is particularly imporant for absolutely
   positioned elements inside foreignObject, which were previously
   getting incorrectly wrapped if there was any text (even empty)
   preceding the abspos element.
2025-07-09 14:36:08 +02:00
Sam Atkins
2c7310553a LibWeb/Layout: Reuse create_pseudo_element_if_needed() for ::backdrop 2025-06-19 12:35:31 +01:00
Sam Atkins
9c656dd7d1 LibWeb/Layout: Only apply ::before/::after creation rules to them 2025-06-19 12:35:31 +01:00
Sam Atkins
c1d4323cf7 LibWeb: Support counter-* properties on pseudo-elements
There are multiple things happening here which are interconnected:

- We now use AbstractElement to refer to the source of a counter, which
  means we also need to pass that around to compute `content`.

- Give AbstractElement new helper methods that are needed by
  CountersSet, so it doesn't have to care whether it's dealing with a
  true Element or PseudoElement.

- The CountersSet algorithms now walk the layout tree instead of DOM
  tree, so TreeBuilder needs to wait until the layout node exists
  before it resolves counters for it.

- Resolve counters when creating a pseudo-element's layout node. We
  awkwardly compute the `content` value up to twice: Once to figure out
  what kind of node we need to make, and then if it's a string, we do
  so again after counters are resolved so we can get the true value of
  any `counter()` functions. This will need adjusting in the future but
  it works for now.
2025-06-19 12:35:31 +01:00
Sam Atkins
a6df9e1bac LibWeb/Layout: Store computed style for ::marker
This lets us refer to its properties later, for example to resolve its
counters.
2025-06-19 12:35:31 +01:00
Sam Atkins
dfce9974b5 LibWeb: Remove GeneratedPseudoElement enum
This doesn't currently provide any value over just using PseudoElement,
and makes it harder to work with PseudoElement in other places.
2025-06-19 12:35:31 +01:00
Sam Atkins
a57595faf5 LibWeb: Make [resolve,inherit]_counters() take AbstractElement
This is one of those cases where the spec says "element" and
means "element or pseudo-element". The easiest way to handle both is to
make these be free functions that take an AbstractElement, and then
give AbstractElement some helper methods so that the caller doesn't
have to care which it's dealing with.

There are some FIXMEs here because PseudoElement doesn't have a
CountersSet yet, and because the CountersSet currently uses a
UniqueNodeID to identify counter sources, which doesn't support
pseudo-elements.
2025-06-19 12:35:31 +01: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
Timothy Flynn
7280ed6312 Meta: Enforce newlines around namespaces
This has come up several times during code review, so let's just enforce
it using a new clang-format 20 option.
2025-05-14 02:01:59 -06: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
Jelle Raaijmakers
94ae63c436 LibWeb: Wrap inline children without utilizing a Vector
No functional changes.
2025-04-24 19:12:50 +02:00
Jelle Raaijmakers
6f800caeaa LibWeb: Don't mess up the order of nodes when wrapping inline contents
Whenever we introduce a block element in a container that at that point
has only had inline children, we create an anonymous wrapper for all the
inline elements so we can keep the invariant that each container
contains either inline or non-inline children. For some reason, we
ignore all the out-of-flow nodes since they are layed out separately and
it was thought that this shouldn't matter.

However, if we are dealing with inline blocks and floating blocks, the
order of the inline contents _including_ out-of-flow nodes becomes very
important: floating blocks need to take the order of nodes into account
when positioning themselves.

Fix this by simply hoisting the out-of-flow nodes into the anonymous
wrapper as well.

Fixes the order of blocks in #4212. The gap is still not present.
2025-04-24 19:12:50 +02:00
Andreas Kling
545ed08519 LibWeb: Add debug logging of reasons for layout tree update
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
2025-04-21 00:31:08 +02:00
Gingeh
bbf4f546af LibWeb: Only create backdrop when originating element is invalidated 2025-04-16 09:01:08 -06:00
Gingeh
972547635f LibWeb: Dispatch pointer events to ::backdrop originating element 2025-04-09 12:10:42 +01:00
Gingeh
4b9f5c6fb8 LibWeb: Generate ::backdrop pseudo-elements 2025-04-09 12:10:42 +01:00
Glenn Skrzypczak
1022566bff LibWeb/Layout: Properly remove layout nodes
Some checks are pending
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, 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 (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 properly remove the old layout node subtree when no new layout
node is created during layout update.
2025-03-31 18:19:58 +01:00
Oliver Medhurst
b272bb3373 LibWeb: Fix ::marker placement in tree
Fixes ::marker (pseudo-element) placement in the tree for list-items.

Previously:
- ::before
- content
- ::marker
- ::after

Now (matches Firefox, afaik per-spec):
- ::marker
- ::before
- content
- ::after
2025-03-27 23:10:09 +00:00
Sam Atkins
2c86fd539d LibWeb: Generate an enum for generated pseudo-elements 2025-03-24 09:49:50 +00:00
Sam Atkins
0ed2e71801 LibWeb/CSS: Move and rename PseudoElement types to prep for code gen
The upcoming generated types will match those for pseudo-classes: A
PseudoElementSelector type, that then holds a PseudoElement enum
defining what it is. That enum will be at the top level in the Web::CSS
namespace.

In order to keep the diffs clearer, this commit renames and moves the
types, and then a following one will replace the handwritten enum with
a generated one.
2025-03-24 09:49:50 +00:00
Aliaksandr Kalenik
76aa99a626 LibWeb: Update HTMLSlotElement subtree during partial layout tree build
Before this change, the layout tree for slots was only updated after
creating a layout node for the slot itself. This was not enough to
account for partial layout tree rebuilds when the slot content changed.
With this change, we always recurse into the slot content.

Fixes expanding and collapsing of nodes in DOM tree inspector broken in
9b26f7eb0f
2025-03-13 04:29:26 +01:00
Andreas Kling
7d4d7da28a LibWeb: Wrap inline children of table-cell in anonymous block
This fixes an issue where CSS vertical-align on a table-cell box would
incorrectly apply to both the table-cell box and any inline content it
had inside.
2025-02-25 23:55:36 +01: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
Glenn Skrzypczak
0750513993 LibWeb: Support reversed ordered lists
Some checks are pending
CI / Lagom (false, NO_FUZZ, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, FUZZ, 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 PR adds support for the `reversed` attribute of
ordered lists.
2025-02-21 04:23:28 +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
Jelle Raaijmakers
c0109039cb LibWeb: Do not consider <foreignObject> for inline continuation
We used to have an exception for this element that erroneously got
removed in 336684bc5c.

Fixes #3453.
2025-02-19 13:49:24 +01:00
Jelle Raaijmakers
de7ca7b157 LibWeb: Retain display: contents in ancestor stack for continuations
When restructuring inline nodes because of a block element insertion
during the layout tree build, we might end up with a `display: contents`
element in the ancestor stack that is not part of the actual layout
tree, since it's never actually used as a parent for any node. Because
we were only rewinding the ancestor stack with actual new layout nodes,
it became corrupted and layout nodes were added to the wrong parent.

This new logic leaves the ancestor stack intact, only replacing layout
nodes whenever a new one is created.

Fixes the sidebar on https://reddit.com.
Fixes #3590.
2025-02-18 23:31:49 +01:00
Psychpsyo
402d8220dd LibWeb: Make style containment influence quotes 2025-02-06 17:44:50 +00:00
Andreas Kling
4fa372564d LibWeb: Support both ::before/::after pseudo elements on button elements
This was mainly a matter of deferring the wrapping of the button's
children until after its internal layout tree has been constructed.
That way we don't lose any pseudo elements spawned along the way.

Fixes #2397.
Fixes #2399.
2025-02-03 15:59:38 +01:00
Gingeh
108f3a9aac LibWeb: Implement popovertarget buttons 2025-01-30 15:46:52 -07: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
Andreas Kling
7ae46bf8b7 LibWeb: Allow partial update of SVG subtrees in layout tree
We were incorrectly always appending to the nearest ancestor in the
partial update case, even when the node was eligible for replacement.
2025-01-21 00:08:25 +01:00
Andreas Kling
c01d810e5a LibWeb: Implement partial layout tree updates
DOM nodes now have two additional flags:

- Needs layout tree update
- Child needs layout tree update

These work similarly to the needs-style-update flags, but instead signal
the need to rebuild the corresponding part of the layout tree.

When a specific DOM node needs a layout tree update, we try to create
a new subtree starting at that node, and then replace the subtree in the
old layout tree with the newly created subtree.

This required some refactoring in TreeBuilder so that we can skip over
entire subtrees during a tree update.

Note that no partial updates happen yet (as of this commit) since we
always invalidate the full layout tree still. That will change in the
next commit.
2025-01-18 21:01:01 +01:00
Andreas Kling
b41a490e40 LibWeb: Don't (anonymously) wrap table boxes that are already wrapped
Instead just update the existing wrapper with computed values from the
table box, to insure that upside-down "inheritance" works as expected.

This allows table fixup to run on partially updated layout trees without
adding a new layer of unnecessary wrappers every time.
2025-01-18 21:01:01 +01:00
Andreas Kling
74469a0c1f LibWeb: Make CSS::ComputedProperties GC-allocated 2024-12-22 10:12:49 +01:00
Andreas Kling
c1cad8fa0e LibWeb: Rename CSS::StyleProperties => CSS::ComputedProperties
Now that StyleProperties is only used to hold computed properties, let's
name it ComputedProperties.
2024-12-22 10:12:49 +01:00
Kostya Farber
81f8866606 LibWeb: Lay out the fieldset's rendered legend 2024-11-29 12:36:52 +00:00
Shannon Booth
f87041bf3a LibGC+Everywhere: Factor out a LibGC from LibJS
Resulting in a massive rename across almost everywhere! Alongside the
namespace change, we now have the following names:

 * JS::NonnullGCPtr -> GC::Ref
 * JS::GCPtr -> GC::Ptr
 * JS::HeapFunction -> GC::Function
 * JS::CellImpl -> GC::Cell
 * JS::Handle -> GC::Root
2024-11-15 14:49:20 +01:00