RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 20:17:44 +00:00
Code Issues Activity Actions

LibWeb: Implement background-clip :^)

Browse source 
We now pass in the Layout Node so that we can read the BoxModelMetrics.
Renamed a couple of variables too for clarity.
This commit is contained in:
Sam Atkins 2021-11-12 20:12:56 +00:00 • committed by Andreas Kling
parent aa43bee0d1
commit 6234e3fcb3
4 changed files with 51 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,15 +6,40 @@
*/
#include <LibGfx/Painter.h>
#include <LibWeb/Layout/Node.h>
#include <LibWeb/Painting/BackgroundPainting.h>
#include <LibWeb/Painting/PaintContext.h>
namespace Web::Painting {
void paint_background(PaintContext& context, Gfx::IntRect const& background_rect, Color background_color, Vector<CSS::BackgroundLayerData> const* background_layers, BorderRadiusData const& border_radius)
void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMetrics const& layout_node, Gfx::IntRect const& border_rect, Color background_color, Vector<CSS::BackgroundLayerData> const* background_layers, BorderRadiusData const& border_radius)
{
auto& painter = context.painter();
auto get_box = [&](CSS::BackgroundBox box) {
auto box_rect = border_rect;
switch (box) {
case CSS::BackgroundBox::ContentBox: {
auto& padding = layout_node.box_model().padding;
box_rect.shrink(padding.top, padding.right, padding.bottom, padding.left);
[[fallthrough]];
}
case CSS::BackgroundBox::PaddingBox: {
auto& border = layout_node.box_model().border;
box_rect.shrink(border.top, border.right, border.bottom, border.left);
[[fallthrough]];
}
case CSS::BackgroundBox::BorderBox:
default:
return box_rect;
}
};
auto color_rect = border_rect;
if (background_layers && !background_layers->is_empty())
color_rect = get_box(background_layers->last().clip);
// FIXME: Support elliptical corners
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);
painter.fill_rect_with_rounded_corners(color_rect, background_color, border_radius.top_left, border_radius.top_right, border_radius.bottom_right, border_radius.bottom_left);
if (!background_layers)
return;
@ -26,7 +51,22 @@ void paint_background(PaintContext& context, Gfx::IntRect const& background_rect
continue;
auto& image = *layer.image->bitmap();
auto image_rect = background_rect;
// Clip
auto clip_rect = get_box(layer.clip);
painter.save();
painter.add_clip_rect(clip_rect);
auto painting_rect = border_rect;
// FIXME: Attachment
// FIXME: Size
int scaled_width = image.width();
int scaled_height = image.height();
// FIXME: Origin
// FIXME: Position
// Repetition
switch (layer.repeat_x) {
case CSS::Repeat::Round:
case CSS::Repeat::Space:
@ -35,7 +75,7 @@ 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(), image.width()));
painting_rect.set_width(min(painting_rect.width(), scaled_width));
break;
}
@ -47,12 +87,13 @@ 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(), image.height()));
painting_rect.set_height(min(painting_rect.height(), scaled_height));
break;
}
// FIXME: Handle rounded corners
context.painter().blit_tiled(image_rect, image, image.rect());
painter.blit_tiled(painting_rect, image, image.rect());
painter.restore();
}
}