Commit Graph

141 Commits

Author SHA1 Message Date
Sam Atkins
7f803c5c3d LibWeb/CSS: Disallow :has() and pseudo-elements in :has() when parsing 2024-11-14 19:51:45 +01:00
Sam Atkins
ad1f93504e LibWeb/CSS: Make :has() take a <relative-selector-list>
The spec changed this at some point.
2024-11-14 19:51:45 +01:00
Luke Wilde
a94282e0e8 LibWeb: Make CSSStyleDeclaration a legacy platform object with indices
CSSStyleDeclaration has an indexed property getter, which returns
properties associated with the object in the order they were specified
in.
2024-11-14 19:50:22 +01:00
Luke Wilde
aacf9b08ed LibWeb: Generate IDL attributes for all supported CSS properties
The CSSOM spec tells us to potentially add up to three different IDL
attributes to CSSStyleDeclaration for every CSS property we support:
- A camelCased attribute, where a dash indicates the next character
  should be uppercase
- A camelCased attribute for every -webkit- prefixed property, with the
  first letter always being lowercase
- A dashed-attribute for every property with a dash in it.

Additionally, every attribute must have the CEReactions and
LegacyNullToEmptyString extended attributes specified on it.

Since we specify every property we support with Properties.json, we can
use that file to generate the IDL file and it's implementation.

We import it from the Build directory with the help of multiple import
base paths. Then, we add it to CSSStyleDeclaration via the mixin
functionality and inheriting the generated class in
CSSStyleDeclaration.
2024-11-14 19:50:22 +01:00
Luke Wilde
5aacb053a3 LibWeb: Fix OBOE in bounds check of ResolvedCSSStyleDeclaration#item
Without this, it would return "(invalid CSS::PropertyID)" when
requesting item(decl.length).
2024-11-14 19:50:22 +01:00
Sam Atkins
5a1eb9e220 LibWeb/CSS: Keep invalid parts of <forgiving-selector-list>s around
Attempt 2! Reverts 2a5dbedad4

This time, set up a different combinator when producing a relative
invalid selector rather than a standalone one. This fixes the crash.

Original description below for simplicity because it still applies.

---

Selectors like `:is(.valid, &!?!?!invalid)` need to keep the invalid
part around, even though it will never match, for a couple of reasons:

- Serialization needs to include them
- For nesting, we care if a `&` appeared anywhere in the selector, even
  in an invalid part.

So this patch introduces an `Invalid` simple selector type, which simply
holds its original ComponentValues. We search through these looking for
`&`, and we dump them out directly when asked to serialize.
2024-11-14 13:20:01 +01:00
Andreas Kling
2a5dbedad4 Revert "LibWeb/CSS: Keep invalid parts of <forgiving-selector-list>s around"
This reverts commit 698dd600f2.

This caused multiple tests to crash on macOS:
https://github.com/LadybirdBrowser/ladybird/pull/2317#issuecomment-2474725826
2024-11-13 21:37:34 +01:00
Sam Atkins
698dd600f2 LibWeb/CSS: Keep invalid parts of <forgiving-selector-list>s around
Selectors like `:is(.valid, &!?!?!invalid)` need to keep the invalid
part around, even though it will never match, for a couple of reasons:

- Serialization needs to include them
- For nesting, we care if a `&` appeared anywhere in the selector, even
  in an invalid part.

So this patch introduces an `Invalid` simple selector type, which simply
holds its original ComponentValues. We search through these looking for
`&`, and we dump them out directly when asked to serialize.
2024-11-13 20:38:12 +01:00
Andreas Kling
107b20e84d LibWeb: Restrict CSS gap properties to values allowed by the spec
Gap values are now represented by Variant<LengthPercentage, NormalGap>.
NormalGap is just an empty struct to represent the `normal` keyword.

This fixes a long-standing issue where we were incorrectly storing gaps
as CSS::Size, which led to us allowing a bunch of invalid gap values.
2024-11-09 19:21:00 +01:00
Sam Atkins
a9a25d4eca Tests: Add a test for @supports
This is derived from our old demo page.

Notably, we currently do claim to support `::-webkit-foo` selectors,
which is a bug. According to the spec [1], we have to parse those as
valid, but `@supports` should still fail for them [2], which is a bit
confusing.

[1] https://www.w3.org/TR/selectors-4/#compat
[2] https://drafts.csswg.org/css-conditional-4/#support-definition-ext
2024-11-07 15:11:24 +01:00
Gingeh
a4b38dda56 LibWeb: Use substrings instead of pointers when parsing unicode ranges
Fixes a segfault when parsing a wildcard-only unicode range
2024-11-05 14:01:45 +00:00
Gingeh
c2cd191864 LibWeb: Use machine epsilon when approximating cubic bezier 2024-11-03 17:35:20 +01:00
BenJilks
c3f3e93b7e LibWeb: Add writing-mode CSS property, and its values
Introduce the `writing-mode` property, as specified in
https://drafts.csswg.org/css-writing-modes/#block-flow
2024-11-03 17:01:54 +01:00
Gingeh
3467076dbc LibWeb+LibGfx: Keep path properties when cloning and implement fill-rule 2024-10-31 10:30:24 +00:00
Gingeh
4ecf56cadf LibWeb: Allow calculated values in css filters 2024-10-31 08:19:46 +01:00
Sam Atkins
760943d584 LibWeb/CSS: Correct matching of calc() against <number-percentage>
This seems to have vanished from the spec, but in any case, we still
need it. Without this change we erroneously thought that calculations
that match <percentage> did not match <number-percentage>.
2024-10-30 20:58:16 +01:00
Sam Atkins
51fc87bc1b LibWeb/CSS: Return 0 from CSSRule.type for non-spec types
We use the CSSRule::Type enum for identifying the type of a CSSRule, but
the spec requires that only some of these types are exposed via the
`type` attribute. For the rest, we're required to return 0, so let's do
so. :^)
2024-10-30 17:30:58 +01:00
Nico Weber
421cf8d9bf LibWeb: Parse stroke-{linejoin,miterlimit} attributes
Similar to LadybirdBrowser/ladybird#1714.

We don't implement the linejoin values `miter-clip` and `arcs`, because
according to the SVG 2 spec:

> The values miter-clip and arcs of the stroke-linejoin property are at
> risk. There are no known browser implementations. See issue Github
> issue w3c/svgwg#592.

Nothing uses this yet. The next step is to change
SVGPathPaintable::paint() to read `graphics_element.stroke_linejoin()`
and `graphics_element.stroke_miterlimit()` when painting.
2024-10-29 22:37:00 +00:00
Sam Atkins
5723ed3443 Tests: Add clip-path to calc() coverage test 2024-10-29 16:05:16 +01:00
Sam Atkins
ec9d67ae17 Tests: Add filter and backdrop-filter to calc() coverage test
Neither of these currently work correctly. This is just so we keep track
of them.
2024-10-29 16:05:16 +01:00
stelar7
488436fb54 LibWeb: Parse the rotate css property 2024-10-29 14:40:40 +00:00
Ankush Chatterjee
85356094b5 LibWeb/CSS: Add math expression support for transform-origin 2024-10-27 10:21:22 +01:00
Jelle Raaijmakers
29974de852 LibWeb: Parse and store filter property
This shares its implementation with `backdrop-filter`.
2024-10-26 11:26:42 +02:00
Kostya Farber
44b1c4f2b5 LibWeb: Parse the word-break css property 2024-10-26 00:18:02 +02:00
Timothy Flynn
9bdf2e928c LibWeb: Begin implementing FontFaceSet.prototype.load
This implementation is incomplete in that we do not fully implement the
steps to match the given font against the fonts in the set.

This is used by fonts.google.com to load the fonts used for sample text.
2024-10-24 17:50:19 +02:00
Alex Ungurianu
a4c72f50c0 LibWeb: Parse @property CSS directives
This is not a complete parse, as it doesn't validate or take into
account the parsed syntax.
Enough to get us a few more WPT tests though :)
2024-10-23 06:55:37 +01:00
stelar7
4408ea7c9b LibWeb: Handle calculations without a context better 2024-10-16 16:39:47 +02:00
Sam Atkins
6e68e8f3c9 LibWeb/CSS: Insert whitespace between tokens in serialized UnresolvedSV
Otherwise, `margin: var(--foo) var(--bar)` would be wrongly serialized
as `margin: var(--foo)var(--bar)`
2024-10-16 08:34:31 +02:00
Sam Atkins
301502a3a1 LibWeb: Add coverage test for calc() usage
Ignoring the fact that we should serialize a simplified form of calc()
expressions, the following are wrong:

- grid-auto-columns
- grid-auto-rows
- grid-template-columns
- grid-template-rows
- transform-origin

Generated in part with this python script (though I've since iterated on
the output repeatedly so it's quite different):

```py
import json
properties_file = open("./Userland/Libraries/LibWeb/CSS/Properties.json")
properties = json.load(properties_file)
for (key, value) in properties.items():
    if not 'valid-types' in value:
        continue
    if 'longhands' in value:
        continue
    valid_types = value['valid-types']
    for type_string in valid_types:
        name, *suffix = type_string.split(None, 1)
        match name:
            case 'integer' | 'number':
                print(f'{key}: calc(2 * var(--n));')
            case 'angle':
                print(f'{key}: calc(2deg * var(--n));')
            case 'flex':
                print(f'{key}: calc(2fr * var(--n));')
            case 'frequency':
                print(f'{key}: calc(2hz * var(--n));')
            case 'length':
                print(f'{key}: calc(2px * var(--n));')
            case 'percentage':
                print(f'{key}: calc(2% * var(--n));')
            case 'resolution':
                print(f'{key}: calc(2x * var(--n));')
            case 'time':
                print(f'{key}: calc(2s * var(--n));')
```
2024-10-16 08:34:02 +02:00
Sam Atkins
7c2680b7ef LibWeb/CSS: Serialize empty grid-template-* values correctly
Previously we would serialize these as the empty string. eg, this:

```
<div style="grid-auto-columns: auto"></div>
```

would have a computed `grid-auto-columns` value of ``.
2024-10-16 08:34:02 +02:00
Sam Atkins
81596b4145 LibWeb/CSS: Stop invalidating style when setting an animation's effect
This reverts 6d25bf3aac

Invalidating the style here means that transitions can cause an element
to leave style computation with its "needs style update" flag set to
true. This then causes a VERIFY to fail in the TreeBuilder.

This invalidation does not otherwise seem to have any effect. The
original commit suggests this was to fix a bug, but it's not clear what
bug that was. If it reappears, we can try to solve the issue in a
different way.
2024-10-15 08:43:26 -04:00
Sam Atkins
c79f261bec LibWeb/CSS: Mark grid-[gap, column-gap, row-gap] properties as aliases
These are legacy name aliases for the properties without the 'grid-'
prefix. See https://drafts.csswg.org/css-align-3/#gap-legacy
2024-10-14 17:57:34 +02:00
Sam Atkins
9241f37823 LibWeb: Add a CSS parsing test for selectors containing ':' in @media
While updating the parser to the latest spec algorithms, this started
parsing incorrectly as a declaration, and we had no tests covering it.
2024-10-14 08:08:37 +02:00
Andreas Kling
02da288413 LibWeb: Allow CSS @import rule to import non-UTF-8 style sheets
This fixes a number of WPT crashes in the /css/CSS2/syntax directory.
2024-10-12 19:20:22 +02:00
Nico Weber
cc0cfd044b LibWeb: Add stroke-linecap attribute and plumb it to SVGGraphicsElement
SVGGraphicsElement then goes ahead and does nothing with it for now.
2024-10-11 00:27:47 +01:00
Khaled Lakehal
77761e123d LibWeb/CSS: Add support for unicode-bidi property 2024-10-07 14:57:15 +01:00
Timothy Flynn
bf668696de LibWeb+WebContent: Do not include DOM HTML in text test expectations
For example, in the following abbreviated test HTML:

    <span>some text</span>
    <script>println("whf")</script>

We would have to craft the expectation file to include the "some text"
segment, usually with some leading whitespace. This is a bit annoying,
and makes it difficult to manually craft expectation files.

So instead of comparing the expectation against the entire DOM inner
text, we now send the inner text of just the <pre> element containing
the test output when we invoke `internals.signalTextTestIsDone`.
2024-10-03 07:07:28 -04:00
Sam Atkins
c497e5f850 LibWeb: Serialize more @font-face descriptors
Adapt the existing `font-face-src-local-serialization.html` test into a
more general test for these.
2024-10-02 16:28:55 +01:00
Sam Atkins
95c17dfab5 LibWeb/CSS: Parse and propagate font-feature-settings property 2024-10-02 16:28:55 +01:00
Sam Atkins
55812aaed2 LibWeb/CSS: Parse and propagate font-variation-settings property 2024-10-02 16:28:55 +01:00
Kostya Farber
68a28ff33a LibWeb/CSS: Parse the tab-size property 2024-10-02 10:27:15 +01:00
Sam Atkins
1d8867d9ae LibWeb/CSS: Parse and propagate the font-language-override property 2024-09-28 14:42:26 +02:00
Sam Atkins
4a67b28600 LibWeb/CSS: Make font-stretch a legacy alias for new font-width
CSS Fonts level 4 renames font-stretch to font-width, with font-stretch
being left as a legacy alias. Unfortunately the other specs have not yet
been updated, so both terms are used in different places.
2024-09-28 14:42:26 +02:00
Sam Atkins
fdcece2e88 LibWeb/CSS: Implement legacy name aliases for properties
When a property is a "legacy name alias", any time it is used in CSS or
via the CSSOM its aliased name is used instead.
(See https://drafts.csswg.org/css-cascade-5/#legacy-name-alias)

This means we only care about the alias when parsing a string as a
PropertyID - and we can just return the PropertyID it is an alias for.
No need for a distinct PropertyID for it, and no need for LibWeb to
care about it at all.

Previously, we had a bunch of these properties, which misused our code
for "logical aliases", some of which I've discovered were not even
fully implemented. But with this change, all that code can go away, and
making a legacy alias is just a case of putting it in the JSON. This
also shrinks `StyleProperties` as it doesn't need to contain data for
these aliases, and removes a whole load of `-webkit-*` spam from the
style inspector.
2024-09-27 17:16:23 +01:00
Sam Atkins
bea47a2554 LibWeb/CSS: Correct behavior of revert inside a @layer
`revert` is supposed to revert to the previous cascade origin, but we
previously had it reverting to the previous layer. To support both,
track them separately during the cascade.

As part of this, we make `set_property_expanding_shorthands()` fall back
to `initial` if it can't find a previous value to revert to. Previously
we would just shrug and do nothing if that happened, which only works
if the value you want to revert to is whatever is currently in `style`.
That's no longer the case, because `revert` should skip over any layer
styles that have been applied since the previous origin.
2024-09-26 08:08:38 +02:00
Andreas Kling
e40ad73ae7 LibWeb: Allow setting shorthand CSS properties via CSSStyleDeclaration
We now expand shorthands into their respective longhand values when
assigning to a shorthand named property on a CSSStyleDeclaration.

We also make sure that shorthands can be round-tripped by correctly
routing named property access through the getPropertyValue() AO,
and expanding it to handle shorthands as well.

A lot of WPT tests for CSS parsing rely on these mechanisms and should
now start working. :^)

Note that multi-level recursive shorthands like `border` don't work
100% correctly yet. We're going to need a bunch more logic to properly
serialize e.g `border-width` or `border` itself.
2024-09-22 09:45:59 +02:00
Sam Atkins
a1fca1a7f3 LibWeb: Start transitions when affected properties change
Co-authored-by: Matthew Olsson <matthewcolsson@gmail.com>
2024-09-22 06:41:55 +02:00
Tim Ledbetter
087fcb84cb LibWeb: Don't crash when resolving grid properties of inline elements
Previously, attempting to get the computed value for a
grid-template-rows or grid-template-columns property would cause a
crash for inline elements.
2024-09-20 08:16:33 +02:00
Tim Ledbetter
779de840af LibWeb: Don't crash when resolving style of grid template properties
Previously, attempting to get the computed value for a
grid-template-rows or grid-template-columns property would cause a crash
if the element had no associated paintable.
2024-09-18 17:38:20 +01:00
Annya
bea7eec518 LibWeb/CSS: Implement revert-layer
With the introduction of the cascade layer, the 5th CSS-wide keyword,
`revert-layer`, has been added.
2024-09-11 22:30:20 +01:00