Commit graph

29 commits

Author SHA1 Message Date
Sam Atkins
a28197669a LibWeb/CSS: Move property code from CSSStyleDeclaration to *Properties
CSSStyleDeclaration is a base class that's used by various collections
of style properties or descriptors. This commit moves all
style-property-related code into CSSStyleProperties, where it belongs.

As noted in the previous commit, we also apply the CSSStyleProperties
prototype now.
2025-03-19 13:53:00 +00: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
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
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
88d35c547c LibWeb/CSS: Implement the caret-color property 2025-03-09 19:36:29 +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
Psychpsyo
c0eb072645 LibWeb: Add CSS view-transition-name 2025-02-22 14:52:13 +00:00
Sam Atkins
412b758107 LibWeb/CSS: Support nested shorthands in CSSStyleDeclaration
Without this, getting a property's value from `element.style.foo` would
fail if `foo` is a shorthand property which has a longhand that is also
a shorthand. For example, `border` expands to `border-width` which
expands to `border-top-width`.

This is because we used `property()` to get a longhand's value, but this
returns nothing if the property is a shorthand.

This commit solves that by moving most of get_property_value() into a
separate method that returns a StyleProperty instead of a String, and
which calls itself recursively for shorthands. Also move the manual
shorthand construction out of ResolvedCSSStyleDeclaration so that all
CSSStyleDeclarations can use it.
2025-02-12 16:00:42 +00:00
Sam Atkins
006c8ba2d4 LibWeb/CSS: Serialize font property more correctly
Anything that's default shouldn't be included.
2025-02-12 16:00:42 +00:00
Glenn Skrzypczak
0fe30886f5 LibWeb/CSS: Implement mix-blend-mode
This adds support for the `mix-blend-mode` CSS property.
2025-02-05 11:26:58 +00:00
Luke Wilde
010cdd8f90 LibWeb/CSS: Implement the ({min,max}-)block-size properties
These are heavily used by morrisons.com, using them in place of the
usual properties these map to.
2025-01-31 14:18:21 +01:00
Psychpsyo
67ed676831 LibWeb: Implement CSS 'contain' property 2025-01-28 11:24:40 +00:00
Psychpsyo
7757df5bb5 LibWeb: Implement CSS 'isolation' property 2025-01-13 11:07:55 +00:00
Gingeh
ce5cd012b9 LibWeb/CSS: Implement the color-scheme CSS property 2025-01-08 11:18:13 +00:00
Psychpsyo
eb7824339b LibWeb: Improve user-select support 2025-01-06 12:22:37 +00:00
Johan Dahlin
1c42d6831b LibWeb: Style font-variant-* css properties 2024-12-17 19:07:13 +01:00
Gingeh
84150f972f LibWeb: Properly serialize position/edge style values 2024-12-13 11:35:38 +00:00
Sam Atkins
8e3adbe082 LibWeb: Serialize text-decoration closer to spec
This gets us 32 WPT subtest passes that I'm aware of. :^)
2024-11-30 11:01:12 +01:00
Sam Atkins
0c39d07b4d LibWeb/CSS: Serialize overflow correctly
When the x and y values are the same, we only want to serialize one.

This gets us 10 local WPT subtest passes. :^)
2024-11-30 11:01:12 +01:00
Sam Atkins
e4d55a6037 LibWeb/CSS: Use ShorthandStyleValue to serialize shorthands
This wins us 65 new WPT subtest passes! It also shows up that we're
doing the wrong thing in ShorthandStyleValue in places, notably with
the grid properties. However, having one place to fix instead of two
will make it easier to correct them. :^)

In order to be fully correct, we should use the algorithm here:
https://drafts.csswg.org/cssom/#serialize-a-css-value

However, it's quite hand-wavy. What we do have in the meantime is
`ShorthandStyleValue::to_string()`, where we special-case the
serialization rules for shorthands with a generic fallback that's
equivalent to what the previous `get_property_value()` code was doing.
2024-11-30 11:01:12 +01:00
Sam Atkins
5bcd9abc42 LibWeb/CSS: Serialize background-repeat correctly
This gets us 4 WPT subtest passes.
2024-11-30 11:01:12 +01:00
Andreas Kling
9a7c9286c4 LibWeb: Support individual scale CSS property 2024-11-22 20:06:44 +01:00
Andreas Kling
66a821e731 LibWeb: Support individual translate CSS property 2024-11-22 20:06:44 +01:00
Nico Weber
94b97aa365 LibWeb: Plumbing for svg stroke-dasharray 2024-11-21 18:56:45 +01:00
Nico Weber
6fc06f45c2 LibWeb: Plumbing for svg stroke-dashoffset 2024-11-20 15:57:37 +01:00
Aliaksandr Kalenik
96a35767b6 LibWeb: Implement mask-image CSS property support
Implemented by reusing AddMask display list item that was initially
added for `background-clip` property.

Progress on flashlight effect on https://null.com/games/athena-crisis
2024-11-18 22:58:58 +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