LibWeb: Use rect value in CSS clip property

When a rect value is passed to the clip property via CSS, keep it in
ComputedValues so that at a later stage can make use of it.

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -25,6 +25,7 @@ set(SOURCES
     Crypto/Crypto.cpp
     Crypto/SubtleCrypto.cpp
     CSS/Angle.cpp
+    CSS/Clip.cpp
     CSS/CSSConditionRule.cpp
     CSS/CSSGroupingRule.cpp
     CSS/CSSImportRule.cpp

Userland/Libraries/LibWeb/CSS/Clip.cpp

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2022, the SerenityOS developers.
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "Clip.h"
+#include <LibWeb/CSS/StyleValue.h>
+
+namespace Web::CSS {
+
+Clip::Clip(Type type, EdgeRect edge_rect)
+    : m_type(type)
+    , m_edge_rect(edge_rect)
+{
+}
+
+Clip::Clip(EdgeRect edge_rect)
+    : m_type(Type::Rect)
+    , m_edge_rect(edge_rect)
+{
+}
+
+Clip Clip::make_auto()
+{
+    return Clip(Type::Auto, EdgeRect { Length::make_auto(), Length::make_auto(), Length::make_auto(), Length::make_auto() });
+}
+
+}

Userland/Libraries/LibWeb/CSS/Clip.h

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2022, the SerenityOS developers.
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/CSS/StyleValue.h>
+
+namespace Web::CSS {
+
+class Clip {
+public:
+    enum class Type {
+        Auto,
+        Rect
+    };
+
+    Clip(Type type, EdgeRect edge_rect);
+    Clip(EdgeRect edge_rect);
+
+    static Clip make_auto();
+
+    bool is_auto() const { return m_type == Type::Auto; }
+    bool is_rect() const { return m_type == Type::Rect; }
+
+    EdgeRect to_rect() const { return m_edge_rect; }
+
+private:
+    Type m_type;
+    EdgeRect m_edge_rect;
+};
+
+}

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -7,6 +7,7 @@
 #pragma once
 
 #include <AK/Optional.h>
+#include <LibWeb/CSS/Clip.h>
 #include <LibWeb/CSS/LengthBox.h>
 #include <LibWeb/CSS/StyleValue.h>
 
@@ -19,6 +20,7 @@ public:
     static CSS::FontVariant font_variant() { return CSS::FontVariant::Normal; }
     static CSS::Float float_() { return CSS::Float::None; }
     static CSS::Clear clear() { return CSS::Clear::None; }
+    static CSS::Clip clip() { return CSS::Clip::make_auto(); }
     static CSS::Cursor cursor() { return CSS::Cursor::Auto; }
     static CSS::WhiteSpace white_space() { return CSS::WhiteSpace::Normal; }
     static CSS::TextAlign text_align() { return CSS::TextAlign::Left; }
@@ -130,6 +132,7 @@ class ComputedValues {
 public:
     CSS::Float float_() const { return m_noninherited.float_; }
     CSS::Clear clear() const { return m_noninherited.clear; }
+    CSS::Clip clip() const { return m_noninherited.clip; }
     CSS::Cursor cursor() const { return m_inherited.cursor; }
     CSS::ContentData content() const { return m_noninherited.content; }
     CSS::PointerEvents pointer_events() const { return m_inherited.pointer_events; }
@@ -233,6 +236,7 @@ protected:
     struct {
         CSS::Float float_ { InitialValues::float_() };
         CSS::Clear clear { InitialValues::clear() };
+        CSS::Clip clip { InitialValues::clip() };
         CSS::Display display { InitialValues::display() };
         Optional<int> z_index;
         // FIXME: Store this as flags in a u8.
@@ -292,6 +296,7 @@ public:
     void set_font_weight(int font_weight) { m_inherited.font_weight = font_weight; }
     void set_font_variant(CSS::FontVariant font_variant) { m_inherited.font_variant = font_variant; }
     void set_color(Color const& color) { m_inherited.color = color; }
+    void set_clip(CSS::Clip const& clip) { m_noninherited.clip = clip; }
     void set_content(ContentData const& content) { m_noninherited.content = content; }
     void set_cursor(CSS::Cursor cursor) { m_inherited.cursor = cursor; }
     void set_image_rendering(CSS::ImageRendering value) { m_inherited.image_rendering = value; }

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -265,6 +265,8 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().box_sizing()));
     case CSS::PropertyID::Clear:
         return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().clear()));
+    case CSS::PropertyID::Clip:
+        return RectStyleValue::create(layout_node.computed_values().clip().to_rect());
     case CSS::PropertyID::Color:
         return ColorStyleValue::create(layout_node.computed_values().color());
     case CSS::PropertyID::Cursor:

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -8,6 +8,7 @@
 #include <AK/TypeCasts.h>
 #include <LibCore/DirIterator.h>
 #include <LibGfx/Font/FontDatabase.h>
+#include <LibWeb/CSS/Clip.h>
 #include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/FontCache.h>
 #include <LibWeb/Layout/BlockContainer.h>
@@ -235,6 +236,14 @@ Optional<CSS::ImageRendering> StyleProperties::image_rendering() const
     return value_id_to_image_rendering(value->to_identifier());
 }
 
+CSS::Clip StyleProperties::clip() const
+{
+    auto value = property(CSS::PropertyID::Clip);
+    if (!value->has_rect())
+        return CSS::Clip::make_auto();
+    return CSS::Clip(value->as_rect().rect());
+}
+
 Optional<CSS::JustifyContent> StyleProperties::justify_content() const
 {
     auto value = property(CSS::PropertyID::JustifyContent);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -48,6 +48,7 @@ public:
     Color color_or_fallback(CSS::PropertyID, Layout::NodeWithStyle const&, Color fallback) const;
     Optional<CSS::TextAlign> text_align() const;
     Optional<CSS::TextJustify> text_justify() const;
+    CSS::Clip clip() const;
     CSS::Display display() const;
     Optional<CSS::Float> float_() const;
     Optional<CSS::Clear> clear() const;

Userland/Libraries/LibWeb/Forward.h

@@ -32,6 +32,7 @@ class BackgroundStyleValue;
 class BorderRadiusStyleValue;
 class BorderRadiusShorthandStyleValue;
 class BorderStyleValue;
+class Clip;
 class CalculatedStyleValue;
 class ColorStyleValue;
 class ContentStyleValue;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -385,6 +385,7 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     computed_values.set_flex_grow(computed_style.flex_grow());
     computed_values.set_flex_shrink(computed_style.flex_shrink());
     computed_values.set_order(computed_style.order());
+    computed_values.set_clip(computed_style.clip());
 
     auto justify_content = computed_style.justify_content();
     if (justify_content.has_value())