RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 07:57:46 +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

12
Userland/Libraries/LibWeb/Layout/Box.cpp
View file

@ -73,8 +73,6 @@ void Box::paint_background(PaintContext& context)
Gfx::IntRect background_rect;
Color background_color = computed_values().background_color();
auto* background_layers = &computed_values().background_layers();
const Gfx::Bitmap* background_image = this->background_image() ? this->background_image()->bitmap() : nullptr;
CSS::BackgroundRepeatData background_repeat = computed_values().background_repeat();
if (is_root_element()) {
// CSS 2.1 Appendix E.2: If the element is a root element, paint the background over the entire canvas.
@ -85,8 +83,6 @@ void Box::paint_background(PaintContext& context)
if (document().html_element()->should_use_body_background_properties()) {
background_layers = document().background_layers();
background_color = document().background_color(context.palette());
background_image = document().background_image();
background_repeat = { document().background_repeat_x(), document().background_repeat_y() };
}
} else {
background_rect = enclosing_int_rect(padded_rect());
@ -97,13 +93,7 @@ void Box::paint_background(PaintContext& context)
if (computed_values().border_top().width || computed_values().border_right().width || computed_values().border_bottom().width || computed_values().border_left().width)
background_rect = enclosing_int_rect(bordered_rect());
auto background_data = Painting::BackgroundData {
.color = background_color,
.image = background_image,
.repeat_x = background_repeat.repeat_x,
.repeat_y = background_repeat.repeat_y
};
Painting::paint_background(context, background_rect, background_data, normalized_border_radius_data());
Painting::paint_background(context, background_rect, background_color, background_layers, normalized_border_radius_data());
}
void Box::paint_box_shadow(PaintContext& context)

9
Userland/Libraries/LibWeb/Layout/InlineNode.cpp
View file

@ -49,13 +49,6 @@ void InlineNode::paint(PaintContext& context, PaintPhase phase)
auto& painter = context.painter();
if (phase == PaintPhase::Background) {
auto background_data = Painting::BackgroundData {
.color = computed_values().background_color(),
.image = background_image() ? background_image()->bitmap() : nullptr,
.repeat_x = computed_values().background_repeat().repeat_x,
.repeat_y = computed_values().background_repeat().repeat_y
};
auto top_left_border_radius = computed_values().border_top_left_radius();
auto top_right_border_radius = computed_values().border_top_right_radius();
auto bottom_right_border_radius = computed_values().border_bottom_right_radius();
@ -65,7 +58,7 @@ void InlineNode::paint(PaintContext& context, PaintPhase phase)
// FIXME: This recalculates our (InlineNode's) absolute_rect() for every single fragment!
auto rect = fragment.absolute_rect();
auto border_radius_data = Painting::normalized_border_radius_data(*this, rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);
Painting::paint_background(context, enclosing_int_rect(rect), background_data, border_radius_data);
Painting::paint_background(context, enclosing_int_rect(rect), computed_values().background_color(), &computed_values().background_layers(), border_radius_data);
if (auto computed_box_shadow = computed_values().box_shadow(); computed_box_shadow.has_value()) {
auto box_shadow_data = Painting::BoxShadowData {

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());
}
}

9
Userland/Libraries/LibWeb/Painting/BackgroundPainting.h
View file

@ -13,13 +13,6 @@
namespace Web::Painting {
struct BackgroundData {
Color color;
Gfx::Bitmap const* image;
CSS::Repeat repeat_x;
CSS::Repeat repeat_y;
};
void paint_background(PaintContext&, Gfx::IntRect const&, BackgroundData const&, BorderRadiusData const&);
void paint_background(PaintContext&, Gfx::IntRect const&, Color background_color, Vector<CSS::BackgroundLayerData> const*, BorderRadiusData const&);
}