RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 06:07:34 +00:00
Code Issues Activity Actions

LibWeb: Paint backgrounds with multiple layers :^)

Browse source
This commit is contained in:
Sam Atkins 2021-11-12 12:44:22 +00:00 • committed by Andreas Kling
parent cdeac132dc
commit e8b7946732
4 changed files with 20 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

26
Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp
View file

@ -11,15 +11,23 @@
namespace Web::Painting {
void paint_background(PaintContext& context, Gfx::IntRect const& background_rect, BackgroundData const& background_data, BorderRadiusData const& border_radius)
void paint_background(PaintContext& context, Gfx::IntRect const& background_rect, Color background_color, Vector<CSS::BackgroundLayerData> const* background_layers, BorderRadiusData const& border_radius)
{
// FIXME: Support elliptical corners
context.painter().fill_rect_with_rounded_corners(background_rect, background_data.color, border_radius.top_left, border_radius.top_right, border_radius.bottom_right, border_radius.bottom_left);
context.painter().fill_rect_with_rounded_corners(background_rect, background_color, border_radius.top_left, border_radius.top_right, border_radius.bottom_right, border_radius.bottom_left);
if (!background_layers)
return;
// Note: Background layers are ordered front-to-back, so we paint them in reverse
for (int layer_index = background_layers->size() - 1; layer_index >= 0; layer_index--) {
auto& layer = background_layers->at(layer_index);
if (!layer.image || !layer.image->bitmap())
continue;
auto& image = *layer.image->bitmap();
// FIXME: Support multiple background layers
if (background_data.image) {
auto image_rect = background_rect;
switch (background_data.repeat_x) {
switch (layer.repeat_x) {
case CSS::Repeat::Round:
case CSS::Repeat::Space:
// FIXME: Support 'round' and 'space'. Fall through to 'repeat' since that most closely resembles these.
@ -27,11 +35,11 @@ void paint_background(PaintContext& context, Gfx::IntRect const& background_rect
// The background rect is already sized to align with 'repeat'.
break;
case CSS::Repeat::NoRepeat:
image_rect.set_width(min(image_rect.width(), background_data.image->width()));
image_rect.set_width(min(image_rect.width(), image.width()));
break;
}
switch (background_data.repeat_y) {
switch (layer.repeat_y) {
case CSS::Repeat::Round:
case CSS::Repeat::Space:
// FIXME: Support 'round' and 'space'. Fall through to 'repeat' since that most closely resembles these.
@ -39,12 +47,12 @@ void paint_background(PaintContext& context, Gfx::IntRect const& background_rect
// The background rect is already sized to align with 'repeat'.
break;
case CSS::Repeat::NoRepeat:
image_rect.set_height(min(image_rect.height(), background_data.image->height()));
image_rect.set_height(min(image_rect.height(), image.height()));
break;
}
// FIXME: Handle rounded corners
context.painter().blit_tiled(image_rect, *background_data.image, background_data.image->rect());
context.painter().blit_tiled(image_rect, image, image.rect());
}
}