LibWeb: Implement clip property

Implement clip when it is defined in the css property 'clip' as a rect
according to spec; only when the div is absolutely positioned.

1 files changed, 11 insertions, 0 deletions

diff --git a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
index f9074aa65d..b69ae76e05 100644
--- a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
+++ b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
@@ -113,7 +113,15 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
     if (!is_visible())
         return;
 
+    auto clip_rect = computed_values().clip();
+    auto should_clip_rect = clip_rect.is_rect() && computed_values().position() == CSS::Position::Absolute;
+
     if (phase == PaintPhase::Background) {
+        if (should_clip_rect) {
+            context.painter().save();
+            auto border_box = absolute_border_box_rect();
+            context.painter().add_clip_rect(clip_rect.to_rect().resolved(Paintable::layout_node(), border_box).to_rounded<int>());
+        }
         paint_background(context);
         paint_box_shadow(context);
     }
@@ -122,6 +130,9 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
         paint_border(context);
     }
 
+    if (phase == PaintPhase::Overlay && should_clip_rect)
+        context.painter().restore();
+
     if (phase == PaintPhase::Overlay && layout_box().dom_node() && layout_box().document().inspected_node() == layout_box().dom_node()) {
         auto content_rect = absolute_rect();