serenity icon indicating copy to clipboard operation
serenity copied to clipboard

LibWeb: Abstractify image style values and their painting

Open MacDue opened this issue 3 years ago • 0 comments

This is my attempt at implementing @AtkinsSJ suggestion from #14564

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.

With this change we get linear-gradients working with the various background sizing/positioning properties and even working as list-maker images for mostly free :^). [It's not quite free since there's a few little rough edges]

Here's a demo of some cool stuff that now works:

This css-tricks progress bar demo (this is all CSS, background-size + linear-gradient + background-repeat, no hardcoded images): image

linear-gradient list markers :partying_face: image

linear-gradient + background-size image

MacDue avatar Jul 31 '22 00:07 MacDue