Commit graph

70 commits

Author SHA1 Message Date
Sam Atkins
db75405881 LibWeb/CSS: Support overlay keyword as alias to auto in overflow
We don't yet have a system for "legacy value aliases", but until we have
a lot of them we can handle them manually.

We also have to do this in two places because
parse_css_value_for_property() doesn't call any property-specific
parsing code.
2025-07-21 10:04:42 +01:00
Sam Atkins
27a666f3b2 LibWeb/CSS: Implement type(<syntax>) in attr()
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Build Dev Container Image / build (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
This lets the `attr()` interpret the attribute's contents as an
arbitrary type instead of just as a string or number.
2025-07-16 14:47:45 +01:00
Sam Atkins
5d1ba658c9 Tests: Import attr()-related WPT tests 2025-07-16 14:47:45 +01:00
Tim Ledbetter
6ef96ba170 Revert "Tests: Replace background-near-zero-svg test with WPT import"
The unmodified test is flaky on CI.

This reverts commit 8fce09f521.
2025-07-07 06:53:21 -04:00
Tim Ledbetter
8fce09f521 Tests: Replace background-near-zero-svg test with WPT import 2025-07-02 18:44:21 +02:00
Tim Ledbetter
7a6e4f5ec8 LibWeb: Treat a CSS declaration with a "--" property name as invalid 2025-06-25 17:09:29 +01:00
Tim Ledbetter
b00e57139f LibWeb/CSS: Treat block at-rules with no block as invalid 2025-06-25 09:02:45 +02:00
Tim Ledbetter
212d748ded LibWeb: Apply clip rect before painting background and foreground items 2025-06-24 12:56:28 +01:00
Callum Law
6584ae0080 LibWeb: Treat CSS selectors containing undeclared namespaces as invalid
Selectors containing undeclared namespaces should be considered invalid,
not just not matching any elements.

Gains us 3 new WPT passes.
2025-06-24 12:51:12 +01:00
Tim Ledbetter
9b6da84fff LibWeb/CSS: Implement the font-kerning property
This sets whether the kerning information stored on the current font is
used.
2025-06-23 13:26:48 +01:00
Tim Ledbetter
689dff3ee8 Tests: Synchronize imported tests with the WPT repository 2025-06-22 23:51:34 +02:00
Callum Law
d7036daa89 LibWeb: Disallow trailing tokens in @supports(<declaration>) 2025-06-21 11:49:43 +01:00
Tim Ledbetter
e0af205d69 LibWeb/CSS: Implement the empty-cells property
This property sets whether table borders and backgrounds are painted
if a given table cell has no visible content.
2025-06-18 14:55:03 +01:00
Tim Ledbetter
59a2e10a4e LibWeb: Distinguish between empty block at-rules and statement at-rules 2025-06-17 08:58:00 +01:00
Sam Atkins
bb035fbfe0 Tests: Import a whole bunch of WPT mediaqueries tests
A lot of these are ref-tests, so I'm skipping the failing ones for now,
and will make as many pass as possible in subsequent commits.
2025-05-23 10:17:58 +01:00
Sam Atkins
1fe29ac642 LibWeb/CSS: Bring :lang() matching closer to spec
Some checks are pending
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (arm64, macos-15, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (x86_64, ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
With this, we pass the 8 ref tests in css/selectors/selectors-4/ which
previously failed. This is not technically a full implementation, as we
are supposed to first canonicalize the language range and tag, but that
will require downloading and processing the IANA language subtag
registry:

https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

That's significantly more work, and WPT doesn't seem to test any cases
that require that, so we can leave it for now.
2025-05-15 16:40:44 +01:00
Psychpsyo
4989c5c793 LibWeb: Add paint containment clipping
The contain-paint-stacking-context-001a.html test has been removed
for now because it has a 1px tall blue line at the top that should
not be there. With paint containment, this line is removed only in
the actual test case, but not in the reference. This is because of
the font that we use in testing and happens in Chromium as well if
the test is run with that font.
2025-05-13 15:30:14 +03:00
Psychpsyo
ed7374783d LibWeb: Enable different overflow along the x and y axis 2025-05-13 15:30:14 +03:00
Tim Ledbetter
04fde1c550 LibWeb: Ensure lang pseudoclass matches multiple segment subcodes 2025-04-28 11:29:30 +01:00
Tim Ledbetter
74c803c87b LibWeb: Ensure |= value selector handles multiple segments correctly
Previously, the `|=` would not compare strings containing `-`
characters correctly because it would only compare the element
attribute up to the first `-` character.
2025-04-28 11:29:30 +01:00
Tim Ledbetter
9cf04f40f6 LibWeb: Implement the color-mix() function
This takes 2 color values and returns the result of mixing them by a
given amount.
2025-04-22 12:19:51 +02:00
Tim Ledbetter
ac19b0cda8 LibWeb/CSS: Support media queries in import at-rules 2025-04-02 13:53:03 +01: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
Sam Atkins
9e65291ebd LibWeb/CSS: Discard unsupported style properties on pseudo-elements
Quite simply, ignore any declarations for properties we don't want,
while computing a pseudo-element's style.

I've imported a WPT test for this, which fails without this patch.
2025-03-24 09:49:50 +00:00
Tim Ledbetter
c37a47f76f LibWeb/CSS: Implement import at-rule supports conditions
This indicates the features the browser must support for the given
stylesheet to be fetched.
2025-03-19 16:42:51 +01:00
Aliaksandr Kalenik
b8fa355a21 LibWeb: Implement "transferred size suggestion" part of GFC spec 2025-03-19 10:21:54 +01:00
stasoid
a6935299eb LibWeb: Correctly calculate static position rect when absolutely
positioned element is a descendant of inline-block

Sets inline block offsets in InlineFormattingContext.cpp, but this is
not enough. When static position rect is calculated during layout,
not all ancestors of abspos box may have their offsets calculated yet
(more info here: https://github.com/LadybirdBrowser/ladybird/pull/2583#issuecomment-2507140272).
So now static position rect is calculated relative to static containing
block during layout and calculation relative to actual containing block
is done later in
FormattingContext::layout_absolutely_positioned_element.

Fixes wpt/css/CSS2/abspos/static-inside-inline-block.html
2025-03-17 15:55:06 +01: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
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
a6efdb1068 LibWeb: Treat CSS at-rule names as case-insensitive 2025-03-10 12:42:57 +01:00
Tim Ledbetter
bf15b7ac12 LibWeb: Treat media query with an invalid media type as invalid 2025-03-09 17:48:36 +00: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
Andreas Kling
5331571fdc LibWeb: Handle interleaved table-row and table-row-group boxes
Before this change, we were always processing all row groups first,
and then all rows. This led to incorrect table layouts when rows and row
groups were encountered in anything but that order.
2025-02-26 13:50:01 +01:00
Andreas Kling
1b46a52cfc LibWeb: Always align inline text content to the alphabetic baseline
This fixes an issue where `vertical-align: middle` would incorrectly
shift the text away from the natural alphabetic baseline.

Fixing this makes many WPT table tests work correctly, so I'm also
importing one of them here. :^)
2025-02-21 01:16:38 +00:00
Sam Atkins
0fd0596dbf LibWeb: Support strings as list-style-types
We've long claimed to support this, but then silently ignored string
values, until 4cb2063577 which would
not-so-silently crash instead. (Oops)

So, actually pass the string value along and use it in the list marker.

As part of this, rename our `list-style-type` enum to
`counter-style-name-keyword`. This is an awkward name, attempting to be
spec-based. (The spec says `<counter-style>`, which is either a
`<counter-style-name>` or a function, and the `<counter-style-name>` is
a `<custom-ident>` that also has a few predefined values. So this is the
best I could come up with.)

Unfortunately only one WPT test for this passes - the others fail
because we produce a different layout when text is in `::before` than
when it's in `::marker`, and similar issues.
2025-02-11 10:39:27 +01:00
Psychpsyo
402d8220dd LibWeb: Make style containment influence quotes 2025-02-06 17:44:50 +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
Mehran Kamal
cfe6702767 LibWeb/CSS: Fix linear-gradient single color-stop usage
The Web::CSS::Parser's GradientParsing ignores color-stops if
it is only a single one. This change allows to have color-stops
with double positions against a single color.

Further, also allows for `linear-gradient(black)` and similar
other gradient functions
2025-02-03 17:24:10 +00:00
Psychpsyo
67ed676831 LibWeb: Implement CSS 'contain' property 2025-01-28 11:24:40 +00:00
Aliaksandr Kalenik
d5a82040e3 LibWeb: Fix underinvalidation of :nth-child using invalidation sets
For all invalidation properties nested into nth-child argument list we
need to invalidate whole subtree to make sure style of sibling elements
will be recalculated.
2025-01-25 10:16:21 +01:00
Aliaksandr Kalenik
5202ae26e0 LibWeb: Import WPT tests for :nth-child and :nth-last-child invalidation 2025-01-24 20:08:37 +01:00
InvalidUsernameException
de71eb9b13 LibWeb: Accept TableWrapper as containing block for abspos items
When an element is displayed as table, an anonymous table wrapper box
needs to be created for it. Among others, the position property of the
table element is then applied to the anonymous table wrapper box
instead. If the table happens to be positioned absolutely, the table
wrapper box may become the containing block for absolutely positioned
elements inside the table.

In the original code however, anonymous layout nodes were excluded from
becoming the containing block for an absolutely positioned element.
Because of this, the containing block was calculated to be the first
suitable parent block of the table wrapper box.

This incorrect containing block would result in a crash later on when
trying to size the absolutely positioned element inside the table. To
prevent this crash, the anonymous table wrapper box is now allowed to
become the containing block for absolutely positioned elements inside
a table.

The definition of containing block for an absolutely positioned element
in the spec does not mention anything about skipping anonymous boxes.
Additionally the rules for absolute positioning of tables
(https://www.w3.org/TR/css-tables-3/#abspos-boxes-in-table-root) imply
that a table wrapper box is indeed able to be the containing block for
absolutely positioned elements.
2025-01-21 15:24:05 +01:00
Gingeh
8e56109515 LibWeb/CSS: Implement the light-dark color function 2025-01-08 11:18:13 +00:00
Gingeh
0a6793c89b LibWeb: Check if types have a present and nonzero percentage value
Co-authored-by: Chase Knowlden <haroldknowlden@gmail.com>
Co-authored-by: "tanner.drake" <tanner.drake@protonmail.com>
2024-12-30 11:09:15 +01:00
Lucas CHOLLET
61755b29c9 Tests: Import a bunch of css-color tests from WPT 2024-12-19 09:54:14 +00:00
Lucas CHOLLET
9261688488 Tests: Import a few ICC profiles related tests 2024-12-19 09:54:14 +00:00