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)
For example, in the following abbreviated test HTML:
<span>some text</span>
<script>println("whf")</script>
We would have to craft the expectation file to include the "some text"
segment, usually with some leading whitespace. This is a bit annoying,
and makes it difficult to manually craft expectation files.
So instead of comparing the expectation against the entire DOM inner
text, we now send the inner text of just the <pre> element containing
the test output when we invoke `internals.signalTextTestIsDone`.
(cherry picked from commit bf668696de9a68bbcd6adfeaac809a475da015dc;
amended a bit but not as much as one might think -- see PR for details)
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)
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)
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)
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)
Otherwise, `margin: var(--foo) var(--bar)` would be wrongly serialized
as `margin: var(--foo)var(--bar)`
(cherry picked from commit 6e68e8f3c9d74893e46ab0514169b950866457b4)
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)
While updating the parser to the latest spec algorithms, this started
parsing incorrectly as a declaration, and we had no tests covering it.
(cherry picked from commit 9241f37823f227ae94461a494c6f7ab4b6cd0e4e)
This reverts 6d25bf3aac
Invalidating the style here means that transitions can cause an element
to leave style computation with its "needs style update" flag set to
true. This then causes a VERIFY to fail in the TreeBuilder.
This invalidation does not otherwise seem to have any effect. The
original commit suggests this was to fix a bug, but it's not clear what
bug that was. If it reappears, we can try to solve the issue in a
different way.
(cherry picked from commit 81596b41457d250bac28db37c1390fa46e6532de;
amended test with leading whitespace since we don't have
LadybirdBrowser/ladybird#1603 yet)
`revert` is supposed to revert to the previous cascade origin, but we
previously had it reverting to the previous layer. To support both,
track them separately during the cascade.
As part of this, we make `set_property_expanding_shorthands()` fall back
to `initial` if it can't find a previous value to revert to. Previously
we would just shrug and do nothing if that happened, which only works
if the value you want to revert to is whatever is currently in `style`.
That's no longer the case, because `revert` should skip over any layer
styles that have been applied since the previous origin.
(cherry picked from commit bea47a25545adfb96d83a16a3e4f4435bae05e39)
We now expand shorthands into their respective longhand values when
assigning to a shorthand named property on a CSSStyleDeclaration.
We also make sure that shorthands can be round-tripped by correctly
routing named property access through the getPropertyValue() AO,
and expanding it to handle shorthands as well.
A lot of WPT tests for CSS parsing rely on these mechanisms and should
now start working. :^)
Note that multi-level recursive shorthands like `border` don't work
100% correctly yet. We're going to need a bunch more logic to properly
serialize e.g `border-width` or `border` itself.
(cherry picked from commit e40ad73ae79023f64e250f854d0730c21e0f54fc)
Before this change, we were cascading custom properties for each layer,
and then replacing any previously cascaded properties for the element
with only the set from this latest layer.
The patch fixes the issue by making each pass of the custom property
cascade add to the same set, and then finally assigning that set of
properties to the element.
(cherry picked from commit 95bd0602ba079e0bd7608e39bcbc3b0403ed89d1)
(cherry picked from commit 4408ea7c9be1b3faefb5d68871ddd60f912a431b;
amended to add a trailing space to calc-missing-context.txt since we
don't have LadybirdBrowser/ladybird#1603 yet)
Previously, calling `setProperty` or `removeProperty` from JS on a
CSSStyleDeclaration returned from `getComputedStyle()` would return
null. We now return a NoModificationAllowedError instead, which aligns
our implementation with the specification.
(cherry picked from commit ea68bdef26260762dec02413cce0d79caef6f4a4)
The values of attribute selectors are now compared case insensitively
by default if the attribute's document is not a HTML document, or the
element is not in the HTML namespace.
(cherry picked from commit 00f03f3e900d6f5c0196db9a9d7eb352ec516b44)
Previously, a crash would occur in the if `CSSPixelFraction` was given a
denominator value less than the resolution of `CSSPixels` (1/64).
We now divide both parts of the ratio by the denominator in this case.
(cherry picked from commit 2c5d626b2125ffea49e06735e2f93279d0dfa0e1)
With the introduction of the cascade layer, the 5th CSS-wide keyword,
`revert-layer`, has been added.
(cherry picked from commit bea7eec5183a816a100d190e409a622f429d7405)
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.
(cherry picked from commit 421cf8d9bf276cff61acdc32dc55d978d37fb671;
amended to resolve conflict on `height:` in
getComputedStyle-print-all.txt)
Ignoring the fact that we should serialize a simplified form of calc()
expressions, the following are wrong:
- grid-auto-columns
- grid-auto-rows
- grid-template-columns
- grid-template-rows
- transform-origin
Generated in part with this python script (though I've since iterated on
the output repeatedly so it's quite different):
```py
import json
properties_file = open("./Userland/Libraries/LibWeb/CSS/Properties.json")
properties = json.load(properties_file)
for (key, value) in properties.items():
if not 'valid-types' in value:
continue
if 'longhands' in value:
continue
valid_types = value['valid-types']
for type_string in valid_types:
name, *suffix = type_string.split(None, 1)
match name:
case 'integer' | 'number':
print(f'{key}: calc(2 * var(--n));')
case 'angle':
print(f'{key}: calc(2deg * var(--n));')
case 'flex':
print(f'{key}: calc(2fr * var(--n));')
case 'frequency':
print(f'{key}: calc(2hz * var(--n));')
case 'length':
print(f'{key}: calc(2px * var(--n));')
case 'percentage':
print(f'{key}: calc(2% * var(--n));')
case 'resolution':
print(f'{key}: calc(2x * var(--n));')
case 'time':
print(f'{key}: calc(2s * var(--n));')
```
(cherry picked from commit 301502a3a12b86e218f477f06d2d5271aee8e017;
amended to include `Well, hello friends ` in
expected/css/calc-coverage.txt because we don't have
LadybirdBrowser/ladybird#1603 yet)
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 ``.
(cherry picked from commit 7c2680b7efd2588cf2c5e595f7a60813dabf3b92)
These are legacy name aliases for the properties without the 'grid-'
prefix. See https://drafts.csswg.org/css-align-3/#gap-legacy
(cherry picked from commit c79f261bec40a61373d45508c1935f839454c95d)
Adapt the existing `font-face-src-local-serialization.html` test into a
more general test for these.
(cherry picked from commit c497e5f850a5c7f43d6f216d9fd74a58ddefd9a0)
(cherry picked from commit 55812aaed20ce8f7aeea233a47bcab73b60edd5e;
amended to include AK/QuickSort.h in Parser.cpp to fix a compile
error, and to update height: in getComputedStyle-print-all.txt)
CSS Fonts level 4 renames font-stretch to font-width, with font-stretch
being left as a legacy alias. Unfortunately the other specs have not yet
been updated, so both terms are used in different places.
(cherry picked from commit 4a67b28600437901e6d8a366c56a5ddd8665deb1)
When a property is a "legacy name alias", any time it is used in CSS or
via the CSSOM its aliased name is used instead.
(See https://drafts.csswg.org/css-cascade-5/#legacy-name-alias)
This means we only care about the alias when parsing a string as a
PropertyID - and we can just return the PropertyID it is an alias for.
No need for a distinct PropertyID for it, and no need for LibWeb to
care about it at all.
Previously, we had a bunch of these properties, which misused our code
for "logical aliases", some of which I've discovered were not even
fully implemented. But with this change, all that code can go away, and
making a legacy alias is just a case of putting it in the JSON. This
also shrinks `StyleProperties` as it doesn't need to contain data for
these aliases, and removes a whole load of `-webkit-*` spam from the
style inspector.
(cherry picked from commit fdcece2e88b91b9ec6cf63c3466525fb77540316;
amended to:
* resolve a conflict on height: in getComputedStyle-print-all.txt
* run prettier on CSSGeneratedFiles.md)
Instead of switching on the PropertyID and doing a boatload of
comparisons, we reorder the PropertyID enum so that all inherited
properties are in two contiguous ranges (one for shorthands,
one for longhands).
This replaces the switch statement with two simple range checks.
Note that the property order change is observable via
window.getComputedStyle(), but the order of those properties is
implementation defined anyway.
Removes a 1.5% item from the profile when loading https://hemnet.se/
(cherry picked from commit 1f5c49f40d0383ef1f91d6e4d838230f04dfb738;
amended for stroke-linecap in getComputedStyle-print-all.txt)
SVGGraphicsElement then goes ahead and does nothing with it for now.
(cherry picked from commit cc0cfd044b3a04c021f8810f7e96d98a05f7146a;
amended to fix minor conflict in getComputedStyle-print-all.txt)
The "text-overflow" property affects text that may get clipped if it is
larger than its container and does not do any line breaks.
The ellipsis character gets added to the end and the rest of the text
gets trunctated if the property is set to "ellipsis".
This patch implements this behavior in the InlineFormattingContext. :^)
The "text-overflow" property is also added to the
getComputedStyle-print-all test.
(cherry picked from commit da7f0897d1eace887d75d966ffed6adde0e65196,
amended to make `available_width` a float to fix -Wdouble-promotion
from gcc. Everything `available_width` touches is float too.)
The `start` and `end` value set the text alignment based on the computed
value of `direction`. The default value of `text-align` is now `start`
instead of `left`.
(cherry picked from commit 1537d589ca4908c3631dc38e66c97fd37fa2f526)
Right now, we deviate from the CSSOM spec regarding our
CSSStyleDeclaration classes, so this is not as close to the spec as I'd
like. But it works, which means we'll be able to test pseudo-element
styling a lot more easily. :^)
(cherry picked from commit 14611de362d1d41429688dc02ffaf037a32e2e5d)
Pseudo-elements' style is only computed while building the layout tree.
This meant that previously, they would not have their style recomputed
in some cases. (Such as when :hover is applied to an ancestor.)
Now, when recomputing an element's style, we also return a full
invalidation if one or more pseudo-elements would exist either before or
after style recomputation.
This heuristic produces some false positives, but no false negatives.
Because pseudo-elements' style is computed during layout building, any
computation done here is then thrown away. So this approach minimises
the amount of wasted style computation. Plus it's simple, until we have
data on what approach would be faster.
This fixes the Acid2 nose becoming blue when the .nose div is hovered.
(cherry picked from commit 7daf5cdaff0fa1bba211ad40eadca5a0a52437ad)
Not every value in a StyleProperties will be non-null by the time we
perform `revert`, so let's make a specialized function for reverting a
property instead of using the path that requires the value to be
non-null.
(cherry picked from commit a10610a1cad56294089fc9457e713eb7083312cd)
These have a few rules that we didn't follow in most cases:
- CSS-wide keywords are not allowed. (inherit, initial, etc)
- `default` is not allowed.
- The above and any other disallowed identifiers must be tested
case-insensitively.
This introduces a `parse_custom_ident_value()` method, which takes a
list of disallowed identifier names, and handles the above rules.
(cherry picked from commit 6ae2b8c3d901d8a7255046a4517fddd8b0fa84c4)
These control the state of CSS counters.
Parsing code for `reversed(counter-name)` is implemented, but disabled
for now until we are able to resolve values for those.
(cherry picked from commit 017d6c3314d57d4e351764f328c1d25dbc9d033a)
