Commit graph

634 commits

Author SHA1 Message Date
Sam Atkins
4c3c907041 LibWeb: Implement progress/range-input accent color in CSS
The `AccentColor` keyword does this in a simpler way, and allows authors
to override it.
2025-03-19 10:10:03 +00:00
Sam Atkins
3ebdb64fed LibWeb: Replace ::-webkit pseudo-elements with ones from CSS Forms spec
This spec is very early on, and likely to change. However, it still
feels preferable to use these rather than the prefixed -webkit ones.

Plus, as we have a `::fill` on range inputs, we can use that for styling
the bar instead of inserting CSS from C++.
2025-03-19 10:10:03 +00:00
Tim Ledbetter
f0917ea150 LibWeb: Ensure shortest serialization is used for grid-column values 2025-03-19 02:08:05 +01:00
Tim Ledbetter
6811264b11 LibWeb: Ensure shortest serialization is used for grid-row values 2025-03-19 02:08:05 +01:00
Tim Ledbetter
83143e3018 LibWeb: Avoid repetition when serializing grid track placement values 2025-03-19 02:08:05 +01:00
Tim Ledbetter
f6a8e5aa68 LibWeb: Use correct canonical serialization for BorderRadiusStyleValue 2025-03-18 21:55:06 +01:00
Tim Ledbetter
85728b297f LibWeb: Ensure the shortest serialization is used for border-radius
This implementation also fixes an issue where the individual components
of the `border-radius` shorthand were always assumed to be of type
`BorderRadiusStyleValue`, which could lead to a crash when CSS-wide
keywords were used.
2025-03-18 21:55:06 +01:00
Sam Atkins
97e917bdf5 LibWeb/CSS: Allow bare zero for gradient angles
Corresponds to f952e97da9
2025-03-18 20:04:08 +00:00
Tim Ledbetter
01d1a9528b LibWeb: Calculate the correct resolved value for inset properties
This improves the output of `getComputedStyle()` for the `top`,
`bottom`, `left` and `right` properties, where the used value is now
returned rather than the computed value, where applicable."
2025-03-18 09:27:51 +00:00
Sam Atkins
db597843d6 LibWeb/CSS: Correct parsing of @supports selector()
A couple of fixes here:
- Parse a `<complex-selector>` instead of a `<selector-list>`
- Don't match if any unknown `::-webkit-*` pseudo-elements are found
2025-03-17 10:00:19 +00:00
Sam Atkins
b6fb4baeb7 LibWeb/CSS: Implement @supports font-format() and font-tech()
These let authors query whether we support font formats and features.
2025-03-17 10:00:19 +00:00
Sam Atkins
adfe8a9dcb LibWeb/CSS: Add functions that report font format/technology support
Both `@supports` and `@font-face` need this. There may be some automatic
way of querying whether our renderer supports these, but I couldn't
figure it out, so here's a basic hard-coded list. I think the font-tech
list has false negatives, as I don't know enough about fonts to
determine what we support accurately.
2025-03-17 10:00:19 +00:00
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