LibWeb: Paint the focus outline actually *outside* the element

Instead of using the absolute_rect(), use absolute_border_box_rect() -
at least for PaintableBox - and inflate it by 2px on each side.

This looks much nicer for text input elements, especially when they have
padding, which would be applied outside the focus rect previously.

Userland/Libraries/LibWeb/Painting/PaintableBox.cpp

@@ -154,7 +154,9 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
     }
 
     if (phase == PaintPhase::FocusOutline && layout_box().dom_node() && layout_box().dom_node()->is_element() && verify_cast<DOM::Element>(*layout_box().dom_node()).is_focused()) {
-        context.painter().draw_rect(enclosing_int_rect(absolute_rect()), context.palette().focus_outline());
+        // FIXME: Implement this as `outline` using :focus-visible in the default UA stylesheet to make it possible to override/disable.
+        auto focus_outline_rect = enclosing_int_rect(absolute_border_box_rect()).inflated(4, 4);
+        context.painter().draw_rect(focus_outline_rect, context.palette().focus_outline());
     }
 }
 
@@ -463,8 +465,11 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
                 auto* parent = node->parent_element();
                 if (!parent)
                     continue;
-                if (parent->is_focused())
-                    context.painter().draw_rect(enclosing_int_rect(fragment.absolute_rect()), context.palette().focus_outline());
+                if (parent->is_focused()) {
+                    // FIXME: Implement this as `outline` using :focus-visible in the default UA stylesheet to make it possible to override/disable.
+                    auto focus_outline_rect = enclosing_int_rect(fragment.absolute_rect()).inflated(4, 4);
+                    context.painter().draw_rect(focus_outline_rect, context.palette().focus_outline());
+                }
             }
         }
     }