This will allow resolving paths that use sizes that are relative to the
viewport. This necessarily removes the on element caching, which has
been redundant for a while as computed paths are stored on the
paintable.
The property values here will always be StyleValueLists and not
TransformationStyleValues. The handling of interpolation in this case
gets quite a bit more complex, so let's just remove the dead code for
now and attempt this optimization again in the future if it's needed.
From https://drafts.csswg.org/css-backgrounds-4/#background-clip
"The background is painted within (clipped to) the intersection of the
border box and the geometry of the text in the element and its in-flow
and floated descendants"
This change implements it in the following way:
1. Traverse the descendants of the element, collecting the Gfx::Path of
glyphs into a vector.
2. The vector of collected paths is saved in the background painting
command.
3. The painting commands executor uses the list of glyphs to paint a
mask for background clipping.
Co-authored-by: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
This allows us to avoid the need for costly traversals to gather
boxes that have been saved during the construction of the stacking
context tree.
No behavior change intended.
To avoid differing logic for serializing and deserializing similar
types, move the logic into separate helpers.
Also, adds security checks like VERIFY to avoid reading past the end of
the serialized data. If we try to read past the end of the serialized
data, either our program logic is wrong or our serialized data has
somehow been corrupted. Therefore, at least currently, it is better to
crash by VERIFYing.
To avoid differing logic for deserializing similar types, move the logic
into separate helpers.
Also, adds security checks like VERIFY to avoid reading past the end of
the serialized data. If we try to read past the end of the serialized
data, either our program logic is wrong or our serialized data has
somehow been corrupted. Therefore, at least currently, it is better to
crash by VERIFYing.
Skipping all stacking contexts with a size larger than 10000px in one
dimension was a mistake because it also affects pages that are simply
tall due to having a lot of content. Instead, we only need to skip if
the stacking context requires the allocation of a framebuffer that
could possibly fail.
Fixes https://github.com/SerenityOS/serenity/issues/23397
By caching the layout node and its computed values in locals, we can
avoid the small amount of redundant work needed to look them up every
single time.
This removes indirection when asking if a paintable is positioned,
floating, etc.
Removes a bunch of 1-1.5% items in the profile when hovering links
on ziglang.org.
This can be perfectly valid, and depends on the property being animated.
For example, interpolating between the StyleValue "none" (an identifier)
and a TransformationStyleValue is perfectly defined.
In the upcoming commits where we properly handle transformation
interpolation, it actually becomes easier to change this back to custom,
so lets do that since its more correct anyways.
...to avoid allocating a copy of glyph run for painting commands. We
can't simply save pointers to a glyph run in layout/paintable tree
because it should be safe to deallocate layout and paintable trees
after painting commands are recorded, if in the future we decide to
move command execution to a separate thread.
Instead of allocating a new glyph run to scale glyph positions and
fonts, a scale factor could be encoded in a paint command and applied
later during command execution.
Instead of allocating a new glyph run solely to shift each glyph by the
painter's offset, this offset could be encoded in a paint command and
applied later during command execution.
Every single client of this function was immediately calling paintable()
on the result anyway, so there was no need to return a layout node!
This automatically leverages the cached containing block pointer we
already have in Paintable, which melts away a bunch of unnecessary
traversal in hit testing and painting. :^)
By storing a list of positioned and floating descendants within the
stacking context tree node, we can eliminate the need for costly
paintable tree traversals during hit-testing.
This optimization results in hit-testing being 2 to 2.5 times faster
on https://ziglang.org/documentation/master/
The specification says the final step of this algorithm is to return
null. Previously, the browser would crash if the content of an iframe
was appended to the document before its offsetParent property was
queried.
Previously @media rule conditions could be updated by assigning to
`conditionText`. This change aligns our implementation with the CSSOM
specification, which says `CSSConditionRule.conditionText` should be
read-only.
Introduces the rendering of scroll thumbs in vertical and horizontal
directions. Currently, the thumbs are purely graphical elements that
do not respond to mouse events. Nevertheless, this is beneficial as it
makes it easier to identify elements that should respond to scrolling
events.
Painting of scrollbars uncovers numerous bugs in the calculation of
scrollable overflow rectangles highlighting all the places where
elements are made scrollable whey they shouldn't be. Positively, this
issue might motivate us to pay more attention to this problem to
eliminate unnecessary scrollbars.
Currently, the scrollbar style is uniform across all platforms: a
semi-transparent gray rectangle with rounded corners.
Also here we add `scrollbar-width: none` to all existing scrolling
ref-tests, so they keep working with this change.
The list of border radii clips needs to be reset before being populated
with new clips that have refreshed positions. Besides fixing painting,
this also improves performance because the number of sample/blit
commands does not increase as we scroll.
The order is important because clip rectangles are calculated with the
scroll offset taken into account. Therefore, they need to be applied
before the scroll offset is changed, to avoid accounting for the scroll
offset twice.
This reduces the number of files needed to be recompiled when TypedArray
changes from ~1000 to ~600. The remaining ~600 are almost all generated
constructors and prototypes.
By saving string with alt text, image paintable no longer need to reach
into layout and DOM nodes while painting commands recording.
No behaviour change intended.
Rather than returning the number of whole elapsed milliseconds, we now
return the number of elapsed nanoseconds divided by one million. This
allows us to make use of the fractional part of the double that is
returned.
This adds the abstract class Serializable which platform objects defined
as Serializable objects can implement to support their appropriate
serialization and deserialization steps.
These methods are useful independent of the class Serializer, so let's
move their declarations to the header file and and outside the scope of
the Serializer class.
These methods are useful independent of the class Deserializer, so let's
move their declarations to the header file and and outside the scope of
the Deserializer class.
We had previous implemented some plumbing for file input elements in
commit 636602a54e.
This implements the return path for chromes to inform WebContent of the
file(s) the user selected. This patch includes a dummy implementation
for headless-browser to enable testing.
This creates a button to prompt users to select a file, and a label to
show information about the selected file(s). Clicking either shadow
element will activate the input element.
We currently copy-paste a series of if statements to selectively update
the shadow tree elements for some <input> types. This will soon become
longer as more shadow trees are implemented for other types.
This patch just moves those checks to a single location to make adding
more shadow trees easier.
If the GPU painter encounters a stacking context that requires the
allocation of a framebuffer so large, it is likely due to a layout
mistake, for now, we can skip it instead of crashing because of a
failed allocation.
Fixes https://github.com/SerenityOS/serenity/issues/22608
If a DOM::Element has an animation-name property, then in addition to
remembering where it came from, it will also remember the
Animations::Animation object that was created for it. This allows
StyleComputer to cancel that animation if the animation-name property
changes as well as to apply any changes required (for example, if
animation-play-state changes from "running" to "paused", it needs to
call .pause() on the animation).
This reverts commit e52c30cbd5.
It's highly possible that this test was flaky on CI due to mixing units
of seconds and milliseconds in the transient activation calculation.
Revert the workaround for that commit in an attempt to avoid needless
ad-hoc behavior.
It seems we were errantly mixing seconds and milliseconds in this
transient activation timeout. Increase it to 5 seconds, and be explicit
about its type - DOMHighResTimeStamp is by definition milliseconds.
This solves a particular issue with SVG as flex items, where the SVG has
an intrinsic aspect ratio via its viewBox, but no explicit natural width
or height.
Makes all corporate sponsor logos show up on https://ziglang.org/ :^)
Along with putting functions in the URL namespace into a DOMURL
namespace.
This is done as LibWeb is in an awkward situation where it needs
two URL classes. AK::URL is the general purpose URL class which
is all that is needed in 95% of cases. URL in the Web namespace
is needed predominantly for interfacing with the javascript
interfaces.
Because of two URLs in the same namespace, AK::URL has had to be
used throughout LibWeb. If we move AK::URL into a URL namespace,
this becomes more painful - where ::URL::URL is required to
specify the constructor (and something like
::URL::create_with_url_or_path in other places).
To fix this problem - rename the class in LibWeb implementing the
URL IDL interface to DOMURL, along with moving the other Web URL
related classes into this DOMURL folder.
One could argue that this name also makes the situation a little
more clear in LibWeb for why these two URL classes need be used
in the first place.
This also changes transform's animation-type to by-computed-value. It is
far easier to handle since we switch on StyleValue::type(), and it might
be the case that this applies to all custom animated properties and we
don't need "custom" at all, but let's wait until we get to those
properties to make that decision.
This is now handled by Web Animations, so if the animation was ever
running backwards, this logic would re-reverse it so that it played
forwards again.
This method asynchronously replaces the content of the given stylesheet
with the content passed to it.
An exception is thrown if this method is used by a stylesheet not
created with the `CSSStyleSheet()` constructor.
This returns the `CSSImportRule` corresponding to the `@import` at-rule
that imported the stylesheet into the document. If the stylesheet
wasn't imported then this property is null.
In particular, get the implicit root correctly for intersection
observers that don't have an explicit root specified.
This makes it possible to load the Terminal app on https://puter.com/
This avoids constantly re-rendering the same SVG image over and over
during painting when it's being used at a couple of different sizes
(for example when used as a CSS background).
Resolves a performance regression from
8ba18dfd40, where moving paint scheduling
to `EventLoop::process()` led to unnecessary repaints.
This update introduces a flag to trigger repaints only when necessary,
addressing the issue where repaints previously occurred with each event
loop process, irrespective of actual changes.
Change `EventHandler::handle_keydown()` to no longer assume the cursor
position's node is always a `DOM::Text`. While this assumption holds
for `HTMLInputElement` that has a shadow DOM with a text node, an empty
`contenteditable` might not have any children. With this change,
`handle_keydown()` creates a new text node if the cursor position's
node is not a text node.
Fixes a crash that occurs when inputting into an empty contenteditable
element (`EditEventHandler::handle_delete()` assumes the cursor
position's node is always `DOM::Text`, which is not the case for an
empty `contenteditable`).
With this commit, we are finally running animations off of the web
animations spec! A lot of the work StyleComputer is doing is now done
elsewhere. For example, fill-forward animations are handled by
Animation::is_relevant() returning true in the after phase, meaning the
"active_state_if_fill_forward" map is no longer needed.
`EventHandler::handle_keyup()` and `EventHandler::handle_keydown()`
return true if the event has been handled and false otherwise. This is
the opposite behavior to `EventHandler::fire_keyboard_event()`.
This change inverts the return value from `fire_keyboard_event` in
these methods, allowing shortcut keys to be propagated to the Serenity
Browser UI as expected.
Transforms are applied to both clip rectangle and position, so we need
to remove the transform from clip rectangle before checking if position
falls within the clip rectangle.
In this change, the removal of transform is moved into
`Paintable::clip_rect()` that is shared between hit-testing and
painting.
This change fixes hit-testing in Discord's multifactor authentication
form.
If the layout has been recalculated and the sizes of scrollable
overflow rectangles could have changed, we need to ensure that scroll
offsets remain within the valid range.
By moving scroll offset clamp from `PaintableBox::scroll_by()` to
`PaintableBox::set_scroll_offset()`, we ensure that updates from
`Element::set_scroll_top()` and `Element::set_scroll_left()` are
constrained to a valid range.
Ceiling width or height of a chrome viewport (this function is only used
when a chrome notifies LibWeb about a new viewport size) is never
correct. If we do that, PageClient::page_did_layout will set content
size to be 1 larger than an actual physical width or height respectively
(it always ceils) and thus a spurious scrollbar will appear.
This prevents occasional scrollbar flickering in Ladybird/Qt on Wayland
with fractional scaling enabled on compositors supporting
wp-fractional-scale-v1.
This removes the two boolean hack in favor of using the existing
mechanism to remove queued tasks. It also exposes the element
invalidation behavior for call sites that don't necessarily want to
update the finished state, but still need to invalidate the associated
target.
The former automatically adapts the prefix to binary and octal
output, and is what we already use in the majority of cases.
Patch generated by:
rg -l '0x\{' | xargs sed -i '' -e 's/0x{:/{:#/'
I ran it 4 times (until it stopped changing things) since each
invocation only converted one instance per line.
No behavior change.
Height definiteness is now preserved as intended by CSS-SIZING-3
(assuming I've understood it correctly) and not implicitly granted by
layout algorithms when they assign height.
For the specific special/magical cases where some sizes become definite
during layout, the preceding commits have made them explicit in code.
This fixes a number of flex layout issues where we were previously
resolving percentage values against post-layout flex container heights,
but other browsers don't.
Fixing this function will be quite an undertaking since a *lot* of code
relies on set_content_width() implicitly flipping the definiteness of
the width. It is wrong though, so we do need to fix it eventually.
In particular, these two interesting cases:
- The containing block of an abspos box is always definite from the
perspective of the abspos box.
- When resolving abspos box sizes from two opposing fixed insets,
we now mark those sizes as definite (since no layout was required
to resolve them).
The whole way we lay out SVG content is ad-hoc, so this doesn't follow
any particular spec. However, our viewport transform logic depends on
having definite sizes, so let's just mark them as such for now.
This will be required for percentages to resolve against it correctly
after we make set_content_height() not automatically mark heights as
definite sizes.
The CSS-FLEXBOX-1 spec has a bunch of special cases where sizes are
considered definite after reaching a specific point of the layout
algorithm.
Before this change, we were relying on set_content_width/height also
implicitly marking those content sizes as definite.
To prepare for that implicit behavior going away, this patch makes
the special cases explicit.
Before this change, we were always assigning the calculated height to
each block container after laying it out in BFC.
This should really only happen during intrinsic sizing, since that is
how measurements are communicated to the client there.
We only need to know that the Global Object of the environment is an
event target in order to dispatch an event on it. This resolves a FIXME
where we assumed that the only type of Global in LibWeb is HTML::Window.
The default canvas size is 300x150 pixels. If the element or document
we are trying to screenshot for the WebDriver is not at least that size,
then we will create a canvas that is wider or taller than the actual
element we are painting, resulting in a bunch of transparent pixels
falling off the end.
This fixes 14 WPT css/CSS2/floats tests that we run in CI, and
presumably a ton of other reftests in the WPT test suite.
With this change "max-width: max-content" is treated as "none" when
the available width is also "max-content". This fix prevents a stack
overflow in the grid track size maximization algorithm by avoiding
recursive calls to calculate_max_width() when determining the maximum
grid container size.
We have a 5 second timeout between a user-activated event occurring and
an activation-gated API being invoked in order for that API to succeed.
This is quite fine in normal circumstances, but the machines used in CI
often exceed that limit (we see upwards of 10 seconds passing between
generating the user-activated event and the API call running).
So instead of generating a user-activated event, add a hook to allow
tests to bypass the very next activation check.
If a call to `document.write` inserts an incomplete HTML tag, e.g.:
document.write("<p");
we would previously continue parsing the document until we reached a
closing angle bracket. However, the spec states we should stop once we
reach the new insertion point.
Attribute values may contain HTML, and may contain invalid HTML at that.
If the latter occurs, let's not generate invalid Inspector HTML when we
embed the attribute values as data attributes. Instead, cache the values
in the InspectorClient, and embed just a lookup index into the HTML.
This also nicely reduces the size of the generated HTML. The Inspector
on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB
(about 318KB, or 13.8%).
When a node is removed from the DOM tree, its paintable needs to be
removed to ensure that it is not used to obtain sizes that are no
longer valid.
This change enables the ResizeObserver to send a notification if a node
is removed, as it should, because a removed node now has a size of zero
It should be okay to nullify pointers without concerning
parent/sibling/child relationships because the layout and paintable
trees will be rebuilt following any DOM mutation anyway.
Extends event loop processing steps to include gathering and
broadcasting resize observations.
Moves layout updates from Navigable::paint() to event loop processing
steps. This ensures resize observation processing occurs between layout
updates and painting.
In this change, updating layout and painting are moved to the EventLoop
processing steps. This modification allows the addition of resize
observation dispatching that needs to happen in event loop processing
steps and must occur in the following order relative to layout and
painting:
1. Update layout.
2. Gather and broadcast resize observations.
3. Paint.
Adds the initial implementation for interfaces defined in the
ResizeObserver specification. These interfaces will be used to
construct and send observation events in the upcoming changes.
When an <input type=image> button is clicked, we now send the (x,y)
coordinates of the click event (relative to the image) along with the
form submission data.
Regarding the text test, we can currently only test this feature with
dialogs. The headless-browser test infrastructure cannot yet handle the
resulting navigation that would occur if we were to test with normal
form submission.
HTMLFormElement::elements is not the correct filter for submittable
elements. It includes non-submittable elements (HTMLObjectElement) and
also excludes submittable elements (HTMLInputElements in the "image"
type state, "for historical reasons").
This implements enough to represent <input type=image> with its loaded
source image (or fallback to its alt text, if applicable). This does not
implement acquring coordinates from user-activated click events on the
image.
They currently assume the DOM node is an HTMLImageElement with respect
to handling the alt attribute. The HTMLInputElement will require the
same behavior.
Previously, when constructing an XML document, the default namespace
was the empty string. This led to XML documents having empty xmlns
attributes when serialized.
Previously, CDATASection nodes were being serialized as if they were
text, which meant they were missing their start and end delimiters.
Occurrences of the '&', '<' and '>' characters were also being replaced
with their entity names.
The DOM specification states that: "Unless stated otherwise, a
document’s [...] type is 'xml'".
Previously, calls to `Document::document_type()` were returning the
incorrect value for non-HTML documents.
Painting command executors are defined within the "Painting" namespace,
allowing us to remove this prefix from their names.
This commit performs the following renamings:
- Painting::PaintingCommandExecutor to Painting::CommandExecutor
- Painting::PaintingCommandExecutorCPU to Painting::CommandExecutorCPU
- Painting::PaintingCommandExecutorGPU to Painting::CommandExecutorGPU
Separating the recorder list from the painter will allow us to save it
for later execution without carrying along the painter's state. This
will be useful once we have a separate thread for executing painting
commands, to which we will have to transfer commands from the main
thread.
Preparation for https://github.com/SerenityOS/serenity/pull/23108
The setter was missing an implementation for the default and default/on
value attribute modes. This patch adds a method to get the current value
attribute mode, and implements the value setter and getter based on that
mode according to the spec.
Previously, this just checked the tag names. For elements that exist in
different namespaces (like HTMLScriptElement vs SVGScriptElement) this
could lead to invalid casts, as the namespace was not checked.
This switches to using the safer helpers on the DOM::Node.
Previously, step 5 of the stacking context hit testing would just call
`hit_test()` on the stacking context's paintable box. Which (at least
for SVGs) is just indirect infinite recursion (it'll end up right back
where it started after going through a few functions).
This now explicitly hit tests the descendants, which seems more correct,
and avoids the crash for SVGs, but nothing really seems to depend on
this step. Another solution (which I've done for a while working on
SVGs) is just to delete step 5 entirely, and nothing seems to break.
Fixes#22305
We now cache potentially named elements on the Document when elements
are inserted and removed. This allows us to do lookup of what names are
supported much faster than if we had to iterate the tree every time.
This first cut doesn't implement the rules for 'exposed' object and
embed elements.
It seems that the difference between pending and ASAP in the spec is
only to allow the implementation to perform implementation-defined
operations between the two states. We don't need to distinguish the two
states, so lets just combine them for now.
Elements are now collected according to paint order as spec says,
replacing the depth-first traversal of the paint tree with hit-testing
on each box.
This change resolves a FIXME in an existing test and adds a new
previously non-working test.
This change modifies hit_test() to no longer return the first paintable
encountered at a specified position. Instead, this function accepts a
callback that is invoked for each paintable located at a position, in
hit-testing order.
This modification will allow us to reuse this call for
`Document.elementsFromPoint()` in upcoming changes.
There's a chance that we try to choose a navigable before a previously
destroyed navigable is fully destroyed and GC'd. Investigating why this
can happen is a separate endeavor, let's just not crash for now.
Keyframes can be given in two separate forms:
- As an array of separate keyframe objects, where the keys of each
keyframe represent CSS properties, and their values represents the
values that those CSS properties should take
e.x.:
[{ color: 'red', offset: 0.3 }, { color: 'blue', offset: 0.7 }]
- As a single monolithic keyframe object, where the keys of each
keyframe represent CSS properties, and their values are arrays of
values, where each index k represents the value of the given
property at the k'th frame.
e.x.:
{ color: ['red', 'blue'], offset: [0.3, 0.7] }
This commit only implements the first option, as it is much simpler. See
the next commit for the implementation of the second option.
Change 'dom_node_for_event_dispatch' to locate the closest layout node
with a DOM node instead of only checking the direct ancestor.
This fixes hit-testing for buttons because they are wrapped into
multiple anonymous layout nodes (internally we use flex formatting for
them).
This API seems to be used by WPT for sending synthetic input events.
Implementing the naive translation of elementFromPoint to the spec steps
for this algorithm turns 4 'tests had errors unexpectedly' and 3 'tests
had timeouts unexpectedly' into 1 pass and 7 'tests had unexpected
subtest results' on the infrastructure/ subdirectory of WPT.
This was blocked because it can be used for cross-protocol attacks on
some network printers. However, it's also used by the web platform
tests. One can argue that getting WPT working is more important than
theoretical attacks on poorly configured printers.
This prevents us from returning an 'unrecognized capability' error when
a WebDriver client sends us a proxy capability. We still don't actually
support setting or returning a non-empty proxy capability, though.
We just don't choke on the input capability request from the server.
This patch also doesn't actually validate the input proxy requests.
Refactor to resolve paint-only properties before painting, aiming to
stop using layout nodes during recording of painting commands.
Also adds a test, as we have not had any for outlines yet.
This allows for:
* Transformed text (e.g. rotated text)
* Stroked text
* Filling/stroking text with PaintStyles (e.g. gradients)
* Squashed/condensed text (via maxWidth parameter)
Fixes part of #22817
With this change, clicking on an editable element, such as an `input`
or `textarea` causes the cursor position to be updated to the current
mouse position.
With this change, instead of applying only the border-radius clipping
from the closest containing block with hidden overflow, we now collect
all boxes within the containing block chain and apply the clipping from
all of them.
