Commit graph

184 commits

Author SHA1 Message Date
Andreas Kling
04311ca7f1 LibWeb: Flush pending layouts when accessing element resolved style
We were handing out stale values from window.getComputedStyle() objects
after the first layout.

Fix this by always updating layout on property access. This is not
necessary for all properties, but for now let's go with the simplest
approach to make it work correctly.
2022-03-09 18:14:24 +01:00
Andreas Kling
6d1a9672a4 LibWeb: Support more CSS image-rendering values
This patch adds support for "crisp-edges", "high-quality" and "smooth"
for the CSS image-rendering property.

"crisp-edges" maps to nearest-neighbor scaling for <canvas> and <img>
elements, while "high-quality" and "smooth" both use bilinear blending.
2022-03-07 00:08:22 +01:00
Andreas Kling
1cdbd377e7 LibWeb: Add vertical-align to ComputedValues 2022-02-26 01:35:06 +01:00
Maciej
3e1c1c0b16 LibWeb: Add support for CSS image-rendering property
Currently only "auto" and "pixelated" values are supported.
2022-02-19 11:38:46 +01:00
Sam Atkins
5b2482a939 LibWeb: Use Optional instead of undefined-lengths for widths/heights 2022-02-18 19:04:37 +01:00
Sam Atkins
103613a3a9 LibWeb: Incorporate spread-distance into box-shadow rendering
We also pass whether the shadow goes inside or outside the element. Only
outer shadows are rendered currently, and inner ones may want to be
handled separately from them, as they will never interfere with each
other.
2022-02-08 17:45:51 +01:00
Sam Atkins
10c6c77b5c LibWeb: Render multiple box-shadows
Because why not? :^)
2022-02-08 17:45:51 +01:00
Sam Atkins
e5b0369dfd LibWeb: Parse spread-distance and inset parts of box-shadow
We do not actually use these when rendering the shadow yet.
2022-02-08 17:45:51 +01:00
Andreas Kling
5dd4b3eaaa LibWeb: Put ResolvedCSSStyleDeclaration debug spam behind a macro
Blowing up the debug console with a fajillion FIXME's whenever you
navigate in the web inspector is no fun.
2022-02-06 16:22:58 +01:00
Sam Atkins
5826fe094f LibWeb: Allow comma- or space-separated StyleValueLists
This lets us produce valid CSS in its to_string() method, instead of
always adding commas as before. :^)

Also, finally added a Formatter for StyleValues.
2022-02-03 00:45:49 +01:00
Tobias Christiansen
69aac6ecd7 LibWeb: Add new property 'text-decoration-style'
This patch makes the property 'text-decoration-style' known throughout
all the places in LibWeb that care.
2022-01-23 15:48:27 +03:30
Sam Atkins
dc681913e8 LibWeb: Convert width/height and min-/max- versions to LengthPercentage
A lot of this is quite ugly, but it should only be so until I remove
Length::Type::Percentage entirely. (Which should happen later in this
PR, otherwise, yell at me!) For now, a lot of things have to be
resolved twice, first from a LengthPercentage to a Length, and then
from a Length to a pixel one.
2022-01-20 00:04:10 +01:00
Sam Atkins
cb0cce5cdc LibWeb: Convert flex-basis to LengthPercentage
The flexbox logic confuses me so regressions are possible, though our
test page looks the same as before so it should be fine.

Renamed FlexBasis::Length -> LengthPercentage too, for clarity.
2022-01-20 00:04:10 +01:00
Sam Atkins
a214036509 LibWeb: Remove background-repeat/image fields and getters
These aren't needed now that we render using background_layers instead.
The one casualty is the resolved style for background-repeat, but that
was incorrect anyway.
2021-11-17 22:20:01 +01:00
Sam Atkins
96936d04d6 LibWeb: Parse background-size as part of background shorthand 2021-11-10 14:38:49 +01:00
Sam Atkins
891dd46a17 LibWeb: Store Repeat values directly in BackgroundRepeatStyleValue
...as opposed to storing StyleValues, which we have to later check are
IdentifierStyleValues, which store identifiers that we can convert to
Repeat values later. It's fewer allocations, and we can't end up with
invalid values by mistake. :^)
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
Andreas Kling
ff45eb7fb1 LibWeb: Make computed opacity always available
No need to store opacity as Optional<float> as there's always a value
(and the default initial value is 1.)
2021-10-19 19:19:13 +02:00
Andreas Kling
07f15aa550 LibWeb: Make computed flex-grow and flex-shrink always available
These values are not allowed to be absent (auto/none/etc) so we don't
need to use Optional<float> for them. This simplifies some things.
2021-10-19 19:17:01 +02: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
e8d4236bbd LibWeb: Use W3C urls for CSSOM spec links
https://www.w3.org/TR/cssom/ is the more permanent home of the CSSOM
specification's latest version, and is up to date with the draft spec.

Also, https://drafts.csswg.org/ has been down multiple times recently
which made looking things up a pain.
2021-10-15 21:05:35 +01:00
Andreas Kling
ad50e328e0 LibWeb: Fix bogus 'none' values for resolved min-width and min-height
In CSS 'none' is not a valid value for min-width or min-height. The
fallback resolved value should be 'auto' for them.
2021-10-13 23:56:26 +02:00
Andreas Kling
85a0772147 LibWeb: Start work towards modern CSS "display" values
Until now, we've internally thought of the CSS "display" property as a
single-value property. In practice, "display" is a much more complex
property that comes in a number of configurations.

The most interesting one is the two-part format that describes the
outside and inside behavior of a box. Switching our own internal
representation towards this model will allow for much cleaner
abstractions around layout and the various formatting contexts.

Note that we don't *parse* two-part "display" yet, this is only about
changing the internal representation of the property.

Spec: https://drafts.csswg.org/css-display
2021-10-06 19:12:52 +02:00
Sam Atkins
341c67453c LibWeb: Add resolved style lookup for border properties
The only one I didn't implement is `border` itself, because there isn't
an obvious sensible value for it if the borders are different.
2021-10-05 18:49:47 +02:00
Sam Atkins
a521c02db2 LibWeb: Add resolved style lookup for margin/padding shorthands 2021-10-05 18:49:47 +02:00
Sam Atkins
fc7af21c7c LibWeb: Make things aware of box-sizing
Of course, we don't actually *use* the box-sizing property yet, but the
value is applied and shows up in the computed style.
2021-10-05 18:49:47 +02:00
Andreas Kling
a31855ae10 LibWeb: Improve resolved style for CSS {min,max}-{width,height}
If the specified value for these properties is "none", we end up storing
it as an "undefined" CSS::Length in the computed values.

We need to convert it back into "none" for getComputedStyle().
2021-10-04 22:54:50 +02:00
Andreas Kling
3db847c64a LibWeb: Implement CSSRule and CSSStyleDeclaration serialization
There are a handful of FIXME's here, but this seems generally good.
Note that CSS *values* don't get serialized in a spec-compliant way
since we currently rely on StyleValue::to_string() which is ad-hoc.
2021-10-01 20:17:15 +02:00
Andreas Kling
f8dd3e14ba LibWeb: Rename CSS::StyleResolver => StyleComputer
Resolved style is a spec concept that refers to the weird mix of
computed style and used style reflected by getComputedStyle().

The purpose of this class is to produce the *computed* style for a given
element, so let's call it StyleComputer.
2021-09-24 15:12:15 +02:00
Andreas Kling
3d36e4d944 LibWeb: Rename "Computed" CSSStyleDeclaration => "Resolved"
The original name was based on the window.getComputedStyle() API.
However, "Computed" in "getComputedStyle" is actually a misnomer that
the platform is stuck with due to backwards compatibility.

What getComputedStyle() returns is actually a mix of computed and used
values. The spec calls it the "resolved" values. So let's call this
declaration subclass "ResolvedCSSStyleDeclaration" to match.
2021-09-24 15:01:49 +02:00
Renamed from Userland/Libraries/LibWeb/CSS/ComputedCSSStyleDeclaration.cpp (Browse further)