This seems to have vanished from the spec, but in any case, we still
need it. Without this change we erroneously thought that calculations
that match <percentage> did not match <number-percentage>.
(cherry picked from commit 760943d584587899d2ba0390cad20797001e1b96)
This fixes a rendering issue on https://prodengi.kz/ that someone on
Discord reported. :^)
(cherry picked from commit 0b775da7c72a85c099f35d8caf2e7b66721a4483)
This implementation is incomplete in that we do not fully implement the
steps to match the given font against the fonts in the set.
This is used by fonts.google.com to load the fonts used for sample text.
(cherry picked from commit 9bdf2e928c448585a6349bef36d7cb98ccc0607b)
Before this change, we transferred the input element's line-height to
both the editable text *and* the placeholder. This caused some strange
doubling of the effective line-height when the editable text was empty,
pushing down the placeholder.
(cherry picked from commit 13ba491924c4fc3831d5a8986673d832a721f545;
amended some slighly different horizontal sizes in the expectations
file. Maybe due to serenity not using harfbuzz for shaping, or due
to not have another earlier change yet. If it's the latter, this will
fix itself when that's brought in.)
CSSStyleDeclaration has an indexed property getter, which returns
properties associated with the object in the order they were specified
in.
(cherry picked from commit a94282e0e8dd344bcf94c1d098378bd46151ce47)
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.
(cherry picked from commit aacf9b08ed8c4286c84145b52fa70f399ed0bdff;
amended to fix tiny conflict in libweb_generators.cmake, and to change
the default value of all gap-related properties from 'auto' to 'normal'
since serenity does not yet have LadybirdBrowser/ladybird#2253 and
cherry-picking that has a pretty long dependency tree. It's easy to
update the test once that is cherry-picked)
Without this, it would return "(invalid CSS::PropertyID)" when
requesting item(decl.length).
(cherry picked from commit 5aacb053a3fa0cf0e2a825c63dd3a4ebd916eda4)
There was no need to use FlyString for error messages, and it just
caused a bunch of churn since these strings typically only existed
during the lifetime of the error.
(cherry picked from commit 175f3febb8037a440d4ead7347d3266ee3d345e1;
minorly amended to fix conflict in WebSocket.cpp due to serenity
not having the adapter class removal in LadybirdBrowser/ladybird#1671)
Introduce the `writing-mode` property, as specified in
https://drafts.csswg.org/css-writing-modes/#block-flow
(cherry picked from commit c3f3e93b7e46e2f366fbc904852763af546d3913;
amended to fix conflict on `height:` in expectation)
We were not discarding enough whitespace to actually get to the radius
and color values.
(cherry picked from commit c99fad77e1cfc8789f2a8d33e958d7b5bcf35ea9)
This shares its implementation with `backdrop-filter`.
(cherry picked from commit 29974de852fb14eef78a18232bd36d5c8955a214;
amended to resolve conflict on `height:` in expectations file, and to
remove change to DisplayListPlayerSkia.cpp which serenity doesn't have;
also updated FilterPainting.{h,cpp} for changes since serenity does not
have LadybirdBrowser/ladybird#736 and LadybirdBrowser/ladybird#886)
This is really bare bone as we only support the `xyz-d50` color space
for the moment.
It makes us pass the following WPT tests:
- css/css-color/predefined-016.html
- css/css-color/xyz-d50-001.html
- css/css-color/xyz-d50-002.html
(cherry picked from commit 48bbebc636598eca905b8eef984ee2cba548ff64)
These don't have to worry about the input not being valid UTF-8 and
so can be infallible (and can even return self if no changes needed.)
We use this instead of Infra::to_ascii_{upper,lower}_case in LibWeb.
(cherry picked from commit 073bcfd3866852a4c4bcca2bd131bd65ae53541f)
These are created when a style rule has properties listed after another
rule. For example:
```css
.test {
--a: 1;
--b: 1;
--c: 1;
.thing {
/* ... */
}
/* These are after a rule (.thing) so they're wrapped in a
CSSNestedDeclarations: */
--d: 1;
--e: 1;
--f: 1;
}
```
They're treated like a nested style rule with the exact same selectors
as their containing style rule.
(cherry picked from commit e4245dc39e68d9376dfb2344c78119a938533319)
For example, this:
```css
.foo {
color: red;
&:hover {
color: green;
}
}
```
now has the same effect as this:
```css
.foo {
color: red;
}
.foo:hover {
color: green;
}
```
CSSStyleRule now has "absolutized selectors", which are its selectors
with any `&`s resolved. We use these instead of the "real" selectors
when matching them, meaning the style computer doesn't have to know or
care about where the selector appears in the CSS document.
(cherry picked from commit 53f99e51f8382a20cec7752480d505957a2680b1)
Through the CSSOM, rules can be moved around, and so anything cached
(for now just the qualified layer name) needs to be recalculated when
that happens. This method is virtual so that other rules will be able
to clear their cached data too.
(cherry picked from commit d935a00413cbfc0d292406a1b97a327715882078)
Nested lists of declarations become CSSNestedDeclarations; at-rules are
allowed as long as they are CSSGroupingRules.
(cherry picked from commit 36afff97d18b6c67e718894f2fc9742c3f9d0122)
This is basically a list of properties, without a block around it. It'll
be part of CSSStyleRules' contents.
(cherry picked from commit 9c66ab356ac96602e5c1dc23906288fa187e9f01)
The support in LibWeb is quite easy as the previous commits introduced
helpers to support lab-like colors.
Now for the methods in Color:
- The formulas in `from_lab()` are derived from the CIEXYZ to CIELAB
formulas the "Colorimetry" paper published by the CIE.
- The conversion in `from_xyz50()` can be decomposed in multiple steps
XYZ D50 -> XYZ D65 -> Linear sRGB -> sRGB. The two first conversion
are done with a singular matrix operation. This matrix was generated
with a Python script [1].
This commit makes us pass all the `css/css-color/lab-00*.html` WPT
tests (0 to 7 at the time of writing).
[1] Python script used to generate the XYZ D50 -> Linear sRGB
conversion:
```python
import numpy as np
m_a = np.array([
[0.8951000, 0.2664000, -0.1614000],
[-0.7502000, 1.7135000, 0.0367000],
[0.0389000, -0.0685000, 1.0296000]
])
chromaticities_source = np.array([0.96422, 1, 0.82521])
chromaticities_destination = np.array([0.9505, 1, 1.0890])
cone_response_source = m_a @ chromaticities_source
cone_response_destination = m_a @ chromaticities_destination
cone_response_ratio = cone_response_destination / cone_response_source
m = np.linalg.inv(m_a) @ np.diagflat(cone_response_ratio) @ m_a
D50_to_D65 = m
xyz_65_to_srgb = np.array([
[3.2406, - 1.5372, - 0.4986],
[-0.9689, + 1.8758, 0.0415],
[0.0557, - 0.2040, 1.0570]
])
xyz_50_to_srgb = xyz_65_to_srgb @ D50_to_D65
print(xyz_50_to_srgb)
```
(cherry picked from commit 3406b69614e27dcb6036a6d2e5ca62833070c0a1;
amended to fix -Wdouble-promotion warnings)
This class provides the common base for both CSSOKLab and the future
CSSLab classes.
(cherry picked from commit 8efa046e0c56d970cabe5644e0e8b4eef85013c3)
This is currently only used for `oklab()` but will soon be also used for
`lab()` as well.
(cherry picked from commit 707bcaf6045b1eb36887bbf3af107b87d3def302)
Otherwise, `margin: var(--foo) var(--bar)` would be wrongly serialized
as `margin: var(--foo)var(--bar)`
(cherry picked from commit 6e68e8f3c9d74893e46ab0514169b950866457b4)
A couple of parts of this:
- Store the source text for Declarations of custom properties.
- Then save that in the UnresolvedStyleValue.
- Serialize UnresolvedStyleValue using the saved source when available -
that is, for custom properties but not for regular properties that
include var() or attr().
(cherry picked from commit bf3e6daedbc8fd0d8e03f5f0eafebf5bbe3abf03)
This is in a weird position where the spec tells us to discard the
comments, but then we have to preserve the original source text which
may include comments. As a compromise, I'm treating each comment as a
whitespace token - comments are functionally equivalent to whitespace
so this should not have any behaviour changes beyond preserving the
original text.
(cherry picked from commit f8995d37a2bf71e98e273f4aa0764d9c022ac127)
This requires a little bit of ad-hoc tracking of start/end Tokens for
Function and SimpleBlock.
(cherry picked from commit ea164124de271e511778326280347ebc28d948d8)
CSS Syntax 3 (https://drafts.csswg.org/css-syntax) has changed
significantly since we implemented it a couple of years ago. Just about
every parsing algorithm has been rewritten in terms of the new token
stream concept, and to support nested styles. As all of those
algorithms call into each other, this is an unfortunately chonky diff.
As part of this, the transitory types (Declaration, Function, AtRule...)
have been rewritten. That's both because we have new requirements of
what they should be and contain, and also because the spec asks us to
create and then gradually modify them in place, which is easier if they
are plain structs.
(cherry picked from commit e0be17e4fbf1870f35614d0cde8f63e72f78bd16;
amended to tweak test expectation due to serenity not yet having
LadybirdBrowser/ladybird#1603)
This will be needed in the Parser soon, so for lack of a better place,
it's going in a separate header.
(cherry picked from commit f11c0e6cc0aa173f2f6120448b40c1520b55e046)
As part of this, we can now fill in the missing serialization steps.
The parsing is a stub for now, and will be filled out in a subsequent
commit.
(cherry picked from commit 77238730165641f2bab7409f5c9fbaf575cbd99f)
When the TokenStream code was originally written, there was no such
concept in the CSS Syntax spec. But since then, it's been officially
added, (https://drafts.csswg.org/css-syntax/#css-token-stream) and the
parsing algorithms are described in terms of it. This patch brings our
implementation in line with the spec. A few deprecated TokenStream
methods are left around until their users are also updated to match the
newer spec.
There are a few differences:
- They name things differently. The main confusing one is we had
`next_token()` which consumed a token and returned it, but the spec
has a `next_token()` which peeks the next token. The spec names are
honestly better than what I'd come up with. (`discard_a_token()` is a
nice addition too!)
- We used to store the index of the token that was just consumed, and
they instead store the index of the token that will be consumed next.
This is a perfect breeding ground for off-by-one errors, so I've
finally added a test suite for TokenStream itself.
- We use a transaction system for rewinding, and the spec uses a stack
of "marks", which can be manually rewound to. These should be able to
coexist as long as we stick with marks in the parser spec algorithms,
and stick with transactions elsewhere.
(cherry picked from commit b645e26e9b29437c0e248b5e43e3ec76aacf960d)
This matches the behavior of other browsers and fixes a WPT test.
(cherry picked from commit 902586a21de3ef8335e447053d82057c4c927d72;
amended expected output because serenity does not yet have
LadybirdBrowser/ladybird#1603)
Before this change we were serializing them in a bogus 8-digit hex color
format that isn't actually recognized by HTML.
This code will need more work when we start supporting color spaces
other than sRGB.
(cherry picked from commit 4590c081c2eb257232463ed660498a02f9bbe7b8;
amended expected output because serenity does not yet have
LadybirdBrowser/ladybird#1603)
