From https://drafts.csswg.org/css-backgrounds-4/#background-clip
"The background is painted within (clipped to) the intersection of the
border box and the geometry of the text in the element and its in-flow
and floated descendants"
This change implements it in the following way:
1. Traverse the descendants of the element, collecting the Gfx::Path of
glyphs into a vector.
2. The vector of collected paths is saved in the background painting
command.
3. The painting commands executor uses the list of glyphs to paint a
mask for background clipping.
Co-authored-by: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
This modification introduces a new layer to the painting process. The
stacking context traversal no longer immediately calls the
Gfx::Painter methods. Instead, it writes serialized painting commands
into newly introduced RecordingPainter. Created list of commands is
executed later to produce resulting bitmap.
Producing painting command list will make it easier to add new
optimizations:
- It's simpler to check if the painting result is not visible in the
viewport at the command level rather than during stacking context
traversal.
- Run painting in a separate thread. The painting thread can process
serialized painting commands, while the main thread can work on the
next paintable tree and safely invalidate the previous one.
- As we consider GPU-accelerated painting support, it would be easier
to back each painting command rather than constructing an alternative
for the entire Gfx::Painter API.
This is intended to annotate conversions from unknown floating-point
values to CSSPixels, and make it more obvious the fp value will be
rounded to the nearest fixed-point value.
In general it is not safe to convert any arbitrary floating-point value
to CSSPixels. CSSPixels has a resolution of 0.015625, which for small
values (e.g. scale factors between 0 and 1), can produce bad results
if converted to CSSPixels then scaled back up. In the worst case values
can underflow to zero and produce incorrect results.
We now keep the color value as a StyleValue up until we go to paint the
gradient, which makes `currentColor` work, along with any other color
values that can't be immediately converted into a `Gfx::Color` while
parsing.
Although DistinctNumeric, which is supposed to abstract the underlying
type, was used to represent CSSPixels, we have a whole bunch of places
in the layout code that assume CSSPixels::value() returns a
floating-point type. This assumption makes it difficult to replace the
underlying type in CSSPixels with a non-floating type.
To make it easier to transition CSSPixels to fixed-point math, one step
we can take is to prevent access to the underlying type using value()
and instead use explicit conversions with the to_float(), to_double(),
and to_int() methods.
This fixes a plethora of rounding problems on many websites.
In the future, we may want to replace this with fixed-point arithmetic
(bug #18566) for performance (and consistency with other engines),
but in the meantime this makes the web look a bit better. :^)
There's a lot more things that could be converted to doubles, which
would reduce the amount of casting necessary in this patch.
We can do that incrementally, however.
This solves an awkward dependency cycle, where CalculatedStyleValue
needs the definition of Percentage, but including that would also pull
in PercentageOr, which in turn needs CalculatedStyleValue.
Many places that previously included StyleValue.h no longer need to. :^)
This moves the CSS gradient painting to the painter creating:
- Painter::fill_rect_with_linear_gradient()
- Painter::fill_rect_with_conic_gradient()
- Painter::fill_rect_with_radial_gradient()
This has a few benefits:
- The gradients can now easily respect the painter scale
- The Painter::fill_pixels() escape hatch can be removed
- We can remove the old fixed color stop gradient code
- The old functions are now just a shim
- Anywhere can now easily use this gradient painting code!
This only leaves the color stop resolution in LibWeb (which is fine).
Just means in LibGfx you have to actually specify color stop positions.
(Also while here add a small optimization to avoid generating
excessively long gradient lines)
Previously gradient painting was dominated by the clipping checks in
Painter::set_pixel(). This commit changes gradient painting to use the
new Painter::fill_pixels() function (which does all these checks outside
the hot loop).
With this change gradient painting drops from 96% of the profile to 51%
when scrolling around on gradients.html. A nice 45% reduction :^)
This was wrong twice making it right... But let's fix that.
The center was being passed as a DevicePixelPoint, but was in fact in
CSS pixels, the size was passed as a Gfx::FloatSize but was in
CSS pixels again. Then we were scaling from device pixels to CSS pixels
when painting which does not need to be done if everything is passed
which the correct scale factors already applied.
This makes the center position the center of the pixel rather than
the top left corner (which fixes some small artifacts on a few
gradients).
This also now floors the angle used to sample from the gradient line,
this avoids the colors diverging the further away from the center you
get (which is noticeable on hard-edge gradients).
This commit tweaks gradients so resolve_color_stop_positions() no
longer cares about the actual length of the gradient. All stops
are resolved to relative positions along the gradient line
(between 0 and 1), and are only scaled back to pixels (if required)
during the actual painting.
This has no immediate benefit right now, but it might make using
CSS pixels for gradients easier :^)
This also includes some mild refactoring.
This fixes some off-by-one wrapping issues that became visible when
running on x86_64. The problem still existed on i686, but by chance
did not show up due to a -/+ 0.000001 difference between the two.
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.
These allow you to specify the point were the gradient transitions
from one color to the next (without a transition hint the transition
occurs at the point 50% of the way between the two colors).
There is a little bit of guesswork in this implementation as the
specification left out how hints work with the color stop fixup,
though it appears that they are treated the same as color stops.
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.
This implements support for painting linear-gradients in a spec
correct way :^).
Right now it supports:
- Multi-stop gradients
- Color stop fixups
- Using pre-multiplied alpha mixing when required
- Painting gradients at arbitrary angles
It still needs to support:
- Transition hints
- Double position color stops
However what is implemented now seems to be accurate to other
browsers, and covers the most common use cases.
