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

LibWeb: Support rendering background images with 'background-repeat'

Browse source 
Update the painting of background images for both <body> nodes and other
non-initial nodes. Currently, only the following values are supported:
    repeat, repeat-x, repeat-y, no-repeat

This also doesn't support the two-value syntax which allows for setting
horizontal and vertical repetition separately.
This commit is contained in:
Timothy Flynn 2021-04-02 18:19:33 -04:00 • committed by Andreas Kling
parent bd5a91269f
commit fa9ba8bce5
4 changed files with 55 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
Userland/Libraries/LibWeb/DOM/Document.cpp
View file

@ -362,6 +362,19 @@ RefPtr<Gfx::Bitmap> Document::background_image() const
return background_image->bitmap(); return background_image->bitmap();
} }
CSS::Repeat Document::background_repeat() const
{
auto* body_element = body();
if (!body_element)
return CSS::Repeat::Repeat;
auto* body_layout_node = body_element->layout_node();
if (!body_layout_node)
return CSS::Repeat::Repeat;
return body_layout_node->computed_values().background_repeat();
}
URL Document::complete_url(const String& string) const URL Document::complete_url(const String& string) const
{ {
return m_url.complete_url(string); return m_url.complete_url(string);

1
Userland/Libraries/LibWeb/DOM/Document.h
View file

@ -129,6 +129,7 @@ public:
Color background_color(const Gfx::Palette&) const; Color background_color(const Gfx::Palette&) const;
RefPtr<Gfx::Bitmap> background_image() const; RefPtr<Gfx::Bitmap> background_image() const;
CSS::Repeat background_repeat() const;
Color link_color() const; Color link_color() const;
void set_link_color(Color); void set_link_color(Color);

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

@ -49,6 +49,23 @@ void Box::paint(PaintContext& context, PaintPhase phase)
auto background_rect = enclosing_int_rect(padded_rect); auto background_rect = enclosing_int_rect(padded_rect);
context.painter().fill_rect(background_rect, computed_values().background_color()); context.painter().fill_rect(background_rect, computed_values().background_color());
if (background_image() && background_image()->bitmap()) { if (background_image() && background_image()->bitmap()) {
switch (computed_values().background_repeat()) {
case CSS::Repeat::Repeat:
// The background rect is already sized to align with 'repeat'.
break;
case CSS::Repeat::RepeatX:
background_rect.set_height(background_image()->bitmap()->height());
break;
case CSS::Repeat::RepeatY:
background_rect.set_width(background_image()->bitmap()->width());
break;
case CSS::Repeat::NoRepeat:
default: // FIXME: Support 'round' and 'square'
background_rect.set_width(background_image()->bitmap()->width());
background_rect.set_height(background_image()->bitmap()->height());
break;
}
context.painter().blit_tiled(background_rect, *background_image()->bitmap(), background_image()->bitmap()->rect()); context.painter().blit_tiled(background_rect, *background_image()->bitmap(), background_image()->bitmap()->rect());
} }
} }

30
Userland/Libraries/LibWeb/Layout/InitialContainingBlockBox.cpp
View file

@ -68,12 +68,30 @@ void InitialContainingBlockBox::paint_document_background(PaintContext& context)
context.painter().translate(-context.viewport_rect().location()); context.painter().translate(-context.viewport_rect().location());
if (auto background_bitmap = document().background_image()) { if (auto background_bitmap = document().background_image()) {
Gfx::IntRect background_rect { int painted_image_width = 0;
0, int painted_image_height = 0;
0,
context.viewport_rect().x() + context.viewport_rect().width(), switch (document().background_repeat()) {
context.viewport_rect().y() + context.viewport_rect().height() case CSS::Repeat::Repeat:
}; painted_image_width = context.viewport_rect().x() + context.viewport_rect().width();
painted_image_height = context.viewport_rect().y() + context.viewport_rect().height();
break;
case CSS::Repeat::RepeatX:
painted_image_width = context.viewport_rect().x() + context.viewport_rect().width();
painted_image_height = background_bitmap->rect().height();
break;
case CSS::Repeat::RepeatY:
painted_image_width = background_bitmap->rect().width();
painted_image_height = context.viewport_rect().y() + context.viewport_rect().height();
break;
case CSS::Repeat::NoRepeat:
default: // FIXME: Support 'round' and 'square'
painted_image_width = background_bitmap->rect().width();
painted_image_height = background_bitmap->rect().height();
break;
}
Gfx::IntRect background_rect { 0, 0, painted_image_width, painted_image_height };
context.painter().blit_tiled(background_rect, *background_bitmap, background_bitmap->rect()); context.painter().blit_tiled(background_rect, *background_bitmap, background_bitmap->rect());
} }
} }