This class represents a <position> and handles resolving it to a
Gfx::FloatPoint relative to some rectangle.
It can handle all forms of <position>:
- Two presets:
left center
- A preset + a length percentage:
10% bottom
- Or relative to some edges:
right 20% bottom 30px
This commit adds a simple style value (which is an abstract image)
to represent conic-gradient()s.
This commit also starts to factor out some reusable parts of the
linear-gradient() style value for other gradient types.
Refactor various classes in the GridTrackSize file for the incoming
named_tracks feature.
Previously the ExplicitTrackSizing had mixed responsiblities with the
newly-named GridRepeat class. This made it so it was not possible to
have multiple repeats within a single 'GridTrackSizeList' definition.
The MetaGridTrackSize class had both the responsibilities of being a
container for minmax values as well as for simple GridSizes. By uniting
the different possible values (repeat, minmax, default) into the
ExplicitGridTrack class are able to be more expressive as to the
different grid size modalities.
The GridTrackSizeList will be useful as compared to a
Vector<ExplicitGridTrack> since this way can keep track of the declared
line names. These same line names are able to be declared within the
values of a repeat function, hence the presence of a GridTrackSizeList
inside the GridRepeat class.
Add classes ExplicitTrackSizing and MetaGridTrackSize which will allow
for managing properties like auto-fill and minmax.
In the following CSS example there are 3 classes that will be used:
grid-template-column: repeat(auto-fill, minmax(50px, 1fr) 75px);
ExplicitTrackSizing - will contain the entire value. e.g.
repeat(auto-fill, minmax(50px, 1fr) 75px)
With a flag if it's a repeat, as well as references to the
MetaGridTrackSizes which is the next step down.
MetaGridTrackSize:
Contain the individual grid track sizes. Here there are two:
minmax(50px, 1fr) as well as 75px.
This way can keep track if it's a minmax function or not, and the
references to both GridTrackSizes in the case it is, or in just the one
if it is not.
GridTrackSize:
Is the most basic element, in this case there are three in total; two of
which are held by the first MetaGridTrackSize, and the third is held by
the second MetaGridTrackSize.
Examples: 50px, 1fr and 75px.
This fixes something I thought I had already fixed everywhere, where
previously there wasn't the possibility to have an Auto
GridTrackPlacement and so the Auto "implementation" was simply checking
if the position of the track was 0.
This style value holds a list of CSS filter function calls e.g.
blur(10px) invert() grayscale()
It will be used to implement backdrop-filter, but the same style value
can be used for the image filter property.
(The name is a little awkward but it's referenced to as
filter-value-list in the spec too).
Values that contain percentages require special treatment in various
parts of layout. Previously we had no way of peeking into calc() values
to see if their expression contains one or more percentages. That's the
bulk of what we're adding here.
The only accepted syntax for these seems to be
<color> <length percentage> <length percentage>, no other order.
But that's just gathered from looking at other browsers as though
these are supported by all major browsers, they don't appear in
the W3C spec.
This commit moves both the ImageStyleValue and LinearGradientStyleValue
to a common base class of AbstractImageStyleValue. This abstracts
getting the natural_width/height, loading/resolving, and painting
the image.
Now for 'free' you get:
- Linear gradients working with the various background sizing/repeat
properties.
- Linear gradients working as list-markers :^) -- best feature ever!
P.s. This commit is a little large as it's tricky to make this change
incrementally without breaking things.
Previously the clip rect was not relative to the top/left egdes
of the element, which lead to it being positioned incorrectly.
This fixes the clip-rect-auto-004 and clip-rect-auto-005 web
platform tests.
The -webkit version of linear-gradient does not include the `to`
before a <side or corner>. The angles of the <side or corner>
for the webkit version are also opposite that of the standard one.
So for the standard: linear-gradient(to left, red, blue)
The webkit version is: -webkit-linear-gradient(right, red, blue)
Adding the `to` in the -webkit version is invalid, omitting it in
the standard one is also invalid.
Fixes#14697
Percentages inside `calc()` only got converted to the concrete type
(eg, Length) when added or subtracted with one. So if the `calc
()` doesn't contain any of that type, it would resolve to a
Percentage.
Now, we catch that returned Percentage and convert it to the proper
type. This fixes cases like `width: calc(100% / 2);`.
When a `calc()` is resolved, it can only return a Percentage value if
the requested type is Percentage. In all other cases, it returns a
concrete value.
eg, a `calc()` with Lengths and Percentages in will always resolve to a
Length, never a Percentage. This means we can just return Length
directly instead of LengthPercentage, which simplifies things in a few
places.
Each of these strings would previously rely on StringView's char const*
constructor overload, which would call __builtin_strlen on the string.
Since we now have operator ""sv, we can replace these with much simpler
versions. This opens the door to being able to remove
StringView(char const*).
No functional changes.
Previously, set_needs_display() was passed an empty rectangle in
ImageStyleValue::resource_did_load(). This led to the browser not
doing a repaint when the image loaded.
Fixes#14435
When swapping both values to perform the actual calculation, we need to
consider that `A + B == B + A`, but `A - B != B - A`, so turn it into
`-B + A`.
Co-Authored-By: Sam Atkins <atkinssj@serenityos.org>
Every StyleValue type now has its own `equals()` method, rather than
relying on the default "compare the to_string() output" method, which
has now been removed. This logic is still used by UnresolvedSV and
CalculatedSV, because it's probably the best option for them unless
performance becomes a real issue.
Also took this opportunity to move all the `equals()` implementations
into the .cpp file, which may or may not actually help with compile
times but StyleValue.h is huge and included everywhere, so it can't
hurt.
The `text-shadow` property is almost identical to `box-shadow`:
> Values are interpreted as for box-shadow [CSS-BACKGROUNDS-3].
> (But note that the inset keyword are not allowed.)
So, let's use the same data structures and parsing code for both. :^)
If the current Document is not attached to a Web::Page for whatever
reason, but we're trying to look up a color from the system palette,
let's just fail the lookup instead of crashing the process.
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.
