Commit Graph

81 Commits

Author SHA1 Message Date
Callum Law
9ba74316d2 LibWeb: Implement text-wrap-style CSS property 2025-06-04 12:48:36 +01:00
Tim Ledbetter
e2d0d8e2b9 LibWeb/CSS: Implement the scrollbar-color property
This allows the user to set the scrollbar thumb and track colors.
2025-06-02 00:17:51 +02:00
Callum Law
94f5a51820 LibWeb: Convert white-space CSS property to shorthand
This exposed a few bugs which caused the following tests to behave
incorrectly:
- `tab-size-text-wrap.html`: This previously relied on a bug where we
  incorrectly treated `white-space: pre` as allowing text wrapping. The
  fix here is to implement the text-wrap CSS shorthand property.

- `execCommand-preserveWhitespace.html`: We don't correctly serialize
  shorthand properties. This is covered by an existing FIXME in
  `CSSStyleProperties::serialized()`

- `white-space-shorthand.html`: The last 5 subtests here fail as we
  don't correctly handle shorthand properties in
  `CSSStyleProperties::remove_property()`. This is covered by an
  existing FIXME in said function.
2025-05-29 12:04:28 +02:00
Callum Law
9480b1fc5c LibWeb: Parse and propagate white-space-trim CSS property 2025-05-29 12:04:28 +02:00
Callum Law
50bdd2cb85 LibWeb: Parse and propagate text-wrap-mode CSS property 2025-05-29 12:04:28 +02:00
Callum Law
ea30356fba LibWeb: Parse and propagate white-space-collapse CSS property 2025-05-29 12:04:28 +02:00
Mark Langen
6cbb5d2785 LibWeb: Parse and propagate touch-action CSS property
Co-authored-by: Sam Atkins <sam@ladybird.org>
2025-05-06 12:22:01 +01:00
Jelle Raaijmakers
71665fa504 LibWeb: Scale font size by 1.15 for line-height: normal
Browsers such as Chrome and Firefox apply an arbitrary scale to the
current font size if `normal` is used for `line-height`. Firefox uses
1.2 while Chrome uses 1.15. Let's go with the latter for now, it's
relatively easy to change if we ever want to go back on that decision.

This also requires updating the expectations for a lot of layout tests.
The upside of this is that it's a bit easier to compare our layout
results to other browsers', especially Chrome.
2025-05-05 13:15:56 +02:00
Tim Ledbetter
542c3cbe51 LibWeb: Implement the transition-behavior CSS property
This specifies whether transitions should be started for transitions
whose animation behavior is discrete.
2025-05-02 11:07:19 +01:00
Tim Ledbetter
32812f5db0 LibWeb: Return absolutized computed value for outline width property 2025-04-05 12:54:22 +02:00
Tim Ledbetter
8738987e44 LibWeb: Return absolutized computed value for border width properties 2025-04-04 23:45:06 +02:00
Glenn Skrzypczak
9973b01848 LibWeb/CSS: Improved implementation of background-blend-mode
This is a improved version of a73cd88f0c
The old commit was reverted in 552dd18696

The new version only paints an element into a new layer if background
blend modes other than normal are used. The rasterization performance
of most websites should therefore not suffer.

Co-Authored-By: Alexander Kalenik <kalenik.aliaksandr@gmail.com>
2025-04-01 13:38:00 +02:00
Aliaksandr Kalenik
552dd18696 Revert "LibWeb/CSS: Implement 'background-blend-mode'"
This reverts commit a73cd88f0c.

Emitting SaveLayer for each paintable made rasterization a lot slower
on every website because now Skia has to allocate enormous amounts of
temporary surfaces. Let's revert it for now and figure how to implement
it with less aggressive SaveLayer usage.
2025-03-28 16:48:03 +00:00
Glenn Skrzypczak
a73cd88f0c LibWeb/CSS: Implement 'background-blend-mode'
This implements the 'background-blend-mode' CSS property.
2025-03-28 09:41:06 +00:00
Tim Ledbetter
7b0b6e7493 LibWeb/CSS: Make empty GridTrackSize value serialize to "none"
This is the default value of the `grid-template-rows` and
`grid-template-columns` properties.
2025-03-22 17:33:37 +01:00
Tim Ledbetter
cbf47abd24 LibWeb/CSS: Set the initial value of the appearance property to "none" 2025-03-22 17:05:17 +01:00
Tim Ledbetter
ecd6636b3e LibWeb/CSS: Use "0s" as the initial value for animation-duration 2025-03-22 17:04:33 +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
Andreas Kling
b4e47f198a LibWeb: Implement time-traveling inheritance for CSS font-size
When setting `font-family: monospace;` in CSS, we have to interpret
the keyword font sizes (small, medium, large, etc) as slightly smaller
for historical reasons. Normally the medium font size is 16px, but
for monospace it's 13px.

The way this needs to behave is extremely strange:
When encountering `font-family: monospace`, we have to go back and
replay the CSS cascade as if the medium font size had been 13px all
along. Otherwise relative values like 2em/200%/etc could have gotten
lost in the inheritance chain.

We implement this in a fairly naive way by explicitly checking for
`font-family: monospace` (note: it has to be *exactly* like that,
it can't be `font-family: monospace, Courier` or similar.)
When encountered, we simply walk the element ancestors and re-run the
cascade for the font-size property. This is clumsy and inefficient,
but it does work for the common cases.

Other browsers do more elaborate things that we should eventually care
about as well, such as user-configurable font settings, per-language
behavior, etc. For now, this is just something that allows us to handle
more WPT tests where things fall apart due to unexpected font sizes.

To learn more about the wonders of font-size, see this blog post:
https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property/
2025-02-25 23:55:36 +01:00
Andreas Kling
a706d0ebf4 LibWeb: Let getComputedStyle() show *used* values for margin/padding
We were incorrectly showing *computed* instead of *used* values for
margin and padding when inspected via getComputedStyle().
2025-02-22 20:02:16 +01:00
Psychpsyo
c0eb072645 LibWeb: Add CSS view-transition-name 2025-02-22 14:52:13 +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
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
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
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
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
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
stelar7
488436fb54 LibWeb: Parse the rotate css property 2024-10-29 14:40:40 +00: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
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
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
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
Sam Atkins
95c17dfab5 LibWeb/CSS: Parse and propagate font-feature-settings property 2024-10-02 16:28:55 +01:00