LibWeb+LibGfx: A first pass at supporting (linear) gradients! #14564
Conversation
MacDue
force-pushed
the
linear_gradients_book_1
branch
3 times, most recently
from
8e29939
to
e228be5
Compare
This moves the logic from ColorStyleValue::to_string() to a standalone function.
MacDue
force-pushed
the
linear_gradients_book_1
branch
from
e228be5
to
c039451
Compare
|
Rebased for the StringView changes from #14555 |
There was a problem hiding this comment.
I have a few changes, but this is good stuff. :^)
One issue I'm not sure about, which doesn't have to be fixed here, is how to deal with gradients being allowed anywhere an image is. As written, you'd have to manually enable gradients for each property with specific painting code for them, which feels awkward. Maybe ImageStyleValue and LinearGradientStyleValue can both implement some interface for getting their inherent dimensions and painting them into a rectangle.
Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSPropertyID.cpp
Outdated
Show resolved
Hide resolved
MacDue
force-pushed
the
linear_gradients_book_1
branch
from
c039451
to
c594046
Compare
|
Done the easy changes and added some |
|
It seems we must also support the |
This should parse linear-gradient()s as defined in the W3 spec https://drafts.csswg.org/css-images/#linear-gradients. Note: This currently cannot parse multi-position color stops, these are shown on MDN and work in Firefox and Chrome, though do not seem to be defined in the spec. See: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#gradient_with_multi-position_color_stops P.s. This also allows -webkit-linear-gradient for compatibility.
This is just a quick test that everything is working. Currently it paints the gradients with the existing painter.fill_rect_with_gradient(). This can only handle two-color orthogonal gradients.
Previously the color blending and alpha blending were working from opposite sides.
MacDue
force-pushed
the
linear_gradients_book_1
branch
from
c594046
to
cebfa76
Compare
|
The parser should recognise the |
|
LGTM! (Look, Gradients; Their Majesty!) |
Was bored, needed a new yak... Ran out of
border-radiusstuff 馃槩This PR implements parsing for
linear-gradient(), along with the the necessary plumbing, and some very basic painting.The parsing is should work for everything defined in the W3 spec https://drafts.csswg.org/css-images/#linear-gradients, though there seems to be some issues there as multi-position stop points are not defined (though are demonstrated on MDN).
Though we can't paint all but the simplest of gradients yet, so this is not a huge issue yet.
P.S. The CSS parsing and style value side of LibWeb is slightly unfamiliar territory for me, so might not be optimal :^).