Commit graph

203 commits

Author SHA1 Message Date
Karol Kosek
0f7156ed81 LibWeb: Parse CSS text-decoration-thickness property 2022-03-06 22:04:41 +01:00
Karol Kosek
ed70a67a49 LibWeb: Set default fantasy font to Comic Book
> Fantasy fonts are primarily decorative or expressive fonts that
> contain decorative or expressive representations of characters.
https://drafts.csswg.org/css-fonts/#valdef-font-family-fantasy

Seems like this font fits this description. :)
2022-03-05 21:25:14 +01:00
Karol Kosek
d7c27ad11a LibWeb: Set default serif font to Roman
It's the only Serif font we have, so let's use it!
2022-03-05 21:25:14 +01:00
Andreas Kling
205208db11 LibWeb: Reduce HashMap thrashing during custom property cascade
Build the final custom property map right away instead of first making
a temporary pointer-only map. We also precompute the final needed
capacity for the map to avoid incremental rehashing.
2022-03-03 13:56:37 +01:00
Andreas Kling
e4fdb40158 LibWeb: Use FlyString for CSS custom property names 2022-03-03 13:56:37 +01:00
Andreas Kling
c8f6a20c02 LibWeb: Remove unused variable in required_box_type_transformation() 2022-02-28 15:14:32 +01:00
Andreas Kling
ee50a4e060 LibWeb: Don't blockify or inlinify boxes with already-correct type
If something is already a block on the outside, we don't want to
overwrite its inside display type.
2022-02-28 14:17:44 +01:00
Andreas Kling
c9ab9e2c64 LibWeb: Blockify children of parents with display:grid or display:flex 2022-02-28 14:17:44 +01:00
Andreas Kling
20caea2f86 LibWeb: Split CSS box type transformations into a helper function
Let's have one function that determines the type of transformation
needed, and another to actually perform the transformation.

This makes it much easier to read, and we don't have to duplicate the
logic for doing the transformation.
2022-02-28 14:17:44 +01:00
Andreas Kling
c59ab7cc8b LibWeb: Make StyleValue absolutization non-destructive
Instead of awkwardly visiting and mutating lengths inside StyleValues,
we now simply create a new StyleValue instead.

This fixes an issue where inherited relative lengths could get
absolutized using a parent as reference, and then not having the correct
values when used in a child context.
2022-02-26 01:35:25 +01:00
Andreas Kling
a5c2ab69ec LibWeb: Look for nearest available size when using bitmap fonts
Use the new Gfx::Font::AllowInexactSizeMatch parameter when doing CSS
font lookups. This fixes a long-standing issue where text with e.g text
with "font-size:12px" would be larger than "font-size:13px" since there
was an exact match for 12, but none for 13 (so we'd fall back to 10).
2022-02-25 19:38:31 +01:00
Sam Atkins
f3cda3c830 LibWeb: Add a rule-cache for PseudoElements
This works a little differently from the other caches - ALL rules
containing a pseudo-element are in this bucket. This lets us only look
at this bucket when finding styles for a pseudo-element, and ignore it
if we're not.
2022-02-25 19:35:34 +01:00
Sam Atkins
7eb7396f8b LibWeb: Match styles for pseudo-elements
Since each selector can only have zero or one pseudo-element, we match
against it as a separate step, before matching the rest of the
selector. This should be faster, but mostly I did this because I could
not figure out how else to stop selectors without a pseudo-element from
matching the pseudo-element, eg so `.foo` styles don't affect
`.foo::before`.
2022-02-25 19:35:34 +01:00
Andreas Kling
c61747fb2a LibWeb: Respect font-size specified by CSS in "em" length calculations
"5em" means 5*font-size, but by forcing "em" to mean the presentation
size of the bitmap font actually used, we broke a bunch of layouts that
depended on a correct interpretation of "em".

This means that "em" units will no longer be relative to the exact
size of the bitmap font in use, but I think that's a compromise we'll
have to make, since accurate layouts are more important.

This yields a visual progression on both ACID2 and ACID3. :^)
2022-02-21 18:35:12 +01:00
Andreas Kling
9c05639d35 LibWeb: Assign correct viewport dimensions when making style for ICB
The ICB (initial containing block) gets its style from StyleComputer's
create_document_style(). It's basically a generic style for the root of
the layout tree.

With this patch, we now assign the width and height of the viewport rect
as two CSS "px" lengths to the "width" and "height" properties of the
ICB style. (Previously they were just defaulting to "auto" and we
assigned override dimensions during layout.)

This fixes an issue where position:absolute elements with relative width
and/or height were not dimensioned correctly, since the values were
relative to the width and/or height of the ICB style.
2022-02-21 18:35:12 +01:00
Karol Kosek
4e50f8a8b7 LibWeb+Base: Parse font-style CSS property 2022-02-20 11:50:38 +01:00
Andreas Kling
141b01d3e3 LibWeb: Turn StyleProperties::m_property_values into an Array
After style computation, every StyleProperties has a value for every
PropertyID. Given this, it's simpler, faster and less memory-heavy to
use an Array instead of a HashMap. :^)
2022-02-19 14:45:59 +01:00
Sam Atkins
a99d02e14d LibWeb: Add an enum for !important 2022-02-12 16:13:27 +00:00
Andreas Kling
5ff816abbf LibWeb: Remove unused CascadeOrigin::Any
This was an ad-hoc concept from before we implemented the CSS cascade.
2022-02-11 12:45:38 +01:00
Andreas Kling
b68c51379e LibWeb: Add "tag name" buckets to StyleComputer::RuleCache
We can skip rules that require a specific tag name when matching against
any element with a different tag name. :^)
2022-02-10 20:52:11 +01:00
Andreas Kling
031296cf7b LibWeb: Add "ID" buckets to StyleComputer::RuleCache
We can skip rules that require a specific ID when matching against any
element that doesn't have that ID.
2022-02-10 20:52:11 +01:00
Andreas Kling
646b37d1a9 LibWeb: Cache CSS rules in buckets to reduce number of rules checked
This patch introduces the StyleComputer::RuleCache, which divides all of
our (author) CSS rules into buckets.

Currently, there are two buckets:
- Rules where a specific class must be present.
- All other rules.

This allows us to check a significantly smaller set of rules for each
element, since we can skip over any rule that requires a class attribute
not present on the element.

This takes the typical numer of rules tested per element on Discord from
~16000 to ~550. :^)

We can definitely improve the cache invalidation. It currently happens
too often due to media queries. And we also need to make sure we
invalidate when mutating style through CSSOM APIs.
2022-02-10 20:52:11 +01:00
Andreas Kling
8d104b7de2 LibWeb: Perform CSS custom property cascade once instead of per-property
Previously we would re-run the entire CSS selector machinery for each
property resolved. Instead of doing that, we now resolve a final set of
custom property key/value pairs at the start of the cascade.
2022-02-10 20:52:11 +01:00
Andreas Kling
b248661f11 LibWeb: Fix a bunch of trivial clang-tidy warnings in StyleComputer
- Replace "auto" with "auto const" where appropriate.
- Remove an unused struct.
- Make sort_matching_rules() a file-local static function.
- Remove some unnecessary includes.
2022-02-10 20:51:44 +01:00
Andreas Kling
31695e1695 LibWeb: Rename a CascadeOrigin parameter in StyleComputer 2022-02-10 20:51:44 +01:00
Sam Atkins
8bd1854406 LibWeb+Base: Enable calc() for font-weight property :^)
Modified the test-page because FontDatabase looks for exact font-weight
matches, so requesting weight 800 in a font that only has 700, causes
it to return the default font instead. So, we ask for 700 here.

The actual fix is to improve our font-matching but I am trying not to
get distracted today. :^)
2022-02-04 13:52:02 +01:00
Sam Atkins
ce0a516e59 LibWeb: Replace Length::set_calculated_style() with ::make_calculated()
There's no need to modify the Length's calculated-value after creating
it, so let's make it immutable. :^)
2022-02-04 13:52:02 +01:00
thankyouverycool
96895cd22c Everywhere: Fully qualify font names by including their slope
Fixes typefaces of the same weight but different slopes being
incorrectly returned for each other by FontDatabase.
2022-02-01 10:06:26 +01:00
Andreas Kling
12932d187e LibWeb: Teach StyleComputer about "Automatic Box Type Transformation"
CSS has rules about automatic blockification or inlinification of boxes
in certain circumstances.

This patch implements automatic blockification of absolutely positioned
and floating elements. This makes the smile appear on ACID2. :^)
2022-01-24 14:44:46 +01:00
Sam Atkins
0162ca912b LibWeb: Handle percentage font sizes 2022-01-20 00:04:10 +01:00
Sam Atkins
c9062b4ed5 LibWeb: Remove now-unused CustomStyleValue 2021-12-09 21:30:31 +01:00
Sam Atkins
c3437bccb3 LibWeb: Handle dependency cycles in CSS var()s :^)
We now detect situations like this, where variables infinitely recur,
without crashing:

```css
div {
  --a: var(--b);
  --b: var(--a);
  background: var(--a);
}

p {
  --foo: var(--foo);
  background: var(--foo);
}
```
2021-12-09 21:30:31 +01:00
Sam Atkins
3df0bf2c8d LibWeb: Mitigate the billion-laughs attack on CSS variables
We now stop processing variables once a length of 16384 tokens is
reached. This is an arbitrary number, but should be far beyond what
anyone will reasonably use, and small enough to not crash.
2021-12-09 21:30:31 +01:00
Sam Atkins
67e1125b4c LibWeb: Handle fallback values for CSS variables :^) 2021-12-09 21:30:31 +01:00
Sam Atkins
23dc0dac88 LibWeb: Parse and resolve UnresolvedStyleValues
If a property is custom or contains a `var()` reference, it cannot be
parsed into a proper StyleValue immediately, so we store it as an
UnresolvedStyleValue until the property is compute. Then, at compute
time, we resolve them by expanding out any `var()` references, and
parsing the result.

The implementation here is very naive, and involves copying the
UnresolvedStyleValue's tree of StyleComponentValueRules while copying
the contents of any `var()`s it finds along the way. This is quite an
expensive operation to do every time that the style is computed.
2021-12-09 21:30:31 +01:00
Andreas Kling
7c57961c61 LibWeb: Move BrowsingContext into HTML/
Browsing contexts are defined by the HTML specification, so let's move
them into the HTML directory. :^)
2021-11-18 21:11:30 +01:00
Sam Atkins
ecf1b7f977 LibWeb: Handle multiple backgrounds in StyleComputer
This actually involves doing *less*, because we now just pass the
StyleValueLists through instead of needing to grab their first layer's
value. :^)
2021-11-17 22:20:01 +01:00
Sam Atkins
e52f987020 LibWeb: Make property_initial_value() return a NonnullRefPtr
The finale! Users can now be sure that the value is valid, which makes
things simpler.
2021-11-10 21:58:14 +01:00
Sam Atkins
96936d04d6 LibWeb: Parse background-size as part of background shorthand 2021-11-10 14:38:49 +01:00
Sam Atkins
67214e0b61 LibWeb: Parse background-size property 2021-11-10 14:38:49 +01:00
Sam Atkins
901a990b1b LibWeb: Remove concept of CSS pseudo-properties
We don't need them any more, so they're gone. :^)
2021-11-10 14:38:49 +01:00
Sam Atkins
1e53768f1b LibWeb: Combine background-repeat-x/y pseudo-properties
While right now this doesn't save much complexity, it will do once we
care about multiple background layers per node. Then, having a single
repeat value per layer will simplify things.

It also means we can remove the pseudo-property concept entirely! :^)
2021-11-10 14:38:49 +01:00
Sam Atkins
5d0acb63ae LibWeb: Use BackgroundRepeatStyleValue in background shorthand
This is step 1 in removing the two `background-repeat-x/y`
pseudo-properties. Since adding the concept of compound StyleValues, we
don't need `background-repeat` to be split in two any more.
2021-11-10 14:38:49 +01:00
Sam Atkins
532f1e859d LibWeb: Parse background-clip and background-origin
Including as part of the `background` shorthand. :^)
2021-11-10 14:38:49 +01:00
Sam Atkins
018a4aa85c LibWeb: Parse background-attachment as part of background property 2021-11-10 14:38:49 +01:00
Sam Atkins
116a5fe5d0 LibWeb: Add background-position to background property
This required modifying the background-parsing code to use a
TokenStream, but that turned out to be pretty simple.
2021-11-10 14:38:49 +01:00
Sam Atkins
988a8ed3d8 LibWeb: Parse CSS background-position property
This is done a bit differently from other properties: using a
TokenStream instead of just a Vector of ComponentValues. The reason for
this is, we can then use call the same function when parsing the
`background` shorthand. Otherwise, we would have to know in advance how
many values to pass down, which basically would involve duplicating the
`background-position` parsing code inside `background`.

The StyleValue is PositionStyleValue, since it represents a
`<position>`: https://www.w3.org/TR/css-values-4/#typedef-position
Unfortunately, background-position's parsing is a bit different from
`<position>`'s, (background-position allows 3-value syntax and
`<position>` doesn't) so we'll need to come back and write a different
parsing function for that later.
2021-11-10 14:38:49 +01:00
Sam Atkins
78e57096e2 LibWeb: Distinguish between integer and float in NumericStyleValue
We have this information when parsing, and some properties specifically
only allow integers, so it makes sense to keep that around.
2021-10-19 19:12:09 +02:00
Sam Atkins
2d0c6bde01 LibWeb: Use W3C urls for CSS-CASCADE spec links 2021-10-15 21:05:35 +01:00
Andreas Kling
3b0da8b28c LibWeb: Add a missing null check in StyleComputer::compute_font() 2021-10-09 16:35:25 +02:00