LibWeb: Implement background-clip :^)

We now pass in the Layout Node so that we can read the BoxModelMetrics.
Renamed a couple of variables too for clarity.

Userland/Libraries/LibWeb/Layout/Box.cpp

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

Userland/Libraries/LibWeb/Layout/InlineNode.cpp

@@ -58,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), computed_values().background_color(), &computed_values().background_layers(), border_radius_data);
+            Painting::paint_background(context, *this, 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

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

Userland/Libraries/LibWeb/Painting/BackgroundPainting.h

@@ -8,11 +8,12 @@
 
 #include <LibGfx/Forward.h>
 #include <LibWeb/CSS/StyleValue.h>
+#include <LibWeb/Forward.h>
 #include <LibWeb/Painting/BorderPainting.h>
 #include <LibWeb/Painting/PaintContext.h>
 
 namespace Web::Painting {
 
-void paint_background(PaintContext&, Gfx::IntRect const&, Color background_color, Vector<CSS::BackgroundLayerData> const*, BorderRadiusData const&);
+void paint_background(PaintContext&, Layout::NodeWithStyleAndBoxModelMetrics const&, Gfx::IntRect const&, Color background_color, Vector<CSS::BackgroundLayerData> const*, BorderRadiusData const&);
 
 }