Commit graph

164 commits

Author SHA1 Message Date
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
Andreas Kling
1f5c49f40d LibWeb: Make CSS::is_inherited_property(PropertyID) go fast
Instead of switching on the PropertyID and doing a boatload of
comparisons, we reorder the PropertyID enum so that all inherited
properties are in two contiguous ranges (one for shorthands,
one for longhands).

This replaces the switch statement with two simple range checks.

Note that the property order change is observable via
window.getComputedStyle(), but the order of those properties is
implementation defined anyway.

Removes a 1.5% item from the profile when loading https://hemnet.se/
2024-09-08 09:45:31 +02:00
Andreas Kling
95bd0602ba LibWeb: Keep custom properties from all cascade layers
Before this change, we were cascading custom properties for each layer,
and then replacing any previously cascaded properties for the element
with only the set from this latest layer.

The patch fixes the issue by making each pass of the custom property
cascade add to the same set, and then finally assigning that set of
properties to the element.
2024-09-07 12:37:15 +02:00
Sam Atkins
a50da405e9 LibWeb/CSS: Implement cascade layers (aka @layer)
This is done quite simply for now, there are certainly optimizations
that can and should be made later.

With this we now pass:
- http://wpt.live/css/css-cascade/layer-basic.html
- http://wpt.live/css/css-cascade/layer-important.html
- http://wpt.live/css/css-cascade/layer-statement-copy-crash.html
- http://wpt.live/css/css-cascade/layer-stylesheet-sharing-important.html
- http://wpt.live/css/css-cascade/layer-stylesheet-sharing.html
- http://wpt.live/css/css-cascade/layer-vs-inline-style.html
2024-09-06 07:49:55 +02:00
Samuel Fry
23b4367c9c LibWeb: Support parsing column-span 2024-08-26 08:26:22 +01:00
Samuel Fry
c113d3fae9 LibWeb: Support parsing column-width 2024-08-26 08:26:22 +01:00
Tim Ledbetter
2c5d626b21 LibWeb: Don't crash when converting small CSS::Ratio to CSSPixelFraction
Previously, a crash would occur in the if `CSSPixelFraction` was given a
denominator value less than the resolution of `CSSPixels` (1/64).

We now divide both parts of the ratio by the denominator in this case.
2024-08-22 13:49:41 +02:00
Tim Ledbetter
00f03f3e90 LibWeb: Match attribute selectors case insensitively in XML documents
The values of attribute selectors are now compared case insensitively
by default if the attribute's document is not a HTML document, or the
element is not in the HTML namespace.
2024-08-19 09:03:22 +02:00
BenJilks
1537d589ca LibWeb: Add start and end values to text-align
The `start` and `end` value set the text alignment based on the computed
value of `direction`. The default value of `text-align` is now `start`
instead of `left`.
2024-08-13 15:19:51 +01:00
Sam Atkins
14611de362 LibWeb: Implement getComputedStyle() pseudoElement parameter
Right now, we deviate from the CSSOM spec regarding our
CSSStyleDeclaration classes, so this is not as close to the spec as I'd
like. But it works, which means we'll be able to test pseudo-element
styling a lot more easily. :^)
2024-08-07 16:14:49 +02:00
Tim Ledbetter
ea68bdef26 LibWeb: Return error on modification of a computed CSS style declaration
Previously, calling `setProperty` or `removeProperty` from JS on a
CSSStyleDeclaration returned from `getComputedStyle()` would return
null. We now return a NoModificationAllowedError instead, which aligns
our implementation with the specification.
2024-08-05 09:55:50 +02:00
Andreas Kling
a10610a1ca LibWeb: Don't crash on CSS all: revert
Not every value in a StyleProperties will be non-null by the time we
perform `revert`, so let's make a specialized function for reverting a
property instead of using the path that requires the value to be
non-null.
2024-08-04 11:49:44 +02:00
Tobias Christiansen
da7f0897d1 LibWeb: Implement "text-overflow" property
The "text-overflow" property affects text that may get clipped if it is
larger than its container and does not do any line breaks.
The ellipsis character gets added to the end and the rest of the text
gets trunctated if the property is set to "ellipsis".
This patch implements this behavior in the InlineFormattingContext. :^)

The "text-overflow" property is also added  to the
getComputedStyle-print-all test.
2024-08-03 10:04:38 +01:00
Sam Atkins
7daf5cdaff LibWeb: Invalidate layout if pseudo-element style changes
Pseudo-elements' style is only computed while building the layout tree.
This meant that previously, they would not have their style recomputed
in some cases. (Such as when :hover is applied to an ancestor.)

Now, when recomputing an element's style, we also return a full
invalidation if one or more pseudo-elements would exist either before or
after style recomputation.

This heuristic produces some false positives, but no false negatives.
Because pseudo-elements' style is computed during layout building, any
computation done here is then thrown away. So this approach minimises
the amount of wasted style computation. Plus it's simple, until we have
data on what approach would be faster.

This fixes the Acid2 nose becoming blue when the .nose div is hovered.
2024-07-30 09:45:45 +02:00
Sam Atkins
6ae2b8c3d9 LibWeb/CSS: Parse custom-idents more consistently
These have a few rules that we didn't follow in most cases:
- CSS-wide keywords are not allowed. (inherit, initial, etc)
- `default` is not allowed.
- The above and any other disallowed identifiers must be tested
  case-insensitively.

This introduces a `parse_custom_ident_value()` method, which takes a
list of disallowed identifier names, and handles the above rules.
2024-07-27 14:45:33 +02:00
Sam Atkins
017d6c3314 LibWeb: Implement counter-[increment,reset,set] properties
These control the state of CSS counters.

Parsing code for `reversed(counter-name)` is implemented, but disabled
for now until we are able to resolve values for those.
2024-07-26 11:04:30 +01:00
Edwin Hoksberg
020b20d817 LibWeb: Support content-visibility css 2024-07-19 09:04:30 +01:00
Colin Reeder
5c315b532e LibWeb: Add more legacy -webkit- aliases 2024-07-15 15:45:33 +01:00
Colin Reeder
449f81bfbe LibWeb: Add support for -webkit-text-fill-color 2024-07-10 10:25:04 -06:00
Bastiaan van der Plaat
c81a640f3e LibWeb/CSS: Serialize transform scale percentage values as numbers 2024-07-04 14:41:35 +02:00
Luke Warlow
6623177265 LibWeb: Implement support for scrollbar-gutter
This property is now correctly parsed.

Ladybird always uses overlay scrollbars so this property does nothing.
2024-07-04 13:22:40 +02:00
Andreas Kling
4c94202e97 LibWeb: Remove unnecessary FIXME marker for CSSStyleDeclaration.cssFloat 2024-06-14 20:45:37 +02:00
Andreas Kling
19fa630fa7 LibWeb: Make CSSKeyframeRule.parentRule actually point to parent rule 2024-06-14 20:45:37 +02:00
Andreas Kling
7f2c833a39 LibWeb: Implement CSSKeyframesRule.cssRuleList
To make this straightforward, CSSKeyframesRule now uses a CSSRuleList
for internal storage.
2024-06-14 20:45:37 +02:00
Andreas Kling
a12d28fd30 LibWeb: Implement CSSStyleDeclaration.parentRule
This readonly attribute returns the containing CSS rule, or null (in the
case of element inline style).
2024-06-14 20:45:37 +02:00
Tim Ledbetter
d6297ec074 LibWeb: Cast to the correct type in Element::auto_directionality()
Previously, we always cast to a HTMLInputElement when getting the value
of an auto directionality form associated element. This caused
undefined behavior when determining the directionality of an element
that wasn't a HTMLInputElement.
2024-05-28 09:51:07 +02:00
Tim Ledbetter
0b0ad5c9db LibWeb: Calculate width property resolved value correctly
This means that relative width values are now correctly resolved when
calling `getComputedStyle()`.
2024-05-28 08:08:31 +02:00
Matthew Olsson
a8ef84f8c3 LibWeb: Use LengthPercentage for calc values in Transformation matrix 2024-05-25 22:19:47 +02:00