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.

3 files changed, 33 insertions, 0 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.cpp b/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
index 6f71ca239a..ae8d80bfaf 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
@@ -836,6 +836,27 @@ Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcSum::reso
     return resolve_sum_type(type, zero_or_more_additional_calc_products);
 }
 
+// https://www.w3.org/TR/CSS2/visufx.html#value-def-shape
+Gfx::FloatRect EdgeRect::resolved(Layout::Node const& layout_node, Gfx::FloatRect border_box) const
+{
+    // In CSS 2.1, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>) where
+    // <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and
+    // <left> specify offsets from the left border edge of the box.
+
+    // The value 'auto' means that a given edge of the clipping region will be the same as the edge
+    // of the element's generated border box (i.e., 'auto' means the same as '0' for <top> and
+    // <left>, the same as the used value of the height plus the sum of vertical padding and border
+    // widths for <bottom>, and the same as the used value of the width plus the sum of the
+    // horizontal padding and border widths for <right>, such that four 'auto' values result in the
+    // clipping region being the same as the element's border box).
+    return Gfx::FloatRect {
+        left_edge.is_auto() ? 0 : left_edge.to_px(layout_node),
+        top_edge.is_auto() ? 0 : top_edge.to_px(layout_node),
+        right_edge.is_auto() ? border_box.width() : right_edge.to_px(layout_node) - left_edge.to_px(layout_node),
+        bottom_edge.is_auto() ? border_box.height() : bottom_edge.to_px(layout_node) - top_edge.to_px(layout_node)
+    };
+}
+
 Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcNumberSum::resolved_type() const
 {
     auto maybe_type = first_calc_number_product->resolved_type();
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValue.h
index cea155528d..57fee8380e 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.h
@@ -89,6 +89,7 @@ struct EdgeRect {
     Length right_edge;
     Length bottom_edge;
     Length left_edge;
+    Gfx::FloatRect resolved(Layout::Node const&, Gfx::FloatRect) const;
 };
 
 // FIXME: Find a better place for this helper.
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();