Commit graph

722 commits

Author SHA1 Message Date
Sam Atkins
1e6f703b30 LibWeb/CSS: Compare MediaFeatureValues using references not copies 2025-03-17 10:00:19 +00:00
Sam Atkins
e125ab360e LibWeb/CSS: Merge MediaFeature data members
A MediaFeature either has a MediaFeatureValue, or a Range, or nothing.
Combining these into a Variant reduces the size from 176 bytes to 128,
and also makes constructing these a little less awkward.
2025-03-17 10:00:19 +00:00
Sam Atkins
0f5e054f97 LibWeb: Implement generic boolean logic for media/supports queries
CSS Values 5 now defines a `<boolean-expr[]>` type that is used in place
of the bespoke grammar that previously existed for `@media` and
`@supports` queries. This commit implements some BooleanExpression
types to represent the nodes in a `<boolean-expr[]>`, and reimplements
`@media` and `@supports` queries using this.

The one part of this implementation I'm not convinced on is that the
`evaluate()` methods take a `HTML::Window*`. This is a compromise
because `@media` requires a Window, and `@supports` does not require
anything at all. As more users of `<boolean-expr[]>` get implemented in
the future, it will become clear if this is sufficient, or if we need
to do something smarter.

As a bonus, this actually improves our serialization of media queries!
2025-03-17 10:00:19 +00:00
Sam Atkins
84a695c958 LibWeb/CSS: Evaluate Supports query components during parsing
Instead of parsing the parts of a `@supports` query, then only
evaluating them when constructing the Supports itself, we can instead
evaluate them as we parse them. This simplifies things as we no longer
need to pass a Realm around, and don't have to re-parse the conditions
again with a new Parser instance.
2025-03-17 10:00:19 +00:00
Sam Atkins
6b8adb522c LibWeb: Set iframe border to 0px when frameborder attribute is invalid
Corresponds to 6e19cef90e
2025-03-14 20:33:25 +00:00
Tim Ledbetter
e011ddd368 LibWeb/CSS: Parse border-block-* properties
This doesn't currently honor `writing-mode`, `direction` and
`text-orientation`.
2025-03-14 16:09:10 +00:00
Tim Ledbetter
cd1bba353a LibWeb/CSS: Parse border-inline-* properties
This doesn't currently honor `writing-mode`, `direction` and
`text-orientation`.
2025-03-14 16:09:10 +00:00
Tim Ledbetter
18cccd7633 LibWeb/CSS: Don't allow negative values in border-radius property 2025-03-14 15:07:57 +00:00
Tim Ledbetter
632fc73643 LibWeb/CSS: Don't allow negative border radius in box-shadow property 2025-03-14 15:07:57 +00:00
Tim Ledbetter
dc58c11217 LibWeb: Reject invalid background-position-* property values 2025-03-14 15:07:57 +00:00
Tim Ledbetter
764b80a1cc LibWeb/CSS: Reject radial-gradient functions with negative size 2025-03-14 15:07:57 +00:00
Tim Ledbetter
5559c3cb4f LibWeb/CSS: Parse <single-transition-property> as a <custom-ident>
The specification also treats a transition name of `none` as invalid.
2025-03-14 08:52:25 +01:00
Tim Ledbetter
6298ec6be4 LibWeb: Validate time values when parsing transition value 2025-03-14 08:52:25 +01:00
Tim Ledbetter
37eb2be348 LibWeb/CSS: Disallow negative time values for transition-duration 2025-03-14 08:52:25 +01:00
Tim Ledbetter
b80c0d2114 LibWeb/CSS: Reject invalid grid track placement property values 2025-03-14 08:50:04 +01:00
Timothy Flynn
cf601a49bb LibWeb+WebContent: Include rule count in listed CSS style sheets 2025-03-13 16:56:28 -04:00
Timothy Flynn
576eede2b1 LibWeb: Simplify IPC encoding of style sheet DOM node IDs
We were essentially reinventing Optional::map here.
2025-03-13 16:56:28 -04:00
Tim Ledbetter
ad4ade3f07 LibWeb/CSS: Disallow invalid <counter-name> values
We now parse `<counter-name>` values as a `<custom-ident>`. This
disallows `default` and CSS-wide keywords as counter names. The
specification additionally disallows `none` as a counter name.
2025-03-13 05:23:19 +00:00
Tim Ledbetter
249de20343 LibWeb/CSS: Don't allow negative values in filter functions 2025-03-12 09:06:16 +00:00
Aliaksandr Kalenik
84ecaaa75c LibWeb: Limit sibling style invalidation by max distance
If an element is affected only by selectors using the direct sibling
combinator `+`, we can calculate the maximum invalidation distance and
use it to limit style invalidation. For example, the selector
`.a + .b + .c` has a maximum invalidation distance of 2, meaning we can
skip invalidating any element affected by this selector if it's more
than two siblings away from the element that triggered the style
invalidation.

This change results in visible performance improvement when hovering
PR list on GitHub.
2025-03-10 18:56:55 +01:00
InvalidUsernameException
d76f841994 LibWeb: Do not deform bitmaps partially outside the img-box
Instead of trying to manually determine which parts of a bitmap fall
within the box of the `<img>` element, just draw the whole bitmap and
let Skia clip the draw-area to the correct rectangle.

This fixes a bug where the entire bitmap was squashed into the rectangle
of the image box instead of being clipped.

With this change, image rendering is now correct enough to import some
of the WPT tests for object-fit and object-position. To get some good
coverage I have imported all tests for the `<img>` tag. I also wanted to
import a subset of the tests for the `<object>` tag, since those are
passing as well now. Unfortunately, they are flaky for unknown reasons.

This is the second attempt at this bugfix. The prior one was e055927ead
and broke image rendering whenever the page was scrolled. It has
subsequently been reverted in 16b14273d1. Hopefully this time it is not
horribly broken.
2025-03-10 17:14:13 +01:00
Tim Ledbetter
53bf0ef225 LibWeb/CSS: Resolve used value for the inline-size property 2025-03-10 13:01:08 +00:00
Tim Ledbetter
1739e2851d LibWeb/CSS: Resolve used value for the block-size property 2025-03-10 13:01:08 +00:00
Tim Ledbetter
a6efdb1068 LibWeb: Treat CSS at-rule names as case-insensitive 2025-03-10 12:42:57 +01:00
Tim Ledbetter
88d35c547c LibWeb/CSS: Implement the caret-color property 2025-03-09 19:36:29 +01:00
Tim Ledbetter
bf15b7ac12 LibWeb: Treat media query with an invalid media type as invalid 2025-03-09 17:48:36 +00:00
Andreas Kling
0a300fe59b LibWeb: Update the layout tree when CSS text-transform changes
Because we cache the transformed text string in text nodes affected by
text-transform, we have to actually update the layout tree when this
property value changes.
2025-03-08 20:22:01 +01:00
Andreas Kling
def0bcdfa2 LibWeb: Don't unconditionally relayout on animation/transition changes
If a CSS animation or transition was being used to manipulate a property
that itself does not affect layout, we were still doing a full relayout
whenever any animation or transition related property was changed.

As it turns out, we can just not do that, and we avoid a bunch of
unnecessary layout work on many pages. When a layout-affecting property
is being animated, the animation/transition update code takes care to
invalidate layout as appropriate anyway!

This was very noticeable on GitHub, where moving the mouse cursor
between "Issues" and "Pull requests" would trigger a full relayout every
time. Now that doesn't happen, and it's much more responsive. :^)
2025-03-08 17:32:53 +01:00
Andreas Kling
c333042e63 LibWeb: Add opt-in tracing of update_layout() calls with reason 2025-03-08 03:37:38 +01:00
Gingeh
31853c13d3 LibWeb: Implement css gradient-interpolation-method 2025-03-06 11:33:12 +00:00
Andreas Kling
02a642b87b LibWeb: Prevent infinitely growing font size due to rem units in root
A font-size with rem units need to resolve against the default font
metrics for the root element, otherwise every time we compute style,
the reference value for rem units grows.

This fixes an issue where text on some web pages would grow every time
there was a relayout. This was very noticeable on https://proton.me/

Fixes #339
2025-03-05 22:46:06 +01:00
Aliaksandr Kalenik
16b14273d1 Revert "LibWeb: Do not deform bitmaps partially outside the img-box"
This change broken image rendering.

This reverts commit e055927ead.
2025-03-05 19:44:49 +01:00
InvalidUsernameException
e055927ead LibWeb: Do not deform bitmaps partially outside the img-box
Instead of trying to manually determine which parts of a bitmap fall
within the box of the `<img>` element, just draw the whole bitmap and
let Skia clip the draw-area to the correct rectangle.

This fixes a bug where the entire bitmap was squashed into the rectangle
of the image box instead of being clipped.

With this change, image rendering is now correct enough to import some
of the WPT tests for object-fit and object-position. To get some good
coverage I have imported all tests for the `<img>` tag. I also wanted to
import a subset of the tests for the `<object>` tag, since those are
passing as well now. Unfortunately, they are flaky for unknown reasons.
2025-03-05 16:32:47 +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
Lucas CHOLLET
4bf197872b LibWeb/CSS: Remove an ad-hoc simplification step in calc() parsing 2025-03-05 12:05:45 +00:00
Andreas Kling
6606eecce5 LibWeb: Invalidate style (and rule cache) on MediaList changes
This makes dynamic changes to a style sheet's media attribute actually
take effect immediately.
2025-03-04 19:07:40 +01:00
Aliaksandr Kalenik
b92a8553c7 LibWeb: Cancel animations when element is moved in display none subtree
We already have logic to play or cancel animations in an element's
subtree when the display property changes to or from none. However,
this was not sufficient to cover the case when an element starts/stops
being nested in display none after insertion.
2025-03-04 18:06:46 +01:00
Sam Atkins
532c01c388 LibWeb: Implement text-decoration: spelling-error and grammar-error 2025-02-28 16:34:08 +00:00
Sam Atkins
bfd7ac1204 LibWeb+WebContent+UI: Support image cursors
The `cursor` property accepts a list of possible cursors, which behave
as a fallback: We use whichever cursor is the first available one. This
is a little complicated because initially, any remote images have not
loaded, so we need to use the fallback standard cursor, and then switch
to another when it loads.

So, ComputedValues stores a Vector of cursors, and then in EventHandler
we scan down that list until we find a cursor that's ready for use.

The spec defines cursors as being `<url>`, but allows for `<image>`
instead. That includes functions like `linear-gradient()`.

This commit implements image cursors in the Qt UI, but not AppKit.
2025-02-28 13:50:13 +01:00
Sam Atkins
d127d412c8 LibWeb/CSS: Implement CursorStyleValue
A cursor is an image, with an optional x,y hotspot.

We know that a CursorStyleValue's bitmap never needs to change size, so
we create the ShareableBitmap once and then cache it, so that we don't
have to repeatedly create an FD for it or do the work of painting.

To avoid repainting that bitmap, we cache the values that were used to
create it - what currentColor is and its length resolution context -
and only repaint when those change.
2025-02-28 13:50:13 +01:00
Sam Atkins
9cbd8a82c7 LibWeb: Only require NodeWithStyle for gradient size resolution
None of the code here actually needs a NodeWithStyleAndBoxModelMetrics,
and we'll need to be able to resolve images from inside
NodeWithStyle::apply_style().
2025-02-28 13:50:13 +01:00
Sam Atkins
a0cd6dd607 LibWeb/CSS: Support CalculatedOr::to_string() for integers and floats
IntegerOrCalculated and NumberOrCalculated's T types don't have a
to_string() method because they're i64 and double respectively, so use
String::number() for them instead.

Also rearrange this method to avoid checking the variant's contents
multiple times.
2025-02-28 13:50:13 +01:00
Sam Atkins
c77456a508 LibWeb/CSS: Clarify types of image-parsing methods
parse_image_value() always returns some kind of AbstractImageStyleValue.
2025-02-28 13:50:13 +01:00
Sam Atkins
09d2c5eb9b LibWeb/CSS: Remove unused includes from CSSStyleValue.h
A couple of these were needed transitively, so I've added them to the
relevant files.
2025-02-28 13:50:13 +01:00
Sam Atkins
6a4a60cbd5 LibWeb/CSS: Invalidate color-stop caches when source data changes
We previously only invalidated the cached color-stop data when the
painted area's size changed. However, multiple elements can use the
same gradient and be the same size, but have different parameters that
affect the gradient stop positions, for example if a stop has an em
position. This can also change for the same element over time.

The new cache instead uses these parameters as the cache key. So we
recompute the cache if lengths would resolve differently, or the area's
size is different.

The included test fails without this change.
2025-02-28 13:50:13 +01:00
Sam Atkins
5651701f31 LibWeb/CSS: Remove now-redundant CalculationNode::to_string()
The main users were the `dump()` functions, which now dump their
children instead, which is more correct anyway.

The others are for serializing numeric values, so
NumericCalculationNode's to_string() is renamed to value_to_string
() and used for those for convenience.
2025-02-27 21:42:43 +01:00
Sam Atkins
5cfb8163c6 LibWeb/CSS: Sort a calculation's children during serialization
This gets us 38 more passes in our in-tree tests, plus however many more
in the rest of WPT. :^)
2025-02-27 21:42:43 +01:00
Sam Atkins
a63879330f LibWeb/CSS: Implement calc-serialization spec algorithms
This gets us 37 new subtest passes in css/css-values, and 13 passes in
our other in-tree tests (and probably some random other ones!)

As noted in comments, a few parts of this algorithm have ad-hoc
behaviour to handle some issues in the spec.
2025-02-27 21:42:43 +01:00
Sam Atkins
f97ac33cb3 LibWeb/CSS: Use NumericCalculationNode for constants
Having multiple kinds of node that hold numeric values made things more
complicated than they needed to be, and we were already converting
ConstantCalculationNodes to NumericCalculationNodes in the first
simplification pass that happens at parse-time, so they didn't exist
after that.

As noted, the spec allows for other contexts to introduce their own
numeric keywords, which might be resolved later than parse-time. We'll
need a different mechanism to support those, but
ConstantCalculationNode could not have done so anyway.
2025-02-27 21:42:43 +01:00
Sam Atkins
718e874cc7 LibWeb/CSS: Allow whitespace inside fit-content() function 2025-02-27 13:30:36 +00:00