Commit graph

66 commits

Author SHA1 Message Date
Jelle Raaijmakers
35efd4d14b LibWeb+LibGfx: Support alpha in CanvasRenderingContext2D
This is implemented by these related changes:

  * The Skia alpha type 'Opaque' is selected for surfaces that were
    created with the intention of not having an alpha channel.
    Previously we were simply creating one with alpha.

  * Clearing now happens through Skia's `clear()` which always uses the
    source color's value for the result, instead of setting all values
    to 0.

  * CanvasRenderingContext2D selects a different clearing color based on
    the `alpha` context attribute's value.
2025-04-29 13:51:23 +02: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
InvalidUsernameException
578a3af87d LibGfx: Support missing pixel formats in get_pixel()
Bitmap::get_pixel() was only handling two out of the four possible pixel
formats, asserting when called with the other two. The asserting code
path was triggered when loading JPEG XL images, causing crashes on pages
like https://jpegxl.info/resources/jpeg-xl-test-page or
https://html5test.co/.
2025-04-23 09:26:45 +02: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
Gingeh
4b9f5c6fb8 LibWeb: Generate ::backdrop pseudo-elements 2025-04-09 12:10:42 +01: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
Tim Ledbetter
d3c51ea05e LibWeb: Apply nowrap attribute as presentational hint 2025-02-22 09:12:08 +00:00
Tim Ledbetter
a4ee3fb1f0 LibWeb: Use type attribute to determine HTMLLinkElement mime type
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 (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (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
Previously, the type attribute was ignored on link elements.
2025-02-21 13:52:27 +01:00
Tim Ledbetter
2550b602ab LibWeb: Apply type presentational hint for HTMLLIElement 2025-02-21 01:25:30 +00:00
Tim Ledbetter
74bf7bc28e LibWeb: Apply type presentational hint for HTMLUListElement 2025-02-21 01:25:30 +00:00
Tim Ledbetter
7612f2161c LibWeb: Apply type presentational hint for HTMLOListElement 2025-02-21 01:25:30 +00: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
Tim Ledbetter
ea80167723 LibWeb: Apply HTMLTableSectionElement height presentational hint 2025-02-20 17:11:52 +00:00
Tim Ledbetter
3ffc7bd131 LibWeb: Apply HTMLTableElement bordercolor presentational hint 2025-02-20 17:11:52 +00:00
Tim Ledbetter
0e470d5cdf LibWeb: Apply presentational hints for the HTMLHRElement align attribute 2025-02-18 12:06:44 +01:00
Tim Ledbetter
c217057cfd LibWeb: Apply presentational hints for the HTMLHRElement color attribute 2025-02-18 12:06:44 +01:00
Lucas CHOLLET
a144481e6c LibGfx/PNG: Read the cICP chunk 2025-02-12 12:03:30 -05: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
Luke Warlow
b17bbe6d1f LibWeb: Implement ::details-content pseudo element
Details' contents matches a new details-content pseudo element.

Further work is required to make this pseudo-element behave per spec.

This pseudo should be element-backed per
https://drafts.csswg.org/css-pseudo/#element-backed
2024-12-06 07:16:41 +00:00
Luke Warlow
fdee82d203 LibWeb: Implement ::file-selector-button pseudo element
The button for a file input now matches `::file-selector-button`.
2024-12-05 10:49:57 +00:00
Milo van der Tier
1882a2e19b LibWeb/CSS: Pass Length::ResolutionContext to resolve_integer
The length resolution context might be needed even when resolving an
integer value, since it might contain a sign() function with length
values inside. This fixes a WPT subtest.
2024-12-04 12:26:50 +00:00
Milo van der Tier
8bec80ac47 LibWeb/CSS: Allow calc() values in media queries
It was initially thought that the spec disallows them, but this turned
out to be incorrect. This fixes several WPT tests.
2024-12-04 12:26:50 +00:00
Andreas Kling
d6f7fccf49 Tests: Import a bunch of WPT tests from /css/css-transforms 2024-11-22 20:06:44 +01:00