LibWeb: Paint backgrounds with multiple layers :^)

Userland/Libraries/LibWeb/Layout/Box.cpp

@@ -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 {
+    Painting::paint_background(context, background_rect, background_color, background_layers, normalized_border_radius_data());
-        .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());
 }
 
 void Box::paint_box_shadow(PaintContext& context)

Userland/Libraries/LibWeb/Layout/InlineNode.cpp

@@ -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 {

Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp

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

Userland/Libraries/LibWeb/Painting/BackgroundPainting.h

@@ -13,13 +13,6 @@
 
 namespace Web::Painting {
 
-struct BackgroundData {
+void paint_background(PaintContext&, Gfx::IntRect const&, Color background_color, Vector<CSS::BackgroundLayerData> const*, BorderRadiusData const&);
-    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&);
 
 }